leango
LP制作

LPデザインの参考になるポートフォリオサイト15選|用途別の選び方とCVRの上げ方

LPデザインの参考になるポートフォリオサイト15選|用途別の選び方とCVRの上げ方

この記事でわかること

本記事では、LPデザインの参考になるポートフォリオサイト15選を、LP専門・Webデザイン全般・スマホ・海外の4つの用途に分けて紹介します。あわせてCVRの高いLPに共通するペルソナ設定やフォント・配色の選び方、CTAボタンの工夫、A/Bテストの活用法も解説。LP制作を始める方やデザインを改善してCVRを高めたい方に役立つ内容です。掲載サイトは2026年9月19日に現存を確認しています。

記事のポイント

  • LP専門・Webデザイン全般・スマホ・海外に分けた参考サイト15選
  • CVRが高いLPに共通するペルソナ・フォント・配色の特徴
  • CTAボタンやキャッチコピー改善によるCVR向上のポイント
  • A/BテストでLPデザイン改善効果を確かめる方法
  • SEO観点で意識したい画像とテキストの使い分け

目次

  • LPの制作 まずは、参考にするデザインを見つけるところから
  • 【国内】LP専門のデザイン参考サイト
  • 【国内】Webデザイン全般から探せる参考サイト
  • 【スマホ】スマートフォン表示のLPを探せる参考サイト
  • 【海外】海外LPのデザイン参考サイト
  • LPのデザインにこだわりたいあなたがより効果的なLPを作る方法
  • まとめ

LPの制作 まずは、参考にするデザインを見つけるところから

あなたがこれからはじめてLP制作に取り組むとしたら、おそらく「どんなLPにしたらよいか」というデザインの壁にぶつかることになるでしょう。慣れていない人は毎回のように頭を悩ませているのではないでしょうか。

LPのキャプチャを業種・画面の種類・PC/スマートフォン別に探せる「LPデザイン・Webデザインの参考サイト」も用意しています。ランディングページだけを集めた一覧は「LPデザイン事例」です。

日常生活で他社のLPをいくつも見ているはずなのに、自分がLPを作る側になるととたんに案が浮かばなくなるというのはよくあるパターンです。

LPはたった1ページとはいえ、コンバージョンさせることに特化した内容であることから、制作の流れをしっかりと押さえておく必要があります。また、商材ごとにLPのデザインは大きく異なるため、普段から「仕事の視点で」LPのデザインをたくさん見ておくことも重要です。

ただし、見映えばかりに傾倒するとコンバージョンのことを忘れやすくなります。LPの目的を見失わないようにしてください。

本記事では、UXデザイナーにとって参考になりそうなページを紹介しながら、どの要素を加えると見た目もよくCVRの高いLPを作れるかを解説します。

【国内】LP専門のデザイン参考サイト

まずはLPだけを集めたギャラリーから。掲載サイトはいずれも2026年9月19日に稼働を確認しています(更新が止まっているサイト・ドメインが失効したサイトは掲載から外しました)。

WebDesignClip

https://lp.webdesignclip.com/

Web Design Clipは、さまざまなLPのデザインを見ることのできるリンク集です。掲載されているスクリーンショットはパソコンで見やすい大きさになっているので、一つひとつクリックしなくても全体を確認できます。

更新頻度も高く、トレンドを押さえられるというのも大きなポイントでしょう。参考サイトとしては申し分ありません。

なお、LP以外にもスマホサイトや海外のWebサイトも網羅しているので、できるだけ多くのLPを見たい人におすすめです。

Dejam

https://leango.co.jp/dejam/

「Dejam」は、約100万件のWebサイト・LPを収録したデザインデータベースを持つCVR改善ツールです。業種や画面ごとに構造化されているため検索性が高く、LPだけでなくWebサイトのデザインを画面ごとに閲覧できます。

デザインを探すだけでなく、ヒートマップ・ABテスト・ポップアップ・LP制作まで同じツールで行えるため、参考を見つけたあとの改善までつなげられます。

LPアーカイブ

https://rdlp.jp/lp-archive

LPアーカイブは、豊富なLPをカラー・カテゴリ・サイトイメージ・PC/スマホとさまざまな条件から絞り込んでチェックできるサイトです。掲載数が多く、条件を細かく指定しても候補が尽きにくいのが強みです。

