ランディングページデザインの参考例とデザインのコツ10選
この記事は 2022 年 1 月 31 日に公開、2022 年 8 月 16 日に更新しています。
マーケティングを勉強されたことのある方なら、見込み客にリーチするためには相応の努力が必要なことをよくご存じでしょう。そして、無事に多くの見込み客にリーチすることができたとしても、実際に商品を購入する顧客に転換（コンバージョン）できなければ、収益を獲得することは難しくなります。
見込み客を実際の顧客に転換するために効果的な方法のひとつとして、ランディングページの作成があります。ランディングページはコンバージョンを生むことを目的とする 1 ページで構成された Web ページのことを指し、商品・サービスの宣伝に優れたツールです。
この記事では、Wix のランディングページテンプレート例を参考に、効果的なランディングページをデザインするコツを紹介します。デザインのコツを押さえ、見込み顧客のコンバージョンが狙えるランディングページをデザインしましょう。
ランディングページデザインにおける10のポイント
01. テキストの量は最小限に
ランディングページを作成するときにまず気を付けたいのが、全体のデザインとテキスト量のバランスです。訪問者に商品を購入してもらうために説得力のある説明を追加したい反面、情報量が多すぎてもページからの離脱につながってしまうからです。
一般的に、ランディングページのコピーは簡潔にまとめるのが鉄則です。商品についての最も根本となる情報を切り分け、可能な限り凝縮させましょう。覚えておきたいのは「語らず、見せる」ということ。ページの主役は画像で、それをテキストと説得力のある見出しで補足するぐらいのバランスが最適です。テキストの量は最低限に留めて、意味のある魅力的なフレーズに仕上げましょう。
02. シンプル & クリーンな UI が肝
次に目を向けたいポイントは、クリーンで整理されたレイアウト。ランディングページのデザインを極力シンプルにすることでメッセージ性が高まります。
ページ内の情報を訪問者が読んですぐに吸収できるよう、情報の詰め込み過ぎは避けましょう。余白を十分に取り、テキストの量が多い場合は分割します。ページに新規登録フォームを設置する場合は、入力項目が多くなりすぎないよう注意が必要です。訪問者の名前、メールアドレス、役職など、最も知りたい情報のみをクイックに入力してすぐに送信できるような形式にしておきましょう。
ランディングページ作成のポイントは過去のブログでもご紹介していますので、ぜひ参考にしてみてください。基本的なフレームワークができたら、ニーズに応じてデザインを調整します。
03. 強力な CTA を配置する
ランディングページを作成するそもそもの目的は、コンバージョンを獲得することです。そして、コンバージョンを獲得するために不可欠なのが行動喚起（CTA : Call to Action）ボタンです。
CTA は訪問者を次のステップに誘導するためのボタンで、ランディングページを作成するなら必ず知っておきたい重要な要素です。目的に応じて、CTA を使用して訪問者にオンラインフォームへの入力（新規登録）、電子書籍のダウンロード（今すぐダウンロード）、商品の購入（今すぐ購入）などを促すことができます。いずれの場合でも、訪問者にランディングページの主な目的を確実に達成してもらえるよう CTA の文言や配置を工夫しましょう。
CTA は通常、動詞もしくはワンフレーズのみでシンプルに作成します。ボタンを押すだけの価値を訪問者に明確に伝えるだけでなく、大胆かつ目を引く文言・デザインを選ぶことが大切です。CTA ボタンは目立つ色で、（ランディングページのメインヘッダーのすぐ下など）確実に目につく場所に配置します。また、縦長のランディングページの場合は適切な間隔で CTA を繰り返し使用することで、訪問者にクリックしてもらえる確率が高まります。
04. 長い縦スクロールは避ける
次に考えるべきポイントは、スクロールの長さについてです。どんなに美しいランディングページであっても、延々とスクロールダウンが必要だとユーザーエクスペリエンスは半減してしまいます。ランディングページの最初のセクション（スクロールせずに見える部分）に、訪問者に知ってほしい商品情報をすべて記載しましょう。商品の特長を捉えた魅力的な見出しを作成し、ページの上部に強力な CTA を配置します。こうすることで、ページをスクロールすることなく訪問者からのコンバージョンを獲得できるようになります。
ただ、時にはスクロールするのが好ましい場合もあります。サービスの内容が極めて複雑で、かなり詳しい説明が必要となる場合は縦長のランディングページデザインが効果的です。ただし、いずれにしてもコンバージョン獲得に重要な要素はページの上部に掲載しておきましょう。また、ライトボックスを使用すればページのセクションを増やし過ぎずに追加情報を表示することができます。ユーザーにとって魅力的で快適なブラウジングを提供するために、パララックススクロールを追加するのも良いでしょう。
05. ブランドカラーを使用する
ランディングページは、ポップな色で仕上げると効果的です。実際、最近の研究では、マーケティング資料に色を使うことで、ブランドの認知度と売上が最大80％向上することが分かっています。草原に咲く赤い花や青空にかかる虹に思わず目が行ってしまうように、色には人を惹きつける力があるのです。
しかし、配色を決める前に、使いたい色がブランドテーマに合っているかどうかを必ず確認しましょう。大切なのは利用するすべての媒体でブランディングの一貫性を保ち、訪問者がランディングページとあなたのビジネスを瞬時に関連付けることができる状態にしておくことです。ブランドカラーの中でも、サイトの他の要素とは対照的な色を選ぶとランディングページの存在感が一層際立ちます。
06. 目を引くビジュアルを使用する
ビジュアル（画像やアイコンなどの要素）も、色と同じく訪問者を惹きつけ、興味を持ってもらえるようなものでなければなりません。ソフトウェアのように目に見えにくい技術的な商品を扱っている場合も、それを視覚的に表現する方法を探る必要があります。これは、訪問者の目を引くだけでなく、画像を挿入してページ上のテキストを分割し、ランディングページの情報をより見やすくするためにも重要なステップです。
さらに、使用するビジュアルはブランドイメージに合ったものを選びましょう。写真を使用する場合は、サイト内の他の写真と一貫性を持たせることが大切です。イラストやグラフィックアートも、同様にブランドイメージを反映したものを選びます。動画の場合も、そのスタイルとトーンがブランド全体の雰囲気と一致している必要があります。
07. F または Z パターンで設計する
Web サイトを見るとき、人の視線は F 型や Z 型のパターンでサイト内を移動する傾向があるという研究結果が出ています。ランディングページのデザイン効果を最大化するために、これらのパターンを考慮したデザインを心がけましょう。
ランディングページの最も重要な要素であるヘッダー、メイン画像、CTA ボタンは F 型または Z 型の構成で配置します。例えば、画像を左、ヘッダーを右上、CTA をヘッダーの下に配置すると F パターンになり、最終的に読者の視線が CTA に集まりやすくなります。
08. 訪問者への期待を明確にする
ランディングページで訪問者にクリックしてもらいたいのは CTA のみです。そのため、サイトの他のページへのリンクは含めないよう注意しましょう。ランディングページには、直接コンバージョンにつながらないリンクは張るべきではないからです。
そのため、ランディングページにナビゲーションバーを設置したり、テキストにリンクを含めたりするのは避けましょう。訪問者が CTA ではなく他のページをクリックすることや、訪問者がリンクをクリックして他のページに移動してしまうことを防ぐためです。
09. SNS シェアを有効にする
また、SNS でページをシェアできるようにしておくことも効果的な戦略です。ランディングページを見た人に、SNS で自身のフォロワーに情報を拡散してもらいましょう。SNS シェアは直接コンバージョンを促進するものではありませんが、ページのクリック数を増加させることができます。そして、訪問者が増えれば増えるほど、コンバージョン数を増やせる可能性が高まります。
シェアを促進するために、ランディングページのファーストビューセクション（スクロールせずに表示される部分）に数種類の SNS アイコンを追加しておきましょう。Facebook、Instagram、Twitter、LinkedIn、Pinterest などが最も一般的です。
10. デザインの A/B テストを行う
ランディングページを最適化するためのベストプラクティスはいくつかありますが、消費者心理については意外と知られていないものです。ランディングページのデザインに迷ったときは、さまざまなバージョンのページを試すテストを行うのが一番です。
たとえば、色や CTA の位置を変えてみるなど、少し変えたバージョンをいろいろな人に見せて、どれが一番コンバージョンが高いかをチェックしてみましょう。コンバージョン指標を調べたあるレポートによると、ランディングページの平均コンバージョン率は9.7%なので、それ以上を獲得できるのが理想です。ページの見た目だけでなく、こうして実際のデータに基づいて最終的なデザインを決めていくのもひとつのアイデアです。
ランディングページのデザイン事例
さて、ページの作成方法がわかったところで、インスピレーションを刺激するランディングページの例をいくつかご紹介します。気に入ったデザインがあれば、テンプレートをカスタマイズするだけで、機能的なオリジナルランディングページがすぐに作成できます。
リードジェネレーションランディングページ
商品紹介ランディングページ
ウェビナーランディングページ
アプリランディングページ
セミナーランディングページ
スタートアップ企業ランディングページ
ネットショップランディングページ
近日公開ランディングページ
マーケティング会議ランディングページ
新規登録フォームとしての役割を兼ねたランディングページは、リードを獲得する上で非常に効果的なデザインです。フォームは訪問者のフルネームとメールアドレスのみを入力するシンプルなデザインに留め、ページ下部に説得力ある「お客様の声」を掲載することで訪問者の行動を促します。オンラインで顧客数を増やしたいと考えている方におすすめのデザインです。
02. 商品紹介ランディングページ
ビビッドなカラーを使用した、遊び心のあるさわやかな印象のランディングページです。商品の画像を前面に大きく出し、企業スローガンや購入を促す CTA を配置。ページ下部の各セクションには商品のメリットを掲載し、購入を迷っている人を後押しするようデザインされています。
03. ウェビナーランディングページ
ランディングページというと商品の宣伝を連想しますが、ウェビナーやバーチャルイベントの宣伝にも利用できます。このサンプルでは、シンプルながら印象的なデザインに加えて、まずウェビナーの内容を説明するわかりやすいヘッダーが配置されています。すっきりとしたデザインなので、「受講申し込み」の CTA が目立ち、クリックしやすくなっているのも特徴です。また、スピーカーの経歴や参加者の声など、ウェビナーに関するより詳細な情報がページの下部に記載されています。
04. アプリランディングページ
モバイルアプリのプロモーションを目的としたランディングページです。親しみやすいながらもプロフェッショナルさを兼ね備えたデザインが特徴です。キャッチーな見出しで新しいアプリを紹介するほか、Google Play と Apple App Store へのリンクや、ユーザーがアプリの外観を確認できるスクリーンショットを配置しています。ランディングページをスクロールダウンしていくと、アプリの特徴やメリットを紹介する説明が表示されます。
セミナーや会議を開催する場合、ランディングページを使ったプロモーションは効果的です。このサンプルは、イベントに関する重要な情報を1ページに凝縮したシンプルなランディングページです。上部のセクションには開催場所、開催日、チケット購入のボタンが表示され、下方向にスクロールすると、スピーカー、アジェンダ、会場についての詳細が表示されます。
思わず目を奪われるモダンなランディングページのデザイン。どんな企業にも適していますが、特にスタートアップ企業のブランドイメージにマッチします。通常、ランディングページはテキストを最小限に抑えたデザインが多いものの、このフォーマットでは具体的な情報を記載するセクションを設けて製品についてより深く掘り下げています。例えば、「How It Works」セクションは、投資家や将来の顧客向けに製品の詳細を伝えるのに最適です。
これからネットショップを立ち上げるという方は、正式オープンまでの集客にランディングページを活用しましょう。このデザインのように、ランディングページ自体に人気 No.1 アイテムを表示しておくと潜在ユーザーの誘致に役立ちます。ショップの雰囲気や扱っている商品を見ることができるので文字だけのページよりもはるかに効果的で、ニュースレターの新規登録も期待できるデザインです。
「近日公開」ランディングページは、サイトがまだ制作中であることをユーザーに説明するためのページです。このページは、遊び心がありながらもミニマルなプログレスバーデザインを採用した、非常にわかりやすいデザインに仕上がっています。
このページで注目したい2つの重要な要素は、SNS アイコンと「配信登録」CTAです。メルマガに登録してもらうことで、訪問者はページを閉じた後もメールを通じてあなたのブランド・企業と関わりを持つことができます。また、このページを訪問したユーザーに「サイトが間もなくオープンする」という情報を SNS で拡散してもらえるといったメリットも期待できます。
既存の概念を打ち破る、革新的なイメージを持つマーケティング会議におすすめのランディングページです。右側のパネルに表示された、リズミカルに動く対照的な線のアニメーションが目を引きます。また、その下の各スピーカーの写真にマウスオーバーすると赤色のオーバーレイと説明が表示され、サイト全体のモダンな雰囲気をさらに高めています。ヘッダー上部には大きく太いフォントを使用し、重要なメニューは数種類のみに留めることで、訪問者が内容を理解しやすいよう配慮したデザインです。
編集者：Yuki Yunger
ソーシャルネットワーク マーケター
