Web広告の受け皿となり、問い合わせなどのコンバージョンにスムーズに誘導するために機能するランディングページ(LP)。ランディングページのデザインを決める際は、高品質なデザインを集めたまとめサイトなどを参考にすることもできますが、ただデザインを真似するだけでは成果につながりづらいので注意が必要です。

→ダウンロード: 見込み客を惹きつけるランディングページ作成無料ガイド

本記事では、国内外のランディングページデザインまとめサイトと、自社の商品やサービスに合ったデザインを探すためのポイントを紹介します。 また、ランディングページを制作する上で覚えておくべき注意点についても解説していますので、Webデザイナーやディレクション担当の方はぜひ参考にしてください。

見込み客を惹きつけるランディングページ作成ガイド

デザインの参考になるランディングページ(LP)探し方のコツ

ランディングページ(LP)のデザインを探す時には、デザイン性や好みだけで選ぶのではなく、自社の商材やターゲットに合わせて選ぶようにしましょう。
 

業界で探す

業界によって、ランディングページのデザインは大きく異なります。多くのまとめサイトでは、業界ごとに探せる検索機能があるため、そちらを利用すると便利です。
 

カラーで探す

商品のイメージカラーがある場合は、その色からデザインを探すこともできます。メインカラーとサブカラーを指定できるまとめサイトなどもあります。特にカラーが決まっていない場合は、商品イメージの邪魔をするようなカラーを避けると良いでしょう。
 

国内のランディングページまとめサイト8選

はじめに、国内のランディングページのデザインまとめサイトを8つご紹介します。サイトごとに検索できるカテゴリーが異なるため、各サイトの機能を一覧にまとめました。

▼国内ランディングページ参考まとめサイトの機能一覧

 

掲載デザイン数

カラー検索

業界検索

イメージ検索

お気に入り機能

LPアーカイブ

25,000点以上

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

3,000点以上

×

×

WebDesignClip

1,600点以上

×

SANKOU!

2,500点以上

イケてるランディングページ集めてみました

25,000点以上

×

LP advance

1,600点以上

×

LP幹事

2,500点以上

×

ランディングページまとめサイト

300点以上

×

それぞれのサイトの特徴や、おすすめポイントについて詳しく解説していきます。
 

LP アーカイブ

LP アーカイブ

【おすすめポイント】

  • 掲載デザイン数25,000点以上(2021年9月時点)
  • カラー・業界・イメージで検索できる
  • 「お気に入り」機能がある

【特徴】

「LP アーカイブ」は、デザイン事例掲載数が豊富なサイトです。「サービス」「美容」「住宅」「求人」など23のカテゴリーと、ベースカラー・デザインの雰囲気で絞り込むことが可能です。それぞれのランディングページの紹介では、企業名・サービス名・キャッチコピーが掲載されており、デザイン制作の参考にしやすいでしょう。
 

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

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

【おすすめポイント】

  • 掲載デザイン数3,000点以上(2021年9月時点)
  • カラー・業界・アーカイブで検索できる
  • 新着順に掲載

【特徴】

「ランディングページ集めました。」は、2009年に開設された老舗のランディングページまとめサイトです。特に「スクール・資格」「健康食品・サプリメント」「美容・化粧品」などの分野のデザイン例を多く掲載しています。気になるデザインをクリックすると、各サイトに遷移します。新着順で掲載されており、月ごとにアーカイブ検索できるので、デザインの傾向も掴むことができます。
 

WebDesignClip

WebDesignClip

【おすすめポイント】

  • 掲載デザイン数1,600点以上(2021年9月時点)
  • メインカラー・サブカラー・業種で検索できる
  • タブバーでスマホ用ランディングページに切り替え可能

【特徴】

「WebDesignClip」は、おしゃれで洗練されたデザインのランディングページが多数掲載されているまとめサイトです。メインカラーとサブカラーを設定して絞りこみができるため、ランディングページのテーマカラーが決まっている場合に重宝します。特に、「食品・飲料」「インターネットサービス」「アプリ・ソフトウェア」カテゴリーのデザインが豊富です。
 

SANKOU!

SANKOU!

【おすすめポイント】

  • 掲載デザイン数2,500点以上(2021年9月時点)
  • 業界・商材・イメージ・季節・エフェクト・カラー・配色で検索できる
  • 雰囲気や細かいイメージで絞り込みできる

【特徴】

「SANKOU!」は、動きやアニメーション付きのランディングページデザインを多数掲載しているまとめサイトです。「ローディング」「背景が動く」など、気になるエフェクトからデザインを絞り込むこともできます。また、カラーは単色だけでなく、「高級感のある配色」「元気・楽しい・にぎやかな配色」など、イメージからの検索も可能です。
 

