視覚的階層（ビジュアルヒエラルキー）とは、デザイン要素を配置し、情報を整理するための手法であり、視覚的に優先順位を付けることです。視覚的階層は、色、サイズ、コントラスト、位置、テクスチャなどの要素を使って、デザイン内の重要な情報や要素を他の情報や要素よりも目立たせることができます。視覚的階層を誘導するデザインはビジュアル・アンカーと呼びます。

視覚的階層が効果的に機能する理由は、人間の視覚認知の特性に基づいています。人間の脳は、視覚的な情報を効率的に処理するために、異なる特徴や要素を自動的に区別し、優先順位を付けます。視覚的階層を利用することで、デザイナーは視覚認知のプロセスを支配し、ユーザーの注意を重要な情報やアクションに誘導することができます。その結果、視覚的階層は、情報の伝達やタスクの実行を効率的にするために、ユーザーエクスペリエンスの向上につながります。

基本的にビジュアル・アンカーがない限り、ユーザーの注意はF型またはZ型に上下・左右の順に進みます。

‍

‍

UXの例として、ウェブサイトのランディングページを考えてみましょう。視覚的階層を活用することで、ユーザーがすぐに重要な情報やコンバージョンポイントに気づくようにデザインすることができます。例えば、大きくて鮮やかな色のボタンを使用することで、ユーザーにサインアップや購入などのアクションを促すことができます。また、見出しやサブヘッダー、本文のテキストのサイズやスタイルを変えることで、情報の優先順位を視覚的に示し、ユーザーが目的の情報に簡単にたどり着けるようにすることができます。

参考:

We Seek and Use Visual Structure (2021)