Above the foldとは

この記事では、サイトのデザイン、レイアウトについて考えてみます。

Above the fold(アバブ・ザ・フォールド)」という言葉を聞いたことがありますか?

Above the foldとは、スクロールしないで見ることができる画面の領域です。

Google SERPsのAbove the fold

上の図はGoogleの検索結果です。
太い赤線の上の領域がスクロールしなくても見える範囲、太い赤線の下の領域がスクロールしないと見ることができない範囲だとすると、上側の領域が「Above the fold」になります。

このAbove the foldの何が重要かというと、大切なコンテンツ、つまり訪問者に見てほしい・読んでほしいコンテンツはAbove the foldの中に収めるべきなのです。

訪問者は、訪れたページが自分にとって必要か不必要かを「3秒で決める」なんていうのはよく言われることです。
(誰が計ったんでしょう?(笑))

訪問者を逃さず引きつけるには、Above the foldに何を配置するかが、ものすごく大事なのです。

Above the foldの中でも、特に鍵を握る領域は「Golden Triangle(ゴールデン・トライアングル)」と呼ばれるゾーンです。

図の黄色い逆三角形の領域が、Golden Triangleを表します。

人間の視線は、左上を起点に動き始めます。
そして、Golden Triangleの中を中心に移動するのです。

図は、Heat map(ヒート・マップ)といって視線が集まる場所ほど暖色で表されます。

ですから、いちばん注目してほしい情報をGolden Triangleに配置するようにしましょう。

文字で言えば大きな太文字がいいでしょう。
ページのコンテンツに関連した画像を配置するのも、ユーザーの意識を捉えるのに役立ちます。

ページを見てすぐに戻ってしまう「直帰率」を低下させるために、Above the foldとGolden Triangleを賢く利用することをおススメします。