イケてるランディングページ集めてみました

イケてるランディングページ集めてみました

【おすすめポイント】

  • 掲載デザイン数220点以上
  • カラー・ジャンル・イメージから検索できる
  • 検索イメージが豊富

【特徴】

「イケてるランディングページ集めてみました」は、2021年に開設したばかりのデザインまとめサイトです。デザインの掲載数自体はまだ少ないものの、「インターネットサービス」「イベント」「食品・飲料」などの分野のデザインに注力しているのが特徴です。検索イメージは「さわやか系」「シンプル系」の他、「アート・芸術系」「オーガニック系」などオリジナリティのある検索ワードでもカテゴライズされています。
 

LP advance

LP advance

【おすすめポイント】

  • 掲載デザイン数1,600点以上(2021年9月時点)
  • カラー・業界・タイプ・メインビジュアル・エフェクトで検索できる
  • 業種・商材ごとの「キャッチコピー一覧」あり

【特徴】

「LP advance」は、幅広いカテゴリーのランディングページを集めたデザイン事例集です。特に「医療・エステ」「飲料・食品」「生活・インテリア・家電」の分野のデザインを多く掲載しています。業界・商材ごとにキャッチコピー一覧を表示できるため、WebデザイナーだけでなくWebディレクターの方にも役立つでしょう。

 

LP幹事

LP幹事

【おすすめポイント】

  • 掲載デザイン数2,500点以上(2021年9月時点)
  • 業界・カラー・イメージから検索できる
  • キャッチコピー・スマホ版デザインも表示できる

【特徴】

「LP幹事」は、業界・色・イメージからデザイン事例を探しやすいまとめサイトです。気になるデザインをクリックすると、実際のランディングページに加えて、「会社名」「キャッチコピー」「業界 / 色 / イメージ」といった情報も一緒に表示されます。上部のタブバー「SP版」をクリックすると、スマホ版のランディングページデザインに切り替わります。
 

ランディングページまとめサイト

ランディングページまとめサイト

【おすすめポイント】

  • 掲載デザイン数300点以上(2021年9月時点)
  • カラー・ジャンル・エフェクトから検索できる
  • 各デザインの特徴やページの動きの説明あり

【特徴】

「ランディングページまとめサイト」は、ランディングページのデザインを厳選したまとめサイトです。カラーやジャンルの他に、「レスポンシブデザイン」「パララックスサイト」といったサイト設計や、「コミカル系」「シック系」などのタイプ別でも絞り込むことが可能。気になるデザインをクリックすると、各デザインの特徴やページの動き、感想などが丁寧に解説されています。
 

海外のランディングページまとめサイト3選

次に、海外のランディングページまとめサイトを3つご紹介します。海外のまとめサイトは、タグを使った検索機能が充実しているのが特徴です。

▼海外ランディングページまとめサイトの機能一覧

 

掲載デザイン数

カラー検索

業界検索

イメージ検索

お気に入り機能

Land-book

300点以上

×

One Page Love

1,300点以上

×

×

MUUUUU.ORG

4,200点以上

×

それぞれのまとめサイトの特徴や、おすすめのポイントについて解説していきます。
 

Land-book

Land-book

【おすすめポイント】

  • 掲載デザイン数300点以上(2021年9月時点)
  • タグで検索できる
  • 「お気に入り」機能あり

【特徴】

「Land-book」は、業界やカラーごとの区分ではなく「タグ」を使って検索できるまとめサイトです。例えば、「Advertising(広告)」「Flat Design(フラットデザイン)」「Fashion(ファッション)」「Light Colors(淡色)」といったタグがあり、それぞれ複数のタグで絞り込むことも可能です。
 

One Page Love

One Page Love

【おすすめポイント】

  • 掲載デザイン数1,300点以上(2021年9月時点)
  • 業界・イメージで検索できる
  • 無料テンプレートあり

【特徴】

「One Page Love」は、最新のランディングページデザインのまとめサイトです。それぞれのデザインのポイント・特徴・カテゴリー・書体・制作したデザイナーについて詳しく解説されています。各デザインの説明ページを読むだけでも、最新のランディングページに関する情報収集に役立ちます。また、83種類のデザインテンプレートを無料で配布しています。
 

MUUUUU.ORG

MUUUUU.ORG

【おすすめポイント】

  • 掲載デザイン数4,200点以上(2021年9月時点)
  • 業界・デザイン・タイプ・カラーで検索できる
  • 国内・海外のランディングページを掲載

