今日の問い
初見確認の短い時間で、最初に何が目へ入りますか。
30秒でつかむ
視覚階層とは、情報の重要度と読む順番を、 見た目の差で伝える設計です。 位置、大きさ、太さ、余白を使い、 主要タスクへの道筋を見える形にします。
派手な場所を増やす話ではありません。 最重要の一つを先に決め、残りを静かにする作業です。
30秒図解 · LESSON 19
階層図
読む順番を、視覚の強弱で作る
重要度を位置、大きさ、余白、文字、色へ翻訳します。
- 01主目的
- 02主要情報
- 03補助情報
- 04詳細・注記
CLUE · 見抜く手掛かり
短い初見確認で、最重要要素を指せるか
TRAP · ありがちな罠
すべてを強調する
原則
前回の低忠実度プロトタイプを一画面だけ開きます。 まず、利用者が最初に理解する内容、 次に選ぶ操作、補足情報の三段階へ分けます。
読み順は配置から決まります。 日本語の横書きでは、通常は上から下へ読みます。 Appleも、重要項目を読み順の早い位置へ置き、 整列で組織と階層を伝えるよう案内しています。
次に、見出しの大きさや文字の重みを変えます。 ただし、色、影、太字を一度に足すと、 どの差が意味を持つのか分かりません。 一つの階層差に、少数の手がかりを使います。
主要ボタンも一つに絞ります。 同じ強さのボタンが並ぶと、選択肢は見えても、 次に進む道が見えません。 危険な操作は目立たせるだけでなく、 文言と配置でも通常操作から分けます。
最後に、文字を読まず目を細めて確認します。 大きな塊と視線の流れだけで、 主役、次の操作、補足の順が残れば成功です。
読み順、相対的重要度、整列、論理的なグループによって視覚階層を伝える設計原則を確認する。
良い例と惜しい例
ここでは厳密なユーザビリティ基準ではなく、階層差を見直すための演習ルールとして、初見確認を3秒に仮置きします。実際の成否は利用状況に合わせた観察で判断します。
予約変更画面の初見3秒チェック
各地点を選び、位置と見た目が担う役割を確認してください。
主役
現在の予約内容を最初に理解できる位置と大きさにします。
AIへの指示例
目的: 予約変更画面の読む順番を、主役、主要操作、補足の三段階で設計する
制約: 主要ボタンは一つ。色だけで階層を作らない。DOM順序と見た目の順序を一致させる
参照: wireframes/、primary-flow.md、ui-states.md
受入条件: 各画面に優先度1から3を注釈し、演習として3秒見たときの最初の要素と次の操作を説明できる。3秒は適否の基準ではなく初見確認の仮置きと記す
確認問題
セルフチェック
1. 予約変更画面で、現在の予約と主要操作より注意文が先に目へ入ります。最初にする修正はどれですか。
最終制作へ反映する
visual-system.mdの視覚階層ルール
wireframes/の主要画面を三段階に分け、主役、主要操作、補足の順と、その差を作る手段をvisual-system.mdへ記す。
Acceptance criteria
- 主要画面ごとに最初に読む内容と次に選ぶ操作が一つずつ定義されている
- 位置、大きさ、重み、余白の使い分けを説明でき、色だけに依存していない
今日のまとめ
- 視覚階層は、重要度と読む順番を見た目で伝える
- 最重要の一つを決め、残りとの相対差を作る
- 次は、余白と整列でその階層を安定させる