さらに登録の日付やお気に入りされた数の順で並び替えることもでき、トレンドだけでなく人気のデザインもわかります。お気に入り機能は、LPデザインを考える上でとても参考になるのではないでしょうか。業界を指定することができるため、競合のLPを知りたい場合やすでにペルソナが決まっている場合はLPアーカイブをおすすめします。

SANKOU!ランディングページ

https://sankoudesign.com/category/lp/

SANKOU!ランディングページも、LPアーカイブと同様に商材やイメージ、カラーリングで絞り込めるほか、「動きのあるページ」「ストーリー性がある」といったサイト構成でもカテゴリ分けされているという特徴があります。

LPアーカイブよりも曖昧な条件で検索できるので、なんとなくイメージはあるけれどうまくチームに伝えられないというようなときにはこのサイトからピックアップをすると、うまく意思の疎通が図れるでしょう。

LP幹事

https://lp-kanji.com/

LP幹事は他のサイトと同様、業界や色、イメージで絞り込めるほか、動画のLPにも力を入れている点が特徴のまとめサイトです。

今やPCだけでなくスマホでも使われるようになった動画の埋め込みは、テキストだけでは伝わりにくい魅力を圧倒的な情報量で伝えることができるというメリットがあるため、商材や予算、制作能力に応じてぜひ検討したいところです。

掲載数も多く、着想を得る際に役立つサイトでしょう。

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

https://lp-web.com/

「ランディングページ集めました。」は、画面左に医療や観光、車など業種ごとのカテゴリー一覧があり、参考ページの画面が右側に羅列されているギャラリーです。参考例をひとつひとつクリックしなくても一覧で見られるため、業種のトーンをまとめて把握したいときに向いています。

気に入ったデザインを拡大して確認できるので、ファーストビューの構図を比較する用途にも使えます。

【国内】Webデザイン全般から探せる参考サイト

LP専門ではありませんが、構図や配色の引き出しを増やすには一般のWebデザインギャラリーも有効です。LPは1ページで完結する分、他ジャンルの一枚ものから流用できる表現が多くあります。

MUUUUU.ORG

https://muuuuu.org/

MUUUUU.ORGは、縦に長いレイアウトでデザイン性に優れたサイトが多く掲載されているWebデザインポータルサイトです。縦長という点でLPと構造が近く、国内外どちらのサイトも掲載されています。

S5-Style

https://www.s5-style.com/

S5-Styleは、8,000件を超えるWebデザインが掲載されているギャラリーサイトです。クオリティの高いサイトが厳選されているのが特徴で、検索機能と保存機能も備わっています。

Responsive Web Design JP

https://responsive-jp.com/

Responsive Web Design JPは、日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。キーワード検索に加えてサイト制作技術による検索ができるため、実装方法まで踏み込んで参考にしたいときに向いています。

Pinterest

https://jp.pinterest.com/

Pinterestは、Web上の画像をブックマークできるサービスです。LP専用ではありませんが、「LP」「ランディングページ」などで検索すると多数のデザインが集まります。気に入ったデザインをボードに保存してチームで共有できるので、制作前のイメージ合わせに使えます。

【スマホ】スマートフォン表示のLPを探せる参考サイト

優れたiPhoneデザインサイト iPhoneデザインボックス

http://design.web-hon.com/?paged=2

本サイトはタイトルの通りiPhone(Safari)で閲覧したLPのポートフォリオサイトです。iPhoneからのファーストビューを一覧で見られるのでファーストインプレッションの参考になりますね。また、スマホサイトを作成する際の小ネタ集もいくつか掲載されています。

【海外】海外LPのデザイン参考サイト

Landingfolio

https://www.landingfolio.com

Landingfolioは世界のトレンドを知ることのできるLPまとめサイトです。英語が苦手な方でも絞り込み条件の「CATEGORIES(カテゴリー)」「COLORS(カラー)」「DEVICE(デバイス)」という言葉は日本でも使われるのでおそらく直感的に検索できるでしょう。

デバイスとあるとおりPCとスマホの両方に対応しているのでこのサイトだけでかなり多くのサイトを網羅できるはずです。また会員登録するとLPの保存(お気に入り登録)もでき、更新頻度も高いので、ぜひ定期的にチェックすることをおすすめします。

One Page Love

https://onepagelove.com/

