伝わる文字の配置とは?レイアウト6つのコツをわかりやすく解説します

デザインの基礎
文字を配置してみたものの、なんとなく見づらい…。
伝わりやすく、洗練されたデザインになる文字のレイアウト方法を知りたい。
こういった疑問に答えます。

コツはデザインの雰囲気に合ったフォントを適切な間隔、サイズで配置することです。

この記事を書いてる私はネットショップやブログ運営において文字をレイアウトする場面がとても多かったのですが、ちょっとしたコツを知ることで文字だけでなくデザイン全体まで見違えるようになりました。

ノンデザイナーやデザイン初心者の方にもわかりやすいように具体例や図を使って解説しますのでぜひご覧ください。

文字をレイアウトする前に知っておきたいこと

文字をどのように配置するか考える前に、まず知っておくべきことを簡単に説明します。

フォントによって形が違う

まず文字はフォントの種類によって形が異なります。
当然のことと言えばその通りなんですが、書体の違いがデザイン全体に大きく影響します。

なのでそれぞれの書体がどんな特徴をもっているのか基本的なことだけ知っておきましょう。

書体の違い

大見出し1
 
大見出し1
 
大きな違いは「はね」や「はらい」があるか、装飾性が高いか、という点ですね。

書体のイメージマップ

大見出し1
 
大見出し1
 
このようにデザインに与える印象が変わってくるわけですね。

書体によって向き不向きがある

各書体のデザインに与えるイメージが違うのと同時に、書体には向いてる使い方とそうでない使い方があります。

本文向き

大見出し1
 
文章が続く場合は細めの書体が向いてます。

太い書体だとぎっしり並んで見えるため読みづらいですね。

見出し向き

大見出し1
 
見出しは目立たせる必要があるため太めの書体がいいです。

タイトル向き

大見出し1
 
可読性や視認性も大事ですが、読者に与えたい印象で選ぶことが多いです。

あしらい向き

大見出し1
 
あしらいとは装飾的な要素のことです。

英語の筆記体は可読性よりデザイン的要素として用いる場合も多いです。

デザインでの文字レイアウト方法とコツ

以上のことをふまえて、ここからはデザインでの文字レイアウトの仕方やコツ、注意点を解説しますね。

  1. デザインの雰囲気に合わせる
  2. コントラストをつける
  3. 余白を意識する
  4. タイトルは存在感をだす
  5. 小さくできる要素は小さくする
  6. 不自然なスペースを調節する
ひとつずつ解説していきます。

コツ①デザインの雰囲気に合わせる

まずは最も大事なことです。

デザインの雰囲気や伝えたい内容に合わせて字をレイアウトをすることです。

  • ナチュラルなデザインにしたい
  • モダンでスタイリッシュな雰囲気をだしたい
  • 女性ウケを狙ったガーリーな感じにしたい

このようにデザインには伝えたい表現が色々あると思います。

やはり文字も全体の雰囲気を壊さないように配置する必要がありますね。

具体的にはこういった部分を調整します。

  • フォントの種類
  • 文字の間隔
  • 文字サイズ
  • 文字の色
  • 装飾のあしらい

では実際にデザイン例を見てみましょう。

ナチュラル系

大見出し1
 
大見出し1
 

  1. 可愛らしいセリフ体でゆるさを演出
  2. 白文字で軽さをだす
  3. 黒は使わず茶色でメリハリを

スタイリッシュ系

大見出し1
 
大見出し1
 

  1. 全体的に幅細で大人っぽく
  2. 線に強弱のあるセリフ体とシンプルなサンセリフ体でコントラストを強調
  3. ラインを多用しスタイリッシュな印象を

ポップ系

大見出し1
 
大見出し1
 

  1. タイトルに筆記体を装飾し遊び心を加える
  2. 柔らかさとシャープさを与えるフォントで可読性を高く
  3. 白抜き文字でインパクトを与えて目立たせる

以上のようにデザインの世界観を壊さないようにフォントを選ぶことが大切です。

コツ②コントラストをつける

2つ以上のテキスト(タイトルとサブタイトル等)を組み合わせる場合は、しっかりコントラストがつくように配置します。

似てる書体同士だとコントラストが弱くなりどちらも目立たない、という結果になってしまうからです。

具体的にはこれらに差をつけます。

  • フォントの線の幅
  • フォントの高さ
  • 文字の間隔

大見出し1
 
2種類のフォントを使ってますが、片方は太めでもう一方は細めのフォントですね。
メリハリがでてると思います。

