ランディングページのデザインで参考にすべき15のまとめサイトと5の事例【最新2020年版】

understand-feature-and-function-at-a-heat-1
Pocket
LINEで送る

あなたは今、ランディングページ(LP)のデザインを決めているのだろう。しかし、「どれを参考にすれば良いか分からない」と悩んでいるのではないか?

そう悩むのも無理はない。

世の中には、無数のランディングページが出回っている。その上、それぞれデザインが全く違う。

知識・経験がなければ、何も分からないのは当然だ。

そこで本日は、ランディングページデザインの15のまとめサイトと5の事例を紹介していく。

じっくり読んで、ぜひ参考にしてほしい。

※ LPを制作するからには失敗したくないですよね?
弊社はLP制作事業をおこなっています。貴社の事業を深く理解した上で、結果の出せるLPを制作します。戦略立案〜改善まで全てに対応できます。ご質問・ご相談は無料です。「お問い合わせフォーム(全国対応)」からお気軽にご連絡ください。
 
 

1.ランディングページにおけるデザインの重要性

ランディングページ(LP)のデザインは、コンバージョン率に大きな影響を及ぼす。

なぜならば、下記の2つが変わるからだ。

  1. ユーザーが抱く印象
  2. メッセージの伝わり方

例えば、下図のキャッチコピーを見たとき、「利用者が多いのは分かるが、どこか胡散臭い」と感じるはずだ。

胡散臭いランディングページ(LP)のキャッチコピーのデザイン

コンバージョン率を最大化させるには、最適化が必要不可欠なのだ。

ランディングページのデザインがコンバージョン率に影響を与える証拠

下図は弊社ランディングページのデザインを変えてABテストした結果だ。

ランディングページ(LP)のデザインを変えてABテストした結果

ご覧になって分かる通り、コンバージョン率が1.27倍になったのだ。

2.ランディングページのデザインで参考にすべき15のまとめサイト

「国内」と「海外」の2つに分けて、ランディングページ(LP)のデザインのまとめサイトを合計15個紹介していく。

実際に弊社も利用している。

ぜひ参考にしてほしい。

【国内】ランディングページのデザインで参考にすべき10のまとめサイト

サイト1:LPアーカイブ

ランディングページ(LP)デザインのまとめサイト「LPアーカイブ」のトップページURL:https://rdlp.jp/lp-archive

LPアーカイブは、日本最大のランディングページデザインのまとめサイトだ。

掲載数は18,500個だ。

下記の3つでの絞り込みが可能だ。

  1. カラー(ex.赤、ピンク、レインボー)
  2. カテゴリ(ex.インターネットサービス、日用雑貨)
  3. イメージ(ex.シンプル系、キレイ系)

それぞれに会社情報・一言コメントが載っている。

「これからデザインのイメージを固めたい人」におすすめだ。

サイト2:WebDesignClip

ランディングページ(LP)デザインのまとめサイト「WebDesignClip」のトップページURL:https://lp.webdesignclip.com/

WebDesignClipは、幅広い業種のランディングページのデザインをまとめたサイトだ。

掲載数は1,285個だ。

下記の5つでの絞り込みが可能だ。

  1. カラー(ex.黒、白、青)
  2. タイプ(ex.ECサイト、キャンペーン)
  3. カテゴリ(ex.建築、食品)
  4. テイスト(ex.かわいい、かっこいい)
  5. レイアウト(ex.ヘッダー固定、フッター固定)

1つ1つの表示面積が大きいため、遷移しなくてもデザインのイメージが分かる。

「デザインが明確化している人」におすすめだ。

サイト3:イケてるランディングページデザインまとめ

ランディングページ(LP)デザインのまとめサイト「イケてるランディングページデザインまとめ」のトップページURL:https://zero-s.jp/lp-media/

イケてるランディングページデザインまとめは、オシャレなランディングページのデザインをまとめたサイトだ。

掲載数は455個だ。

下記の3つでの絞り込みが可能だ。

  1. カラー(ex.青、ピンク、茶)
  2. ジャンル(ex.アウトドア、イベント)
  3. イメージ(ex.かっこいい系、かわいい系)

