ランディングページデザインのまとめサイト14選|効率的に探すコツについても|Webサイト制作・CMS開発|LeadGrid

ランディングページデザインのまとめサイト14選|効率的に探すコツについても

目次

「ランディングページ(LP)を作成したいが、どのようにデザインしていいか分からない」とお悩みのWeb担当者の方は多いのではないでしょうか。

そんな時には、ランディングページデザインのまとめサイトを参考にすることをおすすめします。

ランディングページデザインのまとめサイトでは、ジャンルやテイストごとに、数多くのランディングページの制作事例が掲載されています。きっとあなたのニーズに合ったデザイン例が見つかるはず。

本記事では、おすすめのランディングページデザインまとめサイト14選を紹介します。デザインの流れやコツも合わせて解説するので、ぜひ参考にしてください。

ランディングページの全体像を掴みたい方は先にこちらの記事をどうぞ。 

ランディングページ(LP)とは?作り方やホームページとの違いについて解説

ランディングページのデザインの特徴

まずはランディングページのデザインの特徴を押さえておきましょう。

ランディングページのデザインには、通常のホームページとは違う、次のような特徴があります。

  • CVに特化してデザインされる
  • 縦長の1ページで構成・デザインされる

関連記事:ランディングページ(LP)とは?作り方やホームページとの違いについて解説

CVに特化してデザインされる

ランディングページの目的は、訪問ユーザーを「商品購入」「問い合わせ」などのCVに導くことです。そのため、ランディングページのデザインはCVに特化したものとなっています。

たとえば、ボタンの数やページ数を最小限にする、キャッチコピーや共感のフレーズを目立たせるなど、CVのための様々なデザインの工夫がされています。

縦長の1ページで構成やデザインされる

ランディングページは縦長の1ページで構成やデザインがされることが一般的です。必要な情報を1ページに収めることで、ユーザーは欲しい情報に簡単にたどり着けるようになります。

ユーザーの意識を商品やサービスに集中させられるので、CV向上が期待できます。

ランディングページのデザイン決定までの流れ

ランディングページのデザインを決定するまでの流れを解説します。

  • 企画作成
  • ワイヤーフレーム作成
  • デザイン作成
  • 効果検証・改善

企画作成

まずは、企画作成をし、誰に向けて、何のためにランディングページを制作していくのかを明確にします。

CVポイントや、ターゲットによって、求められるデザインが異なるので、慎重に検討しましょう。

ワイヤーフレーム作成

企画が固まったら、必要な要素や何をどこに配置するのかなど、ランディングページ全体の構成を決めていきます。

構成が決まったら、それらをワイヤーフレームに落とし込みましょう。ワイヤーフレームとはランディングページの設計図のようなものです。

ワイヤーフレームをもとに、デザイナーが本格的なデザインに仕上げていきます。

デザイン作成

いよいよデザイン作成に入ります。全体のデザインを整えるだけではなく、CVやブランディングを意識した工夫が必要です。

また、ユーザーの使いやすさにも意識して、見やすい配色や、入力フォームの最適化、画面サイズの最適化などにも気を配りましょう。

効果検証と改善

ランディングページは一度作って終わりではありません。効果測定を行い、改善を行います。

効果検証の際には、2種類のデザインを用いて成果を比べるA/B検証などがよく用いられます。

ランディングページの色使いや、キャッチコピーの文言など、細かな部分までこだわって効果検証と改善をすることで、より成果の出るランディングページを目指しましょう。

ランディングページまとめサイトで参考にできるデザインを効率的に探す方法

デザインの参考事例を見るには、ランディングページまとめサイトがおすすめです。

しかし、数ある参考事例の中から、自社のニーズに合ったランディングページを探すのは時間がかかるでしょう。

ここでは、ランディングページまとめサイトで、参考にできるランディングページを効率的に探す方法を解説します。

  • 同じ業種で探す
  • 色で探す
  • テイストやイメージで探す

関連記事:LPの制作実績を制作会社や業界ごとに紹介|おすすめ事例サイトも

同じ業種で探す

やみくもに事例サイト内を見るのではなく、自社と同じ業種に絞って探すと効率的に探せます。

ランディングページは業種によってデザインのテイストが異なるので、ベンチマークとするランディングページは同業種であることが望ましいでしょう。

色で探す

メインカラーやサブカラーなどの色で探すこともできます。使用したい色が決まっている場合には、色で絞って探すのも良いでしょう。

