15 Compelling Above the Fold Content Examples to Inspire Your Own

8秒 – 平均して、これは人間のアテンションスパンの長さである。 つまり、マーケティング担当者であれば、コンテンツは8秒以内にターゲットオーディエンスを刺激し、喜ばせ、役に立つと思わせなければならないのです。 視聴者の共感を呼び、エンゲージメントを獲得しています。

セッション時間が短く、直帰率が高い場合、訪問者の注意を引くのに12秒以上かかっている可能性があり、リードの生成には最適とはいえません。 ブラウザがスクロールを開始するまでに、ランディング ページは説得力のあるものになるかもしれませんが、最初からまばゆく使いやすいものでなければ、ブラウザは簡単にクリックしてしまいます。

このことは、折り返しの上のコンテンツはおそらく、訪問者を引き付けるために作り直すことができることを意味します。 もし不安なら、新しい視点から自分のウェブサイトを見て自己テストをしてみてください。もしあなたが新しい視聴者だったら、一目見ただけでサイトに留まるでしょうか？

あなたの答えが「よくわからない」場合、心配しないでください、これから説明しますが、まず、コンテンツが折り返しの上にあることの意味について説明します。 組織の活動内容や関連するメリットを明確に伝えることで、Web ブラウザは、Web サイトの残りの部分やそのサービスを探索するよう促されます。 ロードが遅く、情報が密集し、使いにくいWebページは、おそらく逆のデザインのページと同じように読者を引きつけることはできません。

Above the Fold Website Design Best Practices

あなたのWebページをデザインするとき、これらの実践を心に留めておいてください。 このような場合、「ディアボロス」は、「ディアボロス」を「ディアボロス」と呼ぶことにします。 あるいは、課題に対する答えをすぐに見つけることができなければ、別のWebサイトを選ぶ可能性が高くなります。

ページをプロフェッショナルで、整理された、使いやすいものにするために、折り返しに1つの特集画像またはGIFやビデオなどのマルチメディアを追加してみてはいかがでしょうか。

魅力的なコンテンツにする

シンプルなウェブページは、ブラウザの注意を引きつける方法のひとつです。 しかし、そこに到達したら、彼らを喜ばせる機会を設けましょう。 たとえば、見出しや本文を書くときは、ブランドの声を反映させるべきです。

ブラウザを喜ばせるために、大きな変更を加える必要はありません。 たとえば、ページにCTAボタンがある場合、「詳しくはこちら」ではなく、「始める準備はできましたか？ プロフェッショナリズムとWebサイトの他の部分との一貫性のために、ブランドカラーを取り入れるのがよい経験則です。

何よりも、コンテンツは対話しやすいものでなければなりません。 たとえば、製品ページの折り返し部分のコンテンツに取り組んでいる場合、折り返し部分のコンテンツが正常に機能していることを確認します。

製品ページの折り返し部分のコンテンツが動画だとします。 正しく読み込まれ、キャプションやサウンド オプションが含まれていますか。

さらに、ユーザーの体験について考えてみましょう。 折り返し部分の上のコンテンツに自動再生される動画がある場合、ユーザーのページでの操作を中断してしまうのではないでしょうか。 この問題に対処するために、ビデオは無音で再生され、必要に応じて字幕が表示されるようにします。

読者の課題を解決する

折り返し部分のコンテンツは、ブラウザの課題に答えるものでなければなりません。 例えば、あなたがメールマーケティングサービス会社で働いていて、ブラウザで「メールマーケティングソフトウェア」と検索し、あなたのホームページにたどり着いたとしましょう。 たとえば、見出しに「マーケティング担当者のためのメール自動化」と記載し、サポートテキストでそれを拡大することができます。

15 Compelling Above the Fold Content Examples to Inspire Your Own

Wistia

Wistiaでは、ユーザーがマーケティング キャンペーン用のダイナミック ビデオを作成できます。 マルチメディアを組み合わせたWistiaのサービスを紹介するコンテンツです。 3353>

Image Source

ホームページの動画は、ブラウザを停止させます。 Wistia のサービスを説明するトークショーにインスパイアされたクリップを見るのに、より多くの時間を費やすことになりそうです。 消費者としては、ウェブページに実際の人が登場すると、興味をそそられ、さらに探索したくなるものです。 シンプルなホームページの歓迎された雰囲気は、プロフェッショナルな雰囲気を伝えてくれます。 そして、動画の後、ブラウザは、専門家のマーケティング担当者から直接、ソフトウェアの提供内容について知ることができます。

Velocity Partners