掲載元の8割が大企業だ。

「デザインを勉強したい人」におすすめだ。

サイト4:LANDINGPAGE BOOKMARK

ランディングページ(LP)デザインのまとめサイト「LANDINGPAGE BOOKMARK」のトップページURL:http://www.landingpage-link.jp/

LANDINGPAGE BOOKMARKは、単品通販のランディングページのデザインをまとめたサイトだ。

掲載数は1,399個だ。

「美容液」や「サプリメント」などの商品での絞り込みが可能だ。

シンプルな設計になっているため、Web初心者でも使いこなせる。

「購入促進用のデザインを知りたい人」におすすめだ。

サイト5:ランディングページ集めました。

ランディングページ(LP)デザインのまとめサイト「ランディングページ集めました。」のトップページURL:http://lp-web.com/

ランディングページを集めました。は、Web広告用のランディングページのデザインをまとめたサイトだ。

掲載数は2,963個だ。

下記の3つでの絞り込みが可能だ。

  1. 業種(ex.PC・家電、SEO・SEM)
  2. カラー(ex.赤、黄、緑)
  3. 更新日時(ex.2020年2月)

2009年6月から更新しているため、年代ごとのトレンドが分かる。

「コンバージョンに繋がるデザインを知りたい人」におすすめだ。

サイト6:LP advance

ランディングページ(LP)デザインのまとめサイト「LP advance」のトップページURL:https://site-advance.info/

LP advanceは、キャンペーン用のランディングページのデザインをまとめたサイトだ。

掲載数は1,585個だ。

下記の5つでの絞り込みが可能だ。

  1. タイプ(ex.かわいい・ポップ系、かっこいい・クール系)
  2. カラー(ex.白・ホワイト系、黒・ブラック系)
  3. カテゴリ(ex.ファッション、スポーツ)
  4. メインビジュアル(ex.物、文字)
  5. 効果・エフェクト(ex.スクロール、レスポンシブ)

カテゴリ別のキャッチコピー一覧ページを用意している。

「商材説明が伝わりやすいデザインを知りたい人」におすすめだ。

サイト7:ランディングページデータベース

ランディングページ(LP)デザインのまとめサイト「ランディングページデータベース」のトップページURL:http://www.lp-db.com/

ランディングページデータベースは、成果が出ていたランディングページのデザインをまとめたサイトだ。

掲載数は60個だ。

下記の3つでの絞り込みが可能だ。

  1. カラー(ex.ブラック、レッド)
  2. カテゴリ(ex.コスメ・化粧品、プロバイダー)
  3. 月別アーカイブ(2011年12月)

ただし、2011年の6〜11月にしか更新していない。トレンドを掴めない可能性がある。その点は十分注意すべきだ。

「コンバージョン数が最大化するデザインを知りたい人」におすすめだ。

サイト8:SANKOU!

ランディングページ(LP)デザインのまとめサイト「SANKOU!」のトップページURL:https://sankoudesign.com/category/lp/

SANKOU!は、最新のランディングページのデザインをまとめたサイトだ。

掲載数は160個だ

下記の5つでの絞り込みが可能だ。

  1. 効果(ex.イラストが動く、背景が動く)
  2. カラー(ex.ブラック・黒色、ホワイト・白色)
  3. タイプ(ex.シンプル、スタイリッシュ)
  4. カテゴリ(ex.ホテル・旅館、プロジェクト)
  5. メインビジュアル(ex.ステキな写真、シングルページ)

絞り込み項目が多いため、希望のデザインを瞬時に見つけられる。

「トレンドを知りたい人」におすすめだ。

サイト9:LANDINGPAGE_DESIGN BOOKMARK_SMARTPHONE

ランディングページ(LP)デザインのまとめサイト「LANDINGPAGE_DESIGN_BOOKMARK_SMARTPHONE」のトップページURL:http://smartphone-landingpage.info/

LANDINGPAGE_DESIGN_BOOKMARK_SMARTPHONEは、レスポンシブ対応のランディングページのデザインをまとめたサイトだ。

掲載数は137個だ。

「すっぽん」や「にんにく卵黄」などの商材での絞り込みが可能だ。

