情報の階層を作るタイポグラフィ術：「読ませる」を「伝わる」に変えるデザインのルール

情報の階層を作るタイポグラフィの基本

まずは、情報の階層とは何か、なぜ文章を役割ごとに分けて見せる必要があるのかを押さえましょう。

情報の階層とは?見出し・本文・補足情報の役割

情報の階層とは、文章の中の要素を重要度や役割ごとに分け、その違いが見た目で分かるように段階的な強弱をつけることです。

タイポグラフィ(文字の大きさ・太さ・配置などを整えて、読みやすく伝わりやすくする技術)では、まず文章を次の4つの役割に分けて考えます。

• タイトル:情報の「顔」。
  一瞬でテーマを伝える看板です。
• 見出し:情報の「地図」。
  内容を要約し、次に何が書いてあるかを示す道しるべです。
• 本文:情報の「中身」。
  伝えたい内容そのもので、ストレスなく読めることが最優先です。
• 補足情報(注釈):情報の「補足」。
  注意書きや細かい条件など、主役を邪魔せず必要なときだけ読まれる存在です。

これらをすべて同じ見た目で並べると、読者はどこから読めばよいのか分からず迷子になってしまいます。

図の左のようにすべての情報が同じ扱いだと、視線があちこちに迷ってしまいます。

右のように役割ごとに強弱をつけると、タイトルから見出し、本文、注釈へと、視線が上から順に自然に流れます。

なぜ情報の階層が必要なのか

情報の階層が必要なのは、読者が文章を最初から最後まで読まなくても、全体像と読みたい場所をすぐにつかめるようにするためです。

Webページや資料の読者の多くは、まず見出しだけを拾い読みして、自分に必要な部分を探します。

すべての文字が同じ見た目だと、どこが要約でどこが詳細なのか区別がつかず、全部読まないと内容が分かりません。

左の見本は、どれがタイトルでどれが注意書きなのかを、文章を読んで判断するしかありません。

右の見本は同じ文章ですが、ひと目で「講座の案内で、受講の流れが書いてあり、最後に条件の補足がある」という構造が伝わります。

文字で情報の階層を作る3つの方法

役割ごとの違いは、主に「文字サイズ」「太さ(ウェイト)」「色」の3つで表現します。

それぞれの考え方と、ルールの決め方を見ていきましょう。

文字サイズ(ジャンプ率)で差をつける

文字サイズは、情報の重要度を最も分かりやすく伝える方法です。

本文などの小さい文字と、タイトルなどの大きい文字のサイズの比率を「ジャンプ率」と呼びます。

ポイントは、本文を1としたときにタイトルを2倍以上にするなど、「明らかに違う」と分かる差をつけることです。

本文の1.1倍程度の中途半端な差では、読者には「同じ大きさの文字」に見えてしまい、階層として伝わりません。

図のように、本文(1.0)を基準に、タイトル・見出しは大きく、注釈は小さくして、4つの役割の大きさをはっきり分けます。

太さ(ウェイト)で差をつける

フォントのウェイト(文字の太さ)は、情報の「声の大きさ」にあたります。

タイトルや見出しは太く(Bold)して存在感を出し、本文は標準(Regular)にして読みやすさを優先するのが基本です。
デザインツールやCSSでは太さを100〜900の数値で指定することが多く、Regularは400、Boldは700にあたります。
初心者のうちは、本文に400、見出しに700の2種類だけを使えば、声の大きさの差がはっきり出てまとまりやすくなります。

太さを使えば、文字サイズを大きく変えなくても強弱をつけられるので、サイズの差と組み合わせるとより細かい段階を作れます。

図では注釈を細め(Light)にしていますが、注釈は文字サイズも小さいため、細くしすぎると線がかすれて読みにくくなります。

Lightを使う場合は注釈のサイズを下げすぎないようにし、迷ったら本文と同じRegularのまま、サイズと色で控えめにするのが安全です。

色(濃淡)で差をつける

文字色の濃さも、情報の優先順位を伝える手段になります。

