デザインをする時に知っておきたいタイポグラフィ７つの階層ルール

タイポグラフィについて考えるとき、キーワードとなるのが階層ルールです。やり方は簡単、とはいえ大切なコンセプトです。

この記事では、あなたのデザイン計画をよりよいものにするために、どのように階層ルールをつけたらよいかについて解説しています。

専門用語になじみがなくても、タイポグラフィの階層ルールは何度も見かけたことがあるはずです。まずは新聞を思い浮かべてみてください。大見出し、小見出し、そして本文と続きますよね。これが、タイポグラフィの3つの階層ルールを示す典型的な例で、今でも印刷物やオンライン上で活用されている方法です。こちらは20世紀初め～中頃の新聞で、典型例がとりわけはっきりと見てとれるでしょう。

近頃では、大見出しやタイトルを高さ6インチ（15cmほど）にしなくても読者の心をつかめますが、上の写真を見れば、タイポグラフィの階層ルールがすべてだ、ということをあっという間に思いだせるはずです。上記の新聞記事のように書体を選んで体系的に表示し、書式設定をすれば、読者や利用者は、何が一番重要なことなのかがはっきりとわかります。ひと目でレイアウトに目が行きやすくなり、探している情報にさっと目を通すことができるというわけです。

タイポグラフィの階層ルールをはっきりつけることで得られる最も重要なメリットは、読みやすさや使いやすさの向上につながるということです。下部にある新聞の一面記事のうち、左から1、2番目の記事のように、タイポグラフィの階層ルールがない、もしくは階層ルールを制限している場合、ぱっと見ただけでは伝えるべき重要なメッセージを簡単に見つけることができません。読者は、一つの記事がどこで終わり、どこから別の記事が始まるのだろうか？と頭を抱えるでしょう。デザインを理解しづらく、インパクトが弱まります。

では、あなたのデザインに効果的な階層ルールをつけるにはどうすればよいのでしょうか？このように、手始めに3つのレベル別に階層ルールをつけるのがいいでしょう。さまざまなデザインに活用できますよ。

• レベル1：通常、最も重要な内容や情報にあたるのがレベル1のタイポグラフィです。レベル1ではデザインの要素を他の部分から際立たせ、瞬時に目につくようにするべきです。
• レベル2：レベル2の要素は、通常、デザインを体系化し、情報と関連のある記事やグループをつくるのに役立ちます。レベル1の書体ほど目立たせる必要はありませんが、デザインの要素が異なっていることが、見た人にはっきりと伝わり、簡単に目を向けられるものでなくてはなりません。
• レベル3：文章量が多いレイアウトでは、通常、デザインの本質になるのがレベル3の階層ルールです。この部分は、コピーライティングが活きる部分、つまりあなたがデザインのメッセージを吹き込む部分です。記事全体、ちょっとした一言、簡単な説明など、長い短いにかかわらず、レベル3で最も重要なのが読みやすさです。フォントサイズがすこし小さめな場合が多いからです。

