ファーストビューに何を置くか
ユーザーが来た唯一の目的から、最初の画面の優先順位を組み直す
これは私のページです：［スクリーンショットまたは要素の一覧］。ファーストビューの情報の優先順位をレビューしてください：1）実際に見えている要素を列挙し、面積とコントラストから現在の視覚的重みを順位づける；2）ユーザーがこのページに来た唯一の目的は何かを判断し、最初に目が行くべき要素を 1 つだけ挙げる；3）注意を奪っているのに不要なもの（装飾、重複した導線、販促枠）を指摘する；4）サイズ・コントラスト・位置・余白の 4 つのレバーで並べ替えた案を示し、変更点を注記する；5）遮蔽テスト：3 要素しか残せないならどれを残すか、理由つきで答える。「分かりやすく」といった言葉は使わないでください。
使い方
「ユーザーがこのページでする唯一のことは何か」を先に自分で答えてください。答えが違えば、並び方も変わります。
向いている場面
- データの画面と販促枠が同じ画面にひしめき、事業側は「コンバージョンを目立たせろ」、デザイン側は「余白を増やせ」と言います。双方の要望をファーストビューの視覚的重みに換算して初めて、話が前に進みます。
- リニューアルのレビュー前の自己点検です。最初に目が行く場所を先に確認しておけば、「ユーザーは何を見るべきなのか」と聞かれて答えに詰まりません。
向いていない場面
- ログイン、QR 読み取り、支払い確認のような単機能の画面です。目的が 1 つしかないので、優先順位づけは空回りします。
- 実際の文言もデータ量もまだない段階です。仮のデータで並べたファーストビューは、本番の見出しの長さで一気に崩れます。
例
入力
B2B のダッシュボード、1440×900。上部に KPI カード 4 枚、中央に折れ線グラフ、右側に告知 3 件、左下の「レポート作成」ボタンは KPI カードと同じグレー
得られるもの
ユーザーの目的は「昨日異常がなかったかの確認」だと判断し、最初に見るべきは KPI カードではなく折れ線グラフの異常箇所だと示します。KPI カードは面積の 32% を占めますがすべて中間グレーで、右側の告知が赤いドットだけで最も目を引いています。並べ替えでは告知をファーストビューの外へ移し、KPI を 1 行にまとめて文字を 2pt 下げ、主ボタンだけを画面で唯一の高彩度色にします。遮蔽テストではグラフ、異常ラベル、期間フィルタの 3 つを残します。
よくある誤用
- 「重要なものをファーストビューに」を「重要なものを全部ファーストビューに」と受け取る場合です。全部が重要になると、優先順位は存在しなくなります。
- クリックヒートマップで判断を代替する場合です。ヒートマップが示すのは実際に押された場所で、本来見えるべき場所ではありません。
こう変えると効く
- 「ユーザー種別ごとに 1 版ずつ」を足します。新規・既存・管理者では目的が違うので、ファーストビューは役割ごとに分岐できます。
- 「削除テスト」に変えます。ファーストビューから 5 要素を外さなければならないならどれか。前向きに並べるより、冗長さが早く見えます。