同じ色であっても、色味や色調、配色バランスやコンテンツの内容によって、与える印象は違います。色で探すことによって、細かい色使いの参考にすることができるでしょう。

使用したい色が決まっていない場合にも、様々な色のランディングページを見てみることで、色による印象の違いを参考にすることができます。

テイストやイメージで探す

「爽やか」「かっこいい」など、テイストやイメージで探すこともできます。

商品やサービスが与えたい印象が決まっている場合には、テイストやイメージで探すのも効率的でしょう。

デザインの参考になる国内のランディングページまとめサイト11選

デザインの参考になる国内のランディングページまとめサイトの中から、おすすめ11選を紹介します。

ぜひ参考にしてみてください。

  • matome
  • LPアーカイブ
  • ランディングページ集めました。
  • LP advance
  • WebDesignClip
  • RESPONSIVE WEB DESIGN JP
  • イケてるランディングページ集めてみました
  • LP幹事
  • 縦長ページのデザイン集めました
  • SANKOU!
  • bookma!

matome

matomeはリード獲得に特化したCMS「LeadGrid」がマーケティング視点でトレンドを抑えたウェブサイトを集めたギャラリー・リンク集です。

サイトカテゴリごとに分類されているので、近い業種を選んでデザインの参考にしましょう。

matomeの詳細はこちら


LPアーカイブ

LPアーカイブは、ランディングページに特化したデザインまとめサイトです。

カテゴリー、カラー、雰囲気などから複合的に検索できるため、ランディングページ制作の参考にすることはもちろん、外注する際にも役立つでしょう。

27000以上のPCデザインが掲載されており、毎日10ページ以上のデザインが追加されています。

LPアーカイブの詳細はこちら

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

「ランディングページ集めました。」は、その名の通り、ランディングページを集めたサイトです。

業種・業界ごとに、カテゴリー分けをしてランディングページ事例を掲載しているため、自社と同業種のランディングページをすぐに見つけることができます。

デザイン性の高いランディングページが多数掲載されているので、同業種のデザイン事例だけでも覗いてみてもいいかもしれません。

「ランディングページ集めました。」の詳細はこちら

LP advance

LP advanceは、ランディングページ制作やWeb広告に参考になる、ランディングページのデザインまとめリンク集です。

カテゴリー、カラー、タイプ、メインビジュアルから詳しく検索条件を絞ることができます。

また、カテゴリーごとのランディングページのキャッチコピーも、まとめて掲載されているため、デザインだけでなく、キャッチコピーも参考にできます。

LP advanceの詳細はこちら

WebDesignClip

WebDesignClipは、ランディングページデザインのギャラリーリンク集です。

カテゴリーやカラーだけでなく、サブカラーや「和風」「手書き風」などといったタグでも検索できます。

サイトのUIもシンプルでおしゃれなので、見て回りたくなるようなサイトです。

WebDesignClipの詳細はこちら

RESPONSIVE WEB DESIGN JP

RESPONSIVE WEB DESIGN JPは、国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

閲覧デバイスごとの見え方の違いを、一目で確認できるようにまとめられています。レスポンシブデザインのデザイン事例を探している方は、ぜひ参考にしてみてください。

RESPONSIVE WEB DESIGN JPの詳細はこちら

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

「イケてるランディングページ集めてみました」は、Web制作やマーケティングを手がける株式会社ZEROが、写真共有サービスPinterestで展開しているまとめページです。

Web制作会社のプロの目線で選ばれた「イケてるランディングページ」ばかりなため、デザインの参考になるでしょう。

「イケてるランディングページ集めてみました」の詳細はこちら

LP幹事

LP幹事は、日本最大級のランディングページデザイン事例サイトです。

業界、カラー、イメージを掛け合わせて検索することができるので、自社のニーズに合ったデザイン事例を効率的に探すことができます。

LP幹事の詳細はこちら

縦長ページのデザイン集めました

「縦長ページのデザイン集めました」は、セールスレターのデザインリンク集です。

ランディングページはユーザーをCVに導く目的で作られるのに対し、セールスレターは商品やサービスを販売する目的で作られるページです。

セールスレターは、より売ることを意識して作られているので、インパクトの付け方やセールス手法はランディングページのデザインの参考にもなるでしょう。

「縦長ページのデザイン集めました」の詳細はこちら

SANKOU!

SANKOU!は、Webデザインの参考になる国内のおしゃれなWebサイトを集めたサイトです。

