ランディングページを作る際に頭を悩ませるのがデザインでしょう。1枚物の広告であるランディングページのデザインは一見単純に見えますが、様々な工夫が凝らされています。
今回はWebサイトとランディングページのデザインの違いや、各セクションごとのデザインポイントを解説していきます。
目次
Webサイトとランディングページのデザインの違い
Webサイトとランディングページの違いは、Webサイトは複数の目的のために作られたものであることに対して、ランディングページは一つの目的に絞って作られているということです。
Webサイトでは網羅性を高めるために複数のリンクを用意していますが、ランディングページにはコンバージョンに繋がるリンクしかありません。そうすることでユーザーの注意が逸れてしまうことを防いでいます。
また通常のWebサイトではユーザーの目線の動きは「F型」に動きますが、ランディングページは縦に読み進めていくため、効果的に誘導を行えます。
ランディングページデザインの事前準備
ランディングページデザインは事前準備が大切です。事前準備とは「コンセプト」設定のことです。
「コンセプト」は「ターゲットは誰か」「ターゲットの悩み」「製品の特長」の3点を理解することで導きだすことができます。これらを考慮したコンセプトを考え、ユーザーに刺さる構成を考えていきます。
構成ができてからがデザイン作成です。コンセプトを考慮しないデザインでは、いかに綺麗なビジュアルでも意味がありません。ターゲットのニーズに合わせたデザインが求められます。
ランディングページで大切な3セクション
ランディングページデザインには、コンバージョンに与える影響の大きいセクションがあります。それが「ファーストビュー」「CTA（コンバージョンエリア）」「フォーム」の3セクションです。
アクセスがあるにもかかわらずコンバージョン率が低い場合、まずはこれら3セクションのどれかを改善して行くことになります。
ファーストビュー
ファーストビューとは、その名前の通りランディングページに訪れたユーザーが最初に見る画面のことです。「キービジュアル」と呼ばれることもあります。
ファーストビューの役割は、ランディングページに訪れたユーザーの心を一瞬で掴み、更に読み進めたいと思ってもらうことです。ファーストビューに魅力がなければ、ユーザーはページをスクロールせずコンバージョンにつながりません。
ファーストビューはランディングページの中でも訴求力の強いエリアのため、改善による効果が出やすい部分でもあります。
ファーストビューは、大まかに下記のデザイン要素で構成されています。
- キャッチコピー
- メインビジュアル
- ボタンやナビなどのUI
ファーストビューのデザインポイント
ファーストビューのデザインで重要になるのが「コンセプト」です。「ランディングページデザインの事前準備」の項でも説明しましたが、「コンセプト」は「ターゲットは誰か」「ターゲットの悩み」「製品の特長」の3点を理解することで導きだすことができます。
これらの要素を最も盛り込むことができるのがファーストビューであり、それが求められます。メインビジュアルにはインパクトが必要です。目に留まるように大きめの画像を用意しましょう。
キャッチコピーはターゲットのベネフィットを盛り込みましょう。文字を大きくするなど読みやすくする工夫も大切です。
CTA
CTA（コンバージョンエリア）とは、ランディングページの目的である商品購入や資料請求などに直接結びつく重要なエリアです。
購入ボタンや購入に必要な情報などがまとまって掲載されているパターンがほとんどです。
ファーストビューがどんなに良くても、CTA（コンバージョンエリア）がダメなためにコンバージョンに結びつかないこともあり、気が抜けません。
CTA（コンバージョンエリア）の構成要素は下記の様になっています。
- エリア全体の枠や背景
- キャッチコピーやテキスト要素
- 購入・資料請求などのコンバージョンボタン
- 電話番号などの問い合わせ情報
ボタンの改善
CTAで最も重要な要素がボタンのデザインです。ボタンのデザインを変えただけでコンバージョン率が上がった事例も存在します。
ボタンがどこにあるのか分からないデザインでは、ボタンの役目を果たせません。そのため、
ボタンは目立つ色で、立体感を持もたせボタンらしいデザインが良いと言われています。
ですが、必ずしも目立たせればいいという訳ではありません。ランディングページの雰囲気に合っていなければ、違和感が出て成約率が下がる原因になりかねません。全体のバランスを考えることも大切です。
フォーム
EFO（フォーム最適化）という言葉が存在することからも分かるように、フォームもコンバージョンに関わる大切なエリアです。
ランディングページの購入ボタンを押しても、その次のフォームに情報を入力し送信まで至らなければコンバージョンにはなりません。実際に入力フォームで離脱してしまうケースが多いのです。
この入力フォームはプログラミング技術とも関わってくるため、デザインの改善だけで解決する話ではありません。システム的な不手際で、コンバージョンに至らないという事態が発生しないよう注意が必要です。
EFO（フォーム最適化）の改善ポイント
入力フォームで離脱するユーザーの心理としては「フォームの入力が面倒」「エラーが出たが理由が分らない」などが考えられます。これらの理由によるユーザーの離脱を防ぐには下記のことに気を付ける必要があります。
- 自動入力などを使い入力の手間を減らす
- 入力漏れ箇所をエラーで知らせる
- 必須項目と任意項目を色分けする
EFO（フォーム最適化）のポイントは、入力のストレスをいかに減らせるかに掛かっています。
デザインクオリティを上げる画像の使い方
ランディングページは画像の占める割合が高い広告です。画像のクオリティがデザインクオリティに強く影響します。ユーザーの心を動かすにはキャッチコピーが重要ですが、デザインは印象に大きく影響します。
デザインクオリティが低いがために、キャッチコピーを読んでもらえないことも考えられます。画像選びは重要です。
画像のトーンを統一する
気を付けなければいけないことは、画像のクオリティだけではありません。画像のトーンを合わせることもデザインクオリティに影響します。
画像素材はどうしても明るさや色味にバラつきがでます。それをそのままランディングページに使ってしまうと、一部だけ明るく一部だけ暗いなどの違和感が発生してしまいます。
細かいことですが画像のトーンをそろえることでデザインクオリティがぐっと上がり、信頼感も向上します。画像の明るさや、彩度などを調節しましょう。
並べる人物の顔のサイズを統一する
人物の画像は「ユーザーの視線を集めやすい」などの理由から広告デザインでは欠かせません。
商品を使用しているモデルを複数人並べることや、購入者の声などでは複数の人物の画像を並べることがよくあります。商品の使用イメージをユーザーに強く訴求したい場合に使うテクニックです。
その際には人物の顔の大きさを統一しましょう。顔の大きさがバラバラだとまとまりが出ず違和感を与えてしまいます。
スマートフォンに最適化させる
ランディングページを制作する際は、PCだけでなくスマートフォンに最適化する必要があります。多くのユーザーがPCではなく、スマートフォンを使ってネットを観覧するからです。
通常のランディングページはPC用に作られているため、スマートフォンで見ると各コンテンツや文字が小さすぎて目を凝らさないと見られません。ランディングページをスマートフォン対応させるためには、PC用とは別に作る必要があります。
コンテンツが見やすい様レイアウトを変更し、文字サイズも大きめにします。また、ページが長すぎると最後まで読んでもらえないので、長さも調節します。
まとめ
ランディングページにおける良いデザインとは、コンバージョンに直結するデザインです
デザインと言うとアーティスティックな才能が必要と思われがちですが、全てのデザインには意味があり、理論的に理解することが可能です。
デザイン原則や広告デザインを理解し、ランディングページデザインに生かしましょう。
