ランディングページのファーストビュー(表示して最初に画面上で見れる部分)は訪問者が下にスクロールするか(先を読むか)、ページを閉じて離れてしまうかが決まる一番重要な部分です。幾つかデザインの構成パターンやファーストビューに表示するべき項目を知っておくと、素材を見つけたりイメージを膨らませるのも楽になると思い、22つの実例を分類してみました。

sponsored link

ファーストビューを構成するパーツ

ファーストビューはほとんどの場合以下のパーツからできています。

  • 背景部分
  • フロント部分(背景に対して)
  • キャッチコピー
  • CTA(コールトゥアクション)ボタン
  • ヘッダーナビ(ロゴ・メニュー・連絡先情報など)
  • 付加的情報(対象ユーザ、実績、効果)

それぞれのパーツにも幾つか種類があり、何を使うか、どんな組み合わせにするかによってファーストビューの印象が変わってきます。

もちろん、配置とかパーツの大きさとか、デザインスタイルも重要ですが、まず今回は上記のパーツにどんな素材を使えるのか、実際のLPの例から見てみます。ちなみに、以下で紹介するLPはキャプチャ画像をクリックすると該当LPが新しいタブで開きますので気になったものがあったら実物でチェックしてみてください。

 

背景部分

ファーストビューのなかで一番大きな面積を占めるのが背景部分です。背景の素材が変われば印象もガラっと変わるので、LPが扱う商品・サービス、対象ユーザーに合わせてどんな素材を使うのか注意深く検討したいところです。

背景素材の種類には以下のようなものがありました。下に行くほど情報量も多くなって、背景からユーザーが受けるインパクトも大きくなります。それぞれ例を挙げてみます。

 べた塗りまたはグラデーション(1~3色)

背景がべた塗りまたはグラデーションのLPは、シンプルで情報量の少ないファーストビューのデザインが多いと思いました。

シンプルにすることに徹したファーストビューともいえるかもしれません。インパクトはないですが、余計な装飾がない分、分かりやすいというメリットもあるかと思います。

デザインにフォトショップやイラストレータを多用する必要もないのでLPを始めて作るときはこういうシンプルなものから始めてもいいかもしれません。

べた塗り・グラデーション背景の例

lp-eg2

 

lp-eg1

 

lp-eg3

 

パターン素材

背景にパターン素材を使うと(使うパターンにもよりますが)カジュアルでポップな雰囲気をだせます。

背景パターン素材+フロントに写真かイラスト素材+画像フォントという組み合わせは結構よくあるタイプのLPファーストビューかなと思います。

Web上の無料・有料素材を使って、Photoshop上でさほど難しくなく作れそうです。

パターン素材背景の例

lp-eg7

 

lp-eg5

 

 

イラスト・グラフィック素材

背景にイラスト・グラフィック素材を使うとパターン素材やべた塗背景などよりオリジナリティ、インパクトが上がります。でも写真や動画素材ほど情報量が多くならないので、キャッチコピーなどの文字も目立ってちょうどよい感じ。私はこのタイプが一番好きですね。

でもイラストやグラフィックで製品・サービスの特徴を表すのが難しかったり、デザインセンスやスキルも求められるので難易度的は一番高そうです。

イラスト・グラフィック素材の背景の例

lp-eg11

 

lp-eg18

 

写真

写真を全面背景に使ったファーストビューもよく見かけます。写真さえしっかり選べばそれだけで印象的なファーストビューになりそうです。以下の例にもあるように、製品・サービスに合うように写真にイラストを追加したり、エフェクトを使ってキャッチコピーが目立つような編集をするなどの一工夫を加えるのがポイント。

無料写真素材も最近は充実していますが、ファーストビューくらいPixtaなどの有料の写真素材からちゃんとしたものを選びたいところです。

写真背景の例

lp-eg13

 

lp-eg22

 

アニメーション・スライド

グラフィックアニメーションやスライドを使って動きのある背景にしているLPもと見かけました。動きがあると自然と目がとまりますし、効果的に使えばよいブランディングにもなりそうです。

でも難易度はあがりますね(特にアニメーションは)。

lp-eg17

 

lp-eg4

 

動画

ファーストビューの背景全体が動画というのも時々あります。キャッチコピーその他の言葉で伝えるより動画のほうが断然良さが伝わる製品・サービスならぜひ取り入れたいところです。わざわざ動画を撮るとなると大変ですが。

動画を背景にした例

lp-eg15

 

lp-eg16

 

上記の複数組み合わせ

