ランディングページ(LP)の構成とデザインのポイント！ ― コラムーベイクロスマーケティング株式会社

こんにちは！デザイナーのマチヤコーセーです。

ようやく緊急事態宣言が解除され、飲食店や量販店、服飾品店などが徐々に営業を再開しかつての活気を取り戻しつつあります。

とはいえ、まだまだ気を緩められない状態ですので、一日でも早く状況が回復してほしいです。いろんな美味しいお店に行きたいな～

さて、前置きはこの辺にして、今回はランディングページの制作にあたり、構成やデザインをする上でのポイントをまとめましたので、それをご紹介させていただきます。

コロナの影響でECサイトの使用率は大幅に上昇し、ECサイト制作はかなり需要傾向にあります。それに伴いランディングページ(LP)の制作依頼も増えていくと思いますので、当記事でランディングページの構成やデザインのポイントなどを再確認、また何かのヒントになればと思います。

ランディングページの主な構成

メインビジュアル
商品/サービス説明エリア
商品/サービス評価(レビュー)エリア
購入/お申込みエリア

ランディングページは、メインビジュアル(FV)、商品やサービスの説明エリア、評価(レビュー)エリア、購入エリアなどで主に構成されています。

メインビジュアルで商品/サービスを直感的に知り、効果やメリットを説明エリアでイメージ、口コミやレビューが記載されている評価エリアにて商品/サービスに対する信用度や優位性を認知してもらい、ようやく購入あるいはお申込みといった流れになります。

これらの構成や流れから、通常のECサイトとは違った、ランディングページならではの縦長ページになるわけですね。

メインビジュアル

メインビジュアルは、商品画像、サービスであればそれを連想させるイメージ画像、価格、ベネフィットなど、各特徴を凝縮し簡潔に表現する、ページの一番上に配置されるエリアです。

商品/サービスとそれから得られる恩恵・メリットのイメージを、概括的に刷り込ませるサイトの顔を担うエリアであり、トンマナ決めにもなるためデザインに関してはページの中で最もこだわるべきです。

デザインで意識するポイント

トンマナ決め
商品/サービスにあった配色選び
商品/サービスのレタッチ

メインビジュアルは、以降に続く他エリアのデザインルールを決める、トンマナ設定の役割も担います。配色の基本ルールやレイアウトを決め、コントラストや動きの強いエリアに入っても、違和感を感じさせないデザイン意識が重要です。

化粧品であれば白を基調とした透明感のある配色、サービスであればポジティブな印象を与える明るい色を採用したりと、商品/サービスにあった配色選びを意識しましょう。

商品画像、サービスイメージ画像が特に目立つエリアなので、レタッチ機能など画像加工を行う、綺麗に見せるテクニックも大きなポイントです。

商品/サービス説明エリア

商品/サービスの効果・メリットをアピールするのが主なエリアです。メリットをまとめたイメージやBefore/Afte形式でデザインし、ベネフィットを分かりやすく記載して、ユーザーに使用or利用した際のイメージを与えます。

デザインで意識するポイント

before/afterのコントラスト
ネガティブ/ポジティブのメリハリ

before/after形式のデザインを採用する場合、前進色と後退色で対象のメリハリを意識して色分けをし、コントラストを意識してデザインしましょう。

商品/サービス評価(レビュー)エリア

価格や利便性、品質など競合と比べて優位性をアピールしたり、独自性を強調をするのが主な役割となるエリアです。

商品/サービスに対しての知識や理解があまりなく、口コミなどでページ訪れた人に対して、独自性や競合と比べての優位性を伝える役割を担います。

デザインで意識するポイント

メディア紹介での強調
グラフのカラートーン

テレビで取り上げられた、雑誌で掲載など、メディア紹介での強調方法がポイントです。雑誌であれば表紙を見せたり、テレビなら番組のロゴなど、一目で紹介元が分かるようにしましょう。

統計データなどのグラフを使用する際は、もともとの堅苦しい印象を払拭できるよう、トンマナにあわせた配色選びで緩和するように意識しましょう。

購入エリア

商品価格、購入数、購入ボタンなどで主に構成されているエリアです。各エリアで購入意欲を高め、目的である購入につなげるランディングページにとって、いわばゴールとも言えます。
これまでに商品に対しての説明やアピールなどを十分に行っているので、購入に直接関わる要素でまとめた、シンプルな構成が良いでしょう。

デザインで意識するポイント

商品画像は、単品売りやセットなどが分かりやすいよう、配置位置とサイズを意識しましょう。値段は、フォントサイズ、背景色や周囲とのコントラスト比などに配慮し、通常価格であれば自然に視認できるレベルで、セール価格であれば一番目立つくらいのイメージが良いです。
購入ボタンは、商品画像と値段を確認した先に配置し、配色や形などにも配慮し見やすさを意識してデザインしましょう。