LP（ランディングページ）のデザイン３０選【ギャラリー・事例・トレンド別に紹介】

LP（ランディングページ）は、ユーザーにアクションを促すためのWebページです。
コンバージョンを多く獲得するには、Webページのデザインが重要になってきます。

そんなLPのデザインについて考えるうえで、

『どのようなLPデザインすればよいのかわからない』
『LPデザインの参考サイトを知りたい』
『LPのデザインを制作するときのコツを知りたい』

上記のような課題が生じているでしょう。

今回のコラム記事では、ランディングページの担当者様へ向けて解説をしています。
LPデザインの参考事例１５選、ギャラリーサイト１０選、２０２３年最新版のトレンドデザイン５選、成果を見込めるLPデザインのコツなどを紹介しています。

※今回のコラム記事で掲載している情報は、2023年8月21日時点のものです

LP（ランディングページ）デザインの探し方

はじめに、参考になるLPデザインの探し方を紹介します。
LPデザインといっても、手当たり次第に参考するのはあまり効率的ではありません。

以下の内容を理解することで、目的に合ったデザインが見つかるはずです。

• 同じ業種から探す
• カラーから探す

同じ業種から探す

同じ業種からLPデザインを探しましょう。
どんなLPが効果的なのかは業種によって異なるので、同業種のLPから参考にするのがベストです。

LPのデザインで差別化を図りたいにしても、同業種のデザインを知っておかないと対処はできません。
このあとに紹介するギャラリーサイトでは業種別で検索できるものが多いので、試してみましょう。

カラーから探す

カラーからLPデザインを探しましょう。

おおよそでもLPの配色が決まっているのであれば、ギャラリーサイトの検索機能を使ってカラーごとにデザインを探せます。

カラーの組み合わせを参考にして、LPのデザインを作成しましょう。

LP（ランディングページ）デザインの事例１５選【企業・商品編】

デザインの参考になるLPの事例を１５個紹介します。
以下の事例に同業種のものがあれば参考にしてみましょう。

Chatwork

出典：Chatwork

Chatwork（チャットワーク）は、電話や会議など仕事で必要なコミュニケーションを効率化してくれるビジネス向けのチャットツールです。

LPのファーストビューには「国内利用者４年連続NO.１」という実績が記載されています。
ほかにも、ファーストビューには導入企業社数の提示や導入企業のロゴも掲載されていることから、社会的証明を全面に押し出したLPデザインといえるでしょう。

Video BRAIN

出典：Video BRAIN

Video BRAIN（ビデオブレイン）は、あらゆる用途での動画制作をワンストップで提供するプラットフォームです。

LPのファーストビューには、実績と大きなCTAが目立つ配置になっています。

Video BRAINは動画制作のプラットフォームということもあり、LP内に動画コンテンツがあるのも特徴的です。

ジョブカン

出典：ジョブカン

ジョブカンは、クラウド型の勤怠管理システムです。

知名度のある有名人を採用したファーストビューが印象的です。

LPはイラストを活用しており、コンテンツが読みやすいデザインになっています。
CTAは追従する仕組みになっているので、機会損失を防ぐことができます。

MiiTel

出典：MiiTel

MiiTel（ミーテル）はIP電話、自動録音、文字起こしなどの機能が一つになったツールです。

LPの基本カラーを水色や白の薄い色にすることで、オレンジ色のCTAが目立つデザインになっています。

MiiTelのLPは、通常のコンテンツとCTAのメリハリのつけ方が参考になるでしょう。

WHILL

出典：WHILL

WHILL（ウィル）は、近距離移動に特化した次世代型電動車椅子です。

LPのファーストビューにはスライダーを活用しており、３つ車椅子を紹介しています。

コンテンツがしっかり区切られているので、LPで複数の商品を紹介したいときに最適なデザインといえるでしょう。

三井住友銀行

出典：三井住友銀行

三井住友銀行の人材獲得用のLPでは「挑戦者よ、世界を揺らせ」というキャッチコピーが特徴的です。

