【2024年版】LPのファーストビューで差をつける！参考事例と具体的な設計方法（後編）

今回の記事は、以前ご紹介しました「【2024年版】LPのファーストビューで差をつける！参考事例と具体的な設計方法」の後編の記事になります。ファーストビューは、ランディングページの顔であり、100％のユーザーが閲覧する場所です。ランディングページでは最も重要な要素の一つになり、改善効果も非常に大きい部位です。今回の記事では、前回ご紹介していないファーストビューのデザインに関する別の事例をご紹介いたします。

↓前回の記事

【2024年版】LPのファーストビューで差をつける！参考事例と具体的な設計方法

LPのファーストビューデザイン事例（追加版）

それでは、早速ですが、実際のランディングページのデザイン事例をご紹介します。

業種別ファーストビューデザイン事例

デザインの幅を見ていただくため、多様な業界の事例をまとめています。

・スマホ保険LPのファーストビュー

1.訴求内容

月々たったの200円でスマートフォンの破損等のトラブルに備えることができる「スマホ保険」

2.構成要素

ロゴ／イラスト／キャッチコピー／コンバージョンボタン

3.デザイン

新登場の保険商材として、先進性を感じさせるデザイン設計としました。一方で他の保険商材に埋もれてしまわないように、オリジナルのイラストを書き起こし、独自性を担保しています。また、ファーストビューの要素の一つで、スマートフォンのイラストは、手から下に落ちて割れるアニメーションを実装してアテンションをつけています。

・バイリンガル幼児園LPのファーストビュー

1.訴求内容

2ヶ国語教育を中心に幼児教育と保育を融合したまったく新しい保育施設であることを訴求

2.構成要素

ロゴ／サービスイメージ写真／キャッチコピー／サービス名／特徴／コンバージョンボタン

3.デザイン

多数の魅力的なカリキュラムを取り揃えたi Kids Star（アイキッズスター）の魅力を、カラフルなロゴカラーに合わせた「楽しさ」が伝わるトーン&マナーでデザインをしています。写真の切り取り方もただ並べるのでなく、動き出てかつ親近感があるようなレイアウトにしました。情報量が多いながらも適度に余白感を持たせ伝えたい情報が一目で伝わることを意識してデザインを行っています。

・採用戦略講座LPのファーストビュー

カルーセル（1枚目）

カルーセル（2枚目）

1.訴求内容

時代に左右されない採用戦略の基礎を、たった半日で学べる採用戦略講座

2.構成要素

ロゴ／サービスイメージ写真／キャッチコピー／サブキャッチ／コンバージョンボタン／カルーセル形式

3.デザイン

業歴20年、800社以上の採用コンサルティング経験をもつジャンプ株式会社さまの採用成功法則をフレームワーク化した採用メソッド「STRUCT」。「STRUCT」の格式を高めるような公式感のあるデザインを行いました。ファーストビューはカルーセルを実装しています。1枚目は本講座の価値を示すためのキャッチコピーと実際の講座を行なっている写真を組み合わせて理解促進を促し、2枚目以降は実際に参加いただいた企業様の声を伝えるコンテンツに。顔出しかつ名前も伝えてより説得力を醸成する構成に。

・中古住宅販売用LPのファーストビュー

1.訴求内容

住宅購入検討者に対して住宅の買い取り再販事業の複数のメリットをコンパクトに訴求

2.構成要素

ロゴ／サービスイメージ写真／イラスト／キャッチコピー／実績／カルーセル形式

3.デザイン

ファーストビューのデザインはカラーやフォントなど既存サイトとトンマナを合わせて設計し、「安心感」や「親近感」を感じさせるように意識しています。月々の負担の少ない支払いでリフォーム済みの住宅を手に入れることができるメリットをストレートに伝え、合わせて同社の住宅販売における実績や上場企業としての基盤も伝えることでユーザーの興味を喚起するデザインを目指しました。

・女性用化粧品LPのファーストビュー

1.訴求内容

最新の美容皮膚科学に基づいた配合成分が大人の年齢肌を美しいハリ肌に

2.構成要素

ロゴ／商品イメージ写真／キャッチコピー／実績／キャンペーン情報／コンバージョンボタン

3.デザイン

見た目のビジュアルで如何にドクターズコスメの「品質感」と「華やかさ」を想起させるかに注力したデザイン事例です。ファーストビューで製品独自の品質感により購買意欲を喚起し、次のアクションやスクロールに誘発する目的です。また、化粧品では重要なファクターとなる商品のテクスチャもしっかりと伝わるように写真の扱いにもこだわったデザインを行なっています。

・投資信託商品LPのファーストビュー

1.訴求内容

革新的な商品やサービスを生む、次世代のイノベーション企業への投資機会を提供

2.構成要素

ロゴ／イメージ写真／キャッチコピー／サブキャッチ／説明テキスト

3.デザイン

壮大な挑戦を行うムーンショット銘柄に投資する「iFreeNEXT ムーンショット」。背景にイメージ素材を印象的に配置したり、手書き感のあるメッセージを組み合わせるなど、革新的でイノベーティブな側面を、直感的に伝えるようなブランディングを目指しメインビジュアルをデザインしました。

・アイロン接着テープLPのファーストビュー

1.訴求内容

革新的な商品やサービスを生む、次世代のイノベーション企業への投資機会を提供

2.構成要素

ロゴ／イメージ写真／キャッチコピー／サブキャッチ／説明テキスト

3.デザイン

子育てママが共感する温かみのあるデザインを目指して、装飾やカラーリング、フォントの活用などを行いました。配置する要素が多い場合のデザインの参考になるかと思います。また、ファーストビューでは、実際にテープを貼って動かしていくようなアニメーションも実装することでより直感性を高めています。

まとめ

前回に続き、ランディングページのファーストビューのデザイン事例をご紹介させていただきましたが、サービスや製品ごとに強調すべき要素や数、レイアウトなどは無限に変わっていくと思いますが、ベースにあるのは、訪れて欲しいユーザーに対して伝えたい情報がより素早く伝わるデザインになっているか、かつ、自社のサービスや製品の魅力も表現できているかということになります。

ランディングページは広告でもありますので、成果が重要になってきます。その点では、正解はないと思いますので、実際の運用においてABテストをしながら要素を入れ替えたり、トンマナを変えたりしながら、その時々の時流に合わせた最適なデザインに合わせていくことが大事だと思います。

コンバージョンラボではそういった成果の出るデザインを目指して日々ランディングページを研究していますので、そういったランディングページの制作にこだわってみたい方はご相談いただければと思います。

【2024年版】LPのファーストビューで差をつける！参考事例と具体的な設計方法