---

ニジボックスの案件事例をご紹介！

---

商品の購入や問い合わせなどのコンバージョン（CV：最終的な成果）に向けて、ランディングページ（LP）を作成している企業は多いでしょう。ランディングページは、コンバージョンの達成に欠かせないページですが、その中でも特に重要な要素がファーストビューです。

過去には『人は見た目が9割』※という書籍が大ヒットしましたが、ファーストビューはランディングページにおける見た目・第一印象に該当します。

※新潮社、竹内 一郎、2005年『人は見た目が9割』

この記事では、ランディングページのファーストビュー作成で意識すること、作成するための4ステップ、改善に役立つ3つのポイントと併せて、作成する際の注意点を解説します。

ランディングページについては以下のページで詳しく解説をしていますので、そちらも併せてご確認ください。

ランディングページ（LP）におけるファーストビューとは

ランディングページにおけるファーストビューとは、ページにアクセスした際に最初にユーザーの目に入る場所です。つまり、ランディングページにおける第一印象を決める要素といえます。

ランディングページとは、商品やサービスの訴求を目的としたWebページのことを指します。

ランディングページのファーストビューの役割は、ファーストビューを見たユーザーに自分たちが伝えたいメッセージを伝え、商品やサービスに興味関心を持ってもらい、最終的にコンバージョンの獲得につなげることです。
伝えたいメッセージには、自社の商品・サービスを買うことで、ユーザーの悩みを解決できるような要素が該当します。

ランディングページにおけるファーストビューの存在は、非常に大きなものです。
ユーザーがファーストビューを見て、自分の悩みが解決できそうだと判断してくれないと、そのまま離脱につながってしまいます。

そのため、ファーストビューでユーザーの興味を引けるかどうかが、コンバージョンに直結するといえるでしょう。

具体的なファーストビューのサイズ

日本でよく利用されているデバイスの画面の大きさは、各デバイスで次のとおりです。

• パソコン：1920×1080px
• タブレット：768×1024px
• スマートフォン：375×667px

ファーストビューは、一画面内に納まるようなサイズが好ましいとされています。一例として、ランディングページにおけるファーストビューのサイズは、以下を目安に微調整を加えるとよいでしょう。

• パソコン：幅1000～1200px、高さ550～650px
• スマートフォン：幅350～365px、高さ600～650px

画面いっぱいにファーストビューが広がると、デザイン的にも操作性からも好ましくない場合があります。そのため、ある程度の余白は確保するとよいでしょう。

また、デバイスの画面の大きさも、ユーザーによって異なります。

デバイスによってはファーストビューが崩れてしまう可能性があるため、画面サイズに応じて可変する「レスポンシブデザイン」での作成が好ましいといえます。

レスポンシブデザインについては以下の記事で詳しく解説しています。ぜひ併せてご覧ください。

ファーストビューでの離脱率は60％以上

Webページやランディングページのファーストビューでの離脱率は、平均で60％以上と高い傾向にあります。

ランディングページに限らず、ユーザーはWebサイトにアクセスした際には、訪問から3秒ほどで閲覧か離脱を決定すると言われています。せっかくランディングページに集客できても、即座に離脱されてしまっては意味がありません。

そのため、ランディングページのファーストビューでは、このランディングページが何に関するページなのか、見ることでどんなメリットが得られるのか、といった情報を的確に伝える必要があります。

ユーザーが訪問してから3秒以内に閲覧すると判断できるように、重要な情報は先んじて公開することが重要です。その上で、ユーザーに長く滞在してもらえるような設計をしなければなりません。

ファーストビューではWhat・Why・Howを意識することが重要

ファーストビューで即座に離脱されないようにするためには、「What」「Why」「How」を意識して訴求することが重要です。各要素について、具体的にどのような情報を記載すべきか、記載方法と併せて見ていきましょう。

What（何を手に入れられるか）