ランディングページだけでなく、Webページやコンテンツページなども閲覧することができるため、広く情報を収集することができるでしょう。

また、「アニメーション」「動画が流れる」など、細かな条件別に検索することもできるため、多角的に参考になるランディングページのデザインを探すことができます。

SANKOU!の詳細はこちら

bookma!

bookma!は、感性を刺激するようなおしゃれなWebページを掲載するWebデザインギャラリーです。

PCデザインとモバイルデザインが横並びで表示されていることが特徴です。検索機能は、キーワード検索のみのシンプルなものとなっています。

洗練されたデザインが多数掲載されており、PC版とモバイル版をセットで表示してくれるため、レスポンシブデザインの参考になるでしょう。

bookma!の詳細はこちら

デザインの参考になる海外のランディングページまとめサイト3選

海外のサイトでも、おしゃれで洗練されたデザインが掲載されているランディングページのまとめサイトがあります。

デザインの参考になる、おすすめの海外のランディングページまとめサイト3選を紹介するので、ぜひ参考にしてみてください。

  • ONE PAGE LOVE
  • Land-book
  • OnePageMania

ONE PAGE LOVE

ONE PAGE LOVEは、おしゃれなデザインのランディングページが多数掲載されているランディングページまとめサイトです。

検索機能が充実しているところも特徴です。シンプルな作りになっているため、英語が分からない方でも感覚的に使いやすいサイトでしょう。

ONE PAGE LOVEの詳細はこちら

Land-book

Land-bookは、海外のWebページを集めたランディングページまとめサイトです。ランディングページだけでなく、ポートフォリオやブログもまとめられています。

海外製のユニークなランディングページも多数掲載されているため、サイトを眺めるだけで良いデザインの刺激をもらえるでしょう。

Land-bookの詳細はこちら

OnePageMania

OnePageManiaは、1ページのWebサイトのみを集めた事例サイトです。Webサイト全体から集めた「最高の1ページ」を掲載しており、ランディングページの制作事例も多数あります。

また、サイト内のいいね獲得数TOP10ランキングも掲載されているため、人気の高いページをデザインの参考にするのもよいでしょう。

OnePageManiaの詳細はこちら

おさえておきたいランディングページデザイン作成のポイント7つ

おさえておきたいランディングページのデザイン作成のポイント7つを解説します。

  • ファーストビューを重要視する
  • 顧客志向を意識してトンマナを合わせる
  • メリハリをつける
  • 細部までこだわる
  • ユーザーの心理的負担を最小限にする
  • 色使いを工夫する
  • モバイルに最適化させる

ファーストビューを重要視する

訪問ユーザーが最初に目にするランディングページの上部をファーストビューと言います。ファーストビューは、ユーザーがランディングページをスクロールするかどうかを決定付ける重要な要素です。

そのため、ファーストビューを特に重要視して、ユーザーの興味をひきつけるための工夫をする必要があります。

顧客志向を意識してトンマナを合わせる

デザイン作成では、顧客志向を意識して、カラーやテキスト表現などのトンマナを合わせることが重要です。

たとえば、不動産業界のランディングページでは、商材やターゲットに合わせてデザインを大きく変えています。「女性向けの賃貸物件」であれば、ピンクなど女性らしい色を基調として、おしゃれできれいな印象を与えるデザインが多いです。一方で、「一戸建て住宅」であれば、家族や住宅の写真を使って、暮らしがイメージできるようなデザインがよく用いられます。

トンマナが合っていないと、ユーザーに違和感や不信感を与えてしまうことがあるため、注意しましょう。

メリハリをつける

ランディングページでは視覚的に訴求することが重要です。

しかし、全ての要素に装飾を加えすぎると、ごちゃごちゃとした訴求ポイントが分かりづらいページになってしまうでしょう。

そのため、CVボタンや、キャッチコピーなど、目立たせるべきポイントのみを大きく目立たせ、メリハリをつけたデザインにすることがポイントです。

細部までこだわる

誤字脱字やレイアウトの乱れがないかなど、細部までこだわってデザイン制作をしましょう。

細部までこだわれていないランディングページは、素人感が出てしまい、自社のブランディングに悪い影響を与えかねません。

ユーザーの心理的負担を最小限にする

ユーザーが素早く欲しい情報を得られるようにするなどして、ユーザーの心理的負担を最小限にすることもポイントです。

