UIXHERO
#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)
作成: 2026年7月29日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: