#519
UI設計パターン
#519ふぁーすとびゅー
ファーストビュー
別名・表記:First ViewAbove the Foldアバブ・ザ・フォールド最初に見える画面
UIXHERO Definition
UIXHEROでは、ファーストビューを「ページを開いた直後、スクロールせずに見えている領域」と定義する。
概要
「Above the Fold」は新聞の折り目より上、つまり売り場で見える面を指す言葉に由来する。Webでは、ページを開いた時点でスクロールせずに見える範囲を指す。
Nielsen Norman Group の閲覧行動調査では、視線が最上部に集中する傾向は繰り返し報告されている一方で、ユーザーがスクロールしないという主張は支持されていない。実際にはスクロールは日常的な行動であり、問題は「スクロールするかどうか」ではなく「スクロールする理由が最初の画面で示せているか」にある。
UXでの活用
- 目的の提示: 何のページで、自分に関係があるかが判断できること。5秒テストで検証しやすい。
- 次の行動の提示: 主要なCTAが見えている、または見えていなくてもたどり着けることが伝わっている。
- 継続の手がかり: コンテンツを画面下端でわざと見切れさせると、続きがあることが伝わる。
誤用・混乱
- 固定の高さで定義できない: 同じページでもデバイス、ブラウザのUI、フォント設定で可視範囲は変わる。「600pxまで」のような固定値での運用は現実と合わない。
- 詰め込みの根拠にしない: 情報を上部に集めるほど、要素同士が優先度を奪い合い、結果的にどれも読まれなくなる。
- ファーストビューの離脱=ファーストビューの問題とは限らない: 流入元とページ内容のミスマッチが原因の場合、ページ内をいくら直しても改善しない。
💡 使いどころ
ランディングページや商品ページで「何のページか」が伝わっているかを検証する時。5秒テストやヒートマップ分析の対象範囲を定義する時。
⚠️ 注意点・誤用
「ファーストビューに全部入れる」は誤った設計指針になりやすい。ユーザーはスクロールする。重要なのは詰め込むことではなく、続きがあると伝わり、続きを読む理由が示されていることである。また可視領域は端末によって大きく異なり、固定の高さで定義できない。
具体例
- サービス名と提供価値、次の行動が1画面に収まっている
- 商品ページで、商品画像・価格・カートボタンが最初に見える
- スクロールを促す視覚的な手がかり(見切れたコンテンツ)を残す
出典・参考文献:
- Scrolling and Attention に関する Nielsen Norman Group の調査記事
- Don't Make Me Think (Steve Krug)