ランディングページにおけるファーストビューの作り方とは？

2022.08.01 Web制作

『第一印象は大切である』とよく聞きますが、Webの第一印象は、最初に表示されるエリア『ファーストビュー』が担っています。

サイトやページによりファーストビューの役割や表示させる内容は違いますが、詰め込みすぎて情報過多になりがちな領域です。いわゆる取捨選択が難しく、一番設計が難しいエリアだと感じております。

当社では広告運用のご依頼に伴い、ランディングページ制作のご依頼を多くいただきます。ランディングページを制作した際の経験や感じたこと・お客様とのやり取りを踏まえながら、ランディングページに置けるファーストビューの考え方や設計のポイントをまとめてみました。よろしければお役立てください。

本記事と併せて、ランディングページについて説明している記事もありますので、こちらもぜひご覧くださいませ。

⇒LP(ランディングページ)とは？特徴や有効な運用方法を解説

1 ファーストビューとは
2 ファーストビュー設計の前に確認すること
3 LPのファーストビュー設計のポイント
4 おわりに

ファーストビューとは

ファーストビューとは、ユーザーがWeb（ページ）にアクセスした際にスクロールをせずに表示されるエリアのことをいいます。簡単にお伝えすると、『最初に目に入ってくる領域』のことです。
スマートフォンでのWeb閲覧が当たり前になっている現在、ファーストビューは物理的にエリアが狭くなっており、何を置くのかといった取捨選択がよりシビアに難しくなっています。

⇒デジ研のファーストビュー

ファーストビューが重要な理由

ところで、なぜファーストビューが重要なのでしょうか。
それは訪問ユーザーの行動、「多くのユーザーが、Web（ページ）にアクセスした瞬間に『読む・読まない』の判断をし始め、滞在するかを数秒で判断してしまう」といった行動にあります。

ユーザーは検索ワードを入れ、Enterを押した瞬間から「知りたい情報がでてくるかな？（出てくると思う）」と無意識化で期待し始めます。そしてページが表示された瞬間から「期待していたモノが表示されたかな？」と情報の収集と考察・検討を開始するのです。そして約3秒でページに滞在するかどうか、読み進めるかどうかを決め、次の行動に移ります。

つまりはファーストビューが受け入れられないと、せっかく訪問してくれたユーザーが早々に離脱してしまうことになるのです。その離脱率はなんと60％。半数以上のユーザーがファーストビューのみ閲覧し、離脱してしまうのです。結果、お客様や我々制作サイドが伝えたいと思っていたことがほぼ伝わらず、意図したWebマーケティングが出来ないことになります。

『滞在時間に大きく影響する』存在が『ファーストビュー』であり、その理由から非常に重要なエリアと言えるのです。

LPにおけるファーストビューの役割

中でも、訴求したい内容やユーザーの知りたい情報を縦長のレイアウトの1枚のページにまとめた『広告用ランディングページ（LP）』のファーストビューの役割は、非常に重要です。

問い合わせや成約を求められる広告用ランディングページ（LP）ではファーストビューに『お問い合わせはこちら』など、コンバージョンエリアを設けることが多々あります。これはファーストビューが、再来訪ユーザーにむけ、『お問い合わせへの誘導（コンバージョン）』を行っているからです。

「ユーザーを引き止め」、「再来訪を促し」そして「お問い合わせへ誘導する」といった3つもの大きな役割を、LPのファーストビューは担っているのです。

RichEFOのファーストビュー
⇒「RichEFO」のファーストビュー

よく見られる「情報過多」の傾向

LPのファーストビューの重要性と役割を確認しましたが、その担っていることの多さの割には、ファーストビューエリアは非常に「狭い」です。PCはまだしも、スマートフォンはデバイス自体が小さいので、ファーストビューエリアに入れられる情報はかなり限られます。

しかし、ご依頼いただくお客様や制作する我々としては、その役割を踏まえると、『良さ』や『想い』・『写真』や『お問い合わせボタン』など、色々なものを入れたくなります。
結果、情報過多のファーストビューが出来上がり、『引き止め』も『誘導』もできないファーストビューが出来上がってしまうのです。

本来はワイヤーフレーム（設計図）やデザイン段階で気付くべき事項ですが、やはりWebページとして成立していない段階ではイメージがしづらく、ファーストビューの情報過多を止めることはなかなかできません。

ファーストビュー設計の前に確認すること

では、どのようにすれば、ファーストビューの情報過多を回避し、整理整頓された設計ができるのでしょうか。

制作全てに共通することですが、当初の目的から外れてくる（ブレる）と、大体失敗します。
目的から外れてくる要因の多くは、目的やプロセスを知らない・踏まえないで出される追加や修正指示であり、その結果、配置する情報を増やすことが往々にしてあります。

ファーストビューが情報過多にならないようにするためにも、プロジェクト立ち上げの要因や設計前に調査した内容を、設計前にチームでおさらいする必要があります。

LP制作の目的を再確認

まずはLP制作の目的を再度確認しましょう。
LPは単一ページで構成されることが多く、ファーストビューをはじめ、掲載できる情報量に限りがあります。目的の再確認と同時に、情報量に限りがあることをチームで共有し設計・制作に望みましょう。

強みとベネフィットの洗い出し

LPに掲載するサービスや商品の強み・ベネフィットをすべて洗い出しましょう。
そして洗い出した強みやベネフィットに、目的を踏まえた優先順位をつけましょう。すべてが一番ではないはずです。

