1. TOP
  2. ランディングページ(LP)のファーストビューに必要な5つの要素

ランディングページ(LP)のファーストビューに必要な5つの要素

ランディングページ この記事は約 7 分で読めます。
mk

ランディングページからの売り上げは8割ファーストビュー(ヘッダー)で決まります。

それほどまでにファーストビューは売り上げをあげるために重要な要素です。

ファーストビューで魅力を伝えられなければ、すぐに訪問者さんは離脱してしまいますからね。

今回はファーストビューで重要な5つの要素を解説します。

1. ファーストビューとは?

ファーストビューとは、
WEBページにアクセスした時に最初に画面に表示されるページの事です。

分かりやすく言えば、ページの上部の部分になります。

mock-up
このように今ではパソコン・スマホ・タブレットと、
様々なデバイス(端末機器)から人々はインターネットにアクセスするので、
デバイスによっては大きく見え方が変わる場合もあります。

サイトやブログを作成する時にレスポンシブWEBデザインを採用すれば、
自動でデバイスに合わせて画面表示の大きさを調節してくれるので、
今インターネットを利用してビジネスを行うのであれば、
レスポンシブWEBデザインを採用するのは必須項目となります。

Googleもスマホ対応しているサイトを優遇するアルゴリズムを採用しているので、
検索エンジン対策としてもレスポンシブ対応する事は重要なのです。

なぜこんなにもレスポンシブについて話すのかというと、
今回のテーマであるファーストビューにとても多く影響を及ぼすからです。

順番にファーストビューに必要な要素を解説していきます。

2. ヘッドコピー(キャッチコピー)

ファーストビューにおいて重要な要素。
それは、ヘッドコピーです。

ランディングページでは、
ヘッドコピーの良し悪しで成果の8割が決まります。

ヘッドコピーの時点で興味が無ければすぐページを閉じられてしまい、直帰率が上がってしまいます。

一方でヘッドコピーで興味を惹きつけられれば、
その後の文書を呼んでもらう事ができます。

続きを呼んでもらわない事には何も始まらないので、
とにかくランディングページにおいてはヘッドコピーが重要です。

なのでランディングページ作成においては
とにかくヘッドコピーを考える事に一番力を注ぎましょう。

3. ヘッダー(背景)画像

ヘッダーに画像や背景を挿入する事により、
テキスト(文字)以上に情報を伝える事ができます。

ヘッダー画像の選び方には3つの注意点があるので順番に解説します。

3-1. できる限りシンプルに

ランディングページやセールスレターを書く上でとても重要なこと。
それは “シンプルさ” です。

できる限りデザインをシンプルにした方が、
成約率を高める事ができます。

なのでまずはできる限りシンプルにするという事を前提にしましょう。

3-2. 絶対にヘッドコピーより目立ってはいけない

画像を選んでいると、
どうしても派手で分かりやすい画像を選びがちになってしまいます。

しかし、先ほど言った通りデザインで重要なのはシンプルさです。

特にデザインのせいでキャッチコピーのインパクトを薄める事だけは絶対にしてはいけません。

なのであくま画像はヘッドコピーの引き立て役である。
これを常にアタマに入れておく事が重要です。

3-3. テーマに合った画像や素材を選ぶ

人間は、違和感を感じるとその場から離れようという心理が働きます。
なので違和感を感じる画像を使ってしまうと直帰率が上がってしまいます。
直帰率とは、ページに来てすぐ閉じられていまった数値の事です。

例えばラーメン通販のランディングページなのに、
トップの画像が真っ赤なフェラーリだったら、

『えっ、高級外車専門の中古車店!?』

って思ってしまいますよね。

それと同じで、マンツーマン式の
プライベートダイエットプログラム販売のランディングページなのに、
地中海の透き通った海の写真をヘッダー画像に使ってしまったら、

『海外旅行ツアーの会社かな!?』

と思ってしまいます。
なので、

ラーメン販売ならラーメン。
ダイエットならダイエット。
ウェディングならウェディングと、
しっかり関連する画像を利用する事が重要です。

4. 成約率を最大化するコールトゥアクションの設置位置とは?

