コントラストは「勇気」。中途半端な対比がデザインを壊す理由

「情報を目立たせようとして、少しだけ文字を大きくしたのに、なぜか野暮ったく見える」

デザインの現場でよく起こるこの現象の原因は、対比の「弱さ」にあります。

デザインの4原則における「対比(Contrast)」を成功させる鍵は、センスではなく「極端な差をつける勇気」です。

目次

「違い」がわからないのは「ミス」に見える

人間の目は、微妙な違いに敏感です。

しかし、その「微妙な違い」が意図的なものか、それともただの不注意(ミス)なのかを瞬時に判別することは困難です。

  • 中途半端な対比:16pxの本文に対し、見出しを18pxにする。
    • ユーザーの心理:「あれ、この見出し、少し大きい気がするけど……設定ミスかな?」と違和感を与えてしまいます。
  • 明確な対比:16pxの本文に対し、見出しを32pxにする。
    • ユーザーの心理:「ここが重要なタイトルだ!」と一瞬で理解できます。

ロジカルなデザインにおいて、「似ているけれど少し違う」状態は、避けるべき禁忌の1つです。

劇的な差をつけるための「倍数」の基準

「どれくらい差をつければいいのか」という問いに対し、ロジックでは数値的なガイドラインを提示します。

  • サイズで対比させるなら「2倍以上」
    • 本文が16pxなら、見出しは32px以上。これくらい差があって初めて、情報の階層(ヒエラルキー)が機能します。
  • 太さで対比させるなら「2ランク以上」
    • Regular(標準)の隣に置くのは Medium ではなく、Bold(太字)や Black(極太)を選びます。
  • 明度で対比させるなら「コントラスト比」を意識
    • 背景色と文字色の明度差をはっきりと分けます(詳細は次回のTH01-12で解説)。

対比は「情報の引き算」である

対比をつけるということは、主役を立たせるために「脇役を徹底的に弱める」ことでもあります。

すべての要素を「大きく、太く、派手に」してしまうと、結局どこにも対比が生まれず、画面がうるさくなるだけです。

重要な一点を際立たせるために、他の要素のサイズを下げたり、色をグレーに落としたりする「引き算のロジック」を持ちましょう。

迷ったら「もっと極端に」

「やりすぎかな?」と思うくらいが、ユーザーにとっては「ちょうどいい分かりやすさ」であることがほとんどです。

ロジックの原則に従い、デザインに迷いが生じたら、数値をさらに極端に振ってみてください。

その「勇気」が、情報の優先順位を誰の目にも明らかなものへと進化させます。

目次