Whatは「何を手に入れられるか」という情報で、ファーストビューを見て、一目で何を購入できるのか分かるようにすることを意味します。
画像やキャッチコピー（ヘッドコピー）を用いて、視覚的・感覚的に訴えかけることが重要です。

多くのユーザーは、目的を持ってランディングページに訪れているため、「このランディングページでは何を手に入れられるか」が明確になっていなければ即座に離脱します。

文章として訴求することもできますが、前述のとおりユーザーは3秒で判断するため、画像やキャッチコピーを用いて一瞬で判断できるような工夫が必要です。

ランディングページのキャッチコピーについては下記の記事で解説しているので、ぜひ併せてご覧ください。

Why（なぜ手に入れるべきか）

Whyは「なぜ手に入れるべきか」という情報で、商材を手に入れるべき理由を伝えます。
具体的には、今まで多くのユーザーに使われてきた実績や、SNSなどでの話題性や有名人からの推薦、今だけ限定といったような形での希少性のアピールなどを行うといいでしょう。

人間心理として、社会的証明や権威、希少性などは興味を引きやすい要素です。
例えば、「○○部門第1位」「満足度97％」「1000社以上の導入実績」のようなキャッチコピーに、人は興味を引かれます。

どれほど良い商材だったとしても、興味を持たれなければ購入には至りません。ファーストビューでは、Whatと併せてWhyも一緒に訴求することが重要です。

How（どのように手に入れられるか）

Howは「どう手に入れるか」という情報で、主にCTA（Call To Action：行動喚起）が該当します。商品の購入ボタンや申し込みボタンを目につく場所に配置することで、ユーザーのアクションを誘導します。

ファーストビューにおいても、CTAは重要です。ユーザーによっては商材の内容を把握済みで、即座に購入や問い合わせをしたい場合もあるでしょう。
その場合に、購入ボタンや申し込みボタンが見つからなかったり、ページの最下部にしか存在しなかったりすると、途中で諦めてしまうことが考えられます。

商材に興味があっても手に入れる方法が分からず、コンバージョンを逃してしまうケースは少なくありません。
ユーザーが「欲しい」と感じたときにすぐに手に入れる方法が分かるように、CTAはページ全体で一箇所だけでなく、ページ内の分かりやすい場所に複数配置することが重要です。

CTAについては下記の記事で解説しているので、ぜひ併せてご覧ください。

ランディングページ（LP）のファーストビューを作成する4ステップ

ランディングページのファーストビューを作成する際には、次の4ステップで作成する方法がおすすめです。各ステップを一つずつ見ていきましょう。

1.ターゲットの絞り込み

実際にランディングページを作り始める前に、ターゲットを絞り込むことは非常に重要です。
多くのユーザーに訴求したいがために、ターゲットを広く取りたくなるかもしれませんが、ターゲットは狭く深く絞り込む必要があります。

情報があふれる昨今では、大多数向けの情報だとユーザーが自分自身に向けられたものではないと判断して、スルーされてしまう可能性が高くなります。
ひとりひとりに語りかけるような訴求方法が望ましいため、ターゲットを絞り込んで、そのターゲットに合った訴求をしましょう。
また、ターゲット像を作成することで、チーム間でターゲットの共通認識が持ちやすくなります。

ターゲットを絞り込む際には、仮想の人物像であるペルソナを設定すると、具体的な戦略を立てやすくなるためおすすめです。

ペルソナについては下記の記事で解説しているので、ぜひ併せてご覧ください。

2.キャッチコピー（ヘッドコピー）の作成

ターゲットを定めたら、次にターゲットに刺さるキャッチコピー（ヘッドコピー）を作成します。キャッチコピーを作成する際には、伝えたいメッセージをユーザー目線で考えることが重要です。

キャッチコピーで重要になのは、商材のメリットを伝えるのではなく、ユーザー目線になってベネフィット（手に入れることができる利益・結果）への共感を引き出すことです。
メリットとベネフィットは似たような意味がありますが、以下のような違いがあります。

