簡単だからすぐに使える見出しや文字組みの4つのポイント

簡単だからすぐに使える見出しや文字組みの4つのポイント【理論編】

文字組みの構成

文字組みは、基本タイトル、サブタイトル、本文、補足情報などの要素にて出来ています。場合によって、サブタイトルや補足情報がなかったりすることもあります。

文字組みの構成

タイトル

タイトルは、主旨内容を伝達する重要な役割であり、読み手に短時間に理解してもらえるような内容をまとめたものです。本文のように詳しい内容ではなく、一見ですぐに内容も理解出来て、かつ情報構造を表す機能もあります。

サブタイトル

サブタイトルは、よくタイトルだけで表せきれない情報やサブ的なポイントを伝えるために使われます。

本文

タイトルやサブタイトルの内容を中心に展開して、それだけで伝えきれない細かいところまで具体的な情報のテキストのことです。

補足情報

具体的な情報の本文のグループに含まれないものです、例えば著作時間、作者などのような補助的な要素のことです。

今からすぐに使える4つのデザインポイント

どのように文字組みをデザインしたら、「読み手の目線を引きながらも、情報をよりわかりやすく伝えることもできる」というポイントを4つ紹介したいと思います。

文字組みの間隔でグルーピング

文字は情報を伝達するための要素で、デザインにおいてとても重要です。文字の組み合わせによって、関連性の高い情報の間隔を狭めてグルーピングすべきです。もちろんグルーピングした文字組みの中でも、階層ルールに従ってさらにグルーピングすることができます。各大の文字組みや小の文字組みを作ることによって、全体情報構成を整理することができます。

文字組みの間隔でグルーピング前

文字組みの間隔でグルーピング前
beforeとafterの画像を見ればわかるように、各文字組みの感覚が均等であれば、各要素の関連性が分かりにくく、情報がより複雑に見えてしまいますので、読み手には短時間でこれほどの情報を理解できません。

ここで3つのポイントをおさえれば、情報の整理が簡単にできます。

1、同じ階層の文字組みを均等な間隔でグルーピングすること
2、階層が高ければ高いほど、間隔を広く広げることです(逆の場合は間隔を狭める)。
3、全階層の間隔を一定のルールに従って決めること

文字列の行間と文字間(カーニング)

特にpohotshopなどのデザインソフトでは、デフォルトで設定されている行間は本文のためとなっていますので、本文のフォントサイズを大きくしたり、もしくはタイトルは、読みやすさをあげるためなどの場合によって調整が必要です。

文字列の行間

文字列の行間

Webデザインの場合は、タイトルの長さ次第で、PCやスマホで見る時に、タイトルが改行になるかどうかは変わります。特にスマホで見る時に、行間は適度な間隔で読みやすくなっているかは大切です。

文字列の文字間(カーニング)

文字列の文字間(カーニング)

タイトルの場合では、文字間はあまりにもスカスカであれば、すごくゆったりしてしまう感じになります。もちろんデザイン意図でわざとそのようににする場合もありますので、逆に文字間をもっと広げることが多いでしょう。Webの場合は全ても文字列を調整するのは難しいですが、せめてタイトルぐらいはやっていれば、見た目的にも結構変わることは間違いないです。

目で確認する

最終的には目で確認する

完全にデザインソフトの整列機能に頼らず、最終的には、デザインを自分の目で確認することが大切です。デザインソフトは正方形などの輪郭が規則であっている要素なら、整列機能はとても効いていますが、円形や文字などは不規則な要素に対して、整列機能を使っても、視覚上ではずれてしまうことが多いです。こういう時に、要素の「視覚上の輪郭」を探し出して、手動で調整する必要が出てきます。

文字組みをデザインする時の注意事項

フォント数を抑えること

フォントの数を基本的に3つぐらいにすればいいのではないでしょう。当然デザイン意図次第で、それより多い複数のフォントを使う場合もありますが、ほどんどのデザインでは、フォント数を抑えた方がデザイン性が高く、統一されているように見えます。

タイトルの長さをしないこと

タイトルはなるべく長くしない方がいいでしょう、なぜかというと、読み手にとっては、タイトルがあまりにも長ければ、タイトルと見られなくなって、読んでもらえなくなるからです。

タイトルの色と背景色のコントラストを高めること

これも読みやすさに関わる基本的なことの一つです。情報を伝える上でもっとも重視しなければならないことの1つです。

デザインにふさわしいフォントを選ぶこと

デザインのディテールに合わせたフォントを選ぶべきです。簡単に言えば、京都お寺や奈良のとある旅館のポータルサイトなら、明朝体を使った方がゴッシクより雰囲気が出るでしょう。逆にファッション関係などのサイトであれば、ゴッシクは今風でありながらも、読みやすさも良いということです。

まとめ

以上で文字組みをデザインする時に注意すべなポイントをまとめて見ました。日々デザインに関わるお仕事をされていつ方や趣味でやっている方に少しでも役に立てればと思います。今回の記事は、完全に理論的なことしか書いてなくて、またこれらの理論を使って実例をあげて説明したいと思いますので是非お楽しみにしてください。