【あばぶざふぉーるど】
アバブ・ザ・フォールド とは？
最終更新:
💡 スクロールする前に、最初に見える領域
ページを開いたとき、スクロールせずに見える領域。新聞の折り目の上に由来する呼び名で、画面や表示条件によって範囲が変わる。ページの目的や続きの内容を伝える配置を考える際に使う。
📌 このページのポイント
ひよこ どうして新聞の折り目？
ペンギン先生 折られた新聞の上側という呼び名を、Webの最初に見える領域へ使っているんだ。ページを開いたときに、スクロールなしで見える範囲を指すよ。
ひよこ ファーストビューと同じ？
ペンギン先生 このページでは、その最初に見える範囲として使っているよ。画面の大きさや表示条件によって境界が変わるので、全端末で同じ高さになるとは考えないんだ。
ひよこ 大事なものを全部詰める？
ペンギン先生 ページの目的が分かり、続きを読む理由が伝わる配置を考えるよ。見出しや紹介、続きへの手がかりを使える。すべてを押し込めばよい、下の内容は誰も読まない、という意味ではないんだ。
ひよこ LCPと同じもの？
ペンギン先生 LCPは最初の画面内で大きな対象の画像やテキストなどが表示されるまでの指標だよ。アバブ・ザ・フォールドは領域の呼び名なので、領域全体の読み込み時間と同じではないんだ。
ひよこ 画像は全部、先に読み込む？
まとめ：ざっくりこれだけ覚えればOK！
「アバブ・ザ・フォールド」って出てきたら「スクロール前に見えるページの領域」と思えばだいたいOK！
📖 おまけ：英語の意味
「Above the Fold」 ＝ 折り目の上
💬 新聞の折り目の上という言い方に由来するよ。Webではスクロール前に見える範囲を表すんだ。