Blog ブログ

まずは、フォントの基本から紹介します。

フォントには、日本語で使用する和文フォントと、英数字で使用する欧文フォントがあります。

さらに文字の装飾（うろこ、セリフとも呼ばれます）が無いゴシック体・サンセリフ体。

文字の装飾がある明朝体・セリフ体に分けられます。

そのほかにも和文フォントには行書体、欧文フォントにはスクリプト体。

手書き風フォントやポップ体などの特殊文字もあります。

それぞれのフォントによって可読性・視認性や、ユーザーに与える印象は異なります。

コンセプトに沿った書体を選択すると、効果的に見せることができます。

下図では可読性・視認性と、ユーザーに与える印象についてをまとめています。

題材例をもとに、ひとつひとつポイントをご紹介し、before、afterでどのように変わっていくかを見ていただきたいと思います！

題材となるはじめのデザインはこちら。

あえて可読性が低くなるようにしています。

1. 行間を意識する

一般的に本文での行間は1.5〜1.75倍に設定すると読みやすく適切とされています。

行間の他にも、段落やパーツごとの間隔、余白も意識しましょう！

似た情報はまとめて配置し、内容が異なる情報は離して配置します。

(これはデザイン4原則のひとつである「近接」と言われています！）

after

余白を作るために文字サイズを調整しました。

ブロックごとに余白を作ることで、すっきりとした見た目になりました！

2.文字間を調整する

漢字やひらがな、カタカナなど様々な文字の形を打ちっぱなしで使用すると、文字が詰まって見えたり、逆に離れて見えたりと、ちぐはぐな印象になることがあります。

文字が小さい本文ではあまり気になりませんが、タイトルなど文字が大きくなる箇所は文字間を調整しましょう。

after

3.文字に大小をつける

文字に大小のメリハリをつけることで、大事な情報を効果的に見せることができます。

文字の太さを変えることでも、印象を変えることができます。

after

4.白文字・黒文字どちらも使う

全体的に平坦な印象からメリハリのついた印象に変えることができます。

背景に図形を使ったり、配置を工夫して白文字・黒文字を使用すると良いでしょう。

after

特別編.画像を使う

さらに情報量を加えたいときや、文字だけでは寂しいときには写真やイラストの画像を配置しましょう！

after

完成です！

フォントの種類や文字を読みやすくするデザインついてご紹介しましたがいかがでしたでしょうか。

私は特に、文字間や大小を変えると印象がずいぶん変わると思っています。

ぜひ実践で取り入れてみてください＾＾