アバブ・ザ・フォールドとは何ですか？

スクロールせずに最初に見えるページ領域のこと。ファーストビューとも呼ばれ、ユーザーの第一印象とコンバージョンに大きく影響する。

アバブ・ザ・フォールドのポイントは？

スクロールせずに見える領域で、ユーザーの第一印象を決める。この領域のコンテンツはLCP（Largest Contentful Paint）に直結する。重要なCTAや見出しはアバブ・ザ・フォールドに配置すべき。デバイスや画面サイズによって範囲が変わるため、レスポンシブデザインが重要

【あばぶざふぉーるど】

💡 新聞の折り目の上——スクロールなしで見える「一等地」がWebにもある

📌 このページのポイント

アバブ・ザ・フォールドと新聞の折り目の対比

ひよこ

アバブ・ザ・フォールドって、なんで新聞の折り目が関係あるの？

ペンギン先生

新聞は店頭で折りたたんで並べるから、上半分に目を引く見出しを載せるのが鉄則だったんだ。Webでも同じで、スクロールしないと見えない部分は読まれにくい。だから最初に見える領域をアバブ・ザ・フォールド（折り目の上）と呼ぶんだよ

ひよこ

日本だと「ファーストビュー」って言うよね？

ペンギン先生

そうそう！日本のWeb業界ではファーストビューの方がよく使われるね。意味はほぼ同じで、ページを開いた瞬間に見える範囲のことだよ。海外の資料を読むときはAbove the Foldと書いてあることが多いね

ひよこ

何をファーストビューに置くべきなの？

ペンギン先生

一番伝えたいメッセージ、メインの画像、CTA（行動を促すボタン）をここに入れるのが定石だよ。ECサイトなら商品画像と購入ボタン、ブログなら記事タイトルとリード文。ここで興味を持ってもらえないとスクロールしてくれないんだ

ひよこ

パフォーマンスにも関係あるのかな？

ペンギン先生

大いにあるよ！アバブ・ザ・フォールドの画像はLazy Loadingせずに即座に読み込むべきだし、この領域のコンテンツがLCPの対象になることが多い。逆にフォールド以下の画像はLazy Loadingで遅延読み込みすれば、ファーストビューの表示が速くなるね

まとめ：ざっくりこれだけ覚えればOK！

「アバブ・ザ・フォールド」って出てきたら「スクロールしなくても見えるページの一番上の領域」と思えればだいたいOK！

📖 おまけ：英語の意味

「Above the Fold」＝折り目の上

💬 新聞を半分に折ったとき上半分が目立つように、Webでもスクロール前に見える部分が重要という意味だよ