電話受付中 平日10:00~19:00 03-5919-0055

日本最大級のホームページ制作会社検索サイト

お急ぎの方はお電話で !( 平日10:00〜19:00 )

03-5919-0055

無料でWeb発注相談 ! 24時間受付中 !

メールで相談する

ランディングページ(LP)の事例まとめサイトおすすめ7選 – 効率的な探し方や参考事例もご紹介

マユ

Written by

マユ

ランディングページ(LP)の事例まとめサイトおすすめ7選 - 効率的な探し方や参考事例もご紹介

「ランディングページの事例を見たい」
「ランディングページの事例を効率よく探す方法はある?」

上記のような悩みや疑問をお持ちではありませんか?ランディングページは、商品購入や問い合わせなどのユーザー行動を促す目的として活用されています。適切に制作すればコンバージョン率の向上に有効なランディングページですが、初心者がいきなり作って成功するほど簡単なものではありません。

効果的なランディングページを制作するには、数多くの事例を見てデザインやレイアウトを参考にすることが大切です。そこでこの記事では、以下4つのポイントに絞って解説していきます。

  • ランディングページの参考事例を効率的に探す方法
  • おすすめのランディングページの事例まとめサイト
  • ランディングページの参考事例
  • ランディングページデザインのポイント

    ランディングページの事例を探している方は、ぜひ参考にしてみてください。

    ランディングページの制作を検討している方は、以下の記事もおすすめです。

    ランディングページ(LP)の参考事例を効率的に探す4つの方法

    自社に最適なランディングページを制作するには、たくさんの事例を見てアイデアを増やすのがおすすめです。ここでは事例探しに役立つまとめサイトを、効率的に活用する4つの方法をご紹介します。

    • 業界で絞り込む
    • 色で絞り込む
    • イメージで絞り込む
    • ポイントを押さえて事例を見る

      1つずつくわしく解説します。

      業界で絞り込む

      ランディングページは業界ごとに特徴や好まれるデザインが異なります。まずは自社と同じ業界で絞り込み、業界の特徴を把握するのがおすすめです。ファッションや料理関連では画像を多く取り入れている、ダイエットや健康食品関連では漫画を取り入れているなど、業界独特の特徴が見えてくるはずです。

      さらに同じ商材で絞り込むと、具体的なイメージや競合他社のランディングページが見つかりやすくなります。競合他社のランディングページをしっかりと分析しておけば、デザインが類似するのを防げる、差別化を図れるなど、制作時に役立ちます。

      色で絞り込む

      使用したい色が決まっているのなら、カラー検索をするのも有効です。コーポレートカラーや商材のイメージカラーで検索し、配色バランスを参考にしてみましょう

      使用したい色が決まっていない場合は、色彩心理学をもとに色を指定するのもおすすめです。安心感を与えたいのなら青、高級感をもたせるなら黒というように、企業や商材のイメージに合わせて色検索をすると、配色の参考になる事例を探せます。

      以下に各色が与えるイメージをまとめましたので、参考にしてみてください。

      与えるイメージ
      情熱、勝利、成功
      オレンジ 明るい、温かい、元気
      黄色 明るい、軽やか、危険
      自然、安らぎ、平和
      誠実、冷静、安全
      魅惑的、神秘的、高貴
      重厚感、高級感、落ち着き
      清潔感、純粋、軽やか

      イメージで絞り込む

      「ナチュラル」「かっこいい」などのキーワードで絞り込みができるまとめサイトもあります。メインカラーが決まっていなくても、ざっくりとしたイメージで検索ができて便利です。ユーザーに与えたい印象やブランドイメージに合わせてキーワード検索をして、アイデアを膨らませましょう。

      ポイントを押さえて事例を見る

      事例をただ眺めているだけでは制作に活かせません。以下のポイントに着目し、良い点だけでなく良くないと感じた点もチェックしておくと、実際に制作するときに役立ちます

      • どんな人をターゲットにしているのか
      • ランディングページの目的は何なのか
      • どんなキャッチコピーなのか
      • どんなコンテンツを載せているのか
      • どんなレイアウトにしているのか
      • CTAボタンの色・大きさ・位置
      • 閲覧のしやすさ

      おすすめのランディングページ(LP)の事例まとめサイト7選

      ここでは、おすすめのランディングページの事例まとめサイトを7つご紹介します。検索機能や見やすさなどはそれぞれ異なるため、用途に合わせて最適なサイトを活用してください

      掲載数 業界検索 色検索 イメージ検索 お気に入り機能
      SANKOU! 3,446件
      LP advance 2,163件
      LPアーカイブ 38,919件
      Web Design Clip 5,143件
      RESPONSIVE WEB DESIGN JP 2,900件
      Land book 300件 ◯(タグ検索)
      縦長ページのデザイン集めました 89件

      SANKOU!

      SANKOU!のファーストビュー

      出典:SANKOU!

      • 更新頻度が高い
      • 制作会社までわかる
      • シンプルで見やすい

      「SANKOU!」はほぼ毎日更新されており、最新の事例を探せます。また、制作会社が判明している場合は事例左下にクレジットが掲載されているため、直接問い合わせができます。

      ワンクリックでお気に入り登録やスマホ表示の閲覧ができる操作性の良さも魅力です。「背景が動く」「動画が流れる」など、使われているデザイン技術で絞り込みもできます。

      LP advance

      LP advanceのファーストビュー

      出典:LP advance

      • and検索ができる
      • キャッチコピーから探せる

        「LP advance」では、以下4つの条件を組み合わせた検索が可能です。

        • カテゴリー(業種)
        • タイプ(かっこいい系、かわいい系など)
        • メインビジュアル(男性、女性、動物など)

        そのため、調べたいランディングページが明確な場合に効率的に探せます

        また「キャッチコピー一覧」では、業種ごとにキャッチコピーがまとめられています。デザインだけでなく、キャッチコピーに悩んだ際にも参考になるでしょう。

        LPアーカイブ

        LPアーカイブのファーストビュー

        出典:LPアーカイブ

        • 事例登録数NO.1
        • 機能が充実している
        • キャッチコピーが閲覧できる

          最も多くの事例を掲載しているのが「LPアーカイブ」で、毎日10ページ以上が追加されています。検索機能が充実しているため、豊富な事例の中から目的のランディングページを探し出せます。また、表示順序は「お気に入りが多い順」「登録が新しい順」など4パターンから選択可能です。

          会員登録をすれば、お気に入りのランディングページをフォルダ分けできます。作成したフォルダをメンバー内で共有する、制作会社に提出するなど便利に活用できるのも魅力です。

          Web Design Clip

          Web Design Clipのファーストビュー

          出典:Web Design Clip

          • カラー検索に強い
          • レイアウト別に検索できる
          • シンプルで見やすい

            「Web Design Clip」は、メインカラーとサブカラーのそれぞれで検索ができるため、配色で迷っているときに役立ちます。また、他サイトではあまり見られないレイアウト別の検索機能もあります。おおよそのデザインが固まっているときに、参考にしたい事例を効率よく探せるでしょう。

            各ランディングページの詳細ページでは、関連タグの表示やよく似た事例の掲載など、事例収集に役立つ機能が充実しています。

            RESPONSIVE WEB DESIGN JP

            RESPONSIVE WEB DESIGN JPのファーストビュー

            出典:RESPONSIVE WEB DESIGN JP

            • レスポンシブWebデザインに特化している

              日本国内のレスポンシブ対応のWebページを集めたギャラリーサイトです。スマホ、タブレット、PCの3種類の見え方を一目で確認できます

              各ランディングページの詳細ページでは、似ている事例も複数紹介されています。

              Land book(英語)

              Land bookのファーストビュー

              出典:Land book

              • 海外のランディングページが見られる
              • タグ検索ができる

                海外のランディングページ事例集です。業界ごとのカテゴリー分けはされていませんが、タグ検索機能を活用すれば目的のランディングページを探せます。

                お気に入り数の多い順や新着順に並べ替えることも可能です。海外向けのランディングページを制作するときだけでなく、デザインのヒントを得たいときにも活用できます

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

                縦長ページのデザイン集めましたのファーストビュー

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

                • 他にはないカテゴリー分け

                  「縦長ページのデザイン集めました」には、ギャンブル、ハウツー、情報商材など他にはないカテゴリーがあります。気になったランディングページには、ワンクリックで遷移できます。

                  ランディングページ(LP)の参考事例5選

                  ここでは、参考にしたいランディングページの事例を5つご紹介します。

                  • 【BtoB】アップセルテクノロジィーズ
                  • 【BtoB】L Message(エルメ)
                  • 【美容】ルルルン クレンジングバーム RICH MOIST
                  • 【文具】編集者のための〆切手帳
                  • 【花・定期便】bloomee(ブルーミー)

                    1つずつくわしく解説します。

                    【BtoB】アップセルテクノロジィーズ

                    アップセルテクノロジィーズのファーストビュー

                    出典:アップセルテクノロジィーズ株式会社

                    インサイドセールス代行を行う「アップセルテクノロジィーズ株式会社」のランディングページです。ターゲットが抱えているであろう悩みを羅列して共感を呼び、解決策としてサービス概要を紹介しています

                    「利用継続率90%以上」という具体的な数字や取引先アンケート、導入企業の声などを掲載し、ユーザーの不安を払拭する工夫が施されています。メインカラーの青の補色であるオレンジをCTAボタンや強調したいテキストに使用し、目立たせているのも参考にしたいポイントです。

                    【BtoB】L Message(エルメ)

                    エルメのファーストビュー

                    出典:L Message(エルメ)

                    株式会社ミショナが提供するLINE拡張ツール「L Message(エルメ)」のランディングページです。ファーストビューで導入実績、継続率、満足率、オススメ度を具体的な数字で示し、信頼感を高めています。

                    また、CTAボタンの表示が「無料で使ってみる」となっていたり、簡単に導入できることを訴求していたりと、申込みへの心理的ハードルを下げる工夫も随所に見られます

                    【美容】ルルルン クレンジングバーム RICH MOIST

                    クレンジングバーム RICH MOISTのファーストビュー

                    出典:ルルルン クレンジングバーム RICH MOIST

                    Dr.ルルルン株式会社による「クレンジングバーム RICH MOIST」のランディングページです。「メイクを落とす。きれいは残す。」という印象的なキャッチフレーズを打ち出し、ファーストビューでターゲットを惹きつけています。

                    余白を活かしたシンプルなデザインですが、ところどころに動画やイラストを取り入れ、情報のわかりやすさにもこだわっています

                    【文具】編集者のための〆切手帳

                    編集者のための〆切手帳のファーストビュー

                    出典:編集者のための〆切手帳

                    株式会社WORDSによる「編集者のための〆切手帳」のランディングページです。「どんなものだろう?」と思わず続きを読みたくなるようなキャッチコピーと商品名が特徴です

                    購入ボタンまで黒に揃えて統一感を持たせながらも、動的要素を取り入れる、右上に固定表示するなどしてしっかりと目立たせています。ユーザーが迷わず注文に進められるように工夫されているのも参考にしたいポイントです。

                    【花・定期便】bloomee(ブルーミー)

                    ブルーミーのファーストビュー

                    出典:bloomee

                    ユーザーライク株式会社による花の定期便「bloomee(ブルーミー)」のランディングページです。キャッチコピーや美しく生けられた花を引き立てるために、背景はシンプルにされているのが特徴です。かわいらしさやナチュラルさが感じられるファーストビューでターゲットを惹きつけています。

                    届いてから飾るまでの流れを写真つきで解説してあり、手軽に花のある暮らしを始められることをわかりやすく解説しています。

                    知っておきたいランディングページ(LP)デザインの4つのポイント

                    ここでは、ランディングページのデザインを考える際に押さえておきたい4つのポイントをご紹介します。

                    • 3色に絞ると統一感が出る
                    • フォントでメリハリを出す
                    • 余白や位置揃えで見やすくする
                    • 画像や動画で伝わりやすくする

                      1つずつくわしく解説します。

                      ランディングページの作り方については、以下の記事も参考になります。

                      ランディングページの作り方をわかりやすく解説 !おすすめの無料ツールや成果を上げる7つのコツも紹介

                      3色に絞ると統一感が出る

                      使用する色をメインカラー、サブカラー、コンバージョンカラーの3色に絞ると、統一感を出しつつ強弱のついたデザインに仕上がります

                      メインカラーはページの大部分を占める色です。企業や商材のイメージカラーだけで選ぶのではなく、ユーザーにどのような印象を与えたいかも考慮しましょう。

                      サブカラーにはメインカラーを引き立て、ページ全体にメリハリをつける役割があります。メインカラーとのバランスを考慮して選ぶことが大切です。落ち着いた印象にしたいときは暗め、ポップな印象を与えたいときはビビッドな色を選ぶと良いでしょう。

                      コンバージョンカラーはCTAボタンに使用する色で、一目でわかるような目立つ色にすることが大切です。色相環において、メインカラーの反対に位置する補色を選ぶと目を引きやすくなります。たとえば、メインカラーが青ならオレンジ、メインカラーがピンクなら緑がコンバージョンカラーにおすすめです。

                      色相環図

                      フォントでメリハリを出す

                      フォントの大きさや種類を使い分けると、メリハリがついて読みやすくなります。全て同じ種類やサイズのフォントにしてしまうと、単調な印象になり、重要な情報がきちんと伝わりません。

                      キャッチコピーなど強調したい箇所は大きなサイズで目立つフォントにすると、ユーザーの目に留まりやすくなります。反対に、助詞だけを小さいフォントにするなどもメリハリをつけるテクニックの1つです。

                      細すぎるフォントは読みにくく、太すぎるフォントは暑苦しい印象を与えてしまうこともあるため、視認性の良さも考慮することが大切です。

                      余白や位置揃えで見やすくする

                      びっしりと文字が並んだランディングページは、読んでいて疲れやすく離脱につながってしまいます。見やすいページにするには、行間やコンテンツの前後に適切な余白を設けることが大切です。余白の高さや幅は揃えて、統一感を持たせることも忘れないようにしましょう。

                      また、画像や文章の位置がバラバラなのも読みにくさにつながります。左揃えにするなど、情報を整理してわかりやすく配置すると、最後まで読んでもらいやすいランディングページが作れます。

                      画像や動画で伝わりやすくする

                      画像や動画は訴求力に優れているため、文章では伝えきれない情報を補完できる、具体的な使用イメージを持たせられるなどのメリットがあります。効果的に活用すれば、商品やサービスの魅力を最大限に伝えられます。

                      ただし容量の大きい画像や動画を多用すると、ページの表示速度に影響を与える可能性があるため、注意が必要です。

                      参考事例からヒントをつかみ、ランディングページ制作に活かそう!

                      ランディングページを制作する際は、たくさんの事例を見てアイデアを膨らませるのがおすすめです。事例まとめサイトはそれぞれ特徴が異なります。「配色を参考にしたい」「キャッチコピーを見たい」など、目的に合わせて最適なサイトを活用しましょう。本記事を参考に効率よく事例を探し、ランディングページ制作に活かしてください。

                      この記事を書いたライター

                      マユ

                      マユ

                      IT企業で12年勤務。現在は2人の子を育てながらWebライターとして活動中。スイーツやインテリアなど、幅広いジャンルを執筆。読者に寄り添った、分かりやすく、丁寧な文章を心がけています。趣味はパン屋さん・ケーキ屋さん巡り。

                      このライターの記事一覧

                      この記事を監修した人

                      藤澤 尚也

                      藤澤 尚也

                      JetB株式会社メディア事業部SV。前職の大手IT企業の同僚から誘いを受け2018年に入社。営業部に2年半、制作部に2年在籍し、マーケティングやサイト制作の実績と経験を積んだ後、幅広い知識を活かすために優良WEBに参画。ベースとラーメン二郎をこよなく愛する。

                      この監修者の記事一覧

                      Share

                      関連記事

                      Share