ユーザーは、Webサイトを訪れた瞬間にそのサイトが自分にとって価値があるものかどうかを判断します。その一瞬の間に目にする部分が「ファーストビュー」です。
この第一印象が良ければ、ユーザーはそのWebサイトに興味を持ち、読み進めてもらうことができ、逆に、興味を持ってもらえなければ、たちまち離脱してしまいます。
では、どうすればユーザーの心を掴み、サイトに興味を持ち続けてもらえるのでしょうか？ 本コラムでは、効果的なファーストビューを作るための5つのデザイン戦略を解説します。このポイントを押さえることで、訪問者に強い印象を与え、滞在時間を延ばすことができるようになるでしょう。
なぜ、ファーストビューが重要なのか？
北街ファーストビューが、訪問者に与える影響は非常に大きいです。コーポレートサイトで、ファーストビューだけ見て、サイトを離れてしまう人が、なんと、40％〜60％いると言われています。
人は、3秒でWebサイトを見るかどうかを判断します。では、あなたのWebサイトは、ファーストビューで、顧客の心を掴んでいますか？ 実は、これからお話しする5つのデザイン戦略を意識して、ファーストビューを作り込むと、第一印象がガラリと変わります。それでは、ファーストビューにおける「第一印象で差をつける5つのデザイン戦略」について詳しく解説します。
ファーストビューとは？
ファーストビューとは、ホームページに訪れた時にスクロールせずに見れる領域のことを言います。
ファーストビューのサイズ
ファーストビューのサイズは、ディバイスによって異なります。目安として次のサイズが参考にしてください。ディバイスごとのファーストビューのサイズ感は、スクリーンの解像度と比率、ブラウザーの設定によっても異なります。実際のディバイスで表示させて違和感がないか確認することが重要です。
- PC（デスクトップ）
- 解像度の目安：1920×1080ピクセル
- ファーストビューの高さ：700〜900ピクセル
- ヘッダーやブラウザのツールバーを除いた部分がファーストビューになります。全体の高さはスルロールせずにユーザーが見える範囲になります。
- タブレット
- 解像度の目安：834×1194ピクセル
- ファーストビューの高さ：600〜800ピクセル
- 横向きの場合、ファーストビューの範囲は変わりますが、目安として600ピクセル前後が見やすいと言われています。
- スマートフォン
- 解像度の目安：375×667ピクセル（iPhone SE）、393×854ピクセル（iPhone 15 Pro）
- ファーストビューの高さ：500〜700ピクセル
- スマートフォンは画面が小さいため、ファーストビューの範囲は限られます。ユーザーがスクロールする前に見られる部分がファーストビューです。
この領域で、顧客の心を掴まないと、先を読んでもらうことはできません。ただ、情報を詰め込み過ぎると、情報過多で読んでもらえなくなってしまいます。逆に、情報が少ないと、言いたいことが伝わらなかったり、魅力を感じてもらえません。では、どのくらいの情報量が適正なのか？
一般的に、
- 人が認識できる文字の上限は13文字（Yahoo!ニュースのタイトル文字数）
- 人が処理できる情報のカタマリは±４（ショート・タームメモリ マジカルナンバー4）
と言われています。
北街非常に短い言葉で、顧客の興味を引かなければいけないということです。
Webサイトにとってのファーストビューの重要性
今や企業にとって、ホームページはなくてはならないもの。先ほども話しましたが、人は3秒で読むか読まないかを決めます。なので、せっかく訪問してくれた顧客の約6割を3秒で失っていることになるのです。致命的な問題です。
特に認知度の低い会社は、顧客を取りこぼしている余裕はありません。ファーストビューに最大限の注意を払うべきです。
なので、これからお話しする５つのポイントに注意をして、ファーストビューを作り込んでください。滞在時間が驚くほど変わってくるはずです。
【ファーストビュー戦略1】強力なキャッチフレーズを作る
顧客に、先へ読み進んでもらうには、当たり前ですが、「先が読みたい！」と思ってもらわなければいけません。では、どうしたら、先が読みたいと思うのでしょうか？
答えはとてもシンプルです。
北街パッと見た瞬間に、このページは「自分のためのページ」だとわかってもらうことです。
自分のためのページだと、わかってもらうには、
- メッセージ（キャッチフレーズ）
- イメージ画像（メインビジュアル）
- 説得力のある証拠（権威性）
という順番で伝えていきます。
なので、まず①の「メッセージ」から作り込んでいく必要があります。メッセージがはっきりしていないのに、ビジュアルで興味を引こうと思っても、うまくはいきません。まずは、言いたい言葉（キャッチフレーズ）から考えていきます。
キャッチフレーズを考える際に、注意しなければいけないのが、大企業のようなキレイな言葉にしないということです。かっこいい言葉だと、どうしても、自分のための情報と感じてもらえないからです。
一瞬で、自分のための情報とわかってもらうためには、3つの情報を伝えることを意識します。その3つとは、
- 誰が（対象となる顧客を限定する）
- 何で（どんな特徴のある商品で）
- どうなる（どんな効能があるか、効果・効き目）
この３つをファーストビューに詰め込んでいきます。
誰が（対象となる顧客を限定する）
顧客は悩みや問題を解決したくて、情報を探しています。
あなたも、ネットで調べものをしている時、何か問題や悩みを抱えていることが多いはずです。あなたのホームページを訪れる顧客も同じです。何かを探しています。
北街なので、「〜でお悩みの方」「〜になりたい方」と、顧客を限定して呼びかけるのは、効果的です。
独身男性に、「今年中に結婚相手と出会いたい方」と呼びかければ、つい見てしまうのと同じ。「このページは、自分のためのページかもしれない」と思って、先を読み進めることになります。
何で（どんな特徴のある商品で）
次に、どんな特徴を持つ商品・サービスなのかを伝えます。もし、販売する商品のページなら、「これは、まさにあなたが探している、あなたにぴったりの商品ですよ」というメッセージを伝えます。情報提供のページなら、「これは、まさにあたなたが探している情報ですよ」と伝えます。
ただ、ファーストビューは、スペースが極めて限られています。なお且つ、一瞬で伝えなければなりません。なので、商品紹介ページなら、受賞歴や取材歴、成分や販売実績、短納期や販売エリアなど、圧倒的なキーフレーズで、顧客の心を一瞬で捕まえるようにします。
情報ページの場合は、書いてある内容を端的に伝えるフレーズを書くようにします。何よりも重視しなければいけないのが、「あなたの探している情報は、これですよね」と具体的に示すことです。
どうなる（どんな効能があるのか、効果・効き目）
人は、商品そのものを欲しいと思うのではなく、その商品から得ることができる価値を買っています。いわゆる、「ドリルを買いに来た人が欲しいのは、ドリルではなく穴である」というレビット博士の格言です。
人は薬がほしいのではなく、薬から得ることのできる効能を買っています。マーケティングでは、メリットではなくベネフィットを伝えることが重要だと言います。ファーストビューには、商品から得ることができる効果・効き目、ベネフィットを書かなければいけません。
「誰が、何で、どうなる」を具体的な言葉にする
これらの言葉を、具体的なキャッチフレーズにします。
- 誰に（対象となる顧客を限定する）
- 何で（どんな特徴のある商品で）
- どうなる（どんな効能があるか、効果・効き目）
それらの言葉が、しっくりいくまで、考えてください。
「このページは自分のためのものだ」と思ってもらえるドンピシャなフレーズをつくってください。
【ファーストビュー戦略2】強力なビュジュアルで心を掴む
北街「誰が、何で、どうなる」が、しっくりいくフレーズになったら、それを並べて眺めてみます。
ただ、言葉だけでは伝える情報に限界があります。３つ情報を、言葉がいいのか、画像がいいのか、マーク・アイコン化したほうが伝わりやすいのか、パズルのように組み合わせていきます。
例えば、20代の女性への、スキンローションを販売するなら、
「誰が」は、20代の女性の写真にし、「何で」は、スキンローションの写真と成分の含有量、販売実績を目立つように装飾したマーク、「どうなる」は、キャッチコピーというように、一瞬でイメージできるように3つの情報をビジュアル化していきます。
人は3秒で読み進めるかどうかを決めます。全部を見るのではなく、ほんの一部しか見ていません。いわば氷山の一角です。
Webサイトも、ほんの、ほんの、ほんの一部しか見ずに、読むか、読まないかを決めています。スクロールせずに見える範囲内で。主導権は100％顧客が握っています。なので、顧客が見る、水面から出ている氷山一角に、顧客の注意を引く要素をすべて入れ込まなければならないのです。
あなたのホームページが読まれるか、読まれないかは、このたった3秒で決まります。
「３、２、１、ゼロ」以上。選んでもらえましたか？
選ばれるためには、強力なビジュアルで心を掴む必要があります。
魅力的な画像で短期決戦を勝ち抜く
北街1分間で伝えるられる文字の情報量は、300字と言われています。それに対して画像は2000字。情報量は、ざっと7倍です。
300字を60秒で割ると、1秒で5文字。3秒では15文字程度になります。ヤフーのタイトルが13文字というのもうなづけます。それに対して、画像の情報量が2000字だとすると、１秒間に33文字。3秒間に100文字程度の情報を伝えることができる計算です。
短期決戦を勝ち抜くには、魅力的な画像にまとめなければいけない理由がここにあります。
【ファーストビュー戦略3】検索キーワードを適切に配置する
北街想定しているキーワードが、ファーストビューで目に留まるだろうか？
検索結果からサイトにアクセスした際に、検索キーワードが目に入ってこないと、自分が探しているページではないと判断されてしまいます。なので、ファーストビューには、検索キーワードのテキスト、または、イメージできる写真を配置するようにします。
検索キーワードが、検索結果のタイトルタグやディスクリプション、そして、ファーストビューに適切に配置され、一貫性が取れているかを、ぜひ、確認してください。
顧客は、自分のためのページを探しています。検索窓に「言葉」を打ち込み、検索結果の中の言葉からアクセスするサイトを選び、アクセスしたサイトのファーストビューの「言葉」「ビジュアル」のつながりで、自分のページかどうかを判断します。
【ファーストビュー戦略4】データから最適化と改善
どれだけ考えても、100％成功することはできません。しかし、失敗してもめげる必要はありません。チラシは反応がでなければ失敗だが、ホームページは、失敗しても改善して反響を増やすことができるからです。
ファーストビューもデータを見ながら、改善することが重要です。では、どのように改善するのか？
- 課題の仮説を立てる
- 「誰が、何で、どうなる」の改善案を考える
- その結果どうなるかを予測する
- 効果を計測しPDCAを回す
【ファーストビュー戦略5】CTAボタンを挿入する
北街特に、商品ページのファーストビューには、CTAボタンを入れるようにします。
CTAボタンとは、ユーザーに行動（購入や申し込み）を促すためのボタンのことです。ホームページを訪れる人は、はじめての人ばかりではありません。購入や申し込みをする顧客のほとんどが、複数回の訪問者だからです。
なので、最後まで読まなくても、購入を希望する人がいます。取りこぼしのないように、わかりやすい場所にCTAボタンを配置するようにします。
まとめ
ファーストビューで、訪問者の心を掴む５つのポイントは、非常にパワフルです。なんと言っても、半分近くの顧客は、ファーストビューでサイトを離れているからです。ここを改善するだけで、コンバージョン数が大きく変わってきます。
改善のポイントは
- 強力なキャッチフレーズを作る
- 強力なビジュアルで心を掴む
- 検索キーワードをファーストビューに配置する
- PDCAを回し改善、最適化する
- CTAボタンをファーストビューに配置する
ぜひ、改善を繰り返し、結果に結びつけてください。もし、もっと深く改善したいとお考えなら、「繁盛ホームページ【9日間プログラム】」にチャレンジしてください。