コールトゥアクション(CTA)とは、
一言でいえば “オファー” です。

CTAには、無料登録だったり、無料サンプルだったり、もしくは有料商品の販売等、様々なオファーがあると思います。

何らかのオファーがあるからこそ、
ランディングページを作成して集客する訳ですからね。

CTAには無料と有料で設置位置が異なります。
順番に解説します。

4-1. 無料オファー

無料のオファーをする場合は、
ファーストビュー内、もしくはファーストビュー直下や
最低でも1,5スクロール、もしくは2スクロール以内に最初のCTAを設置しましょう。

CTAとは決済ボタンだったり、
メルマガ登録フォームなどをイメージしてみて下さい。

無料なのでとにかく目立たせて、登録率を上げる事に注力する事が重要です。

なので最低でもページの最初に1つ。
そして最後の部分に1つ。
計2つの設置が必要です。

本文中にもう一つ入れたとしても3つぐらいになるでしょう。
4つ5つ入れると圧迫感を感じてしまうので、
2~3つぐらいが最適でしょう。

4-2. 有料オファー

有料のオファーの場合は、
ファーストビュー近辺にCTAを置いてはいけません。

『売り込みかよ!』

って思われてしまいますからね。
なのでしっかりとメリット・デメリットを伝え、
魅力も伝え、ページの最後付近に2つ、もしくは3つ設置するのが理想です。

なのでとにかく有益な情報と興味性を伝え、
最後まで呼んでもらう事が重要です。

5. ヘッダーではゴールを目指す

また話はヘッダーに戻ります。
それはヘッダー(ファーストビュー)がやはり一番重要だからです。

ヘッダーを見ただけで、
全てをしっかりと理解できるようにしましょう。

それはヘッドコピーもそうですし、
画像を使うようなら画像もです。

例えば3ヶ月で10キロ痩せる成功率90%の方法とか、
3ヶ月でビジネス英語をマスターする中級者向けオンライン英語講座のような感じです。

中級者の英語の場合は、初心者には無理だなーと思うので、
この時点で初心者の人は離脱すると思うので、
余計なお問い合わせにコストをかけずに済むようになります。

なのでとにかくランディングページでは、
ファーストビューが命である。
という事です。

まとめ

よくマーケティングの世界では、
ヘッダーで8割の売り上げが決まるから
ヘッダー作成に8割の時間を割けと言われております。

それほどまでにヘッダー、
今回ですとファーストビューが重要です。

冒頭でも言った通り、
今は様々なデバイスからアクセスがあるので、

27インチの大画面PCでLP作成の作業をしていた場合、
スマホでみるとデザインが崩れていたり、
文字が見にくかったりと、
全く違うように表示される場合もあります。

なので作ったらすぐ公開するのではなく、
しっかりと色々なデバイスから表示を確認しましょう。

ランディングページの作り方はステップアップ形式で以下の記事で解説していますので、ぜひ参考にしてみて下さい。

【保存版】売れるランディングページの作り方

ランディングページは作ったら終わりではなく、
テストと修正を繰り返し、どんどん成約率を上げて行くことが重要です。

\ SNSでシェアしよう! /

次世代ビジネス研究所の注目記事を受け取ろう

mk

この記事が気に入ったら
いいね!しよう

次世代ビジネス研究所の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

運営者紹介 運営者一覧

次世代ビジネス研究所

次世代ビジネス研究所

大学卒業後、某企業へ就職。
その後サラリーマン生活を経て、脱サラ・起業。
気まぐれで独り言を不定期更新。

関連記事

  • landing-page2

    ランディングページ(LP)作成ソフトを選ぶ時の5つのポイント

  • bd

    ランディングページの長さと成約率の関係。売れるLP構成とは?

  • landing-page

    ランディングページとは何か?わかりやすく解説してみよう【LP】

  • bp

    ランディングページの目的とは?有料・無料と活用方法を事例付きで解説

  • lp

    ランディングページを無料で作成する方法 | WordPressテーマSTINGERでのLPの作り方

  • web

    ランディングページ(LP)を外注さんに依頼する時に注意すべき7つのポイント