社員インタビューに関しても、一人ひとりにキャッチコピーが採用されており、メッセージ性の強いLPに仕上がっています。
採用LPの作成を考えている企業は、三井住友銀行のLPが参考になるでしょう。

MOOJUU BREAD

出典：MOOJUU BREAD

MOOJUU BREAD（モージューブレッド）は、北海道の素材をふんだんに生かしたパンをインターネットで販売しています。

LPに採用されているパンの画像のクオリティが非常に高く、画像からふわふわ食感が伝わってきます。
食品を扱う企業の方は、MOOJUU BREADのLPを参考にしてみましょう。

BOTANIST

出典：BOTANIST

シャンプーブランドのBOTANIST（ボタニスト）では、新商品のリフレッシュシリーズをLPに公開しています。

リフレッシュシリーズの「ホワイトティーの香り」では、環境に配慮した原料とパッケージを使用しており、これに合わせて自然豊かな背景画像を採用しています。
ヘアケア商品のLPを作成しようと考えている企業は、BOTANISTのLPが参考になるでしょう。

SIXPAD STATION

出典：SIXPAD STATION

SIXPAD STATION（シックスパッドステーション）は、電気刺激によって筋肉トレーニングをサポートするEMSを活用したトレーニングジムです。

LPには運動医科学によって証明されたデータが多く掲載されており、権威性を意識したデザインや配色になっているのが特徴といえます。

明光義塾

出典：明光義塾

明光義塾は、小学生から高校生まで個別指導する学習塾です。

「教室数・生徒数NO.１」などの権威性を、LP内でしっかりと提示しています。
見出しごとに背景色を変えているので、メリハリのあるデザインで読みやすいLPです。

Dr.Grip

出典：Dr.Grip

疲れにくいペンで定番のDr.Grip（ドクターグリップ）のLPは、テキストを抑えたシンプルなデザインが特徴です。

LPには、Dr.Gripの歴史を年表にしたコンテンツがあります。
年表をそのまま掲載すると縦に長くなってしまうので、コンテンツを折りたためるアコーディオンを採用しています。

JEM株式会社

出典：JEM株式会社

JEM株式会社は、建設事業者向けのコンサルティング企業です。

採用LPのファーストビューには動画を埋め込んであり、インパクトがあります。

また、LPをスクロールしていくと、コンテンツがふわっと表示されるアニメーションにしているのは特徴的です。

セブンマックス

出典：セブンマックス

セブンマックスは、カーリースの事業を展開する企業です。

LPは全体的にシンプルなデザインですが、メインカラーを緑にすることで、安心感を演出しています。

カーリースのように事故などのリスクがある業界の場合、安心を与える緑の配色は参考になるでしょう。

京都造形芸術大学 通信教育部

出典：京都造形芸術大学 通信教育部

京都造形芸術大学の通信教育部は、完全オンラインでアートやデザインが学べる通信制大学です。

会社員、主婦、高齢者など、LPのターゲットが広いため、見やすいようにテキストのサイズや間隔を調整したデザインとなっています。

LPの配色は原色ではなく、パステルカラーを使用しているのも特徴的です。
パステルカラーのような淡い中間色は、明るく楽しい気分を演出できるため、学校などのLPと相性がよいといえます。

昼職マッチ

出典：昼職マッチ

昼職マッチは、夜職から昼職への転職をサポートするサービスです。

セラピストに特化したLPでは、漫画コンテンツを採用しています。
若い女性がターゲットとなるサービスの場合、漫画LPは有効といえるでしょう。

デザインの参考になる！LP（ランディングページ）のギャラリーサイト１０選

続いて、LPのデザインが集まったギャラリーサイトを１０個紹介します。
一度に複数のLPデザインを閲覧したい方は、下記ギャラリーサイトを参考にしてみましょう。

Web Design Clip

出典：Web Design Clip

Web Design Clip（ウェブデザインクリップ）は、国内外のLPを集めたギャラリーサイトです。

２,３００以上のLPが登録されており、業種やカラーなどから検索して目的のLPを見つけられます。

サムネイルは縦長なので、目的のLPデザイン見つけやすいのもポイントです。

MUUUUU.ORG

出典：MUUUUU.ORG