コントラストをつける際の注意

大見出し1
 
似たような書体や個性が強すぎる書体同士だと、コントラストではなく衝突を起こしてしまうので注意です。

コツ③余白を意識する

特にデザインやレイアウト初心者の時に意識してほしいのが、余白を利用することです。

余白をしっかりとることで色々とメリットがあります。

  • 目立たせたい文字が伝わりやすい
  • 小さいフォントでも伝わる
  • ゆったりした雰囲気を演出できる
  • デザイン全体が洗練される

大見出し1
 

具体的な方法としては

  • 文字と文字の間にゆとりをもつ
  • 行と行の間をつめすぎない
  • 伝えたい文字の周りに余白をおく

などです。

デザインに慣れていない時ほど、何もないスペース(余白)を埋めようと要素をつめこんでしまい、野暮ったくなってしまいます。

なおデザインでの余白の使い方がわかる記事がありますので、こちらもぜひご覧ください。

【簡単なのに効果的】余白のスゴイ効果とデザインに取り入れるコツをわかりやすく解説します

コツ④タイトルは存在感をだす

続いては4つ目のコツです。

タイトルとなる文字列は存在感をだす工夫が必要です。

ページ全体の内容を一瞬で伝えられるように、真っ先に視線を集める必要がありますね。
 
大見出し1
 

  • 真っ先に目が行く場所にある
  • 文字は短く少なめに
  • 他のテキストと書体を差別化する

ちなみにタイトルだからと言って必ず大きくする必要もありません。

文字サイズは小さくても余白たっぷりの配置だと、一瞬でどれがタイトルわかりますよね?
 
大見出し1
 
しかも文字が小さく読みづらくても、目立つせいで”読まなきゃ”という気にさせるのです。

「どうしたら視線が行くかな?」という観点で工夫してみましょう。

コツ⑤小さくできる要素は小さく

やっと5個目のコツまできましたが、残り2つはとても単純なことなので簡単です。

サイズを小さくしても意味が伝わる文字は、可能な限り小さくします。
その方が本当に伝えたい要素が目立つからです。

例えば以下のような文字たちですね。

  • データやキャプション
  • 円/YEN
  • OPEN/CLOSE
  • AM/PM

 
大見出し1
 
主役の要素を邪魔しない配慮ですね。

コツ⑥不自然なスペースを調節する

最後はちょっと細かいことですが、デザイン全体に影響を与えるので注意です。

文字間の不自然な空間を修正します。

  • カッコ( )の前後
  • ハイフンの位置

 
大見出し1
 
正直地味すぎて誰も気づかないんじゃないの…?と思われるかもしれませんが、こういった細かい要素をおろそかにしてしまうと、全体のクオリティも下がってしまうんですね。

デザインがほとんど出来上がった最終段階でいいのでチェックしてあげましょう。

実際に文字をレイアウトしてみる

ここまで文字のレイアウト方法を解説してきました。
それでは実際に文字を選んで配置してみましょう。

グーグルフォントで探す

大見出し1
 
文字をレイアウトする際に悩むことのひとつが「フォントの種類を何にするか?」ですね。

そんな時にはGoogleが提供する無料のWebフォント『Google Fonts』を使いましょう。

日本語のフォントは少な目ですが、シンプルで使いやすいものが多いです。

CANVAを使う

大見出し1
 
続いては文字のレイアウトやデザインができる『CANVA』です。
オンラインで使える無料のグラフィックデザインサイトです。

以下のことがノンデザイナーの人でも簡単にできますよ。

  • プレゼンテーション資料をつくる
  • ポスターをデザインする
  • チラシをつくる
  • パンフレットをつくる

おしゃれなテンプレートが豊富にあって、操作も直観的にできるので、初心者に優しいです。

この記事に使い方が載ってるのでよろしければご覧ください。

デザインを始めるんだけど何を使えばいい?基本の素材サイトを5つまとめました【これさえあれば無料でおしゃれなデザインが可能】

まとめ

以上が文字の配置/レイアウトに関する解説でした。

もう一度まとめます。

  1. デザインの雰囲気に合わせる
  2. コントラストをつける
  3. 余白を意識する
  4. タイトルは存在感をだす
  5. 小さくできる要素は小さくする
  6. 不自然なスペースを調節する
デザインのテイストに合うフォントを選んで、コントラストをつけることを意識するだけで、結構見栄えが良くなります。

さっそく文字のレイアウトに活かしてみてくださいね。