ポータルの旅猫がデザインを学ぶ、夕暮れのアトリエ

ヒエラルキー

Visual hierarchy

情報の重要度や読む順番を、見た目の差で伝えることです。

原則・視覚心理

意味

大きさ、色、太さ、位置、余白などに差をつけ、主役と補足の関係を視覚的に示すことです。

かんたんに言うと

情報の重要度や読む順番を、見た目の差で伝えることです。

具体例

制作の場面で考えてみましょう。

展示の案内では展示名を最も目立たせ、会場、日時、細かな注意事項へ順に読めるようにします。

見て、試して、確かめる

大きさと太さだけを変える

左右は同じ展示案内です。位置、色、内容は同じまま、文字の大きさと太さに差をつけて読む順番を変えています。

比較A強弱が少ない案

どの情報も似た大きさなので、最初に何を読めばよいか判断しにくい配置です。

比較B優先順位を示した案

展示名を主役に、日時、会場、補足の順に視線が進むよう強弱をつけました。

01自分で試す

同じ4つの情報で案内をつくり、文字の大きさと太さだけを変えた2案を比べてください。

変えるのはここだけ情報の位置、色、内容は変えません。最初に伝えたい一つを先に決めます。

02自分で確かめる

できた案を見ながら確認します。正解を採点するチェックではありません。

案を見直すヒント

別の人に3秒見てもらい、覚えている情報を聞きましょう。伝えたかった順番と比べてから強弱を調整します。

理解のポイント

すべてを強調すると優先順位が伝わりません。強調する情報を絞り、補足も読めるようにします。

← 原則・視覚心理のことばへ戻る