• ベネフィット：商品・サービスを利用することでユーザーが得られる利益
• メリット：商品やサービスそのものの特徴や利点

例えば、業務効率化のソリューションの場合、「業務を効率化できる」はメリットであり、ユーザーにとってのベネフィットではありません。

この場合のユーザーにとってのベネフィットは、「効率化によって空いた時間で別のことができる」「新たな事業に取り組める」といったことです。

キャッチコピーには、ユーザーが自分自身に向けて発せられているベネフィットを感じられる、要素を含む必要があります。

ランディングページのキャッチコピーについては下記の記事で解説しているので、ぜひ併せてご覧ください。

3.メインビジュアルの決定

人に何かの情報を伝える際、文字だけでは伝えきれない場合が多くあります。
そのため、写真・イラスト・動画などを使って、視覚的に訴えかけることが重要です。

文字でも同じように情報を伝えることは可能ですが、写真などに比べて伝えるまでに時間がかかってしまいます。

写真・イラスト・動画は、文章よりも簡単かつ短時間で情報を伝えられます。
そして、ページ全体の色使いやトーン＆マナーも、あらかじめ決めたターゲットに合わせて、メインビジュアルと統一するようにしましょう。

メインビジュアルは、ユーザーの安心感や期待感に大きく影響を与えます。
設定したターゲット像に合わせて、適切なメインビジュアルを決定しましょう。

4.CTAの設置

商材に興味を持ったユーザーのために、購入や問い合わせといった行動を促すボタンを設置します。これらのCTAはページ内で一箇所だけでなく、複数箇所に設置することが重要です。

ランディングページを訪問する前に、購入や問い合わせを決断しているユーザーもいるため、CTAはファーストビューにも設定します。
その他に、ページの中段や下段にもCTAを設置し、ユーザーが決断したタイミングで即座に行動に移れるように導線を用意しておきましょう。

CTAは、ボタンとしてはっきりと分かるようなデザインや目立つ色使いを選び、申し込みや問い合わせのフォームも合わせて設置してください。

CTAについては下記の記事で解説しているので、ぜひ併せてご覧ください。

ランディングページ（LP）のファーストビュー作成・改善に役立つ3つのポイント

ランディングページのファーストビューの作成や改善の際は、次の3つのポイントを押さえることでより良いものになります。
コンバージョン向上のためには欠かせない要素のため、各ポイントについてしっかりと理解しておきましょう。

1.数字や実績、資格を入れて信頼性・権威性を高める

数字は、非常に説得力のある情報です。加えて、販売実績や資格、何らかの賞に選ばれているなどの情報を押し出すことで、信頼性や権威性の獲得につながります。

例えば、販売実績がない商材と、1000社以上の販売実績がある商材の場合、どちらのほうが信頼できるかは明らかでしょう。

また、権威性は社会的な承認です。
例を挙げると、病気について医者が言うことであれば信頼をおくことができ、法律においては弁護士が言うことであれば信頼をおくことができます。

医者や弁護士などの資格を持っている人の監修や推薦がもらえるのであれば、それを前面に押し出すことで権威性のアピールができます。

仮に、商品やサービスの性質上そのような有資格者が見つからない場合、特定の分野における第一人者や有識者としての証明ができれば、同様に権威性を示すことが可能です。

2.キャンペーンや購入のハードルを下げるメッセージを入れる

ランディングページを見ているユーザーの多くは、「本当にこの商材は良いものなのだろうか」と迷っている場合がほとんどです。

コンバージョンにつなげるためには、そのような不安を払拭し、迷いを解決してあげることが重要になります。

方法としては、「不明点があれば気軽にお問い合わせを」と伝えたり、購入後のサポート内容を明確に記載したりすることなどが挙げられます。
ユーザーが抱える不安や迷いを事前に考慮し、解決できるようなメッセージを入れましょう。

