視覚的な階層とは?余白で情報の重要度と読む順番が伝わるデザインを初心者向けに解説

視覚的な階層と余白の基本

まずは、視覚的な階層とは何か、そして余白がなぜ階層づくりに欠かせないのかを押さえましょう。

視覚的な階層(ビジュアルヒエラルキー)とは

視覚的な階層とは、デザインの要素を重要度の順に見た目で並べ、「何が一番大事か」「どの順番で見ればよいか」を、説明しなくても伝わるようにする考え方です。

英語のまま「ビジュアルヒエラルキー」と呼ばれることもあります。

新聞の一面を思い浮かべると分かりやすいでしょう。

いちばん大きな見出しで何の記事かをつかみ、その下の小さめの見出し、本文へと、説明がなくても大事なものから順に読み進められます。この並びを意図して作るのが、視覚的な階層です。

Nielsen Norman Groupは、視覚的な階層を「意図した重要度の順に、目が各要素を見ていくように、ページ上の要素を整理すること」と説明しています(Nielsen Norman Group「Visual Hierarchy in UX」・英語)。

階層を作る手段には、文字の大きさ・太さ・色、そして余白があります。

文字の大きさ・太さ・色で階層を作る方法は情報の階層を作るタイポグラフィ術で解説しているので、この記事では余白で階層を作る方法に絞って解説します。

余白が階層を作る仕組み

余白は、「どれとどれが親子なのか」という情報の入れ子の関係を見せることで、階層を作ります。

人には、近くにあるものは同じグループ、離れたものは別のグループと感じる性質(近接の法則)があるからです(詳しくは近接の原則とはで解説しています)。

見出しとその本文を近づけると「この見出しの中身」に見え、別の見出しとの間を広げると「別のまとまり」に見えます。

Nielsen Norman Groupも、見出しと内容の間の余白を狭めると階層的な関係が生まれ、グループ同士の間を広げると別のまとまりとして見えると説明しています(同上・英語)。

次の見本は、文字の大きさをすべて同じにして、余白だけを変えたものです。

見本Aは、7行の文字が同じ間隔で並んでいるだけなので、どれがタイトルで、どれがどのコースの説明なのかを1行ずつ読んで判断するしかありません。

見本Bは文字の大きさを一切変えていないのに、「タイトルの下に2つのコースがあり、それぞれに説明が付いている」という構造が見えます。

余白は、文字の大きさと同じくらい、階層を伝える力を持っているのです。

周りの余白が多い要素は上の階層に見える

余白にはもう1つ、周りを広く空けた要素を「重要なもの」に見せる働きもあります。

Nielsen Norman Groupは、周りの余白が多い要素は1つのまとまりとして認識され、より注目を集めると説明しています(同上・英語)。

たとえば、ページのタイトルやキャッチコピーの周りを広く空けると、ほかの要素より一段上の存在として目に入ります(余白で目立たせる方法は要素を目立たせる余白とはで解説しています)。

つまり余白は、「親子の関係」と「重要度」の両方から、視覚的な階層を支えています。

余白で視覚的な階層を作る方法

ここからは、実際のデザインで余白を使って階層を作る手順を紹介します。

「余白の段階を決める」「文字の階層とそろえる」「段階を絞る」の3つがポイントです。

余白の段階を決める

まず、ページの中でどの区切りにどの広さの余白を使うかを、段階として決めておきます。

基本は「大きな区切りほど広く、つながりの強いところほど狭く」です(いちばん大きな区切りである話題の境目の余白はセクション間の余白とはで解説しています)。

場所	余白の広さ	理由
大見出しの上(大きな話題の区切り)	いちばん広い	ここから別の大きな話題が始まると伝えるため
小見出しの上(話題の中の小さな区切り)	広い	同じ大きな話題の中で、小さな話題が切り替わると伝えるため
段落と段落の間	中くらい	同じ話題の中で、文のまとまりが変わることを伝えるため
見出しとその直後の本文の間	狭い	見出しと本文が1つのセットだと伝えるため

この表のように、余白の広さの順番を、情報の区切りの大きさの順番とそろえるのがコツです。

数値にすると、たとえば大見出しの上を48px、小見出しの上を32px、段落と段落の間を16px、見出しと本文の間を8pxのように割り当てます。