B2B マーケティングエージェンシーのVelocity Partnersは、折り目の上のコンテンツに会社概要の動画を持っていません。 その代わり、ホームページには魅力的なインタラクティブ スライドショーがあり、革新的なマーケティング担当者が新しいコンテンツ形式を活用して、よりさわやかなストーリーを伝えるべき理由を説明しています。 Velocity Partnersのabove the foldメッセージは、好奇心を刺激し、スクロールを続ける動機になります。

ただし、Velocity Partnersと同様のabove the foldコンテンツを使用したい場合、コピーと同様に、スライドショーの最初の数秒間が最も魅力的であることを確認することが重要です。

VeryGoodCopy

VeryGoodCopy は、ブランド向けの記事、ランディングページ、ウェブページ、電子メールを作成するクリエイティブエージェンシーです。 このウェブサイトでは、折り目の上に、同社がユーザーに提供できるものをコピーで表現しています。

画像ソース

この見出しは、十分な余白、魅力的な見出し、コンテンツのトピックに関する簡潔な説明、社会的証明、および鮮やかなコールトゥアクションを活用することによって説得方法を学ぶ機会をマーケターに与えていることが伝えられています。

Shopify

ShopifyのWebサイトでは、折り返しの上にあるコンテンツが読者を探索に誘う方法として、画像を使用しています。

Image Source

トップページには、ブラウザに印象を残すために、芸術的な画像と魅力的な動画が含まれています。 また、コピーは少ないものの、タグラインには目的が詰まっており、トライアルを開始するために緑色のCTAをクリックするよう訪問者に促しています。

Ann Handley

このWall Street Journalのベストセラー作家でMarketingProfsのパートナーのAnn Handleyは、自分のウェブサイトでホームページを使って、マーケティングの手腕を強調することでブラウザに印象を与えています。 ハイパーリンクとリンクはここでのヒーローです。ウェブサイトの他のページへのリンクは、Handley氏の見出しのように、サイト上のさまざまなページでより多くのクリックを獲得することができます。 このホームページから、訪問者はHandleyがどのような人物で、何をし、どうすれば彼女に連絡できるかを知ることができます。

Mint

折り目の上のコンテンツは、予算編成ソフトウェアであるMintのように、シンプルであることを最大限に生かすことができます。 シンプルでありながらプロフェッショナルなホームページは、会社と、彼らがどのように顧客を助けることができるかを効果的に伝えています。

見出しのコピーに注目してください。 これにより、ブラウザは、サインアップすることを決めたらアプリがどのように見えるかを視覚化できます。

InVision

どのようにして、顧客ストーリーを折り目の上に動的に表示するのでしょうか。 InVision の洗練された例を見てみましょう。

画像ソース

InVisionは、ユーザーが簡単に洗練された印象的なWebサイトを構築できるデジタル製品デザイン会社です。 Uber や Twitter などの企業の意思決定者からの証言を含む、同社の概要ビデオの無音版を自動的に再生します。

ビデオの上に配置されたコピーでは、同社がユーザーに何を提供するかを簡潔に説明しており、「永久無料」の CTA は、ウェブサイトのデザインを考えていないマーケターの私を、ソフトウェアの提供についてもっと学び始めようとさえ思わせました。 Dantley Davis, Netflix Design Director」は、ユーザーが見ていないときに目を引くことができる、十分に大きな下3分の1のサイズです（私の場合は間違いなく目を引きました）。 その代わりに、訪問者は「世界最高のコンテンツマーケティングはここで起こる」という見出しで迎えられ、私のようなマーケティング担当者は、その方法を知るためにさらに読むように誘われるのです。

Image Source

CTA コピーは、一般的な CTA ボタンとは異なっています。 「ここをクリックして詳細をご覧ください」ではなく、「話しましょう」とすることで、訪問者がCTAをクリックすると、サービスに関する詳細な情報を提供できる本物の人間につながることを暗示しています。

Ahrefs

もしかしたら、あなたが勤めている会社は、過剰な情報でページを埋め尽くすことなく、製品の良さを伝える、無意味なホームページを望んでいるのかもしれませんね。 そのような場合は、Ahrefのabove the foldのアプローチを見てください。

画像ソース

ウェブページの見出しは、ユーザーがSEOを改善するのを助けるという、このサービスが何をするものなのかを説明しています。 これはさらに小さな見出しによってサポートされ、CTAはブラウザに価格情報を伝えます。

Satisfied customers are listed at the bottom, right before the fold, to give a round-out overview of how Ahrefs can be a benefit to successful companies.This is further supported by the smaller headline, and CTA communicating to browsers pricing information.

Satisfied customers are listed at the bottom, right before the fold.