また、「今だけ限定」「数量限定」といった販売数を絞る方法や、「〇月までご購入の方は半額で購入可能」と金額面のメリットをアピールするキャンペーンも効果的です。

不安や迷いを抱えている状態は、ユーザーにとって購入・問い合わせのハードルが高い状態です。これらのハードルを下げ、ユーザーが行動しやすくするためにさまざまな施策を行いましょう。

3.強みやユーザー目線での価値に変換して伝える

キャッチコピー（ヘッドコピー）の作成でも述べたように、商材の強みをアピールする場合には、メリットではなくベネフィットを伝えることが重要です。ベネフィットは、ユーザー目線における価値に変換すると分かりやすいでしょう。

例えば、薄型のノートパソコンを販売する場合、「持ち運びしやすい」というのはメリットです。ベネフィットにするのであれば、「持ち運びが簡単で、どこでも仕事ができる」とユーザー目線で考えるとよいでしょう。

ユーザーの目線になり、「この商材を手に入れることでどのような利益を得られるのか」といった部分に注目して、訴求することが大切です。

ランディングページ（LP）のファーストビューを作成する際の注意点

最後に、ランディングページのファーストビューを作成する際の注意点を2つ解説します。ここまでしっかりと作り上げても、以下2点への考慮が漏れていると効果が薄れてしまうため注意しましょう。

1.情報過多になっていないか

ユーザーに多くの情報を伝えたいがあまり、情報過多になってしまうケースがあります。ファーストビューが情報過多になってしまうと、本当に伝えたい情報がユーザーに伝わらず、ユーザーが離脱することになりかねません。

例えば、文字だと人が一度に認識できる文字数は13文字※1、ミラーの法則によると一度に処理できる情報は4つ程度と言われています。情報が多すぎると「よく分からない」と判断され、離脱する可能性が高まります。

その点でも、文字だけに頼った訴求は難しいため、画像や動画を使った訴求方法も検討しましょう。

これらを踏まえ、ファーストビューに記載するテキストの文字数と、要素のまとまりを厳選することをおすすめします。

※1　出典：
出典：京都大学大学院　エネルギー科学研究科　エネルギー社会・環境科学専攻　下田　宏｜マンマシンシステム工学視覚系指標の計測と分析（１）- 眼球運動-

2.ページの読み込み速度が遅くないか

見逃しやすい点として、ページの読み込み速度が挙げられます。ランディングページでは、画面の表示速度も重要です。読み込みが遅いと、それだけで離脱される可能性が高まります。

特に、ファーストビューのメインビジュアルの解像度が高い場合、表示に時間がかかってしまいます。
そのため、画像の圧縮や画像フォーマットの工夫などを意識して、画像が表示される前に離脱されないようにしましょう。

ページの読み込み速度は、ユーザーが利用するデバイスによっても異なります。ターゲットがパソコンでアクセスするのか、スマートフォンでアクセスするのかなども考慮し、デバイスに合わせて画像や映像などの容量を調整しましょう。

まとめ

ランディングページのファーストビューは、ブラウザからアクセスした際に最初にユーザーの目に入る場所です。ファーストビューでの離脱率は平均60％以上と言われているため、ファーストビューで強くユーザーの興味を引かなければ、コンバージョンにつなげるのは困難でしょう。

この記事では、そのためにファーストビューで意識すべきことや、作成の4ステップ、改善の3ポイント、注意点を解説しました。これらを参考に、効果的なランディングページのファーストビューを作成してみてはいかがでしょうか。

また、ニジボックスでも、ランディングページ制作を行っています。
■事例はこちら：株式会社ネクスウェイ　BtoB特化LP制作パッケージを採用したリニューアル支援

「ランディングページで打ち出したい商品やサービスがあるが、どこから手をつけていいか分からない」
「ランディングページを作ったあと、きちんと成果につながっているかも分析したい」
というお悩みをお持ちの方は、ぜひ以下ページをご覧いただき、お気軽にご相談ください！
お問い合わせはこちら

下記資料では、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！