視覚的階層

概要

情報の重要度を視覚的に整理し、ユーザーに「どれが重要で、どの順番で見ればいいか」を直感的に伝えるデザインの構造化。 サイズ、色、コントラスト、余白、位置関係などを操作して、情報の優先順位を明確にする。 人間は形・色・サイズ・コントラストなどの視覚的特徴を瞬時に処理する「プレアテンティブ処理」によって、重要度を無意識に判断する。

UXでの活用

• タイポグラフィ: H1（大見出し）は最も大きく太く、H2（中見出し）は次に大きく、本文は標準サイズにする。このサイズ差だけで、ユーザーは文書の構造を理解できる。
• 色の強弱: 目立たせたい「購入ボタン」には鮮やかな色（プライマリカラー）を使い、「キャンセル」などの副次的なアクションには地味な色（グレー）やアウトラインのみのデザイン（ゴーストボタン）を使う。
• F型パターンへの配慮: ユーザーはページ上部から横方向にスキャンし、次に左側を縦に流し読みする傾向がある。重要な情報やキーワードを上部や左側に配置することで、自然な視線の流れの中で認識されやすくなる。