エンゲージメントを高めるための ファーストビューのデザインとは

この記事は How to Design Above the Fold Content for Uber-Good Engagement の抄訳です。

コンテンツを見た人は、離脱するかどうかをわずか8秒（恐らくそれ以下）で決めています。時間のカウントが止まることはありません。

ファーストビュー（スクロールせずに見えるコンテンツ）は、そのページを見続けたいと思わせるようなものでなくてはいけません。内容がすばらしいのにファーストビューが貧弱なページは、ひどい表紙のすばらしい本みたいなものです。表紙で中身を判断してはいけないと分かっていますが、誰でもそうしてしまいますよね。あなたのメール、ランディングページ、Webサイトの記事でも同じことが起こります。

ファーストビューは何よりも優先すべきコンテンツでしょうか？恐らくそうではないでしょう。ただ、デジタルユーザがWebサイトやデバイスをどれだけ行き来するかによっては、ファーストビューは重要になってきます。Buzzfeedのような見出しや魅力的なCTAが必ずしも必要なわけではありませんが、ページを訪問した人にきちんと価値を示すようなものにしましょう。

ファーストビューとは何を意味するのか？

ファーストビューとは、サイトに訪れた訪問者が最初に目にするコンテンツを指します。スクロールしなくても読めるものですね。

英語ではファーストビューを「Above the fold」と言い、新聞の折り目（fold）より上を意味します。新聞売り場では一番上の見出しと画像しか見えないので、手に取って続きを読みたいと思わせるものにする必要がありました。PCの画面には折り目（fold）はありませんが、ブラウザのウィンドウの縦幅より下のコンテンツはスクロールしないと見えません。

使用しているデバイスにもよりますが、この記事を開くと見出しと画像（＋テキストの一部）が表示されるでしょう。大きなナビゲーションバーやCTAがあるサイトでは、記事を見るのに下にスクロールする必要があります。新聞売り場を想像してみてください。ホーム、製品概要、ブログ、お問い合わせとだけ書かれた新聞が手に取られると思いますか？私はそうは思いません。

ファーストビューで見えるコンテンツはデバイスによって異なる

どのデバイス（モバイル、デスクトップ、タブレットなど）でコンテンツを見るかによって、ファーストビューは変わります。例えば、 Inspiration for Your 2020 Email Campaignsという記事を見てみましょう。私のスマホでは以下のように表示されます。

デスクトップだとこんな風に見えます。

どちらも見出しと画像が表示されますが、モバイルの方が本文が多く表示されます。コンテンツ（メール、ブログ記事、ランディングページ）をデザインする際には、さまざまなデバイスで見られることを想定しましょう。画面サイズが異なれば、ファーストビューも変わります。例えば、レスポンシブではない横向きデザインのページはスマホで見ると崩れてしまいます。

すべてのデバイスにコンテンツを最適化するわけにはいかないので、レスポンシブデザインにすることが重要です。SendGridの無料テンプレートギャラリーのメールデザインはすべてレスポンシブ対応であり、受信者がどんなデバイスを使っていてもすばらしい体験ができるようになっています。

ファーストビューをデザインするためのベストプラクティス

すばらしいユーザ体験を生み出すために、車輪を再発明する必要はありません。ファーストビューに特効薬はありませんが、デザイン改善のためにいくつかベストプラクティスをご紹介します。

1. 期待されている内容をきちんと示す
   メール、広告、ハイパーリンクからサイトを訪問した人に、期待した内容がファーストビューで表示されているかを確認してください。例えば、広告で「ホリデーシーズンのメール送信ノウハウTop10」と謳っている場合、リンク先で最初からその内容が読めるようにしましょう。
2. ファーストビューにすべてを詰め込もうとしない
   ドクターペッパーには23種類ものフレーバーが入っていますが、ファーストビューにはすべてを詰め込む必要はありません。最小限のアプローチでいいのです。ページをスクロールしたくなるような、画像と気の利いた見出しをファーストビューにしましょう。
3. スクロールを促す
   サイトの訪問者に、次のステップに進むにはスクロールする必要があると分かりやすく示しましょう。下向きの矢印など視覚的な記号を使ったり、“続きを読む”のような文字列があるといいでしょう。

4つの印象的なファーストビューの実例

実際のサンプルを見てみましょう。ファーストビューが優れているウェブサイト、記事、メールなどの例をいくつかご紹介します。きっと学ぶことがあるはずです。

SPIのウェブサイト

SPI（The Smart Passive Income）のファーストビューはすばらしいバランスです。

• ファーストビューはすっきり整理されていて、十分な余白があります。
• サイト全体の説明が4行でうまくまとめられていて、シンプルで目立つ“Get Started”というCTAもあります。
• 認知度が高いサービスのロゴが見えて、サイトの信頼性を高めています。

1つ残念なのは、“偽のフッター”ができてしまっています。スクリーンショットから分かるように、ブラウザの下部で完結していてこれより下に何もないように見えます。

視覚的な手がかりを追加したり、ファーストビューの一番下のコンテンツに続きがあるように作成することで、訪問者にとってスクロールすればより多くのコンテンツがあると分かりやすくなります。

Frontierのメール

Frontierからのこのメールは、ファーストビューに必要な条件をすべて満たしています。魅力的な画像（サンタ帽をかぶったフクロウを愛せないわけないですね）、ウィットに富んだコピー、そして割引情報が載ったシンプルなCTAがすべてファーストビューに収められています。

更に訴求力を高めるには、ファーストビューの下にある「今すぐご予約を！」というボタンをここに置いてもよかったかもしれません。しかし、このメールのファーストビューは全体的にとてもよくできています。

Trelloのブログ

私はTrelloの大ファンで、彼らのブログも大好きです。ブログ記事は完璧なファーストビューで、タイトル、著者、画像、読むと夢中になってしまう本文の断片まで表示されています。

足りない部分を挙げるなら、シンプルさです。「サインアップ」「はじめよう」「フォローしてください」「最近の投稿」など、訪問者の注意が逸れてしまう要素があります。ユーザにスムーズに移動してもらうために、ファーストビューはシンプルに保つことを忘れないでください。

Easton Training CenterのFacebook広告

SNSであっても、ファーストビューには注意してください。広告には文字数制限がありますが、制限ギリギリの文字数だとすべて表示されない可能性があります。

短く、シンプルにしましょう。Easton Training Centerのファーストビューは、2行のテキストで完結しています。（私は武道に興味がないので、ターゲティングは少しずれているかもしれませんが）
一方、下のDenver Nuggetsは登録すると車が当たるチャンスのようですが、途中までしか表示されておらず詳しいことはよく分かりません。

まとめ

ファーストビューのコンテンツを最適化すると、コンバージョン率が一晩で2倍になるわけではありませんが、ユーザ体験は前よりいいものになります。

ぜひこれらを試して、何が起こるか見てみてください。もし、コンバージョンの最適化を行いたい場合はWhat is CRO? Your Guide to Everything You Need to Knowをお読みください。測定可能な数値にインパクトを与えるような戦略を学ぶのに役立ちます。