Twitch

ブラウザにTwitch.tvと入力すると、すぐにこのウェブサイトが提供するもの、つまりゲーマー向けのライブストリームに没頭することができます。 ブラウザでサイトにアクセスするとすぐに、注目のライブ ストリームの自動再生が始まります。

画像ソース

突然ブラウザから声が聞こえてくると、少し違和感がありますが、Twitch の above the fold デザインでは、サービスに関するコピーは一切使用されていません。 その代わり、ユーザーは、アカウントを作ったり、何かを読んだりすることなく、ストリームをブラウズして、すぐにコンテンツに飛び込んで、自分でデモを行うことができます。 スクロールを続けて人気のあるストリームを確認し、それをクリックし、そこからサイトの機能を探索することができます。 Twitch は、訪問者が何も読まなくても、サービスを試用できるようにしています。 Twitchのような視覚的なプラットフォームは、この方法の恩恵を受け、視覚的な学習者と非視覚的な学習者を同様に引き込むことができます。

Skillshare

Skillshareは、折り目の上で自社サービスの大部分を説明するために動画を使用しています。 このソフトウェアはさまざまな科目のオンライン クラスを提供しているため、動画では、Skillshare が何を達成し、何を学び、何を感じることができるかの概要が表示されます：

Image Source

動画では自信に満ちた表情で自分の情熱に飛び込んでいる大人が取り上げられていますが、これは Skillshare がユーザーの役に立てることです。

Flock

自分の会社のWebサイトが、折り目の上にあるコンテンツのメディアミックスから恩恵を受けることがわかっている場合、メッセージングアプリのFlockのようにアプローチすることを検討してみてください。 ホームページでコンテンツのミックスを使用する際の鍵は、初めてウェブサイトを訪れた人の体験を情報が邪魔しないようにデザインすることです。

画像ソース

GIF を使用して、アプリの機能を表示する変更テキストを強調していることに注意してください。 手書きの画像はFlockの仕組みを説明し、CTAテキストはちょっとした個性を表現しています。

King Arthur Flour

ボストンに拠点を置く製パン材料サプライヤー、King Arthur Flourの折り返し上のコンテンツは、最高級の内容になっています。

Image Source

Facebook ページ（このビジネスのベーキング ショーを開催）、レシピ、ベーキング FAQ、購入できる製品、そしてお問い合わせページとして機能する「ベイカーズ ホットライン」など、この会社のサービスを感じることができました。

光沢のある写真と独自のCTAを備えたスライドショー機能により、パン職人を目指す人のために同社ができることのすべてを把握することができました。

Clarkisha Kent

あなたは、フリーランサーで、どのようにあなたの上の倍コンテンツを競合の中で目立たせるかについて悩んでいますか？ もしそうなら、ホームページをデザインするときに、2つのことを達成するようにしてください：個性の表示と簡単なナビゲーション。

これは、特にフリーランサーとして、あなたの仕事はあなたに先行する必要がありますが、あなたの個性もそうだからです。 もしあなたがクラークシャ・ケントのようなライターなら、彼女のウェブサイトのように、あなたのコピーはそれを売り込まなければなりません。

画像ソース

ヘッドショットと興味深い見出しを含めることで、Kent氏がライターとして誰であるか、またウェブサイトへの寄稿者として彼女が取るであろう角度がすぐに表示されます。 彼女のナビゲーション バーには、彼女が行ったバイラルなツイートや他の出版物からの切り抜きへのリンクが含まれているので、ホームページにはその必要がありません。 ブラウザは、クリフハンガー テキストのあるミニマルなウェブページに引き込まれると、そのギャップを埋めるためにウェブサイトを探索することに興味を持つ可能性が高いのです。 例えば、「Chaos bringer」と書かれた文章を読んで、「どうやっているんだろう」と思い、彼女の過去の作品を見ることになりました。

Good Witch Kitchen

これもフリーランスや中小企業の経営者が、自分のブランドの個性をどう伝えるかという例です。 Good Witch Kitchenは、ホリスティック栄養士、クリステン・チッコリーニのビジネスの名前です。 折り返しのすぐ下には、Ciccoliniさんの仕事を取り上げた出版物の簡単なスライドショーがあり、その後に紹介に入ります。

Image Source

Ciccoliniさんのロゴ、彼女の技術に関する明るい画像、そしてコピーで、Good Witch Kitchenが伝える雰囲気を簡単に確認することができます。

ランディングページで顧客を惹きつけておく方法について、いくつかのヒントを得たところで、あなたのところではどの戦略を使うつもりでしょうか？

あなたが思いつくものを見るのが楽しみです。