コントラストと階層

ねらい

スマホで何かのページを開いたとき、あなたは「どこから読むか」を考えただろうか。たぶん考えていない。勝手に目が一番大きい文字に吸い寄せられ、そこから下に流れていく。これは偶然ではない。作った人が、わざと差をつけて、あなたの目をその順番で動かしている。

このクエストのねらいは一つ。「差をつける」とは「意味をつける」ことだと体でわかること。文字の大小、色の濃淡、線の太細――こうした差（コントラスト）は、ただの見た目の話ではない。「これが一番大事」「これはおまけ」という重要度の順位を、言葉で説明しなくても伝える仕組みだ。この順位のことを階層と呼ぶ。

逆に言えば、差が無ければ順位も無い。全部が同じ大きさ・同じ濃さだと、目はどこから読めばいいか分からず、迷子になる。コントラストが無いデザインは、何も言っていないのと同じだ。

差は「意味」を運ぶ — なぜコントラストが要るのか

まず、いちばん大事な考え方から。デザインで言うコントラストとは、要素どうしの「ちがい」のことだ。大きい/小さい、濃い/薄い、太い/細い、赤/グレー――このちがいの度合いが、見る人にメッセージを送る。

なぜ、ただのちがいが「意味」になるのか。それは、人の目がまわりと違うもの＝目立つものに、自分の意思とは関係なく反応してしまうからだ。たとえるなら、草むらの中で一つだけ動くものがあったら、考える前に目がそちらへ向く――そういう古いクセを、目はいまも持っている。このクセが、画面を見るときにもそのまま働く。だから画面の中で一つだけ大きい・濃い・赤いものがあると、目はまずそこを拾い、脳はそれを「一番大事」と読む。

このしくみには名前がついている。前注意的処理（pop-out）――「これを探そう」と意識する前に、周囲と違う一つが自動で目に飛び込む、という知覚の働きだ（準備編『ゲシュタルト原則』で見た“類同”の裏返しでもある）。

逆に、全部が同じ強さだと、脳は「どれも同じくらい大事」と受け取る。それはつまり「優先順位が無い」という意味になってしまう。情報は山ほどあるのに、どこから手をつければいいか分からない――これは、何も伝えていないのと同じだ。**差をつけないことも、一つのメッセージ（=「全部どうでもいい」）を送ってしまう。**だから、差は「つけてもいい」ではなく「つけなければいけない」。

階層 — 見る前から順番が決まっている

差を一つだけつけるのは簡単だ。むずかしいのは、たくさんの要素に順位の列を作ること。これを階層（ヒエラルキー）と呼ぶ。階層とは、「一番大事」「二番目」「三番目」…と、要素に読む順番を割り振ること。会社の組織図を思い出すといい。社長がいて、部長がいて、社員がいる。一目で「誰が上か」が分かる、あの構造を、紙面や画面の中に作る。見ただけで順番が伝わるように差で作ったこの序列を、とくに視覚的階層と呼ぶ（準備編『視線誘導』でも触れた考え方だ）。

なぜ階層が要るのか。人は文章を全部同時には読めない。必ず順番に、一つずつ目で追う。だから作る側が「この順で読んでほしい」を先に決めて、それを差で表現しておく。すると読む人は、考えなくてもその順に目が流れる。良い階層とは、見る人に「考えさせない」ことだ。

ここで大事な注意。階層は「3段くらい」がちょうどいい。順位を10段も作ると、差が細かくなりすぎて、結局どれも似て見える。段の数を絞り、各段の差をはっきりつける――これが効く階層のコツだ。

差をつける4つの道具 — 大小・濃淡・太細・色

では、具体的に何をいじれば差がつくのか。主な道具は4つある。順番に見ていこう。

① 大きさ（大小）――一番強くて分かりやすい道具。大きいものは「大事」、小さいものは「おまけ」。見出しを本文より大きくするだけで、もう階層ができる。

② 濃さ（濃淡）――同じ大きさでも、濃い文字は前に出て、薄い文字は引っこむ。黒い見出しの下に、グレーの補足。色を変えなくても、濃さだけで順位がつく。

③ 太さ（太細）――文字の線の太さ。太い文字（=ボールド）は強く、細い文字は静か。同じサイズでも、太らせるだけで「ここ大事」と言える。

④ 色――グレーの中に一つだけ赤があれば、目はそこに飛ぶ。ただし色は強力すぎるので、差し色は一画面に一つが原則。あちこち色を使うと、どれも目立たなくなる。