下記の写真を見てください。この商品ページのデザインはシンプルですが、少なくともタイポグラフィの3つのレベルの階層ルールは守られています。商品名(Major Black headphones）がレベル1、価格がレベル2、そして、商品の詳細説明がレベル3です。行間の余白量（「レディング」という）をたっぷりとった、読みやすいセリフ活字（文字のストロークの端に装飾のついた文字のこと）が並ぶなか、詳細説明のパラグラフをどんなふうに配置するかという点に配慮しましょう。

内容をわかりやすく整理するために選べるアプローチ方法は山のようにあります。その大部分が、ちょっとしたディテールのように思えるかもしれません。ただ、影響力のあるアメリカのデザイナー兼建築家のCharles Eamesの言葉を引用すれば、「ディテールとは、あらゆる点にこだわることではなく、デザインをつくるもの」です。タイポグラフィの階層ルールをつけ、あなたのデザインに最大級のインパクトを与えるオプションを、いくつか見ていきましょう。

一種類の書体しか使っていない場合、異なるタイポグラフィの要素からコントラストを生み出すのに一番簡単な方法がフォントサイズを変えることです。タイポグラフィの3つのレベルをここで持ち出すなら、通常、ページの一番上の部分のフォントサイズを最大にしてスタート（レベル1：最も重要な情報）し、ページの下に向かうにしたがってフォントサイズを小さくしていきます（レベル3：本文や、文章の部分のフォントサイズは最小）。これは、左から右、上から下へと読み進めていくからです。つまり、上から下へ、という階層ルールにより、読者はごく自然に読み進めることができます。これはとても一般的なレイアウトで、あなたも本や雑誌、ウェブ上の記事など、あらゆるもので目にしたことがあるでしょう。

最も重要な情報を視覚的に目立たせるのに、どの場面でも役立つのが階層ルールだということを忘れないでください。目立たせたい情報が名前（名刺の場合はそうですよね。イベントのポスターだと、パフォーマーやゲストスピーカーの名前ですね）、記事やブログのタイトル、広告の特価や宣伝文句なども、レイアウト内の他のどの文章よりもフォントサイズを大きくすれば、確実に注意を惹きつけることができます。

たとえば、レイアウトの右側で、特別提供価格が際立っているのはフォントサイズを他の部分よりも大きくしているからです。広告をぐっと目立たせるために鮮やかな赤色をチョイスしたのも賢い選択です（タイポグラフィの階層ルールで使う色については、#4へスクロールダウンしてください）。

この記事の最初で目にした、新聞の大見出し「On the Moon」について、もう一度考えてみましょう。サンセリフ（タイポグラフィで、セリフのない書体のことをサンセリフといいます）の太字書体が、ページの他の部分にあるイタリックやセリフ活字と組み合わさって、大胆なコントラストを生み出しています。書体を組み合わせたら、必ずこのような劇的なコントラスト効果が表れるとは限りませんが、フォントをうまく組み合わせればコントラストが生み出される、これは重要ポイントです。

さらに、サンセリフの活字体とセリフの書体を組み合わせる、というのは書体デザイナーたちが長年活用している手法です。従来からの経験則とされるこの手法は、あらゆるデザインの出発点にぴったり。たとえ、フォントサイズを変えてタイポグラフィのレベル1しか取り入れなかったとしても、視覚的に大きなインパクトを与えることができます。

あまりにもたくさんの書体を取り入れたいわけではない、ということを心にとめておきましょう。たくさん取り入れすぎてしまうと、あなたのデザインがごちゃごちゃとした、雑然としたものになるだけです。たいていのレイアウトでは、書体は2つか3つで十分。自分で選んだ書体が、あなたのデザインスタイルや内容にぴったりだ、と確信したいですよね。

たとえば、企業イベントの日時など大事な情報には、読みにくくて洗練されていない、珍しいフォントを使いたくないですよね。また、長いパラグラフの文章に手書きフォントを選んでも、目に優しいはずがありません。フォントサイズを小さくしたら、明らか見にくくなるフォントがいくつかあります。このような問題や、読みやすさへの影響度、デザイン全体の見映えは、どのようなデザイン計画でも考慮すべき大事なことです。効果的なフォントの組み合わせに関する情報は、別記事『本当は教えたくない！デザイナーが知っているフォントの組み合わせ10個の黄金ルール』をチェックしてみてください。

スタイルやウェイト（太さ）をあれこれ選べるフォントはたくさんあります。スタイルの種類には、イタリック、スモール・キャピタル、縮小版や拡張版などがあります。ウェイトとは、書体の見た目が軽いか重いか、ということです。フォントで見た目の印象に重みの違いを感じるのは、ウェイトの異なるフォントを採用しているからです。

この特徴のおかげで、異なる役割を（あるいは異なる役割と補完色をプラスして）さまざまなタイポグラフィの要素に利用した場合、選択肢の幅が広がります。たとえば、ニュースレターに異なるスタイルやウェイトのフォントを取り入れてみましょう。この部分のサンセリフの活字体は、すべて同じフォントですが、ウェイトが異なります。ニュースレターのタイトルが太字だと、かなり目につきやすくなりますね。見た目のウェイトが、このデザインの階層ルールで最も重要な位置を占めていることを示した例です。

さらに、このラベルでは、イタリックとスモール・キャピタルを併用し、それと同時に一般的なウェイトと太字ウェイトをいくつも組み合わせてデザインしています。使っている書体はすべて同じです。

フォントのスタイルやウェイトと同じく、あなたのデザインの一部を確実にかっこよく目立たせる方法がもう一つだけあります。それは色。というのも、色そのものに意味や関連性があることが多いので、あなたのブランドや、あなたのデザインの目的や雰囲気にぴったりの色を確実に選びたいものですよね。

環境に優しいコーヒー企業が主催する、こちらのイベントの招待状がまさにそう。ブランドの特徴とイベントのテーマを後押しするようなタイポグラフィとして、自然にあふれた、アースカラーを選んでいます。

同じく、こちらの名刺では、青と黄色を組み合わせた、特徴的なデザインでぱっと目を引きます。フレッシュで清潔感のある色は、見た目は従来の黒や紺色ではないけれど、まるでデザインの矯正治療を施したかのようにふさわしい仕上がりになっています。

デザインでは、タイポグラフィの要素に含まれるスペーシング（文字の間隔と行間隔）が、バランスのとれた読みやすいデザインなのか、ごちゃごちゃしたデザインなのかの分かれ目になることがあります。

タイポグラフィの階層ルールがない、もしくは階層ルールを限定的なものにした画像の事例を思いだしてみましょう。いずれも新聞記事の欄と欄の間に、スペース（余白）はありませんでした。そのため、読みにくくなり、効果的なデザインとはいえませんでした。スペースがあることにより、デザインの変わり目を区切るだけではなく、見た人が、すべての記事にどのような関連があるのかを理解し、記事を思い浮かべやすくなることにもつながります。

たとえば、スペーシングが豊富（それと同時に、創造的な書体をふんだんに取り入れ、境界線をたっぷりととる）な場合、装飾タグと同じくらい間隔が狭くても、この部分のタイポグラフィは、見た目のバランスがとれています。

間隔を十分にとったレイアウトを目にしたら、どのような方法で読み進め、デザインから情報を得るとよいのかが瞬時につかめます。ところが、デザインを手がける人が間隔を十分に取っていない（スペーシングを考慮せず、たくさんのコンテンツを盛り込んだため）部分を目にした場合、文章が小さすぎて読めず、いつしか目をこらしていることに気づくかもしれません。あるいは住所や電話番号などの情報を探したところで、それがどこに書かれているのかが、おそらくすぐにはわからないでしょう。ごちゃごちゃとした見た目に、読みたくないと思うかもしれません。

こちらのプレゼンテーション用のスライドでは、行間を豊富にとり、文字や他の要素のまわりにもたっぷりとした余白をとって問題を回避しています。色ごとにまとまりをつくったり、幾何学的な形状に並べたりすれば、異なるデザインの要素をまとめたり切り離したりするのにも役立ちます。

あなたのデザインで、読者や利用者をがっかりさせたくないでしょう。余白を十分にとったバランスのよいデザインを生み出すために、さらなる努力を重ねること大切です。

スペーシングはタイポグラフィの要素を切り離すことだけが目的ではありません。近接、つまり関連する項目を近づけるという目的もあります。関連する文章のまとまりの間にあるスペーシングを減らす（関連性をより明確にするために）ことは、もう一つの視覚的なツールとして、読み手をもっと簡単にデザインに引き込みます。

特に、インフォグラフィック（解説目的で作成されたコンピューター画像）など、コンテンツがぎっしりとつまったデザインでは、近接が、視覚的な意味をもち、バランスのとれたデザイン制作の重要ポイントになります。

コメントを発表するのにタイポグラフィを活用したくても、文章が途切れずに続いていることがあります。この場合、配置を少し傾ける、斜めにする、歪める、という手段をとれば、あなたのデザインは際立ち、ぐっと注目を集めるのに役立ちます。

こちらのブライダルシャワーの招待状のように、単一のプロジェクトの場合には、タイポグラフィの階層ルールが生み出す以下の手法を全部、あるいはその大部分を使うことが多いでしょう。フォントサイズ、書体のコントラスト、色、スペーシングと近接、幾何学的配置という、すべての方法を取り入れるとすばらしい効果を生み出します。

これらの技術を効果的に取り入れれば、あなたはデザインの魅力をアップさせるだけではなく、より利用しやすいものになります。さらに、デザインに形式と機能をプラスすると、デザインはすばらしいものになります。ですから今度のデザイン計画では、タイポグラフィを活用してみてください。いくつか、試してみてくださいね。デザインを、うんと楽しみましょう！