【特徴】

「MUUUUU.ORG」は、国内と海外の両方のランディングページを扱っているギャラリーサイトです。特に、「制作会社・広告代理店」「ファッション」などのおしゃれデザインが目を引きます。掲載デザイン数が豊富で、スマホ対応のレスポンシブWebデザインだけでも1,670種類以上あります。
 

【目的別】ランディングページのデザイン例

冒頭でご説明した通り、ランディングページは「デザインのセンスが良ければ商品やサービスが売れる」という訳ではありません。成果が出るランディングページには確固たるコンセプトがあり、それがベースとなってデザイン設計が行われています。

ランディングページのデザインは、一般消費者向け(B2C)と企業向け(B2B)で異なります。本章では、それぞれのターゲットに合わせたランディングページのデザイン例と特徴を併せてご紹介します。

なお、ランディングページの業種・目的別の活用方法については、以下の記事でも参考事例を交えて詳しく解説しています。ご興味のある方は、ぜひご覧ください。

 

B2C向けランディングページの特徴とデザイン例

効果的なB2C向けランディングページは、次の3点の特徴を備えています。

  • 商品の特徴が明確であること
  • 商品の使用感が明確であること
  • 感情が動くような訴求やデザインであること

この3点を意識しながら、以下のデザイン例を見ていきましょう。
 

デザイン例① ハーゲンダッツ ジャパン株式会社

▼PC版

デザイン例① ハーゲンダッツ ジャパン株式会社

▼スマホ版

デザイン例① ハーゲンダッツ ジャパン株式会社

「ハーゲンダッツ ジャパン株式会社」の「新商品情報」のランディングページは、コーポレートカラーとグレー(灰色)系の背景色のシンプルなデザインです。商品のイメージ画像をトップに配置し、見る人に「限定・贅沢・こだわり」といったイメージを伝えるキャッチコピーが使われています。
 

デザイン例② Rinnai

▼PC版

デザイン例② Rinnai

▼スマホ版

デザイン例② Rinnai

給湯機器や厨房機器などの製造販売を行う「Rinnai」のランディングページは、コーポレートカラーと白を基調としたあたたかみのあるデザインです。アイキャッチ画像として、小物などを配置したキッチンの写真を使用し、実際にその場で生活している状況を想像させることで、感情を動かす訴求に繋がります。
 

デザイン例③ エスビー食品株式会社

▼PC版

デザイン例③ エスビー食品株式会社

▼スマホ版

デザイン例③ エスビー食品株式会社

こちらは、「エスビー食品株式会社」による「栗原さんちのおいしいごはんシリーズ」のランディングページです。PC版・スマホ版共に、メインの写真は料理そのものではなく、楽しそうに調理する雰囲気が伝わる写真になっています。この写真によって、料理することの楽しさや喜び、美味しい料理の先にある家族の笑顔まで想像することができます。

このように、ターゲットが一般消費者向けのB2Cの場合、その商品やサービスを購入することによって、消費者の生活にどのような変化が起きるのかを具体的に想像できるようなランディングページになっているのが特徴です。

ユーザーの感情に訴えかけるデザインを制作するために、食品であればできるだけ美味しそうな画像にこだわったり、キッチン用品であれば、実際の生活の中に商品を取り入れた様子をイメージできるようにすると良いでしょう。
 

B2B向けランディングページの特徴とデザイン例

企業向けのB2B向けランディングページの場合、提供する商品やサービスがB2Cで扱うものに比べて複雑かつ高額であることが多いのが特徴です。B2B向けのランディングページを制作するポイントは以下の3点です。

  1. ユーザーが抱えている問題の解決策が明確であること
  2. 商品やサービスのベネフィットが瞬時に理解できること
  3. 比較検討が容易にできること
     

デザイン例① 全研本社(キャククル)

▼PC版

デザイン例① 全研本社(キャククル)

▼スマホ版

デザイン例① 全研本社(キャククル)

こちらは、全研本社株式会社が運営するWebメディア「キャククル」のランディングページです。「あなたの顧客、見えてますか?」というキャッチコピーと、「複数の中からターゲットを絞る」といったイメージの画像を用いて、集客に悩む企業のマーケティング担当者に共感し、解決案を明示しています。
 

デザイン例② 株式会社 デジタルステージ(BINDup)

▼PC版

デザイン例② 株式会社 デジタルステージ(BINDup)

▼スマホ版

デザイン例② 株式会社 デジタルステージ(BINDup)

