above the foldの意味は？新聞・Webでの使い方とbelow the foldとの違い

above the fold は、新聞では「折りたたんだときに表に見える部分」、Webでは「ページを開いて、スクロールせずに見える範囲」を表します。日本語のWeb制作でいう「ファーストビュー」に近い表現です。

重要な見出しや申込ボタンを目立つ位置へ置く話でよく使われます。ただし、「画面の上半分」という固定された場所ではありません。端末や画面サイズによって、Webの fold の位置は変わります。

above the foldの意味

基本的な意味は、媒体によって次のように分かれます。

• 新聞：新聞を折った状態で、折り目より上に見える部分
• Web：ページを開いた直後、スクロールせずに見える範囲

The main story appeared above the fold.
主要記事は、新聞を折ったときに表に見える位置へ掲載されました。

Put the sign-up button above the fold.
登録ボタンをスクロールせず見える範囲に置いてください。

なぜ「折り目より上」が重要なのか

fold は「折り目」という意味です。紙の新聞は、店頭や新聞スタンドで横に折られた状態で並べられることがあります。そのとき、折り目より上にある記事や写真は、新聞を開かなくても目に入ります。

そのため above the fold は、単なる位置ではなく、最初に見えて注目を集めやすい場所というニュアンスを持つようになりました。

Webページには紙の折り目はありませんが、画面の下端が仮想的な fold と考えられます。画面を下へ動かす前に見える部分が above the fold、スクロールして初めて見える部分が below the fold です。

よく使われる形と語順

be above the fold

要素が「スクロール前に見える位置にある」と状態を説明します。

The pricing link is above the fold on desktop.
料金ページへのリンクは、パソコンではスクロール前に見える位置にあります。

put／place A above the fold

「Aを目立つ範囲へ置く」と配置を指示する形です。

We should place our key message above the fold.
重要なメッセージは、最初に見える範囲へ置くべきです。

keep A above the fold

画面やデザインを変えても「Aをスクロール前の範囲に保つ」という意味です。

Keep the booking button above the fold on mobile.
スマートフォンでも、予約ボタンをスクロール前に見える位置へ保ってください。

above-the-fold＋名詞

名詞の前では、通常ハイフンを付けて形容詞のように使います。

We’re testing different above-the-fold layouts.
最初に見える部分について、複数のレイアウトをテストしています。

above-the-fold content（スクロール前に見えるコンテンツ）、above-the-fold area（ファーストビュー領域）のような組み合わせも自然です。

仕事で使える自然な例文

Web制作・デザイン

The headline looks good, but the call-to-action is below the fold.
見出しは良いですが、行動を促すボタンがスクロールしないと見えません。

Can we move this image above the fold?
この画像を、最初に見える範囲へ移動できますか。

On smaller screens, the form may not appear above the fold.
小さい画面では、フォームがスクロール前に表示されない場合があります。

マーケティング

Visitors should understand the offer from the content above the fold.
訪問者が最初に見える内容だけで、提案を理解できるようにすべきです。

Putting everything above the fold made the page feel crowded.
何もかもファーストビューへ置いたため、ページが窮屈に感じられました。

新聞・メディア

Her photo made it above the fold on the front page.
彼女の写真は、一面の折り目より上に掲載されました。

The editor chose a local story for the space above the fold.
編集者は、折り目より上のスペースに地域ニュースを選びました。

above the foldとbelow the foldの違い

above the fold は最初から見える範囲、below the fold は新聞の折り目より下、またはスクロール後に見える範囲です。

The introduction is above the fold, and the details are below the fold.
導入部分は最初に見え、詳細はスクロールした先にあります。

below the fold が「読まれない」という意味ではありません。興味を持った読者は下へ進みます。最初の範囲には続きを読みたくなる理由を示し、詳しい説明はその下に置く、という設計も自然です。

似た表現との違い

at the top of the page

at the top of the page は「ページの上部」という物理的な位置です。above the fold は、実際に画面内で見えているかどうかに焦点があります。

ページ上部にあっても、その前に大きな画像や告知があれば、目的の要素が画面外になる可能性があります。その場合は top of the page でも above the fold ではありません。

first screen／initial viewport

first screen は会話で意味を説明しやすい表現です。initial viewport はWeb制作で「最初の表示領域」を技術的に表す言い方です。above the fold は新聞由来の比喩を含む、広く知られた業界表現です。

hero section

hero section は、ページ上部に置かれる大きな見出し・画像・ボタンなどのまとまりです。hero section はデザイン上の部品、above the fold はユーザーの画面で見える範囲なので、同じものではありません。

日本人が間違えやすいポイント

foldを動詞だと思って訳さない

この表現の fold は「折りたたむ」ではなく、名詞の「折り目」です。above the fold 全体で場所を表します。

Webでは範囲が一定ではない

パソコン、タブレット、スマートフォンでは画面の高さが異なります。同じページでも、ある端末では above the fold に見え、別の端末では below the fold になることがあります。

すべてを詰め込む意味ではない

above the fold が重要だからといって、文章・画像・ボタンをすべて押し込むと、かえって要点が伝わりにくくなります。英語で話すときも、the most important information や the main call-to-action のように、何を優先するか明確にすると自然です。

簡単な英語で言い換えるなら

above the fold がすぐ出てこなければ、次のように説明すれば通じます。

• Put it where people can see it without scrolling.
  スクロールせず見える場所に置いてください。
• Show the key message first.
  重要なメッセージを最初に見せてください。
• Keep the button on the first screen.
  ボタンを最初の画面内に置いてください。
• Move it near the top of the page.
  ページ上部の近くへ移してください。

実際に画面操作を伝える英語は、scroll downの意味・使い方もあわせて確認すると整理しやすくなります。

まとめ

above the fold は、新聞では「折り目より上に見える部分」、Webでは「スクロールせずに見える範囲」を表します。be above the fold で位置を説明し、put／place／keep A above the fold で配置を伝えられます。

大切なのは「単なる上部」ではなく、ユーザーが最初に見られる位置という点です。表現を忘れたときは、where people can see it without scrolling と言い換えれば十分に伝わります。

ほかの重要表現は、英熟語・定型表現の一覧から確認できます。