移行中の知識
視覚的階層
Visual Hierarchy
定義
視覚的階層（visual hierarchy）とは、情報や要素の重要度・役割の違いが、知覚上の優先順位や強弱として分かるように構成された関係です。大きさ、コントラスト、位置、余白、書体など複数の手がかりを組み合わせて作られ、単に文字サイズを段階的に変えることだけを指しません。同じ情報でもviewportや配置条件が変われば、階層を保つための具体的な表現は変わりえます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
responsive editorial page
同じ記事をスマホとPCで読み分けやすくする
見るポイント
PCではtitle、導入文、本文、asideを並置できても、mobileでは一列へ戻る。desktopの位置関係だけに頼らず、type scale、余白、contrast、source orderを組み合わせ、狭幅でも重要度と読み順が分かるか確認する。
ECの商品一覧
商品カードの情報順位
見るポイント
商品画像、商品名、価格、補助情報、セール表示のすべてを同じ強さで見せず、購入判断に必要な情報の優先度が見分けられるよう視覚的な強弱を設計する。列数やcard幅が変わった時も、強調関係が崩れていないかを見る。
理解
理解のポイント
- 情報の優先順位を知覚上の強弱へ対応させることで、内容を探索する時の手がかりを作れるが、何を優先すべきかは目的と文脈に依存する。
注意
誤解しやすい点
- 重要そうな要素をすべて大きく・太くして、結果として強弱を失う。
- 視覚的階層を文字サイズの段階だけに還元し、余白・位置・コントラストなど他の手がかりを無視する。
- 一つのfocal pointや一つの強い要素があれば、複数情報のhierarchy全体も自動的に成立すると考える。
- desktopで成立した左右配置をmobileでも縮小して残し、source orderや一列化後の読み順を確認しない。
- mobileでは上から順に並ぶだけで階層が自動的に成立すると考える。
観察
見比べて確かめる
関連
関連する概念
出典