こちらはカテゴリに絵文字を用いておりやはり英語が苦手な方でもわかりやすい海外の1カラムページまとめサイトです。このサイトではかなり尖ったデザインが揃っているので、見た目のトレンドを押さえておきたい方には特に参考になるでしょう。

Awwwards

https://www.awwwards.com/

Awwwardsは、世界中の優れたWebデザインを表彰しているアワードサイトです。デザイン・ユーザビリティ・クリエイティビティなどの観点で審査された事例が並ぶため、最先端の表現を確認できます。ただし演出重視の事例も多いので、CVRを目的とするLPにそのまま転用しないよう注意してください。

Land-book

https://land-book.com/

Land-bookは、海外のWebデザインを閲覧できるまとめサイトです。構成がシンプルで英語が苦手でも操作しやすく、ランディングページのほかブログやストアサイトのデザインも見られます。

LPのデザインにこだわりたいあなたがより効果的なLPを作る方法

LPとは、デザインをほんの少し要素を変えるだけでも大きくCVが向上します。

例えば米国のオバマ大統領陣営が運営するLPでは、大統領選挙で使用したLPにてCTAのデザインを変えたところ、6,000万ドルの追加献金に成功したという事例があります。1ページでコンバージョンに特化したLPでは、デザインを最適化することでターゲットにより効率的に訴求できるようになるため、コンバージョンに寄与しやすいのです。

ここからは、デザインに使えそうなサイトを紹介しつつ、LPO(ランディングページ最適化)の視点から効果的なLPデザインや現状のLPを改善する方法をご紹介します。なお、LPOについてはこちらの記事でも解説していますのであわせてご覧ください。

CVRの高いLPデザインの特徴とは?

デザインを届けたいペルソナがはっきりしている

LPに限らずマーケティング施策における鉄板でもありますが、高いCVRを叩き出すLPでは年齢や性別、職業や居住地、趣味嗜好などが具体的に定まっている、つまりペルソナがはっきりしていることが多いという特徴があります。

ペルソナの詳しい解説については割愛しますが、例を挙げるとするならば雑誌の「Vivi(10代後半から20代のガーリーな女性がターゲット)」と「anan(20代前半から30代前半のOLがターゲット)」のようなものですね。

つまり、ペルソナによって雑誌のデザインや組まれる記事の内容が大きく異なるように、LPでもペルソナによってデザインやテキストが変わってくるというわけです。購入する人が「どのような属性を持った人か」をしっかりと決めた上でLPのデザインを検討しましょう。

ペルソナと商品のカスタマージャーニーがしっかりしている

ペルソナを設計することで「(商品を)誰に届けるか」がはっきりしますが、次はペルソナを商品へ導くための「カスタマージャーニー」を設計します。カスタマージャーニーもマーケティングでしばしば用いられる概念なので押さえておいてください。

ペルソナが商品を購入するまでのプロセス(カスタマージャーニー)を見える化することでLPのストーリーも絞られていくでしょう。見た目もそうですがコピーにも影響する部分です。

ペルソナに刺さるフォントを設定している

デザイナー出身でないとひょっとしたらピンとこないかもしれませんね。フォント(書体)は読みやすさやイメージを左右するものです。例えば「明朝体」は「硬質」や「真面目」という印象を与えやすく、「ゴシック体」は「やわらかい」「親しみやすい」という印象を与えやすいとされています。

無料の日本語フォントをまとめているFONT FREEを見てみるとよく実感できるでしょう。LPのフォントも商材やペルソナに合わせて設定すべきですが、フォントは無料と有料、さらに商用可否がそれぞれ決められているため、あわせて確認しながら選んでみてください。

https://fontfree.me/

CTAボタンが適切

https://www.ac-illust.com/

購入や資料請求、会員登録やお問い合わせを促すCTAボタンをリッチにすることも効果的です。ボタンに矢印を加えるだけでも動線がわかりやすくなるためCVRが向上することもあります。こうしたボタンやアイコンは「道路標識」と捉えるとイメージやすいかもしれません。

ペルソナに合った配色をしている

フォントだけでなく配色もイメージを伝えるために重要な要素です。一般に女性向けは薄く淡い配色、男性向けは濃い色彩の配色が好まれるとされています。