これは8の倍数から選んだ一例で、文字の大きさや画面の広さによって合う値は変わりますが、「区切りが大きいほど大きな値」という順番は崩さないようにしましょう。

見出しの上を広く、下を狭くするのは、見出しが上の内容ではなく下の本文とセットだと示すためです。

上の広い余白が「ここから新しい話題が始まる」という区切りの合図になり、下の狭い余白が「この本文の見出し」というつながりを示します。

文字の大きさの階層と余白の階層をそろえる

文字の大きさで階層をつけたら、余白の階層もそれに合わせましょう。

文字は大きいのに余白が均一なままだと、文字が示す階層と余白が示す関係が食い違い、構造が伝わりにくくなるからです。

次の見本は、同じ文字の大きさのまま、余白の付け方だけを変えたものです。

NGの見本では、小見出しの「Web制作入門コース」が、上の「全6回・オンライン」とも下の説明文とも同じ距離にあり、どちらとセットなのかが曖昧です。

OKの見本では、小見出しの上を広げ、下を狭めたことで、小見出しが下の説明文とセットになり、文字の大きさが示す階層とも一致しています。

文字の大きさの差のつけ方はジャンプ率の記事で解説しています。

階層の段階を増やしすぎない

余白の段階は、3〜4段階程度に絞ると扱いやすくなります。

段階が多すぎると、隣り合う段階の差が小さくなり、見る人には違いが分からなくなるからです。

Nielsen Norman Groupは、文字や要素の大きさについて「小・中・大」の3段階までにすることを勧めています(同上・英語)。

余白も同じように、「狭い・中くらい・広い・いちばん広い」くらいの少ない段階で、それぞれの差をはっきりさせたほうが階層が伝わります。

決めた段階の値をページ全体で使い回すと、同じ関係には同じ余白が使われるようになり、階層がより確実に伝わります。

実践のポイント

余白で視覚的な階層を作るときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 文字の大きさでは階層をつけているのに、余白はすべて同じにしてしまうことがあります。
  階層の伝わり方が弱くなるので、文字の大きさの差に合わせて余白にも差をつけましょう。
• 見出しの上と下の余白を同じにしてしまい、見出しが上下どちらの内容のものか分かりにくくなることがあります。
  見出しの上は広く、下は狭くして、下の本文に寄せましょう。
• 階層を意識するあまり、場所ごとに余白の値をその場で決めてしまうことがあります。
  たとえば、ある段落の間は15px、別の段落の間は18px、小見出しの上は22pxのように、近い値がバラバラに混ざっている状態です。
  同じ種類の区切りなのに余白がバラバラだと、かえって階層が読み取れなくなるので、段階を決めて使い回しましょう。

よくある質問

• Q. 文字の大きさと余白、どちらから決めればいい?
  A. 先に「情報のどこに大きな区切りがあるか」という構造を決めてから、文字の大きさと余白の両方をそれに合わせるのがおすすめです。
  構造が決まっていれば、文字の大きさと余白の階層が食い違うことはありません。
• Q. 余白だけで階層を作ってもいい?
  A. 見本Bのように、余白だけでもある程度の階層は伝えられます。
  ただ、文字の大きさや太さと組み合わせたほうが、より速く確実に伝わります。
  余白は、文字の大きさ・太さ・色と同じ向きの階層を示すように使いましょう。
• Q. Webページでは、HTMLの見出しタグとも関係がある?
  A. あります。
  見た目の階層とHTMLの見出しタグ(h2・h3など)の階層は、そろえておくのが基本です。
  見出しタグの付け方は情報の階層を作るタイポグラフィ術で解説しています。

まとめ

視覚的な階層とは、情報の重要度や読む順番を見た目で伝える考え方で、余白は「親子の関係」と「重要度」の両方から階層を支えています。

大きな区切りほど広く、つながりの強いところほど狭くという余白の段階を3〜4つに絞って決め、文字の大きさの階層とそろえると、説明しなくても構造が伝わるデザインになります。

まずは手元のページで、見出しの上の余白が見出しの下の余白より広くなっているかを確かめるところから始めてみてください。

余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています。