ランディングページ(LP)の目的はコンバージョンの獲得であり、もちろんランディングページのデザインにおいても同様です。

ブランディング目的のコーポレートサイトやオウンドメディアと同じような考えで制作しても、効果は期待できません。また、リード獲得や商品販売、店舗・施設集客など、コンバージョンの種類によっても求められるデザインは異なります。

本稿では、ランディングページのデザインについて最低限知っておきたいポイントを、20の他社事例を挙げながら紹介します。

ワイヤーフレームの作り方や専用ツール、レスポンシブデザインについても解説していますので、デザイナーはもちろん、ディレクション担当者にも役立つ内容となっています。

【用途・活用法別】ランディングページのデザイン例と特徴

まずは一般消費者向け(BtoC)と企業向け(BtoB)、それぞれのランディングページのデザイン例を、制作する上でのポイントと併せて紹介していきます。

BtoC用ランディングページのデザイン例と特徴

Liftage(リフタージュ)

BtoC商品のランディングページデザインのポイントは、誰に何を売っているのかをわかりやすく伝えることです。

「誰に」とはいわゆるターゲットのことですが、上図のようにターゲット層の人物写真を使うことで、ユーザーにランディングページの内容を自分事としてとらえてもらいやすくなります。

「何を」はもちろん商品です。基本的にランディングページのユーザーは、リスティング広告やバナー広告など、情報量の少ない広告を見て訪問します。ファーストビューには必ず商品写真を掲載し、認知向上を図ることが大切です。

また、ランディングページには商品に直接触れることができないというウィークポイントがあります。そうした点をカバーするためには、化粧品など直接肌に触れるものなら使用感、食品ならシズル感、日用品なら使用シーンが伝わる写真を使うと効果的です。

店舗や施設なら、実際の雰囲気が伝わる写真が良いでしょう。最近では動画を活用しているランディングページもよく見かけます。

アスタリフト

ル・オーヴン

Dyson V8 Slim

BtoB用ランディングページのデザイン例と特徴

freee

BtoBの製品・サービスは、BtoCよりも成約までの検討期間が長い傾向にあります。そのため、文章が読みやすいシンプルで余白の多いデザインが多く使われています。

また、競合との比較が避けられないのもBtoBの宿命です。とはいえ、長々とスペックを説明しても読まれません。自社製品の強味について、以下の事例のようにポイントを絞ったり、表やグラフにしたりして、簡潔にわかりやすくアピールする工夫が必要です。

Wantedly

freee

BtoBリード獲得用ランディングページのデザイン例と特徴

Hubspot

インバウンドマーケティングにおけるリードジェネレーション(見込み客獲得)を目的としたランディングページは、広告ではなく、ブログやメルマガなどのコンテンツから誘導するのが普通です。

コンテンツ内で十分に興味やニーズを喚起できている場合は、ランディングページ上での過度なアピールは必要ありません。上図のHubSpotのランディングページのように、極力シンプルなデザインでも十分に効果的です。

おすすめのランディングページデザインまとめサイト

ここまでは用途・活用法別にランディングページデザインの特徴を簡単に紹介してきましたが、参考事例はあくまで代表的なもので、実際はもっと多様なデザインが取り入れられています。

参考用にランディングページのデザインを集めたサイトを以下に3つ紹介しますので、興味のある方はご覧ください。

・LP アーカイブ

とにかく事例掲載数が豊富なサイトです。「サービス」「美容」「住宅」「求人」など23のカテゴリーとベースカラー、デザインの雰囲気で絞りこむことができます。

・ランディングページ集めました。

こちらも有名なサイトです。14のカテゴリーに分けられており、色のイメージで絞りこむことができます。

・WebDesignClip

おしゃれなデザインのランディングページを探しているなら、こちらのサイトがおすすめです。日本だけでなく、海外のランディングページも集められています。

ランディングページのデザイン制作における4つのポイント

冒頭でもお伝えしたとおり、ランディングページの目的はコンバージョン獲得です。デザインにおいても「いかにしてユーザーをコンバージョンへ誘導するか」を意識して制作しなければいけません。

ここでは、ランディングページのデザインを考える上で最低限知っておきたいポイントを以下の4つに分けて紹介します。

  • キャッチコピーや文章の読みやすさを最優先する

  • 続きを読ませる工夫をする

  • 訴求したい印象に最適な配色・背景色を選ぶ

  • クリッカブルなCTAボタンでクリックを促進する

キャッチコピーや文章の読みやすさを最優先する

RICE FORCE

商品や用途を問わず、ランディングページのデザインにおいて最も重要なポイントが、キャッチコピーや文章の可読性を高めることです。なぜなら、ユーザーがランディングページを読むか否かを判断するのはファーストビューのキャッチコピー、そしてコンバージョンの決め手となるのが商品説明などの文章だからです。

ポイントは全体の色数を少なくすることや、過度の装飾を控えることなどですが、フォントの使い方にも以下のような工夫が必要です。

  • キャッチコピーに画像フォントを使って、立体感を出したり袋文字にしたりする

  • 文章のフォントサイズにメリハリをつける(ジャンプ率を高くする)

  • アピールポイントは太字にしたり、色を変えたり、マーカーを引いたりして強調する

理想は上図や以下の事例のように、流し読みしただけでアピールポイントが伝わるようなデザインです。

関電ガス

ちなみにランディングページでは、自社が伝えたいことを伝えるのではなく、ユーザーの課題を代弁したり、ユーザー本人も気付いていない問題を指摘したりするようなキャッチコピーや文章が効果的です。そして、そうしたコピーと文章作成に役立つのがこちらの書籍です。

顧客の「本音」がわかる9つの質問(橋本哲児/秀和システム)

顧客のインサイト=「本音」を引き出す方法と、それを実際のマーケティングに生かす方法が「9つの法則」としてまとめられています。ランディングページの制作を初めて実施する担当者の方に、ぜひとも読んで頂きたい1冊です。

続きを読ませる工夫をする

ユーザーをコンバージョンへと導くためには、途中で離脱されることなく、最後まで読んでもらわなければなりません。そのためには、内容はもちろんのこと、デザインにおいても続きを読ませる工夫が必要です。

ポイントは以下の3つです。

  • 視線の動きが単調にならないように文章スペースを左右に振り分ける

  • 色にコントラストをつけたり、写真や図解を使ったりしてリズミカルに読めるようにする

  • 矢印や▽、グラデーションをうまく使って、ユーザーの視線を先へ先へと誘導する

Airbnb

Liftage(リフタージュ)

RIZAP

訴求したい印象に最適な配色・背景色を選ぶ

いまやカラーマーケティングというジャンルがあることからもわかるように、色はマーケティングにおいて重要な役割を担う要素です。ランディングページにおいても、配色や背景色次第で商品の魅力が半減することもあるので注意が必要です。

ここでは、ユーザーに訴求したい商品・サービスの印象に最適な色を紹介しましょう。

・信頼感・安心感を訴求したい商品・サービス

日本ロングライフ

信頼感や安心感のアピールに適しているのが白や青をベースカラーとしたデザインです。上図の事例は老人ホームですが、BtoBサービスや保険のランディングページなどでもよく使われています。

・あたたかさや親近感を訴求したい商品・サービス

オフィスおかん

サービスのあたたかみや親近感をアピールしたい場合に最適なのは、オレンジなどの暖色系カラーです。他に、ニンニクを使ったサプリメントなど、元気や力強さを訴求したい商品にも使われています。

・おトク感を訴求したいランディングページ

ドコモdカード

商品・サービスの種類を問わず、特別なプレゼントや割引を設けたキャンペーン用のランディングページには、ゴールドや赤など派手でインパクトの強いカラーが多く使われています。