MUUUUU.ORG（ムーオルグ）は、厳選されたLPが掲載されているギャラリーサイトです。
業界、デザイン、ホームページのタイプ、カラーなどからLPを検索できます。

MUUUUU.ORGでは洗礼されたデザインが多く掲載されているので、少し凝ったデザイン設計を検討している方には参考になるでしょう。

SANKOU!

出典：SANKOU!

SANKOU! （サンコウ）は、日本国内のWebデザインが掲載されているギャラリーサイトです。

カテゴリ検索を利用すれば、LPのデザインをまとめて確認できます。
掲載のLPによってはクレジットが表記されているので、LPを制作した会社を調べることが可能です。

One Page Love

出典：One Page Love

One Page Love（ワンページラブ）は、おしゃれな海外のLPデザインが集められたギャラリーサイトです。

１,６００以上のLPデザインが公開されており、LPのテンプレートも配布しています。

海外のLPデザインを参考にしたい方は、One Page Loveを利用するとよいでしょう。

Pinterest

出典：Pinterest

Pinterest（ピンタレスト）は、自分の好きな画像をほかのユーザーとシェアできるサービスです。

LPだけをまとめているわけではありませんが、ホームページの画面上にある検索窓から「lp」「ランディングページ」「landing page」などで検索すると、多くのデザインを閲覧できます。

PinterestのユーザーがLPをアーカイブしているので、ギャラリーサイトよりも多くのデザインを見つけられるでしょう。

LP advance

出典：LP advance

LP advanceは、LPデザインをまとめたギャラリーサイトです。
「業種・商材」「カラー」などからLPデザインを検索できます。

LP advanceではブックマーク機能があるので、あとで気になるデザインを見直したいときに便利です。

LP幹事

出典：LP幹事

LP幹事は、日本最大級のLPデザインのギャラリーサイトです。
「カラー」「業界」「イメージ」など、さまざまな検索項目に対応しています。

LP幹事で掲載しているLPの数は２,５００以上と、たくさんのデザインの中から好みを探したい方にはおすすめです。

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

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

「ランディングページ集めました。」は、LPデザインを検索できるギャラリーサイトです。
「カテゴリ」「カラー」などから目的のLPを検索できます。

ほかのギャラリーサイトとは違い、更新年月ごとにLPデザインを確認できるので、トレンドを抑えたい方におすすめのギャラリーサイトです。

LPアーカイブ

出典：LPアーカイブ

LPアーカイブは、登録デザイン数が３万６,０００件以上を誇るギャラリーサイトです。
「カテゴリー」「カラー」「イメージ」からLPデザインを検索できます。

サムネイルが縦長になっているので、１ページで多くのデザインを閲覧できるのも特徴です。

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

出典：イケてるランディングページデザインまとめ

イケてるランディングページデザインまとめは、イメージ検索が特徴的なギャラリーサイトです。

「さわやか系」「高級系」「派手系」など、さまざまなイメージからLPを検索できるので、好みのデザインが見つからないときは利用してみましょう。

【２０２３年版】LP（ランディングページ）のトレンドデザイン５選

２０２３年、LPのトレンドデザインを５つ紹介します。
LPにトレンドのデザインを反映させたい方は、参考にしてみましょう。

• Y2K
• 3Dイラスト
• 要素を重ねる
• ミニマリズム
• 横書きテキストと縦書きテキストの混合

Y2K

出典：its-chris

Y2Kは、１９９０年代後半から２０００年代に流行したカルチャーです。
Z世代を中心にレトロブームが起こっており、Web業界でもY2Kのデザインが再注目されています。

Y2K はLPだけでなく、ファッションから音楽、アートに至るまで、あらゆる分野で２０００年代初頭のスタイルが復活しています。

3Dイラスト

出典：Redis-Product-Design

３Dイラストは、LPがより目立つデザインです。
オブジェクトを３Dにするのはもちろん、LP自体を３D空間として表現するなど、さまざまな手法があります。

また、視差スクロール効果を追加して、さらにLPを立体的に魅せる手法もトレンドです。

要素を重ねる

出典：SIRUP-5th-Anniversary-Special-Site

