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

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

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

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

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

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

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

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

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

書体の違い

 

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

書体のイメージマップ

 

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

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

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

本文向き

 
文章が続く場合は細めの書体が向いてます。

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

見出し向き

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

タイトル向き

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

あしらい向き

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

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

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

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

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

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

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

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

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

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

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

ナチュラル系

スタイリッシュ系

ポップ系

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

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

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

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

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

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

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

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

コツ③余白を意識する

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

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

具体的な方法としては

などです。

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

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

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

2021年9月16日

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

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

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

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

 

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

文字サイズは小さくても余白たっぷりの配置だと、一瞬でどれがタイトルわかりますよね？
 

 
しかも文字が小さく読みづらくても、目立つせいで”読まなきゃ”という気にさせるのです。

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

グーグルフォントで探す

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

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

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

CANVAを使う

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

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

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

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

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

2021年7月23日

まとめ

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

もう一度まとめます。

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