視覚的階層とデザイン階層の作り方
15分で読める
視覚的階層とは、デザインにおける情報の優先順位をサイズ・コントラスト・余白・配置で示す設計原則です。デザインの階層を作り、ユーザーの視線を主役からCTAへ誘導する方法を解説します。
UI原則タグ: 視覚的階層 / レイアウト / スキャニング / UIデザイン原則 / タイポグラフィ
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
視覚的階層とは、デザインにおける情報の優先順位をサイズ・コントラスト・余白・配置で示す設計原則です。デザインの階層を作り、ユーザーの視線を主役からCTAへ誘導する方法を解説します。
Web上のテキストコンテンツを見る際、ユーザーの視線はアルファベットの「F」の字を描くように動く傾向がある。
スキャン(流し読み)しているユーザーの視線を繋ぎ止め、次の情報を読むための足がかりとなる目立つ要素。
情報の重要度に応じて、大きさ・色・配置に強弱をつけることで、ユーザーの視線を「見るべき順序」通りに誘導するデザイン原則。
テキストが少なく、画像やCTAが中心のページ(LPなど)において、ユーザーの視線は左上→右上→左下→右下と「Z」の字を描くように動く。