本文は真っ黒(#000000)ではなく濃いグレー(#333333など)にして、注釈はそれより少し薄いグレーにすると、重要度の違いが自然に伝わります。

ただし、薄くしすぎると読めない人が出てくるので、文字色と背景色の明るさの差(コントラスト比)は確保しなければいけません。

Webのアクセシビリティ(誰もが情報を利用できること)の国際的なガイドラインWCAGでは、通常の大きさの文字は背景とのコントラスト比を4.5:1以上にすることが求められています(達成基準 1.4.3 コントラスト(最低限))。

コントラスト比は、背景色と文字色の「くっきり感(明るさの差)」を数値にしたもので、同じ色どうしの1:1から、白と黒の21:1までの値になります。
自分で計算する必要はなく、WebAIM Contrast Checkerのような無料のチェックツールに2つの色のコードを入れるだけで、基準を満たしているか(Pass/Fail)を判定してくれます。
Google Chromeの開発者ツールでも、文字色を選ぶ画面にコントラスト比が表示されます。

図の注釈の#777777は白背景とのコントラスト比が約4.48:1で、基準の4.5:1にわずかに届きません。

タイトルのアクセントカラー(#7bdcb5)も白背景では約1.65:1と薄すぎるため、実際に使うときは、注釈を#666666(約5.74:1)、アクセントカラーをもっと濃い色にするなど調整しましょう。

#7bdcb5のような明るいパステルカラーは、明るさが白に近いため、白背景に置くと背景に溶け込んで文字が読みにくくなります。
同じ系統の色を文字に使うなら、#1e7a5a(白背景で約5.27:1)のように濃くした色を選びましょう。

パステルカラーの雰囲気を残したいときは、文字は濃い色のままにして、パステルカラーを文字の下に敷く背景(下地)や、囲み線・飾りの色として使う方法もあります。
たとえば#7bdcb5の下地に#333333の文字なら、コントラスト比は約7.67:1で、読みやすさと色の雰囲気を両立できます。

コントラスト比の測り方はコントラスト比の記事で、色の濃淡で優先順位をつける方法は情報の優先順位と色の記事で詳しく解説しています。

情報の階層をルール化して使う

3つの方法を、役割ごとの「ルール」としてまとめておくと、どのページや資料でも迷わず同じ階層を作れます。

そのまま使える階層化テンプレート

迷ったら、まずは次の数値をベースに設定してみてください。

役割	サイズ(本文比)	太さ	色の目安(白背景)
タイトル	2.0〜2.5倍	Bold(太)	最も濃い色、またはコントラストを確保したアクセントカラー
見出し	1.3〜1.5倍	Bold(太)	濃い色(#222222など)
本文	1.0(基準)	Regular(標準)	濃いグレー(#333333など)
補足情報(注釈)	0.8〜0.9倍	Regular(標準)	中間のグレー(#666666など)

このテンプレートを当てはめると、次のような見た目になります。

タイトル・見出し・本文・注釈の順に、サイズ・太さ・色の強さが一段ずつ下がっていくので、上から順に迷わず読み進められます。

HTMLの見出しタグと見た目を一致させる

Webページでは、見た目の階層だけでなく、HTMLの見出しタグの階層も内容に合わせて正しく付けることが大切です。

HTMLにはh1からh6までの見出しタグがあり、数字が小さいほど上位の見出しを表します。

スクリーンリーダー(画面の文字を読み上げるソフト)の利用者や検索エンジンは、見た目ではなくこのタグの階層からページの構造を読み取ります。

本にたとえると、HTMLの見出しタグは「目次(章・節の並び)」を作る作業、CSSは文字の大きさや色を決める「見た目の仕上げ」の作業で、役割がはっきり分かれています。
目次の順番が正しければ、見た目をどう変えても、読み上げソフトや検索エンジンに「この記事は何についてどんな順で書かれているか」が正しく伝わります。

次のコードのように、ページのタイトルをh1にして、そこから順番に階層を下げていくのが基本です。

<h1>はじめてのWebデザイン</h1>   <!-- ページのタイトル(1つだけ) -->
<h2>まずは文字から整えよう</h2>    <!-- 大見出し -->
<h3>文字サイズを決める</h3>       <!-- h2の中の小見出し -->
<p>本文が入ります。</p>

MDNの見出し要素の解説では、1ページにh1は1つにすること、h2の次にいきなりh4を使うように見出しレベルを飛ばさないことが推奨されています。

h1はページ全体の「本のタイトル」にあたるので、1冊に1つだけです。
1冊の本の表紙にタイトルがいくつも並んでいたら何の本か分からなくなるのと同じで、章ごとの大見出しにはh1を繰り返さず、h2を使います。

また、「文字を大きくしたいからh2にする」「小さく見せたいからh5にする」のように、見た目の大きさのために見出しタグを選んではいけません。

タグは内容の階層に合わせて選び、見た目の大きさはCSS(文字サイズを指定するfont-sizeなど)で調整しましょう。

見た目で表した構造をタグでも正しく伝えることは、WCAGの達成基準 1.3.1 情報及び関係性にも関わる、アクセシビリティの基本です。

実践のポイント

情報の階層を作るときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目のデザインだけを整えて、HTMLの見出しタグの階層(h2の次にh4を使うなど)を軽視してしまうことがあります。
  見た目の階層とタグの階層は、必ずそろえましょう。
• 補足情報を本文と同じ大きさ・強さで表示すると、情報の優先順位が伝わりにくくなります。
  注意書きや細かい条件は、本文より一段控えめにしましょう。
• 注釈を控えめにしようとして、小さく・細く・薄くを全部重ねると、読めない文字になってしまいます。
  控えめにするのはサイズと色の2つ程度にとどめ、コントラスト比4.5:1以上を確保しましょう。
  たとえば「サイズは本文の0.85倍程度、色は#666666、太さは本文と同じRegularのまま」のように、太さは変えずに2つだけ調整すると、控えめでも読める注釈になります。
• 見出しの段階を細かく増やしすぎると、かえって違いが分かりにくくなります。
  まずは「タイトル・見出し・本文・注釈」の4段階程度から始めましょう。

よくある質問

• Q. 見出しと本文のサイズ差はどれくらいがいい?
  A. 本文を1としたとき、見出しは1.3〜1.5倍、タイトルは2倍以上がひとつの目安です。
  差が小さいと階層として伝わらないので、「明らかに違う」と感じる差をつけましょう。
• Q. 注釈の文字色は薄いグレーにしてもいい?
  A. 本文より少し薄いグレーにするのは効果的ですが、背景とのコントラスト比4.5:1以上は確保しましょう。
  白背景なら#666666程度までが安心です。
• Q. デザイン上h3が大きすぎるので、h4を使ってもいい?
  A. 見た目のためにタグの階層を飛ばすのは避けましょう。
  内容に合ったh3を使ったうえで、CSSでh3の文字サイズを小さく調整するのが正しい方法です。

まとめ

情報の階層とは、文章をタイトル・見出し・本文・補足情報といった役割に分け、その違いが見た目で分かるように強弱をつけることです。

文字サイズ・太さ・色の3つで役割ごとのルールを決め、Webページでは見出しタグの階層も見た目とそろえることで、読者が迷わず内容をつかめるようになります。

まずは今作っている資料やページを開き、見出し・本文・注釈がそれぞれひと目で見分けられるかを確認してみてください。

区別がつきにくければ、見出しを少し太く大きく、注釈を少し小さくするところから始めてみましょう。

長い本文そのものの読みやすさは読みやすい本文の記事で、タイポグラフィ全体の学び方はデザイン初心者のためのタイポグラフィ学習ロードマップで紹介しています。

あわせて読みたい書籍

文字のサイズ・太さ・配置のルールを、作例と一緒に体系的に学びたい方はこちらの書籍もあわせてチェックしてみてください。