最新のデザインを中心に載せていることから、トレンドを掴むのも容易だ。

「スマホユーザー向けのデザインを知りたい人」におすすめだ。

サイト10:美容・化粧品ランディングページギャラリー

ランディングページ(LP)デザインのまとめサイト「美容・化粧品ランディングページギャラリー」のトップページURL:http://cosme-lp.com/

美容・化粧品ランディングページギャラリーは、美容関連商品のランディングページのデザインをまとめたサイトだ。

掲載数は1,045個だ。

下記の8つでの絞り込みが可能だ。

  1. ブランド(ex.資生堂、オルビス)
  2. ヘアケア(ex.シャンプー、トリートメント)
  3. スキンケア(ex.洗顔料、クレンジング)
  4. ボディケア(ex.ハンドケア、フットケア)
  5. メイクアップ(ex.化粧下地、ファンデーション)
  6. オーラルケア(ex.歯ブラシ、ホワイトニング)
  7. サプリメント(ex.顆粒、タブレット)
  8. 美容ドリンク(ex.単体)

有名ブランドは網羅している。

「美容関連商品用のデザインを知りたい人」におすすめだ。

【海外】ランディングページのデザインで参考にすべき5のまとめサイト

サイト11:One Page Love

ランディングページ(LP)デザインのまとめサイト「One Page Love」のトップページURL:https://onepagelove.com/

OnePageLoveは、オシャレなランディングページデザインをまとめた海外サイトだ。

掲載数は5,000個以上だ。

「スタートアップ」や「スポート」などの業種での絞り込みが可能だ。

下記の4つのデザインも個別で参照できる。

  1. 料金表
  2. ログインフォーム
  3. コンタクトフォーム
  4. チームメンバー紹介

「外資系企業風のデザインにしたい人」におすすめだ。

サイト12:OnePageMania

ランディングページ(LP)デザインのまとめサイト「OnePageMania」のトップページURL:https://www.onepagemania.com/

OnePageManiaは、商材説明用のランディングページのデザインをまとめた海外サイトだ。

掲載数は2,300個だ。

「アプリ」や「教育」などの商材での絞り込みが可能だ。

それぞれにいいねボタンが設置されているため、人気のデザインが一目で分かる。

「外資系IT企業風のシンプルなデザインにしたい人」におすすめだ。

サイト13:Land-book

ランディングページ(LP)デザインのまとめサイト「Land-book」のトップページURL:https://land-book.com/

Land-bookは、Web広告用のランディングページのデザインをまとめた海外サイトだ。

「広告代理店」や「美容品」などの業種で絞り込みが可能だ。

下記の2種類のソート機能が付いている。

  • 新着順
  • 人気順

「海外のコンバージョンに繋がるデザインを知りたい人」におすすめだ。

サイト14:lapa

ランディングページ(LP)デザインのまとめサイト「lapa」のトップページURL:https://www.lapa.ninja/

lapaは、幅広い業種・用途のランディングページのデザインをまとめた海外サイトだ。

掲載数は2,840個だ。

下記の2つでの絞り込みが可能だ。

  1. カラー(ex.緑、青)
  2. カテゴリ(ex.ECサイト、ブロックチェーン)

それぞれに会社情報・使用目的が載っている。

「海外のデザインを勉強したい人」におすすめだ。

サイト15:Landingfolio

ランディングページ(LP)デザインのまとめサイト「Landingfolio」のトップページURL:https://www.landingfolio.com/

Landingfolioは、小規模事業者のランディングページのデザインをまとめた海外サイトだ。

掲載数は462個だ。

下記の3つでの絞り込みが可能だ。

  1. カラー(ex.黒、白)
  2. カテゴリ(ex.不動産、SaaS)
  3. デバイス(ex.パソコン、スマホ)

「キャッチコピー」や「料金表」などの構成要素別のデザインが、それぞれに載っている。

「海外のデザインのトレンドを知りたい人」におすすめだ。

3.ランディングページのデザインで参考にすべき5の事例

ランディングページ(LP)のデザインの事例を用途別に合計5個紹介する。

弊社の調べでは、どれも大きな成果を生み出している。