コツがもう一つ。差は「中途半端」が一番だめ。見出しを本文より「ちょっとだけ」大きくすると、差なのか間違いなのか分からず、かえって落ち着かない。やるならはっきりやる。「これは差だ」と一目で分かる量まで離す。小さく差をつけるくらいなら、差をつけないほうがましだ。これは『ノンデザイナーズ・デザインブック』のロビン・ウィリアムズが念を押す点でもある――「二つが同じでないなら、はっきり違えよ」（典拠3）。

なぜこの考えが生まれたのか — 歴史的文脈

「差で順位をつける」という考えは、いつ・どこで固まったのか。さかのぼると、20世紀初めのドイツやスイスのデザイン運動にたどり着く。

きっかけはニュー・タイポグラフィという動きだ。1928年、ヤン・チヒョルトというドイツのデザイナーが『ニュー・タイポグラフィ』という本を出した（動きの名前と本の題名は同じ）。彼はこう主張した。それまでの紙面は、見出しを中央にきれいに飾って並べる「対称」が当たり前だった。チヒョルトはそれを否定し、「飾りで真ん中にそろえるな。情報の大事さの順に、大きさと位置で差をつけて並べろ」と説いた。装飾の時代から、**機能（=ちゃんと伝わるか）**の時代への転換だ。

ただし、これはチヒョルト一人がゼロから思いついたものではない。1920年代の構成主義やバウハウスが蒔いた「飾りより機能」の種を受け継ぎ、それを組版のルールとしてはっきり書き出した代表例が彼だった、と考えるといい。この流れは、のちの様式編で詳しく扱うスイス様式の、ひとつ手前にある。

なぜこのとき生まれたのか。背景には、ポスター・新聞・広告といった「大量の情報を、急いで正確に伝える」必要が一気に増えた時代がある。じっくり鑑賞してもらう絵画と違い、街角のポスターは一瞬で読まれなければ意味がない。だから「飾り」より「どう伝わるか」が優先された。階層は、その必要から生まれた実用の発明だ。美しくするためではなく、速く正しく伝えるために作られた――この出発点を覚えておくと、迷ったとき「で、これは伝わるのか？」に立ち返れる。

見分け方 — 良い階層・悪い階層

最後に、出来上がったものを「見抜く」目を持とう。良い階層が効いているかは、次のテストで分かる。

目を細めるテスト――画面を見て、目をうんと細める（または遠くから見る、画像をぼかす）。すると細かい文字は読めなくなり、大きさと濃さの差だけが残る。このとき「ここが一番強い」「次はここ」とまだ順番が見えれば、階層は効いている。ぼかしたら全部のっぺり同じになるなら、差が足りていない。

悪い階層には共通のサインがある。①全部が主役――あれもこれも大きく・濃く・色つきで、結局どれも目立たない。②差が中途半端――順位はあるはずなのに、差が小さくて読み取れない。③順位が多すぎる――5段も6段も作って、見る人が階層を「数えないと」分からない。どれも、原因は「差の扱い」だ。足して目立たせようとせず、いったん全部を弱くして、本当に大事な一つだけを強く残す――こう直すと、たいてい階層が立ち上がる。

これらはバラバラの技ではなく、すべて**「差をつける＝意味をつける」という一つの考え**から出ている。掟を丸暗記するのではなく、この一文を握っておけば、目の前の画面で何をすべきか自分で導ける。

譜例

棚（design-gallery）で実例を見て、本文の「良い階層／悪い階層」がどう現れているか確かめよう。

• 棚でコントラスト・階層の実例を見る

見るときは、図7の目を細めるテストを実例に当ててみるとよい。ぼかしたとき「一番強い塊」がちゃんと残るか。残らないなら、それは差が足りない＝階層の弱いサイトだ。

練習・チェック

1. 身近なサイトを一つ選び、**目を細めて（またはスクショをぼかして）**見てみよう。「①まずここ②次にここ」と順番が見えるか。何段の差を感じ取れるか、数えてみる。
2. 「なんか散らかって見える」と感じるサイトを一つ探し、悪い階層の3サイン――全部が主役／差が中途半端／段が多すぎ――のどれに当たるか判定してみよう。
3. その散らかったサイトを直すとしたら、最初の一手は何か。ヒント：足すより先に、いったん全部を弱くして、本当に大事な一つだけを強く残す。