ランディングページのファーストビューデザインを集めました。

 

 

ランディングページの要素として非常に情報な要素のひとつである「ファーストビュー」。

 

 

 

今回は訴求ターゲット別に分類した実際のランディングページのファーストビューの事例を見ていただきたいと思います。

 

 

 

 

その前に「ファーストビュー」とは何かについて簡単に振り返っておきたいと思います。

「ファーストビュー」は、言葉通り、ユーザーがランディングページを訪れた際に最初に見る画面です。一般的には最初に目に入る部分で、スクロールしないと表示されない部分はファーストビューに含まれないとされています。

 

 

 

 

では、ランディングページにおける「ファーストビュー」とは何かというと、特定の検索キーワードを打ち込むなどしてランディングページを訪れたユーザーに、ページ全体を通じて発信したい情報をひとめで理解してもらうという役割を持った要素です。

つまり、ユーザーのココロを一瞬で掴むという役割があります。

ファーストビューの出来次第で、ユーザーの離脱率も大きく変わります。

 

 

 

 

参考として、コンバージョンラボのランディングページのファーストビューをご覧ください。

 

 

 

 

 

 

制作するランディングページによっても異なりますが、ファーストビューの構成要素は大まかに3つの要素に分かれます。

 

 

 

 

 

 

 

 

この3つの要素に対して、レイアウトやカラーリングやフォントタイプ、各パーツのサイズといったデザインの要素が掛け合わされて、ファーストビューが構築されます。

 

 

 

 

単純に要素を分解するとそのようになりますが、前提としては、どのようなユーザーに対して何を訴求するのかというランディングページそのもののコンセプトが必要です。それがなければ、ただの要素の組み合わせにしかなりません。

 

 

 

 

コンセプトをもとに、3つの構成要素とデザインが連動したものになってはじめて訴求力の高いファーストビューが完成します。

 

 

 

 

実際のランディングページの事例を通じて、見てみたいと思います。

 

 

 

違いを理解していただきやすいようにターゲット別にファーストビューを分類してみました。
法人向け、一般消費者向け（女性向け・男性向け）にそれぞれ分けています。

 

 

 

 

法人向けランディングページのケース

 

 

【WEB会議システムLPのファーストビュー】

 

 

1.訴求内容

webを活用したこれまでにないTV会議システムで
ビジネスをより効率化（スマート）する

 

2.構成要素

サービスイメージ写真／キャッチコピー／サービス名／実績／ボタン

 

3.デザイン

訴求内容に合わせて、スマートな印象が伝わる現代的なデザインに。フラットデザインを意識し、極力装飾を行わずにシンプルにデザインした事例です。カラーは彩度を少し抑えたベタ一色のカラーを複数採用し、フォントはゴシックを選定しています。

 

 

 

 

【コンサルティングLPのファーストビュー】

 

 

1.訴求内容

グローバルに強い経験豊富なシニア人材が海外販路の拡大をサポート

 

2.構成要素

人物写真/イラスト/キャッチコピー/サービスの特徴と実績

 

3.デザイン

海外進出を考えている企業が安心して相談できる会社であることが伝わるにように、グローバル感と信頼感を打ち出したデザインを行いました。
色調についても落ち着いたトーンで設計することで、安定感のあるサービスができる会社であることを訴求しています。

 

 

 

 

【研修サービスLPのファーストビュー】

 

 

1.訴求内容

ホスピタリティの高いコミュニケーションを学べる研修

 

2.構成要素

人物写真/キャッチコピー/サブコピー/実績/企業ロゴ

 

3.デザイン

客室乗務員経験者を中心としたコミュニケーションのプロが教える研修であることがひとめでわかるようにビジュアル面での訴求を行ったデザインです。また、同社ならではの豊富な実績もしっかりと伝わるように、実績を表示したパーツ要素も印象に残るようにデザイン・レイアウトを行っています。

 

 

 

 

【人材紹介サービスLPのファーストビュー】

 

 

1.訴求内容

日本で初めて第二新卒紹介をはじめた実績のある企業であること

 

2.構成要素

人物写真/キャッチコピー/サブコピー/ロゴ/日本地図/実績・グラフ

 

3.デザイン

リーディングカンパニーとしての王道感や公式感を力強く訴求するデザインを目指したファーストビュー事例です。さらに、ブランドカラーのグリーンとイエローを組み合わせて活かすことで、よりメリハリのある印象に仕上げています。また、規模感や実績を示すための地図やグラフなどのパーツ要素もコピーのじゃまにならないようなサイズ感・カラーリングで配置しています。

 

 

 

 

【ランディングページ改善支援ツールLPのファーストビュー】

 

 

1.訴求内容
ランディングページ改善を手軽に素早く行える、クリエイティブ支援ツール「CVX」

 

2.構成要素
UI画面(動画)/イメージ背景/キャッチコピー/サブコピー/

3.デザイン
ランディングページ改善ツールとしてのCVXの機能面を直感的に伝えるために動画を活用しています。機能面だけでなくブランドイメージが感じられるようにFV全体を設計。CVXのロゴで使用されているグリーンを基調とし、ロゴを大きく配置。ブランドの世界感を補完するようなデザインを行いました。

 

 

 

一般消費者向け（女性向け）ランディングページのケース

 

 

【女性向け（20代）・UVスプレーLPのファーストビュー】

 

 

1.訴求内容

世界NO1サイズの容量を誇るUVスプレー

 

2.構成要素

人物写真（読者モデルを撮影）/製品写真/キャッチコピー/サブコピー/製品付帯情報

 

3.デザイン

10代後半から20代前半の女性に向けたUVスプレーであるため、楽しくPOPな印象が伝わるカラーリングやレイアウトを意識したデザインです。かつ、夏に使う製品であることも同時に意識したデザインとなっています。書体もポップな印象が伝わる書体を選定しています。また、読者モデルの写真については実際に撮影を行っています。

 

 

 

 

