階層と強調

ねらい

一枚のチラシ、一つのWebページ。そこには「見出し」「本文」「注意書き」など、役割の違う文字がいくつも載っている。このとき大事なのは、読む前に「どこから読めばいいか」が分かることだ。これを作るのが、このクエストのテーマ「階層と強調」だ。

「階層」とは、文字に序列（読む順番・大事さの順）をつけること。「強調」とは、その中で特に目立たせたい一点を立てること。どちらも道具は同じ4つ――サイズ（大きさ）・ウェイト（太さ）・位置・色だ。

ねらいは三つ。①この4つで序列を作れるようになる。②大きさを「なんとなく」でなくタイプスケール（比率で決めるものさし）で決める。③強調は引き算でやる――目立たせたい所を「足す」のでなく、まわりを静かにして際立たせる。やりすぎると効かなくなる、その理由を最後に見る。

同じ大きさで並ぶと、人は迷子になる

まず、なぜ階層が要るのか。答えは人間の目の仕組みにある。

人はページを見るとき、最初の一瞬で「どこから読むか」を決める。文字を一字ずつ読むより先に、全体をパッと見て「大きいもの・濃いもの・目立つもの」に目をやる。これは意識ではなく反射だ。だから、もし全部の文字が同じ大きさ・同じ太さで並んでいると、目は「とっかかり」を見つけられない。どこから読めばいいか分からず、迷子になる。

ここで効いてくるのがゲシュタルト原則の一つ、類同（るいどう）だ。これは「見た目が同じものは、同じ仲間だと感じる」という人の知覚のクセ（→詳しくは準備編「ゲシュタルト原則」）。逆に言えば、見た目に差をつければ「これは別の役割だ」と伝わる。見出しを大きくするのは飾りではない。「ここは本文とは違う、章の入口だ」という意味を、差によって伝えているのだ。

序列をつくる4つの道具

では、どうやって差をつけるか。使える道具は4つある。サイズ・ウェイト・位置・色だ。一つずつ見ていく。

• サイズ（大きさ） … いちばん強い。大きいものに最初に目が行く。見出しを本文より大きくするのが基本。
• ウェイト（太さ） … 文字の線の太さ。**太い（Bold）**ほど黒っぽく見え、目を引く。サイズを変えずに差をつけたいときに効く。
• 位置 … 上にあるもの・他から離れているものは「別格」に見える。見出しと本文のあいだを少し空けるだけで、関係が伝わる。
• 色 … 濃い・鮮やかな色は前に出て、薄い・くすんだ色は引っ込む。注意書きを灰色にすると「これは脇役」と伝わる。

コツは、全部いっぺんに使わないこと。サイズだけで足りるなら、太さも色もいじらない。差をつける道具を増やすほど、画面はうるさくなる。これは後の「強調は引き算」につながる大事な感覚だ。

見出しと本文 ―― 役割が違えば、見た目を変える

階層のいちばん基本の単位が、見出しと本文の差だ。

• 見出し … その先に何が書いてあるかを示す「看板」。大きく・太く・短い。読者はここを飛ばし読みして、必要な場所を探す。
• 本文 … 中身そのもの。落ち着いて読むので、読みやすさ最優先。大きすぎず小さすぎず、ぎっしりしすぎない。

この二つは役割がまるで違う。だから見た目もはっきり変える。中途半端に「ちょっとだけ大きい見出し」は、看板の役を果たせない。見出しは本文より明らかに大きく（または太く）するのが鉄則だ。差が小さいと、人の目は「同じ仲間（類同）」と判断してしまい、看板に見えない。

逆に、本文をむやみに大きく・太くするのもダメだ。本文は長く読むもの。太字が続くと黒っぽくて目が疲れるし、大きすぎると一行に入る字数が減って読みにくい。見出しは目立たせる、本文は読ませる――目的が違うことを忘れない。

タイプスケール ―― 大きさを比率で決める

ここが「恣意性を殺す」核心だ。見出しを24px、本文を16px、注意書きを13px……この数字は、どう決める？「なんとなく」で決めると、ここでも判断がブレる。一枚の中でちぐはぐになり、客に「なぜ24px？」と聞かれて答えられない（pxは画面の大きさを指定する単位）。

そこで使うのがタイプスケール（文字サイズのものさし）だ。やり方はシンプル。一つの基準サイズ（本文）を決め、そこに決まった比率を掛けて、大きいサイズを作っていく。たとえば比率を「1.25倍」と決めるなら、16px → 20px → 25px → 31px……と、掛け算で階段を作る。逆方向（小さい注意書き）は割り算でいい。

