出版の初期にさかのぼると、新聞の一面の上半分に掲載されるコンテンツに対して使われる用語として、「アバブ・ザ・フォールド」という用語が使われます。 折り目の上のコンテンツは、読者にとって最も目につきやすく、新聞販売店の前を通りかかった読者が新聞を買う気になるよう、一般的にキャッチーな見出しや鮮やかな画像で読者の注意を引くために使われていました。 1990年代初頭からウェブデザインが進化するにつれ、この用語は定着していきました。 では、ホームページのabove the foldは何を意味するのでしょうか？ そして、それは2019年にも重要なのでしょうか？
Why Is Above The Fold Important To My Website?
デジタルマーケティングの時代において、折り目はもはや新聞の実際の折り目を指すのではなく、ウェブサイトを訪れたときに最初にロードされるコンテンツを指し、あなたの注意を引きつけて引き寄せます
Webデザインの世界では、コンテンツのレイアウトと配置について心配されますが、折り目の上に現れるコンテンツとはウェブサイトの訪問者がページをロードするときに最初に見えるものであるためです。 そのコンテンツは、サイトの訪問者が最も注目する主要な場所であり、ユーザー エクスペリエンスに反映させる必要があります。 Jakob Nielsen氏は、「ウェブユーザーは、ページの折り返し位置より上の情報を見るのに、その時間の80％を費やしている」と推定しています。 今日、ユーザーはより多くスクロールしていますが、折り目の下にはまだ 20% しか注意を払っていません」
まず、自分のビジネス目標を達成するために最も重要なコンテンツは何なのか、自問する必要があります。
その質問に答えたら、その視認性の高い領域に何を配置すればよいかがわかります。
Quick Tips to Increase Conversion Rates
- Hero Image.Image.Photoshopを使用し、ユーザーの注意を引き、彼らが探しているコンテンツをすぐに提示しなければならない。 ここでは、あまりにもエーテル取得しないでください。 あなたの幸せな顧客はどのように見えるのでしょうか？ 彼らは何を経験しているのでしょうか？
- ヘッダーコピー：ポジティブな願望を呼び起こすようなイメージを表示します。 を恬る。 混乱させたら負けです。 あなたが何をしているかを正確に表示したり、相手が直面している中核的な課題に共感できるような、シンプルなメッセージにこだわる。
- 行動喚起（CTA）：プライマリCTAは明白で、ナビゲーションの右上隅とヒーローセクションに配置する必要があります。 明確なヘッダーコピーと、顧客の問題を解決するためにあなたのブランドを位置づける1～2文の行を組み合わせます。 少ないことは多いことです。 優れたWebサイトのデザインは、ユーザーを行きたいところへ正確に導きます。
- ロードスピード：あなたのホームページのロード時間は、訪問者がバウンスする原因になっているかもしれません！
広告を折り目の上に配置すると、可視性が向上し、あまり見えない場所に配置した広告よりも、広告収益が増加する。
Web デザインにおける「折り返し」の測定方法は？
要するに、Web サイトのどこに折り返しを配置するかを正確に定義することは不可能です。 正確な位置は、さまざまなモニター画面サイズ（デスクトップおよびラップトップ）、画面解像度、ブラウザ プラグイン、さまざまな携帯電話やタブレットのサイズによって異なります。
経験則として、ほとんどの Web デザイナーは、折り目の線はおよそ横 1000 ピクセル、縦 600 ピクセルであると認めています。 これは、最も一般的なモニターとブラウザーの組み合わせである 1024×768 ピクセルで、ブラウザー ウィンドウを最大化し、上部にコンテンツを押し下げるツールバーがインストールされていない状態からの最良の推定値です。
もっと知りたい場合は、ウェブサイトの分析プログラム（お持ちでない場合は、Google Analytics が最適）をチェックすると、訪問者に最も共通する画面の寸法を教えてくれるはずです。 従来は1024×768が一般的な画面サイズでしたが、モバイルでのWebサイト閲覧の増加に伴い、320×568や360×640などの新しいサイズが人気を集めています。
Mobile Viewing And Responsive Design
過去 2 年間で、モバイル デバイスでの Web 閲覧は大幅に増加し、そのため、above the fold コンテンツの Web デザイン最適化のコンセプトはさらに複雑になっています。 843>
Optimizely は、「多くの人がさまざまなデバイスで Web ページにアクセスするため、現在の Web デザインでは、柔軟なレイアウト、画像、カスケード スタイル シートを使用するレスポンシブ デザインを採用しています」と述べています。 レスポンシブデザインでは、ページのレイアウトが固定されておらず、コンテンツはあらゆるサイズのスクリーンにリフローされます。 レスポンシブ Web ページは、消費または閲覧される環境に反応する、つまり「応答」します」
。 Webサイトを閲覧するデバイスや画面解像度は非常に多様であるため、折り目はユーザーによって大きく異なるため、定期的に頼りにすることはできません。 しかし、最も重要な要素とコンテンツだけを折り目の上に配置するようにすることで、サイトのユーザビリティと適切なコンテンツを「折り目の上」に提供することの良いバランスを見出すことができるのです。
- 5 Homepage Best Practices
- 13 Ways to Increase Website Speed
ランディング ページからホームページまで、私たちはあなたのような企業が販売につながるユーザー体験を構築できるよう支援してきました。 このサイトについて