「情報を目立たせようとして、少しだけ文字を大きくしたのに、なぜか野暮ったく見える」
デザインの現場でよく起こるこの現象の原因は、対比の「弱さ」にあります。
デザインの4原則における「対比(Contrast)」を成功させる鍵は、センスではなく「極端な差をつける勇気」です。
目次
「違い」がわからないのは「ミス」に見える
人間の目は、微妙な違いに敏感です。
しかし、その「微妙な違い」が意図的なものか、それともただの不注意(ミス)なのかを瞬時に判別することは困難です。
- 中途半端な対比:16pxの本文に対し、見出しを18pxにする。
- ユーザーの心理:「あれ、この見出し、少し大きい気がするけど……設定ミスかな?」と違和感を与えてしまいます。
- 明確な対比:16pxの本文に対し、見出しを32pxにする。
- ユーザーの心理:「ここが重要なタイトルだ!」と一瞬で理解できます。
ロジカルなデザインにおいて、「似ているけれど少し違う」状態は、避けるべき禁忌の1つです。
劇的な差をつけるための「倍数」の基準
「どれくらい差をつければいいのか」という問いに対し、ロジックでは数値的なガイドラインを提示します。
- サイズで対比させるなら「2倍以上」
- 本文が16pxなら、見出しは32px以上。これくらい差があって初めて、情報の階層(ヒエラルキー)が機能します。
- 太さで対比させるなら「2ランク以上」
- Regular(標準)の隣に置くのは Medium ではなく、Bold(太字)や Black(極太)を選びます。
- 明度で対比させるなら「コントラスト比」を意識
- 背景色と文字色の明度差をはっきりと分けます(詳細は次回のTH01-12で解説)。
対比は「情報の引き算」である
対比をつけるということは、主役を立たせるために「脇役を徹底的に弱める」ことでもあります。
すべての要素を「大きく、太く、派手に」してしまうと、結局どこにも対比が生まれず、画面がうるさくなるだけです。
重要な一点を際立たせるために、他の要素のサイズを下げたり、色をグレーに落としたりする「引き算のロジック」を持ちましょう。
迷ったら「もっと極端に」
「やりすぎかな?」と思うくらいが、ユーザーにとっては「ちょうどいい分かりやすさ」であることがほとんどです。
ロジックの原則に従い、デザインに迷いが生じたら、数値をさらに極端に振ってみてください。
その「勇気」が、情報の優先順位を誰の目にも明らかなものへと進化させます。