CVボタンが見つけにくかったり、入力フォームの入力項目が多すぎたりすると、離脱率が上がる場合があります。ユーザーがめんどくささを感じる要素を徹底的に抑え、スムーズにCVに向かわせるようにデザインしましょう。

色使いを工夫する

デザインでは色使いの工夫も重要です。

CVボタンに補色を上手く活用してCVに誘導したり、ブランディングを意識した色使いをしたりしましょう。

モバイルに最適化させる

ランディングページのデザインは、必ずモバイルに最適化させておきましょう。Webページ全体の閲覧デバイスはモバイルが主流だからです。

モバイルに最適化されたランディングページの参考事例を探すには、モバイルデザインに特化したのランディングページ事例サイトや、レスポンシブデザインのランディングページ事例サイトを見るのがいいでしょう。

ランディングページをデザインするための代表的な手段

実際にランディングページをデザインするためにはどうすればよいのでしょうか。ランディングページをデザインするための代表的な手段は4つです。

自社の状況にあった手段を選びましょう。

  • ランディングページ制作会社に依頼する
  • フリーランスに依頼する
  • 社内デザイナーに依頼する
  • ランディングページ制作ツールを利用する

ランディングページ制作会社に依頼する

ランディングページ制作会社に依頼する方法です。

ランディングページ制作会社に発注する場合には、テンプレートを使用しないオリジナリティのあるデザインを作成してもらえる場合が多いです。

制作会社の規模や依頼内容によって、10万円程度から50万円以上まで費用に幅があります。

関連記事:LP制作に強い制作会社13社|選び方のポイントも解説

フリーランスに依頼する

ランディングページ制作はフリーランスに依頼することもできます。

フリーランスに依頼する場合は、ランディングページ制作会社よりもコストを押さえて依頼できるでしょう。

フリーランスは柔軟に対応してくれる場合が多いので、10万円以下でデザインのみ依頼することもできます。

社内デザイナーに依頼する

社内にデザイナーがいる場合には社内デザイナーに依頼することもできます。

社内デザイナーであれば、外部に依頼するよりも、コミュニケーションコストが下がるため、スムーズにデザイン作成が進められるでしょう。

ランディングページ制作ツールを利用する

社内にデザイナーがいないが、ランディングページを自社で内製したいという場合にはランディングページ制作ツールを利用するという手段もあります。

ランディングページ制作ツールを使うと、テンプレートを活用して、誰でも簡単にハイクオリティーなデザイン作成ができます。

無料のランディングページ制作ツールもあるので、気軽に試してみてください。

関連記事:無料LP制作ツール5選|選ぶポイントやメリットとデメリット

まとめ

ランディングページの参考デザインを探す際には、ランディングページまとめサイトを活用するのがおすすめです。

ランディングページまとめサイトは、自分でランディングページをデザインする際はもちろん、ランディングページ制作会社やフリーランス、社内デザイナーとイメージをすり合わせる際にも役立ちます。

ランディングページのデザイン作成には、CV獲得のための様々な工夫が必要です。ランディングページを制作する際には、参考事例を単に真似するだけでなく、今回紹介した7つのポイントをぜひ確認してみてください。

 

またランディングページを作るならLeadGridがおすすめ。

LeadGridはランディングページやWebページの作成機能だけでなく、運用に必要な機能を多角的に備えたCMSツール。テンプレートを活用することで、デザイン性の高いランディングページを比較的安価に行うことができます。

ページを見たまま編集できる「ページ管理機能」や、ドラッグ&ドロップで簡単にフォームを作成できる「フォーム管理機能」が用意されており、運用も簡単。無料ツールで作成するランディングページと完全オーダーメイドのランディングページのいいところどりが可能なLeadGridをぜひお試しください。

LeadGridの詳細はこちら

60以上のCMSから32のサービスを厳選し、それらを表で比較しました

CMS比較一覧表を見る

記事を書いた人

LeadGrid BLOG編集部

LeadGrid BLOG編集部

LeadGrid BLOG(リードグリッド ブログ)は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。

お役立ち資料

サイト制作、マーケティング戦略設計、コンテンツ制作、Webコンサルティング
関連のお役立ち資料をご紹介します。

Web制作・CMS開発・Webマーケティングに関してお気軽にご相談ください。

多くのWeb制作、オウンドメディア制作、Webコンサルティング、コンテンツマーケティングの実績から制作から運用・改善までトータルでサポートします。