画像、テキスト、背景などの要素を重ね合わせたWebデザインは増えつつあります。

最低限の要素を重ねておくことでWebページ全体に深みが加わり、ユーザーの興味を引くLPデザインになるでしょう。

ミニマリズム

出典：dribbble

ミニマリズムは、すっきりとしたシンプルなデザインが特徴です。

ネガティブスペースやシンプルなタイポグラフィを使用することで、洗練されたモダンなデザインを演出できます。

ミニマリズムデザインは、画面サイズが小さいスマートフォンと相性がよいです。
スマートフォンでLPに訪れるユーザーが多い場合は、ミニマリズムデザインが最適かもしれません。

横書きテキストと縦書きテキストの混合

出典：Prime-Park-Sessions

横書きテキストと縦書きテキストを組み合わせたWebデザインも見かけるようになってきました。

通常のデザインでは、横書きと縦書きと組わせることがないため、ユーザーの興味をそそりやすい特徴があります。

LP（ランディングページ）デザインのコツは３つ

成果を見込めるLPにするためには、デザインが大事な要素の一つです。
最後に、LPのデザインを作るときのコツを３つ紹介します。

下記内容を参考にして、LPのデザインを手掛けてみましょう。

• 最小限のスクロールに抑える
• 画像に商品の命を吹き込む
• 視線誘導のレイアウトを取り入れる

最小限のスクロールに抑える

LPデザインのコツ１つ目は、最小限のスクロールに抑える点です。

コンバージョンの達成に向けて、LPに多くのテキストや画像を配置すると、Webページのスクロールが多くなり、ユーザーの負担が増えてしまいます。

たとえば、LP上に複数の画像を採用したいときにはライトボックスを活用すると、コンテンツがコンパクトにまとまります。

ライトボックスとは、画像を表示させる機能の一つです。
画像をクリックすると同じ画面内に新しいウィンドウが表示され、画像の領域外をクリックすると元の画面に戻ります。

スクロールが長くなるほどCTAが見つけにくくなるリスクがあるため、最小限のスクロールに抑えるべきでしょう。

画像に商品の命を吹き込む

LPデザインのコツ２つ目は、画像に商品の命を吹き込む点です。

LPの目的が「商品の購入」であれば、魅力的な商品画像をLPに掲載する必要があります。

ユーザーの購買行動には商品画像が影響するため、商品の「サイズ」「材料」「香り」など、ユーザーが関心をもつ要因を画像で伝えなくてはいけません。

また、ユーザーの約７３%が商品を購入するときに、3枚以上の画像を見たいといったデータ（※）もあるので、LP上には複数の商品画像を掲載する必要があるといえるでしょう。

※参考：REPORT 2018 Consumer Research Report

視線誘導のレイアウトを取り入れる

LPデザインのコツ３つ目は、視線誘導のレイアウトを取り入れる点です。

視線誘導とは、ユーザーの視線の流れを意図的に誘導するための手法を指します。
視線誘導にはいくつかパターンがありますが、LPでは「Z型」「F型」のレイアウトを採用しているところが多いといわれています。

Z型は「左上」→「右上」→「左下」→「右下」と視線を誘導するパターンです。
一方、F型は左から右への視線移動を下に向かって順に繰り返すパターンです。

各パターンに沿って各コンテンツを配置すれば、コンバージョンの見込みやすいデザインを設計できるでしょう。
なお、視線の終着地点にCTAを設置することで、コンバージョンへ誘導することができます。

まとめ

LP（ランディングページ）のデザイン３０選を紹介しました。

LPデザインは、成果に影響する大事な要素の一つです。
今回のコラム記事を参考にして、さまざまなLPを見てみましょう。

クオリティの高いLPデザインにしたい場合は、プロに依頼するのも手です。
当サイト「ビズサイ」では、ホームページ制作サービス（サブスクリプション）を提供しています。

低コストでオリジナルデザインのLPを制作しており、公開後も保守管理や更新代行などのサポートをしています。

目的に合った最適なLP制作は、ビズサイにお任せくださいませ（ホームページ制作サービスの詳細を見る）。