また、原色を用いなくても高級感や重厚感は黒、すっきり感や清潔感は白で演出できるほか、ここにワンポイントで赤や青を入れるだけで強調ができたりと、カラーリングは細かな部分までこだわるべき部分です。

適切な配色を行うために、メインカラー、ベースカラー、アクセントカラーをうまく活用してみてください。配色については以下のサイトを参考にするとよいでしょう。

https://colorhunt.co/

画像の挿入方法が適切

画像はテキストよりも情報量が多く、一瞬で直感的に内容を理解できるメリットがあります。また長いテキストで説明するより、図解化したほうがわかりやすくなる場合も多々あるでしょう。

なお、人間の画像をLPに挿入するとユーザーはその目線の先を追いやすいとされており、示したい部分を強調させたい場合に有効です。

Webマーケティングの観点から見たLPデザインの注意点

画像や図の文章部分はテキストで書こう

画像の中にテキストを埋め込む(テキストを画像化する)と、SEO対策の観点で不十分です。テキストは画像と別に挿入することで、ユーザーだけでなくGoogleにも評価されるLPとなります(なお画像にはalt属性を加えておきましょう)。

デザインもだけどキャッチコピーも改善してみて

LPのデザインを変更するのはやや手間になりますが、キャッチコピーを変更するのもひとつの手であり、デザインよりも少ない手間で実施できる改善策です。

キャッチコピーはサイトを訪れて最初に目にする情報であり、デザインと同等か場合によってはそれ以上にコンバージョンを左右する要素でもあります。キャッチコピーが設定したペルソナに刺さっているかどうかも検討してみてください。

A/BテストをすることでLPデザインの効果を確かめよう

キャッチコピーを変えたりCTAボタンを変えたりなどLPの要素を部分的に変更した場合は、差分をチェックするためのA/Bテストが有効です。LPOツールにはA/Bテストを簡単に実行できるものがあるので、活用するとよいでしょう。

LPOツールに関してはこちらで紹介しています。無料ツールもあるのですぐに始められますよ。

まとめ

「売れるLP」づくりのためには、よいデザインは必須です。「デザイン」は単なる見映えのよさだけを指しているというわけでありません。

ユーザビリティを高め、ユーザーに刺さる見た目もデザインと呼びます。すなわち、デザインもマーケティング施策の一種ということですね。デザインをHackすることがCVR向上の秘訣です!

この記事の監修者

平井 翔吏

平井 翔吏

株式会社LeanGo 代表取締役CEO / Dejamプロダクトオーナー

CVRを改善するノウハウを体系化するプロフェッショナル。

株式会社リクルートホールディングスに新卒入社、ゼクシィのUXデザインを担当。累計250件以上の施策を実施しCVR改善を140%達成。タグ検索の開発やゼクシィ花嫁割のリブランディングなどのプロジェクトオーナーとして事業を推進した。

株式会社LeanGoを設立。CVR改善ツールDejamのプロダクトオーナー。運用型LPOやセグメントCVRなど独自のメソッドを構築、PDCAハンドスピナーをはじめとするプロモーションも実施している。日本最高峰のダイレクトマーケティングカンファレンス「ダイレクトアジェンダ2025」「ダイレクトアジェンダ2026」のAgenda awardにて2連覇。

関連記事

この記事に関連するDejamの機能

あわせて読みたいお役立ち資料

CVR改善にお悩みの方へ

サイトのコンバージョン改善を進めるなら、ABテスト・ヒートマップ・LP制作機能が揃ったCVR改善ツール Dejam をぜひご活用ください。データに基づいたPDCAで、成果につながる改善を実現できます。

「ツールの運用リソースが足りない」「改善の方向性から一緒に考えてほしい」という場合は、専門家が伴走する CVR改善コンサルティング もご利用いただけます。

Dejamで無料トライアル
LP制作機能を見る

CVR改善ツールならDejam

自信があるから、
無料でお試し。正直、悩むより導入した方が早い。

ヒートマップの読みやすさも、ABテストの作りやすさも、機能一覧を並べただけでは分かりません。自社のサイトに入れて、実際のユーザーの動きを見て、はじめて判断できることばかりです。

  • 契約前に実際の画面を触れる
  • ご相談だけでもOK
  • 相談の時点で費用はゼロ

どれを試したいですか?

サービスの導入相談も可能です

お問い合わせ前に、気になる点はありますか?

無料トライアルを申し込む