ターゲットとペルソナ設定

ターゲットをきちんと確認しましょう。併せて詳細なペルソナを設定しましょう。
ただし、目的のブレをひきずったままターゲットやペルソナを設定すると、全く属性の違う2者にむけて発信しようとしてしまうことがあります。
必要情報が倍になる可能性もあるので、気を付けましょう。

ユーザーの閲覧環境の調査

ターゲットやペルソナが明確になると、より詳細な閲覧環境を調べることができます。
SPなのかPCなのか、実はタブレットによる閲覧が多いのか。参考サイトなどをもとに、ターゲットでよく使われるデバイスを確認し、実際のファーストビューの大きさを調査しましょう。

LPのファーストビュー設計のポイント

一通りの確認が終わりましたら、いよいよ設計です。
当社の経験を踏まえた設計のポイントをお伝えしますので、調べて確認したことと併せて、より良いファーストビュー設計に役立ててください。

①詰め込みすぎない

ファーストビューにおかれる要素

まずは、ファーストビューによくある要素をあげてみましょう。

ロゴ上にあるテキスト『タグライン』、『ロゴ』、『メニューボタン』、『メインとなるキャッチコピー』、商品やサービスなどの『画像』やベネフィットを感じさせる『メインビジュアル』。ぱっと思いついただけでも5つ以上の要素を上げることができました。

さらに、コンバージョン用の『簡易フォームタイトル』に『入力用フィールド』が2～3つ、加えて『お問い合わせする』ボタンを設置すると、あっという間に10個ほどの要素が配置されることになります。

人が認識できる情報量

人間が一度に認識できる文字数は13文字といわれており、かつて検索結果のタイトルの文字数も上記に習って表示されていました。
また一度に処理できる情報は、4つ（のまとまり）程度が限界と言われています。

先ほど挙げた要素の中で文字を使いそうなものといえば、『タグライン』『ロゴ（サービス名）』『キャッチコピー』『お問い合わせボタン』になりますが、13文字は軽く越えてくると想像できます。また、まとまりとしても見てもすでに4つになり、画像やフォーム項目などの他情報は目に入ってこないのでは？と懸念されます。

認識できる情報量を越えた場合

認識できる情報量をこえ情報過多になった場合、俗に言う『ごちゃごちゃした状態』になり、私たちが本当に伝えるべき情報を認識してもらえる可能性が低くなります。ユーザーにとって有益だったはずの情報がきちんと伝わらず、ユーザーが離脱してしまうことになります。

事前の確認を踏まえ、取捨選択をしましょう

伝えたいことが沢山ある状況はよくわかりますが、事前の確認を踏まえきちんと取捨選択をしましょう。そして詰め込みすぎを避け、ユーザーに価値ある情報が伝わるようにしましょう。

②キャッチコピーは簡潔に

目的および強み・ベネフィットをふまえ、キャッチコピーを制作しましょう。その際は簡潔に、より短いテキストにまとめるようにしてください。

先ほどもお伝えしましたが、人間の情報処理能力は『意外と低い』です。瞬時に滞在の可否を判断しようとするユーザーにとって、認識と理解に時間が掛かる長いテキストは邪魔にしかなりません。
結果として、内容が伝わらず離脱に繋がるといった状態に陥りがちです。

もし予算に余裕があるのであれば、プロのライターさんに依頼をかけることをお勧めいたします。言葉を短くリズムを意識してまとめることは、サイトやLP制作の中でも特に難しい作業の一つだからです。

③動きも意識する

情報の取捨選択が上手くいき、スッキリ設計されたファーストビューのデザインができたのに、要素を動かしすぎて失敗する場合があります。
印象をよくする・目を引くために取り入れたアニメーションが、足を引っ張るケースです。

「3秒で滞在をきめる」ユーザーは「せっかちさん」であり、待てません。
待てないユーザーに対し、ゆっくりとしたアニメーションの追加や連続したアニメーションを多用すると、離脱の可能性を高めるだけです。

ワイヤーフレームやデザインの段階で、構築時のアニメーションの可否や動かすイメージも想定して設計することを意識してください。

④ユーザー目線の設計

ユーザー目線の設計を意識しましょう。確認したターゲットやペルソナをいつも意識して設計し、伝えたい気持ちだけが先行しないようにしてください。

確かに設計初期のワイヤーフレームや構築前のデザイン段階では、構築後の印象まではなかなかイメージできないと思います。
当社ではワイヤー画像をスマートフォン画面で確認といったことや、他部署の同僚や家族にデザイン画像を見てもらうなどを行なっています。客観的な視点や反応を確認していくうちに、LP構築後のイメージが掴めるようになりました。

成果の最大化を目指すWebサイト制作

Webサイト制作に関して以下のお悩みを持ったことはありませんか？

「Webサイト経由のお問い合わせ数を増やしたい・・・」

「SEOに強いWebサイト制作会社を探してる・・・」

以前、私がWebサイト制作を外注する時に「成果を最大化するアドバイスがもらえるのか」「SEO要件を満たした会社なのか」こうした会社を見つけることが出来ませんでした。

当社はWebサイト制作はもちろんのこと、「Webマーケティングによる収益の最大化」を目指す会社です。なぜなら、SEOに強くCV数を最大化を図るWebサイト制作を相談することができるからです。また、経験豊富な専任コンサルタントが社内のSEOコンサルタントや制作チームと連携してWebマーケティングの収益最大化を目指すことができます。

当社の強みは以下にあります。