情報に優先順位をつける

「全部大事」は「何も大事でない」と同じ

デザインで最もよくある失敗が、すべてを同じ重さで並べることです。
同じフォントサイズ・同じ色・同じ余白で要素が並ぶと、
見た人は「どこから読めばいいかわからない」状態になります。

デザインを始める前に「何が一番重要か」を決めることが、
すべての起点です。

情報を3つのレベルに分ける

情報を視覚的な重みで3レベルに分類することで、
見た人の視線を意図した順番に誘導できます。

レベル1（最重要）は「これだけは必ず伝わってほしい」情報です。
最大フォントサイズ・最も目立つ色・広い余白・一番目立つ位置（左上または中央上部）に置きます。

レベル2（重要）は「次に知ってほしい」情報です。
中程度のサイズと配置で、レベル1より控えめにします。

レベル3（補足）は「余裕があれば見てほしい」情報です。
小さめ・控えめな色・下部や隅に配置します。

視覚的ヒエラルキーを作る4つの手法

視覚的な重みの差を作る方法は4つあります。

サイズは最も直接的な手法です。最重要を48px以上、
補足を14pxにするなど、差を大きくするほど効果が出ます。
22pxと24pxでは機能しません。

太さ（ウェイト）も有効です。同じフォントでBold・Regular・Lightを使い分けるだけでメリハリが生まれます。

色・対比。最重要情報には高対比（黒・ブランドカラー）、
補足情報にはグレー系を使うことで、視覚的な重みの差を作れます。

位置。左上・中央上部は視線が最初に届く場所です。
補足情報は下部・右端に配置します。

0.5秒テスト

デザインが完成したら次のテストをしてください。
デザインを0.5秒だけ見て目を閉じ、「最初に目に入った情報」を書き出します。
書き出した情報がレベル1（最重要）と一致していれば成功です。
一致していなければ、最重要情報のサイズ・色・位置を見直しましょう。

まとめ

情報の優先順位を決めることはデザインの起点です。
すべてを同じ重みにするのではなく、3レベルに分けてサイズ・太さ・色・位置の4つで視覚的な差をつけることで、
見た人の視線を意図した順番に誘導できます。

ヒエラルキーあり vs なしで見比べる

同じ情報でも、優先順位をつけるかどうかで印象がまったく変わります。

NEXT STEP