ぜひ参考にしてほしい。

【購入促進用】ランディングページのデザインで参考にすべき2の事例

事例1:すっきりフルーツ青汁

健康食品「すっきりフルーツ青汁」のランディングページ(LP)URL:https://lp.myfabius.jp/o-trial02_opt_min_pc

健康食品「すっきりフルーツ青汁」のランディングページだ。

デザインのポイントは下記の4つだ。

  1. 写真で情景を想像させている
  2. 重要な文言を緑色・ピンク色にしている
  3. 優しい色を中心に配色してお手軽感を出している
  4. 商品パッケージと同じ配色にして違和感を小さくしている

「単品通販会社」は参考にすべきだ。

事例2:BIGLOBEモバイル

格安スマホ「BIGLOBEモバイル」のランディングページ(LP)URL:https://join.biglobe.ne.jp/mobile/lp/ls7/lp_01.html

格安スマホ「BIGLOBEモバイル」のランディングページだ。

デザインのポイントは下記の3つだ。

  1. 数字をピンク色にしている
  2. 図・表を用いて説明を分かりやすくしている
  3. 優しい色を中心に配色して芸能人を目立たせている

「安さが強みの会社」は参考にすべきだ。

【リード獲得用】ランディングページのデザインで参考にすべき2の事例

事例3:カオナビ

人事評価システム「カオナビ」のランディングページ(LP)URL:https://www.kaonavi.jp/lp/sgt_kncw/

人事評価システム「カオナビ」のランディングページだ。

デザインのポイントは下記の3つだ。

  1. コンバージョンボタンをオレンジ色にしている
  2. イラストを多用して説明を読みやすくしている
  3. 「4年連続シェア1」を目立たせて権威性を強調している

「コンバージョンポイントが資料請求の会社」は参考にすべきだ。

事例4:アクア救急センター

水道工事サービス「アクア救急センター」のランディングページ(LP)URL:https://aqua99.co.jp/lp/

水道工事サービス「アクア救急センター」のランディングページだ。

デザインのポイントは下記の3つだ。

  1. 明るい色を使って清潔感を出している
  2. 重要なポイントにのみ強い色を使っている
  3. アニメーションを使って画面下部の電話番号を目立たせている

「緊急性が高い商材を扱っている会社」は参考にすべきだ。

【キャンペーン紹介用】ランディングページのデザインで参考にすべき1の事例

事例5:放課後カルピス

カルピスのキャンペーン「放課後カルピス」のランディングページ(LP)URL:https://www.calpis.info/houkago/

カルピスのキャンペーン「放課後カルピス」のランディングページだ。

デザインのポイントは下記の3つだ。

  1. 多数の色を使ってお祭り感を演出している
  2. 青色中心の配色にしてカルピスを想起させている
  3. ターゲットと同年代の人物の写真を多用してターゲットの興味を引いている

「キャンペーン実施予定のBtoC会社」は参考にすべきだ。

最後に

本記事では、ランディングページ(LP)のデザインを徹底解説した。

内容は下記の通りだ。

  1. 重要性
  2. 15のまとめサイト
  3. 5の事例

まずは1の内容を確実に理解してほしい。そして、2と3を基に「参考にするランディングページ」を見つけてほしい。

そうすることで、結果の出るデザインが完成する。

弊社ではランディングページ制作事業をおこなっています。

戦略設計〜改善を専門家が実施して、結果の出るランディングページを納品します。

ご質問・ご相談は無料です。「お問い合わせフォーム(全国対応)」からお気軽にお問い合わせください。

おすすめのランディングページ制作会社を「LP制作会社10社」で紹介しています。ぜひ参照してください。

Pocket
LINEで送る


Web集客なら全てお任せください!

adell-cta-logo-3

Adellを運営する合同会社ビーエイチは、インターネット広告代理店です。

・リスティング広告
・SNS広告
・ネイティブ広告
・記事広告
・純広告
・コンテンツマーケティング
・SEO対策

全てのWebマーケティング施策において、あなたのお役に立つことができます。

ご質問・ご相談は無料ですので、下記のお問い合わせフォームからお気軽にご連絡ください。