Loading...
日本語
English
設定Setting
日本語
English
共有Share with

見やすいデザインとは?可読性を上げるフォントの使い方

デザイン
フォント
2020.06.22

今回は見やすいデザインを作るためのフォントの使い方について解説します。
どのようなデザインを作るうえでも基礎となってくる部分だと思うので是非活かしていただければと思います!

1. 基本は「明朝体」と「ゴシック体」

初心者がよく陥ってしまう罠として、「おっこのフォントかっこいい!」みたいな流れでビジュアルデザイン的なフォントを採用しがちというのがあります。
早速例を見てみましょう。

試しに3書体で同じ文章を表示してみました。どれが"読みやすい"でしょうか?
ちまたでは2、3のゴシック体、明朝体が見やすいとされています。僕もそう思います。
これが読みやすいフォントの正体です。
1のようなフォントはあくまでコンセプトアート等の場で活躍するべきフォントなのです。かっこいいからオールマイティなわけではありません。

Point
読みやすさを求められる場面では「明朝体」か「ゴシック体」を使いましょう。
男は黙って、 「明朝体」か「ゴシック体」(クソ早口)

2. 文字の間隔を開けよう

早速例から見ていきましょう。

どうでしょうか、同じ分量であるにも関わらず2のほうが少なく見えるため読みやすく、読みたくなりやすくなっていると思います。
2では文字同士の間隔を少し広げ、行間も広げています。これによってスペースが生まれギチギチ感をなくしています。
(伝わりにくかった場合はこのブログの文字を見てみてください。めっちゃ行間開けてます。)

Point
文字間隔、行間を通常より広めにとることによってギチギチ感をなくし読みやすくしましょう。

3. 同じフォントを使おう

これはあんまり過度なものは見かけないため気づきにくいですが「ん?」といった少しの違和感を消すために大切です。
例を見てみましょう。

違いは明らかですね。
1ではフォントを多用しているため統一感がまるでないですが2では文字の大きさ、太さのみで変化を与えているため統一感があります。

ここでついでに伝えておきたいのが本文は太いと詰まって見えてしまい読みにくいということです。
上の[文字の間隔を開けよう]の例と比べるとこちらの例のほうがだいぶ読みやすいと思います。

Point
フォントは統一しましょう。
基本的には大きさ、太さのみで変化を与える。
フォントを複数使用する例として、相性の良い和文フォントと英文フォントを混同して文章を構成する「混植」という手法もあるよ

まとめ. 欲張っちゃダメ!シンプルに、簡潔に。

初心者であればあるほど直感的なかっこよさやかわいさを求めてしまいがちですが、デザインは理論立ててこそ映えると思います。
僕も数年前までは創英角ポップ体乱用してました。マジで意味わからん。

今回の要点は以下の3つです。
この3つを頭の片隅に置いていただければ普段の作品もより良いものにできると思います!

Review
  • 「明朝体」か「ゴシック体」を使いましょう
  • 文字間隔、行間を広げよう
  • フォントは統一しましょう


次回はフォントの選び方などについて解説できればと思います。

少しでも参考になれたらハート押していただけると嬉しいです!
(何回でも押せます)

187