なぜ掛け算なのか。人の感覚は「足し算」でなく「比」で大きさを感じるからだ。同じ仕組みは音楽にもある。ドと、その1つ上のド（オクターブ上のド）は、音の高さがちょうど「2倍」の関係になっている。音楽でも、大きさ（高さ）は足し算でなく「倍」＝比で決まっているのだ。だから、サイズも比でそろえると、階段の段差が目にそろって見え、全体が自然に調和する。バラバラの数字を並べたときの「なんか気持ち悪い」が消える。

「サイズを決まった段でそろえる」という発想は、実は新しくない。ルネサンス期以降の活字（＝昔の印刷で使った、1文字ずつの金属のハンコ。これを並べて紙に刷った）でも、文字サイズには規格の名前（Pica、Long Primer、Great Primer など）があり、ばらばらの連続値ではなく決まった号として飛び飛びに刻まれていた。ただし当時の号は、号どうしが比率できれいにそろっていたわけではない（鋳造所ごとに寸法もまちまちだった）。「比率で段差をそろえる」という発想そのものを与えたのは、近代になってからだ。デザイナーのTim Brownが2011年に「Modular Scale（モジュラースケール＝比率で作るサイズの段）」という考えとツールを広め、Webで一気に定着した（タイプスケールの、Webでの呼び名だと思っていい）。比率の選び方は、**1.125（おとなしい）／1.25（標準）／1.333（メリハリ）／1.618（黄金比、ダイナミック）**あたりが定番だ。これらは modularscale.com などで定番として共有されてきた比率で、「なんとなくの4択」ではない。

強調は引き算 ―― 全部目立たせると、何も目立たない

最後に、いちばん間違えやすいところ。強調だ。

「ここ大事！」と思うと、人は文字を大きくし、太くし、赤くし、下線を引き、おまけに黄色マーカーまで重ねたくなる。気持ちは分かる。でも、これは逆効果だ。目立たせる手段を増やすほど、強調は弱くなる。

理由はこうだ。強調とは「まわりとの差」のこと。一文だけ赤いから、その赤が目立つ。でもページの半分が赤くなったら、もう赤は「ふつう」になり、差が消える。全部を強調するのは、全部の音を最大音量で鳴らすのと同じで、結局どれも聞こえなくなる。

だから鉄則はこうだ。強調したいなら、まわりを静かにする。一点を上げるのではなく、他を下げる。一つの文の中で本当に立てたい語は、ふつう1個か2個まで。そして、その一点には手段を一つだけ使う（太字だけ、か、色だけ）。重ね掛けは効果を打ち消す。引き算でやるほど、その一点は強く立つ。

この「引き算」の感覚には、太い歴史の裏付けがある。工業デザイナーディーター・ラムスの有名な言葉、**「Weniger, aber besser（より少なく、しかしより良く）」**だ。良いものは、足してではなく、削って生まれる。強調も同じ。何を消すかで、何が立つかが決まる。

見分け方・直し方

街やWebで「読みやすいな」と感じるページは、たいていこの順で作られている。逆に「なんか読みにくい・素人っぽい」ページは、ここが崩れている。チェックする目を持とう。

• 3段くらいの段差があるか（見出し・本文・補足、くらいで十分。段が多すぎると逆に迷う）
• サイズが比でそろっているか（飛び飛びでなく、掛け算の階段になっているか）
• 見出しと本文の差がはっきりしているか（中途半端でないか）
• 強調が少ないか（1ページに赤や太字が散らばっていないか）

もし「読みにくい」と感じたら、直し方は二つ。①段差をはっきりさせる（見出しをもっと大きく/太く）。②強調を減らす（太字や色を、本当に大事な一点だけ残して消す）。足すのではなく、メリハリを整え、余計を引く。これがこのクエストの結論だ。

譜例

棚（design-gallery）で、見出し・本文・補足の階層がはっきりした実例を見て、本文の話がどう現れているか確かめよう。

• 棚：階層と強調の実例を見る

見るときは、図7のチェック（段差は3段くらいか／サイズは比でそろっているか／見出しと本文の差ははっきりか／強調は少ないか）を当てはめてみるとよい。

練習・チェック

1. 身近なWebページかチラシを1つ選び、文字の「段」がいくつあるか数えてみよう。3〜4段くらいなら読みやすいはず。やたら多ければ、それが「読みにくさ」の原因かもしれない。
2. タイプスケールを自分で1本作ってみよう。本文を16pxとして、比率1.25倍で大きい方を3段（20→25→31）計算してみる。電卓でいい。これが「恣意性を消す」体験になる。
3. 自分の作ったスライドや資料で、太字・色・下線がいくつ使われているか数えてみよう。1ページに3つ以上あったら、いちばん大事な1つだけ残して、あとは消してみる。消すと、残した一点が強くなるのを体感しよう。