クリッカブルなCTAボタンでクリックを促進する

アスタリフト

クリッカブルとは「クリックできる」という意味の言葉です。CTAボタンは色や大きさで目立たせることも大切ですが、BtoC商品など、賑やかなデザインのランディングページの場合、それだけでは埋もれてしまうこともあります。

そこで有効なのが、ボタンに立体感を出したり、矢印アイコンを入れたりして「このボタンはクリックできますよ」とアピールする手法です。上の例のように、思わずクリックしたくなるような質感を出せればベストです。

他にも、マウスポインターを上に乗せると色が変わったり、プルプル振動したりする仕様のCTAボタンもあります。

やよいの青色申告オンライン

ワイヤーフレームの作り方とポイント

ワイヤーフレームは構成案とも呼ばれ、ランディングページの設計図のような役割を担います。ディレクターが作成し、企画・提案段階で使われるのが一般的ですが、デザイナーとのデザインイメージのすり合わせにも欠かせません。

ただし、あくまで目的はコンテンツや構成の共有であり、細かいデザイン指示は不要です。それよりも、ランディングページ全体でどのようなストーリーでコンバージョンへ誘導するか、そのために各コンテンツで何をアピールするか、といった「意図」を明確にする方が大切です。

反響の高いランディングページに必要な7つの要素とストーリー構成については、こちらのページを参照してください。

ワイヤーフレームは、社内用に手書きで作成する場合もあれば、クライアント向けにIllustratorなどを使う場合もありますが、以下のようなオンラインのワイヤーフレーム作成ツールを使えば、デザインツールやコーディングの知識がなくても見映えの良いワイヤーフレームを作成できます。

axure

ディスプレイ上のCTAボタンをクリックして遷移先のフォームを確認できるなど、インタラクティブ性のあるワイヤーフレームが作成できるのもオンライン作成ツールの魅力です。

Cacoo

日本語対応しているツールを使いたい方はCacooがおすすめです。無料トライアルも用意されています。

ランディングページにおけるレスポンシブデザインの注意点

レスポンスデザインとは、PCやスマートフォン、タブレットなど、デバイスごとの画面サイズに応じて、フォントや画像のサイズとレイアウトを調整して表示できるデザインのことです。

・パソコンでの表示(棒グラフの左右に吹き出し)

マネーフォワード

・スマートフォンでの表示(棒グラフの下に吹き出し)

マネーフォワード

また、それぞれのデバイスのユーザーが見やすいデザインを作れることだけでなく、HTMLやCSSをデバイスごとに分ける必要がないため、一括で修正や管理ができるというメリットもあります。

ただし、デザインによってはきめ細かい調整がきかないことや、スマートフォンでの表示速度が遅くなる、フォームが小さくて指でタップしづらいなど、ユーザビリティを損なう場合もあります。

とくに画像を多く使っていたり、スマートフォンからの流入数が多いランディングページは、スマートフォンに特化したデザインにすることが望ましいでしょう。

まとめ

ランディングページにおけるデザインの役割は、”魅せる”ことでもブランドイメージの刷り込みでもありません。ユーザーをコンバージョンへと導くことです。

そのためには、以下のような工夫が大切です。

  • コピーや文章を読みやすくする

  • 続きが読みたくなるレイアウトにする

  • 商品・サービスのを魅力が引き立つ色を使う

  • 思わずクリックしたくなるようなCTAボタンを設置する

HubSpotでは、デザイン以外にも、ランディングページのパフォーマンス向上のためのノウハウを完全無料のeBookで詳しく紹介しています。これからランディングページの活用を考えている方、現状のランディングページの成果にお悩みの方は、ぜひ下のボタンをクリックしてダウンロードしてください。

New Call-to-action

 New Call-to-action

元記事発行日: 2020年2月07日、最終更新日: 2020年2月10日

トピック::

ランディングページ