ホームページ制作ツールを提供している「BINDup」のランディングページは、「サイト制作は、『お願いする』から『自分で作る』」というキャッチコピーが目を引きます。このコピーにより、「これを使えば、自分でホームページを作れるようになる」とユーザーに伝え、さらに「30日間無料」でユーザーの行動を後押ししています。

このようにB2Bの場合は、ユーザーが抱えている問題に刺さるキャッチコピーと、分かりやすい解決策を提案しているランディングページが多く見られます。実績や比較表などを取り入れながら、サービスのベネフィットを盛り込むといった工夫が必要でしょう。
 

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

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

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

  1. キャッチコピーや文章の読みやすさを最優先する
  2. 続きを読ませる工夫をする
  3. 訴求したい印象に最適な配色・背景色を選ぶ
  4. 思わずクリックしたくなるようなCTAボタンを設置する

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

商品や用途を問わず、ランディングページのデザインにおいて最も重要なポイントが、キャッチコピーや文章の可読性を高めることです。

  • 解決できる問題点が明確になっているか?
  • 何が提案されているか?
  • CTAに応えることで何が手に入るか?

コピーを作成する場合には、これら3点に注意し、読みやすさを最優先するようにしましょう。
 

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

ユーザーをコンバージョンへと導くためには、途中で離脱されることなく、最後まで読んでもらわなければなりません。そのためには、レイアウトを工夫したり、写真や図解を使ったりしてリズミカルに読めるようにすると良いでしょう。

矢印やグラデーションをうまく使って、ユーザーの視線を先へ先へと誘導することも一つの手法です。
 

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

色はマーケティングにおいて重要な役割を担う要素です。ランディングページにおいても、配色や背景色次第で商品の魅力が半減することもあるので注意が必要です。以下の表を参考にしてください。

▼訴求したい印象に合わせた配色例

訴求したい印象

最適なカラー

信頼感 / 安心感

白 / 青など

あたたかさ / 親近感

ベージュ / オレンジなど

お得感 / プレミアム感

ゴールド / 赤など

 

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

CTAボタンは、「無料でダウンロード」「資料を請求する」「無料でお試し」など、ユーザーをコンバージョンにつなげる重要な役割を担っています。ボタンのデザインは色や大きさで目立たせることも大切ですが、「クリッカブル(クリックできる)」と伝わるものでなければなりません。例えば、ボタンに立体感を出したり、マウスポインターを上に乗せると色が変わる、振動するといった仕様のCTAボタンもあります。

この他にも、ランディングページのデザインについて以下の記事で詳しく解説しています。7つのポイントごとにデザインのテスト例も紹介しているため、ぜひご覧ください。

 

ランディングページデザインのワイヤーフレームの決め方

ランディングページ(LP)デザインを決める際には、「ワイヤーフレーム」を作成してコンテンツや構成を確認します。

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

ワイヤーフレームは手書き、またはIllustratorなどを使って作成します。無料から利用できる「A Complete Wireframe Tool - Axure」や「Cacoo(カクー)」といった作成ツールも便利です。

ワイヤーフレームの詳しい作り方については、下記の記事で詳しく解説しておりますので参考にしてください。

 

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

ランディングページ(LP)のデザインを決める際、忘れてはならないのがレスポンシブデザインです。レスポンスデザインとは、PCやスマートフォン、タブレットなど、デバイスごとの画面サイズに応じて、フォントや画像のサイズとレイアウトを調整して表示できるデザインのことです。

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

ただし、デザインによってはきめ細かい調整がきかないことや、スマートフォンでの表示速度が遅くなったり、フォームが小さくて指でタップしづらかったりと、ユーザビリティを損なう場合もあるため注意が必要です。画像を多く使っている場合や、スマートフォンからの流入数が多いことが分かっている場合は、スマートフォンに特化したデザインにすることが望ましいでしょう。

スマートフォンのランディングページについては、以下の記事でも詳しく解説しています。ご興味のある方は、ぜひご覧ください。

 

すべてのランディングページはユーザー起点でデザインを

見た目の良さも判断されやすいランディングページ(LP)は、デザインを重視することも大事ですが、あくまでもユーザーにとって必要な情報が分かりやすく載っていることが前提です。

ランディングページにおけるデザインの役割は、ブランドイメージの刷り込みなどではなく、ユーザーをコンバージョンへと導くことです。デザインに凝り過ぎて伝えたいことが曖昧にならないよう注意しましょう。

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

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

見込み客を惹きつけるランディングページ作成ガイド

 見込み客を惹きつけるランディングページ作成ガイド

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

トピック::

ランディングページ