ゴシック体」タグアーカイブ

思わず読みたくなるフォントデザインにする 3つの方法

まずはこの 2つの文章を見てください。

上と下、どちらに目がいきますか?
どちらの文章を読みたいと思うでしょうか。

読ませるためには、中身と見た目の 2つの要素があります。
ですがこのように見た目が悪ければ、たとえ中身が良いとしても読んでもらえないのです。

では、どのような見た目だと読んでもらいやすいのでしょうか?

今回はフォントの見た目をフォントの幅・フォントカラー・間隔の 3つに分解して改善することで、読み手を引き込む方法をお伝えします。

フォントはゴシック体で、線の幅が均等のもの

日本語フォントには明朝体とゴシック体があります。
明朝体は線の幅がまばらで見づらいため上級者向けです。インパクトがあるので、見出しなど大きなフォントサイズだと効果的ですが。
ですので基本的にはゴシック体を選んで損はありません。

さらに文章だとサイズが小さくなるので、線の幅が均等のものを選び、フォントが小さくなっても見やすいようにしましょう。

Apple はかなりフォントに気を使っており、洗練されたデザイン・使いやすさの大きな要因です。

一方 Windows は独自のフォント開発をしているものの、アップデートのたびに採用フォントを変更しており、フォントに対する姿勢はぶれています。

Windows 10 のフォントはとにかく読みづらいのですが、これはフォント自体(游ゴシック)ではなく、游ゴシックの細さが問題なのです。

Windows 10で游ゴシックの細さと薄さを改善する、具体的な対策まとめ

こちらに Windows 10 のフォント(游ゴシック)改善についてまとめているので、Windows 10 ユーザーはぜひ参考にしてください。

フォントデザイン 1つ目のポイントは、線の幅が均等なゴシック体を選ぶことです。

色は黒ではなく、グレー

普段、フォントの色は何色にしていますか?
特に気にしていないなら、フォントの色は黒になっているはずです。

左のフォント色は黒で、右はグレーです。

一般的な背景色である白に対して黒はコントラストが強すぎるのです。
黒とのコントラストの強さにより文字の間の白が際立ってしまい、文字が読みづらくなってしまいます。

色覚異常でも見やすい配色になる『2つの差』の埋め方

白か黒のどちらかをグレーに寄せるべきなのですが、どちらが良いのでしょうか?

配色の原則は、自然の法則にならうこと。
実は自然界には白はあるものの黒はほぼ存在しないのです。

よって、黒をグレーにする方がナチュラルです。
グレーにするとコントラストが抑えられて読みやすく、読んでいても疲れにくくなります。
これだと読み手は離脱しづらいので長く読んでもらいやすくなりますよね。

フォントの色は黒ではなくグレーにしましょう。これが 2つ目のポイントです。

行間に見えない線をつくる

フォント自体が読みやすくても、フォント同士の間隔が不自然だと結果的に読みづらいですよね。
大切なのは、読み手の目線の動きに沿ってストレスなく読み手を誘導できているかどうかです。

ポイントは行間に見えない線をつくることです。
間隔は縦と横(行間隔と文字間隔)があり、縦はある程度空け、横は詰める。
具体的な間隔は縦・横でそれぞれ異なります。

行間隔は透明な線を引くイメージで、目線をブレさせないようにしてください。
読み手の目線は左から右へ、1行づつ流れます。
行間隔が十分にない場合、この読み手の目線がブレてしまうのです。

文字間隔は、線が見えない程度に少しだけ空けるといいでしょう。
広すぎると文字をかたまりとして認識しにくくなるので、フォントサイズ(幅)に対して一定の割合を空けるようにします。
具体的には、細い線が通るくらいは空けておき、フォント同士が重ならないようにしましょう。

また、ひらがなより漢字の方が文字間隔が狭いので、漢字が多いと詰まって読みづらくなります。

ひらがなと漢字は 7 : 3 程度の比率を意識すると読みやすくなるので、ぜひ試してみてください。

3つ目のポイントは、読み手の目線にそって行間に見えない線をつくる
これでフォントデザインは完成です。

まとめ

文章の見た目つまりフォントデザインによって読み手は引き込まれます。
フォントの幅、フォントカラー、間隔。
この 3つを改善して、思わず読みたくなるような文章を目指してください。