【女性向け（40代〜）・黒蝶真珠LPのファーストビュー】

 

 

1.訴求内容

冠婚葬祭だけでなく、カジュアルシーンでも身につけられる真珠であることを訴求

 

2.構成要素

人物写真（読者モデルを撮影）/キャッチコピー/サブコピー/ボタン

 

3.デザイン

真珠という製品と購入層（40-50代）の特性上、落ちついた上質な世界観を伝えるデザインに。一方で、カジュアルなシーンでの使用もできることをしっかり訴求するために、読者モデルをたてて実際に撮影を行いました。また、大人の世界観を表現するため、黒・ゴールドのカラーを選定し、書体についても明朝で落ち着いた印象に仕上げています。

 

 

 

 

【主婦向け・天然除菌抗菌スプレーLPのファーストビュー】

 

 

1.訴求内容

高い抗菌力で衛生度が高い製品であり、かつ、手軽に使いやすいことを訴求

 

2.構成要素

製品写真/キャッチコピー/製品名/ボタン

 

3.デザイン

お子様を持つママに使ってもらう製品であるため、「安心感」と「親近感」を感じてもらえるデザインを行いました。茶系やグリーンなどのカラーでエコ・アース感を表現し、書体も柔らかな印象が伝わる丸ゴシック系統のフォントを選定しています。

 

 

 

 

【女性向け（30代〜）・ブランド洋服買取LPのファーストビュー】

 

 

1.訴求内容

気軽に、ブランド洋服の査定依頼ができる親しみやすさを伝える

 

2.構成要素

人物写真（モデル）/人物写真（スタッフ）/キャッチコピー/サブコピー/ロゴ/ボタン

 

3.デザイン

対象ユーザーが女性であるため、女性らしい色使いで、やさしいトーンに。親しみやすさを感じてもらうため、背景に自宅の部屋をイメージする写真を配置するとともに、明るめの色味でカラー展開しています。さらに、スタッフ3名の写真も配置することで、安心感を醸成しています。モデル写真とスタッフ写真は敢えて大きさに差異を持たせることでデザインにメリハリを出すことを意識しています。

 

 

 

一般消費者向け（男性向け）ランディングページのケース

 

 

【男性向け・家庭用アイロンLPのファーストビュー】

 

 

1.訴求内容

「男性向けに開発されたアイロン」という独自性の高い製品開発コンセプトを訴求

 

2.構成要素

製品写真/製品ロゴ/キャッチコピー/問い合わせ関連情報

 

3.デザイン

男性向けのアイロンというコンセプトを力強く伝えるために、黒を基調にしたデザインの中に製品のゴールドカラーが一際引き立つようにデザイン。また、「男前アイロン」という製品ロゴが記憶に残りやすいようにアイキャッチとして大きくデザイン。

 

 

 

 

【男性向け・歯科医院LPのファーストビュー】

 

 

1.訴求内容

忙しいエグゼクティブ層に特化した高級歯科医院という、通常の歯科医院とは、一線を画した新規性のあるサービスモデルを訴求

 

2.構成要素

人物写真/キャッチコピー/サービスの特徴/問い合わせ関連情報

 

3.デザイン

エグゼクティブ層に向けたサービスであることが一目でわかるように高級感を伝えるデザインに。落ち着いた色調のカラーを選定しつつも、サービスの特徴にフォーカスしてもらうようにキャッチコピーを立てるデザイン表現を行いました。

 

 

 

 

【男性向け・デオドラントミストLPのファーストビュー】

 

 

1.訴求内容

ビジネスマンのためスーツ専用のスプレー「KIELT」の洗練された世界観を訴求

 

2.構成要素

製品写真/キャッチコピー/サブコピー

 

3.デザイン

ランディングページでありながらも、製品の持つブランド世界観を強くした意識したデザインに。毎日のスーツの品格を保つためのアイテムであるため、ページ自体にも品格を感じられる書体やカラーリングを選定しました。また、極力情報を詰め込まず、余白を設けることで、伝えたいメッセージの訴求度を高めるデザインに。

 

 

 

 

【男性向け・ブランド洋服買取LPのファーストビュー】

 

 

1.訴求内容

大人の男性に同社のブランド洋服買取の魅力を訴求

 

2.構成要素

人物写真/キャッチコピー/サブコピー/ロゴ/ボタン

 

3.デザイン

前述した女性向けのブランド洋服買取では、親しみやすさを出すためにやさしい色味でデザイン展開いたしましたが、男性版の場合は、落ち着いた色味や太めのフォントを活用し、よりブランド感を感じさせるデザインに仕上げています。

 

 

 

 

 

このように大きなくくりとして法人向けと一般消費者向けという形で、ファーストビューの事例を分類・整理してみましたが、ターゲットによってアウトプットとなるデザインが大きく変わってくることが分かると思います。

 

 

 

 

ここであげた例は、あくまで一部なりますので、法人向けであっても業種や扱う商材によっても印象は異なりますし、大手企業向けのページなのか、中小・ベンチャー企業向けのページなのかによっても大きく変わります。

 

 

 

 

また、一般消費者といっても、男女の性別や、世代によってもできあがるファーストビューも大きく変わります。

 

 

 

 

繰り返しになりますが、外してはいけないことは、どのようなターゲットに向けて何をファーストビューで訴求すべきなのかを明確にし、そこに連動したアウトプットを開発することです。

 

 

正解はありませんが、内容は元より、カラーやフォントなど全てにおいて理由があるファーストビューにできれば、その分だけ訴求力があがることは間違いないでしょう。

 

 

 

以上のように、今回は「ファーストビュー」についてまとめてみました。