フォールドの上：ユーザーフレンドリーなウェブサイトを構築する方法

ほんの数年前、ブラウザの表示領域にできるだけ多くの情報が詰め込まれていました。 今日、それはもはやそれほど有利ではありません。 しかし、なぜ？ スマートフォンやタブレットの使用は、ユーザーの行動を大きく変えました。 彼らはさらにスクロールするか、スワイプして画面表示を変更することを学びました。 これらすべてがウェブデザインの再考につながりました。 まだ見られていないのは、ウェブサイトのすぐに見える領域がまだ果たしている役割です。

答え： 「スクロールしなければ見えない位置」は、コンテンツにとって依然として重要です。 それにもかかわらず、設計技術の再考が求められています。 ウェブマスターとして、この領域にすべての情報を「詰め込む」のではなく、訪問者の注意を引き付け、スクロールするように促し、ページの残りの部分も見るように促します。 この記事では、折り畳み上領域を効果的に設計するための役立つヒントを紹介します。

「フォールドの上」とはどういう意味ですか？

「折り畳みの上」という表現は、印刷業界に由来します。 新聞は真ん中で折りたたまれ、販売棚に置かれるか、このように陳列されます。 一見すると、タイトルページの上部だけが表示されます。 折り目の線は「折り目」と呼ばれます。 新聞編集者は、この線のすぐ上にある領域を使用して、話題の記事、興味深い見出し、印象的な写真で注目を集め、人々を購入に駆り立てます。

Webサイトでは、「スクロールしなければ見えない位置」の領域は、ユーザーがスクロールしなくてもすぐに表示できるセクションです。 1366×768ピクセルの画面解像度（画面解像度については後で詳しく説明します）を想定すると、通常、Webサイトの訪問者は、下の図で赤で強調表示されている領域を最初に表示します。

画像1： en.ryte.comでスクロールせずに表示される領域

可視領域の重要性は何ですか？

2013年後半、Peep LajaはロンドンのSearchLoveで、魅力的なWebデザインの基本について話しました。 彼は、「フォールドを超えた」コンテンツが依然としてユーザーの注目のほぼ80％を獲得していることを観察しました。 ユーザーがWebでのスクロールに慣れてきたとしても、これは変わっていません。

画像2：ウェブページでの注目の分布

これは、ユーザーの注意を引きたい場合、Webページの上部（表示領域）が依然として重要であることを示しています。

それにもかかわらず、何かが変わった：ユーザーはほとんど忍耐力を持っていない。 そのため、ユーザーの関心を維持することはさらに困難です。

したがって、「スクロールしなければ見えない位置」の領域（特にGoogleとSEOの場合）に不要な情報を入力しないでください。 この領域では、代わりにページの利点を強調し、ページで何を発見できるかをユーザーに説明する必要があります。

それに応じて「折り畳みの上」を設計する

多種多様なデバイスの使用により、折り目の上に見える領域も変更されました。 レスポンシブデザインにより、折り線はWebページのさまざまな位置に表示されます。 Webページのどの領域がユーザーに表示されるかは、さまざまな要因によって異なります。 （たとえば、画面の解像度、ユーザーのツールバーの幅、ページが拡大されているかどうかなど）。

これらの要件に合わせてどのように設計する必要がありますか？ 万能の解決策はありません。 いずれの場合も、最も重要なコンテンツがページの先頭にあり、ほとんどのユーザーのニーズに適合していることを確認してください。

現在、インターネットユーザーの大多数はモバイルサーファーであるため、ここでのアプローチは「モバイルファースト」であり、「スクロールしなければ見えない位置」の領域はスマートフォン向けに最適化する必要があります。

スクロールを促進する3つの方法

1.オフセット列

画像3： bbc.comの異なる配置の列。

さまざまに配置された列に分割されたコンテンツは、ここでさらに発見できることがユーザーにすぐに示されます。 これは、テキストのセクションまたは画像でさえ、ほとんどの場合、折り畳みによって中断され、ユーザーがさらにスクロールしてより多くの情報を取得できるようになるためです。 このスタイルは、新聞のニュースサイトでよく使用されます。

2.ページ内のパス

事前に作成されたパスをWebサイトに統合することにより、Webサイトの訪問者にスクロールを促すこともできます。 折り目は、ユーザーがたどりたいと思うこのパスを分割します。

3.ヒントを与える

ページの下部にユーザーを待っている情報がもっとあることをユーザーに知らせる別の方法があります。 ランディングページに適切なサイン（矢印など）を追加してください。

Googleにとって、コンテンツは「フォールドを超えて」どの程度関連性がありますか？

ハングアウトでは、GoogleのJohn Muellerが、表示領域のコンテンツの重要性に関する質問に次のように回答しました。

「つまり、重要なのは、折り畳みの上にいくつかのコンテンツを見たいということです。 つまり…ユーザーがそこに行くと、ページの一部が表示されるはずです。 たとえば、ユーザーがあなたのWebサイトにアクセスし、大きな休日の写真を見るだけで、ホテルに関するコンテンツを実際に取得するために少し下にスクロールする必要がある場合、それは私たちにとって問題になります。 しかし、彼らがあなたのホームページにアクセスし、その上に名声の殿堂の写真が表示され、ホテルのサイトなど、ホテルに関する情報が少し表示された場合は、それで問題ありません。 したがって、コンテンツがフォールドより上にある必要があるというだけではありません。 しかし…一部のコンテンツはそうである必要があります。」

そのため、Googleは何よりも、コンテンツが表示領域にあることを評価し、ユーザー（検索エンジンではないことに注意してください）にページ上で何が見つかるかを示します。

結論

「折り目の上」（目に見える領域）のスペースは依然として重要です。 過去には、ウェブマスターはページのすべての重要な要素をそこに配置しようとしました。 今日では、この分野で訪問者の注目を集めることが重要です。

Webを閲覧する画面の種類が異なるため、スクロールは当たり前のこととなっています。 視覚的な指示を使用して、ユーザーが下部に表示されるものがまだあることをすぐに認識できるようにします。

ユーザーの行動を監視し、ユーザーが最も頻繁に使用する画面解像度を確認します。 このようにして、最も価値のあるコンテンツがスクロールしなければ見えない位置に表示されるようにすることができます。