写真素材だけだとインパクトに欠ける、ブランディングという面からも何か物足りないというときに、写真とグラフィックを合わせて印象を変えることができます。以下はその一例。

lp-eg21

フロントパーツ

どういう風に表現したらいいか分らなかったのですが、「背景パーツ」に対して、「フロントパーツ」と書くことにしました。キャッチコピーの隣などに表示されるイラストや写真素材です。商品やサービスを連想させるものだったり、単にキャッチコピーへの注目をより集めるために使われている場合もあります。

  •  シェイプ・数字
  • イラスト
  • 写真

 

シェイプ・数字

キャッチコピーの一部、実績や価格情報などの数値の一部の数字にデザインを施したり、矢印やシンプルなシェイプなどを使う場合が見受けられます。インパクトは結構大きいです。

lp-eg23

 

lp-eg12

 

イラスト

製品・サービスのイメージをイラスト化して一目で内容が想像できるようにするものもあります。PCやスマホ関連だと、モニターやスマホのイラストもよく使われています。

lp-eg20

lp-eg19

写真

人物の写真が特に多いです。表情やポーズの選び方でも情報の伝わり方が変わるので、対象ユーザやサービスの内容に応じて相応しい人物の写真を選ぶ必要がありますね。

lp-eg6

lp-eg24

 

キャッチコピー

ユーザーが真っ先に読むのがおそらく「キャッチコピー」です。キャッチコピー自体は、キャッチコピー専門のプロが作成する場合もあるかもしれませんが、デザインする側としては、そのキャッチコピーの狙いやインパクトをしっかりユーザーに伝えられるようにデザインする必要があります。

フォントには大きく分けて以下の二種類があります。

  •  デバイスフォント(or Webフォント)
  •  画像フォント

デバイスフォントやWebフォントはいわゆるウェブサイトの通常の文章の表示に使われているものです。画面サイズが変わってもぼやけることがないため、LPをレスポンシブ対応にする場合は、キャッチコピーもデバイスフォントを利用する必要があります。難点はインパクトに欠けること。Webフォントを使うとコンテンツ部分の文章とは違ったフォントを使えるかもしれませんが、いずれにしても文字自体に施せる装飾や文字の回転などはできません。

一方、画像フォントはフォントを文字通り画像として保存したものです。なので、配置やサイズ、回転・変形なども自由にでき、それだけインパクトのあるキャッチコピーをデザインすることができます。しかし、「画像」なのでレスポンシブ対応のLPを作る場合は慎重になる必要があります。(ぼやける危険があります)

 

デバイスフォント(or Webフォント)

lp-eg9

lp-eg10

画像フォント

lp-eg15

lp-eg7

 

CTAボタン

ファーストビューにCTAボタンを設置する場合とそうでない場合がありますが、設置する場合、キャッチコピーのすぐ下に置くケースが大半です。その他の場合では、マウスでクリックしやすく、左上から右下へと移ると言われる目の動きに合わせてファーストビューの右下部分に配置されることもあります。CTAボタンにはオレンジや黄色、赤などの目立つ色が使われることが多いですが、背景に使われている素材や他のパーツと比較して目立つようにデザインする必要があります。

キャッチコピーの下にボタン配置した例

lp-eg13

ファーストビューの右下に配置した例

lp-eg8

ヘッダーナビ

商品・サービスのロゴ、連絡先情報がメイン。ナビゲーションメニューがある場合もあります。背景に同化させたり、あるいはヘッダーバーは別の色で区切りをつけている場合もあります。これもデザインやコンセプト次第ですね。

背景と同化

lp-eg13

背景と別に区切り

lp-eg19

 

 

ファーストビュー下部

ファーストビューにはキャッチコピーのテキストに加えて、商品やサービスの対象ユーザ、実績など、ターゲットユーザーに「自分にも関係がありそうだ」「面白そうだ」と思ってもらうための情報が列挙されることが多くあります。

3点に絞って具体的な数字を含めて強調すると印象に残りやすいようです。

lp-eg11

以下の例のように頭だけファーストビューに表示されるようにし、詳細はスクロールすると見れるようになっているタイプも見受けられます。

lp-eg23

lp-eg23-1

lp-eg15

lp-eg15-1

 

 

…という感じで分類してみましたが、これでファーストビューのデザインがバッチリできるようになるわけではありません(残念ながら。笑)

でも色々なランディングページを見て個々のパーツに注目してみることで、ファーストビューを作るにはどんな要素について検討する必要があるのかが頭の中でスッキリ分かるようになったかなと。

ファーストビュー以外の部分についてもまた次の機会に分類してまとめてみたいと思っています。