あなたは今、ランディングページ（LP）のデザインを決めているのだろう。しかし、「どれを参考にすれば良いか分からない」と悩んでいるのではないか？
そう悩むのも無理はない。
世の中には、無数のランディングページが出回っている。その上、それぞれデザインが全く違う。
知識・経験がなければ、何も分からないのは当然だ。
そこで本日は、ランディングページデザインの15のまとめサイトと5の事例を紹介していく。
じっくり読んで、ぜひ参考にしてほしい。
目次
1．ランディングページにおけるデザインの重要性
ランディングページ(LP)のデザインは、コンバージョン率に大きな影響を及ぼす。
なぜならば、下記の2つが変わるからだ。
- ユーザーが抱く印象
- メッセージの伝わり方
例えば、下図のキャッチコピーを見たとき、「利用者が多いのは分かるが、どこか胡散臭い」と感じるはずだ。
コンバージョン率を最大化させるには、最適化が必要不可欠なのだ。
ランディングページのデザインがコンバージョン率に影響を与える証拠
下図は弊社ランディングページのデザインを変えてABテストした結果だ。
ご覧になって分かる通り、コンバージョン率が1.27倍になったのだ。
2．ランディングページのデザインで参考にすべき15のまとめサイト
「国内」と「海外」の2つに分けて、ランディングページ（LP）のデザインのまとめサイトを合計15個紹介していく。
実際に弊社も利用している。
ぜひ参考にしてほしい。
【国内】ランディングページのデザインで参考にすべき10のまとめサイト
サイト1：LPアーカイブ
URL：https://rdlp.jp/lp-archive
LPアーカイブは、日本最大のランディングページデザインのまとめサイトだ。
掲載数は18,500個だ。
下記の3つでの絞り込みが可能だ。
- カラー（ex．赤、ピンク、レインボー）
- カテゴリ（ex．インターネットサービス、日用雑貨）
- イメージ（ex．シンプル系、キレイ系）
それぞれに会社情報・一言コメントが載っている。
「これからデザインのイメージを固めたい人」におすすめだ。
サイト2：WebDesignClip
URL：https://lp.webdesignclip.com/
WebDesignClipは、幅広い業種のランディングページのデザインをまとめたサイトだ。
掲載数は1,285個だ。
下記の5つでの絞り込みが可能だ。
- カラー（ex．黒、白、青）
- タイプ（ex．ECサイト、キャンペーン）
- カテゴリ（ex．建築、食品）
- テイスト（ex．かわいい、かっこいい）
- レイアウト（ex．ヘッダー固定、フッター固定）
1つ1つの表示面積が大きいため、遷移しなくてもデザインのイメージが分かる。
「デザインが明確化している人」におすすめだ。
サイト3：イケてるランディングページデザインまとめ
URL：https://zero-s.jp/lp-media/
イケてるランディングページデザインまとめは、オシャレなランディングページのデザインをまとめたサイトだ。
掲載数は455個だ。
下記の3つでの絞り込みが可能だ。
- カラー（ex．青、ピンク、茶）
- ジャンル（ex．アウトドア、イベント）
- イメージ（ex．かっこいい系、かわいい系）
掲載元の8割が大企業だ。
「デザインを勉強したい人」におすすめだ。
サイト4：LANDINGPAGE BOOKMARK
URL：http://www.landingpage-link.jp/
LANDINGPAGE BOOKMARKは、単品通販のランディングページのデザインをまとめたサイトだ。
掲載数は1,399個だ。
「美容液」や「サプリメント」などの商品での絞り込みが可能だ。
シンプルな設計になっているため、Web初心者でも使いこなせる。
「購入促進用のデザインを知りたい人」におすすめだ。
サイト5：ランディングページ集めました。
ランディングページ集めました。は、Web広告用のランディングページのデザインをまとめたサイトだ。
掲載数は2,963個だ。
下記の3つでの絞り込みが可能だ。
- 業種（ex．PC・家電、SEO・SEM）
- カラー（ex．赤、黄、緑）
- 更新日時（ex．2021年2月）
2009年6月から更新しているため、年代ごとのトレンドが分かる。
「コンバージョンに繋がるデザインを知りたい人」におすすめだ。
サイト6：LP advance
URL：https://site-advance.info/
LP advanceは、キャンペーン用のランディングページのデザインをまとめたサイトだ。
掲載数は1,585個だ。
下記の5つでの絞り込みが可能だ。
- タイプ（ex．かわいい・ポップ系、かっこいい・クール系）
- カラー（ex．白・ホワイト系、黒・ブラック系）
- カテゴリ（ex．ファッション、スポーツ）
- メインビジュアル（ex．物、文字）
- 効果・エフェクト（ex．スクロール、レスポンシブ）
カテゴリ別のキャッチコピー一覧ページを用意している。
「商材説明が伝わりやすいデザインを知りたい人」におすすめだ。
サイト7：ランディングページデータベース
ランディングページデータベースは、成果が出ていたランディングページのデザインをまとめたサイトだ。
掲載数は60個だ。
下記の3つでの絞り込みが可能だ。
- カラー（ex．ブラック、レッド）
- カテゴリ（ex．コスメ・化粧品、プロバイダー）
- 月別アーカイブ（2011年12月）
ただし、2011年の6〜11月にしか更新していない。トレンドを掴めない可能性がある。その点は十分注意すべきだ。
「コンバージョン数が最大化するデザインを知りたい人」におすすめだ。
サイト8：SANKOU!
URL：https://sankoudesign.com/category/lp/
SANKOU!は、最新のランディングページのデザインをまとめたサイトだ。
掲載数は160個だ
下記の5つでの絞り込みが可能だ。
- 効果（ex．イラストが動く、背景が動く）
- カラー（ex．ブラック・黒色、ホワイト・白色）
- タイプ（ex．シンプル、スタイリッシュ）
- カテゴリ（ex．ホテル・旅館、プロジェクト）
- メインビジュアル（ex．ステキな写真、シングルページ）
絞り込み項目が多いため、希望のデザインを瞬時に見つけられる。
「トレンドを知りたい人」におすすめだ。
サイト9：LANDINGPAGE_DESIGN BOOKMARK_SMARTPHONE
URL：http://smartphone-landingpage.info/
LANDINGPAGE_DESIGN_BOOKMARK_SMARTPHONEは、レスポンシブ対応のランディングページのデザインをまとめたサイトだ。
掲載数は137個だ。
「すっぽん」や「にんにく卵黄」などの商材での絞り込みが可能だ。
最新のデザインを中心に載せていることから、トレンドを掴むのも容易だ。
「スマホユーザー向けのデザインを知りたい人」におすすめだ。
サイト10：美容・化粧品ランディングページギャラリー
美容・化粧品ランディングページギャラリーは、美容関連商品のランディングページのデザインをまとめたサイトだ。
掲載数は1,045個だ。
下記の8つでの絞り込みが可能だ。
- ブランド（ex．資生堂、オルビス）
- ヘアケア（ex．シャンプー、トリートメント）
- スキンケア（ex．洗顔料、クレンジング）
- ボディケア（ex．ハンドケア、フットケア）
- メイクアップ（ex．化粧下地、ファンデーション）
- オーラルケア（ex．歯ブラシ、ホワイトニング）
- サプリメント（ex．顆粒、タブレット）
- 美容ドリンク（ex．単体）
有名ブランドは網羅している。
「美容関連商品用のデザインを知りたい人」におすすめだ。
【海外】ランディングページのデザインで参考にすべき5のまとめサイト
サイト11：One Page Love
One Page Loveは、オシャレなランディングページデザインをまとめた海外サイトだ。
掲載数は5,000個以上だ。
「スタートアップ」や「スポート」などの業種での絞り込みが可能だ。
下記の4つのデザインも個別で参照できる。
- 料金表
- ログインフォーム
- コンタクトフォーム
- チームメンバー紹介
「外資系企業風のデザインにしたい人」におすすめだ。
サイト12：OnePageMania
URL：https://www.onepagemania.com/
OnePageManiaは、商材説明用のランディングページのデザインをまとめた海外サイトだ。
掲載数は2,300個だ。
「アプリ」や「教育」などの商材での絞り込みが可能だ。
それぞれにいいねボタンが設置されているため、人気のデザインが一目で分かる。
「外資系IT企業風のシンプルなデザインにしたい人」におすすめだ。
サイト13：Land-book
Land-bookは、Web広告用のランディングページのデザインをまとめた海外サイトだ。
「広告代理店」や「美容品」などの業種で絞り込みが可能だ。
下記の2種類のソート機能が付いている。
- 新着順
- 人気順
「海外のコンバージョンに繋がるデザインを知りたい人」におすすめだ。
サイト14：lapa
lapaは、幅広い業種・用途のランディングページのデザインをまとめた海外サイトだ。
掲載数は2,840個だ。
下記の2つでの絞り込みが可能だ。
- カラー（ex．緑、青）
- カテゴリ（ex．ECサイト、ブロックチェーン）
それぞれに会社情報・使用目的が載っている。
「海外のデザインを勉強したい人」におすすめだ。
サイト15：Landingfolio
URL：https://www.landingfolio.com/
Landingfolioは、小規模事業者のランディングページのデザインをまとめた海外サイトだ。
掲載数は462個だ。
下記の3つでの絞り込みが可能だ。
- カラー（ex．黒、白）
- カテゴリ（ex．不動産、SaaS）
- デバイス（ex．パソコン、スマホ）
「キャッチコピー」や「料金表」などの構成要素別のデザインが、それぞれに載っている。
「海外のデザインのトレンドを知りたい人」におすすめだ。
3．ランディングページのデザインで参考にすべき5の事例
ランディングページ（LP）のデザインの事例を用途別に合計5個紹介する。
弊社の調べでは、どれも大きな成果を生み出している。
ぜひ参考にしてほしい。
【購入促進用】ランディングページのデザインで参考にすべき2の事例
事例1：すっきりフルーツ青汁
URL：https://lp.myfabius.jp/o-trial02_opt_min_pc
健康食品「すっきりフルーツ青汁」のランディングページだ。
デザインのポイントは下記の4つだ。
- 写真で情景を想像させている
- 重要な文言を緑色・ピンク色にしている
- 優しい色を中心に配色してお手軽感を出している
- 商品パッケージと同じ配色にして違和感を小さくしている
「単品通販会社」は参考にすべきだ。
事例2：BIGLOBEモバイル
URL：https://join.biglobe.ne.jp/mobile/lp/ls7/lp_01.html
格安スマホ「BIGLOBEモバイル」のランディングページだ。
デザインのポイントは下記の3つだ。
- 数字をピンク色にしている
- 図・表を用いて説明を分かりやすくしている
- 優しい色を中心に配色して芸能人を目立たせている
「安さが強みの会社」は参考にすべきだ。
【リード獲得用】ランディングページのデザインで参考にすべき2の事例
事例3：カオナビ
URL：https://www.kaonavi.jp/lp/sgt_kncw/
人事評価システム「カオナビ」のランディングページだ。
デザインのポイントは下記の3つだ。
- コンバージョンボタンをオレンジ色にしている
- イラストを多用して説明を読みやすくしている
- 「4年連続シェア1」を目立たせて権威性を強調している
「コンバージョンポイントが資料請求の会社」は参考にすべきだ。
事例4：アクア救急センター
水道工事サービス「アクア救急センター」のランディングページだ。
デザインのポイントは下記の3つだ。
- 明るい色を使って清潔感を出している
- 重要なポイントにのみ強い色を使っている
- アニメーションを使って画面下部の電話番号を目立たせている
「緊急性が高い商材を扱っている会社」は参考にすべきだ。
【キャンペーン紹介用】ランディングページのデザインで参考にすべき1の事例
事例5：放課後カルピス
URL：https://www.calpis.info/houkago/
カルピスのキャンペーン「放課後カルピス」のランディングページだ。
デザインのポイントは下記の3つだ。
- 多数の色を使ってお祭り感を演出している
- 青色中心の配色にしてカルピスを想起させている
- ターゲットと同年代の人物の写真を多用してターゲットの興味を引いている
「キャンペーン実施予定のBtoC会社」は参考にすべきだ。
最後に
本記事では、ランディングページ（LP）のデザインを徹底解説した。
内容は下記の通りだ。
- 重要性
- 15のまとめサイト
- 5の事例
まずは1の内容を確実に理解してほしい。そして、2と3を基に「参考にするランディングページ」を見つけてほしい。
そうすることで、結果の出るデザインが完成する。
結果の出るランディングページの作り方を、「ランディングページの作り方」で詳しく説明している。そちらも合わせて参照してほしい。
また、入力フォームのデザインを決めるときのルールを、「入力フォームのデザイン」で詳しく説明している。入力フォームはコンバージョン率に大きな影響を及ぼす。ぜひ参照してほしい。
現在、公式LINEで「たった6ヶ月で利益を平均80.4％増やすWebマーケティング手法」を無料で発信している。弊社のクライアントがWebマーケティングに取り組み、実際に成果を出したやり方・考え方が分かる。
「Adell公式LINEの登録ページ」にて3秒で登録できる。今すぐクリックして、QRコードを読み込んでほしい。
おすすめのランディングページ制作会社を「LP制作会社10社」で紹介している。ぜひ参照してほしい。
