見積もり
LP（ランディングページ）デザイン事例50選！デザイン参考サイトや作り方も【2024年4月最新版】
この記事でわかること
・LPのデザイン事例
・LPのデザインを探せるギャラリーサイト
・LPのデザイン事例の探し方
・LPを作るときに意識するポイント
LP（ランディングページ）とは、特定の商品、サービスの紹介を1ページ内で行い、そのまま商品購入、問合わせ、資料請求、会員登録などを促すページです。紙でいうチラシのような役割です。
ランディングページはユーザーに期待する行動をとってもらうための重要なページですが、ほんの少しのデザインの違いで得られる成果に大きな差が生まれます。
そこで本記事では、これからLP（ランディングページ）の作成を考えている方に、Web幹事で厳選したデザイン事例を「BtoC」「BtoB 」「採用LP」の3つに分けて紹介します。
どんなポイントが参考になるかも解説しているので、LP制作の参考にしてください。
あわせて、効率的なLP事例の探し方や様々なランディングページを集めたサイトについても紹介していますので、ぜひお役立てください。
※ランディングページ制作でお困りならWeb幹事にお気軽にご相談ください。
商材・ターゲット・予算などをヒアリングの上、最適なデザインを実現できるランディングページ制作会社をご紹介。豊富な過去事例についても無料で情報収集いただけます。
LP制作をプロに任せたい場合は、こちらに優良制作会社をまとめましたのでご活用ください！
関連記事：ランディングページ制作に強い制作会社をプロが厳選！
LP（ランディングページ）制作に役立つ記事もご覧ください
LP（ランディングページ）に強い制作会社をプロが厳選！目的別におすすめします
-
1.
【BtoC】LP（ランディングページ）のデザイン事例20選
- 1-1. FANTA（商品ごとにカラーを変えて興味関心を醸成）
- 1-2. 日清焼きそば UFO（ど迫力のデザイン！）
- 1-3. 資生堂 recipist（ユーザーが選びやすいフローチャートを活用）
- 1-4. BOTANIST（使い方によって「自分ごと化」を促進）
- 1-5. Dr.Grip（開発ストーリーで共感を醸成）
- 1-6. AGAヘアクリニック（申し込みボタンがついて来る工夫）
- 1-7. 桑田佳祐＆The Pin Boys（イラストに寄せたランディングページ）
- 1-8. 株式会社フージャース ホールディングス（比較表の活用）
- 1-9. 【費用あり】BtoC向けのLP（ランディングページ）デザイン事例11選
- 2. 【BtoB】LP（ランディングページ）のデザイン事例15選
- 3. 就職・求人のランディングページのデザイン事例15選
- 4. LP（ランディングページ）のデザイン事例まとめサイト10選
- 5. LP（ランディングページ）のデザイン事例の探し方
- 6. LP（ランディングページ）デザインの基本と作り方のポイント
- 7. ランディングページのデザイン事例まとめ
【BtoC】LP（ランディングページ）のデザイン事例20選
FANTA（商品ごとにカラーを変えて興味関心を醸成）
画像引用：FANTAのランディングページ
最初は、食品業界のランディングページのデザイン事例。皆様も一度は飲んだことがあるであろう炭酸飲料水・FANTAのランディングページです。トップページはカラフルな色と、なんのフルーツが入っているか不明のミステリアスブルーを使って興味関心を醸成。
画像引用：FANTAのランディングページ
下にスクロールすると各種類が出てきますが、工夫されているのはフルーツによってLPのカラーが変化すること。ファンタメロンであれば緑のカラーに。
画像引用：FANTAのランディングページ
ファンタグレープであれば紫のカラーに変わり、ユーザーの興味関心を惹く工夫がされています。
日清焼きそば UFO（ど迫力のデザイン！）
画像引用：日清焼きそば UFOのランディングページ
日清焼きそば UFOのLP（ランディングページ）の事例です。ランディングページを開いた瞬間、焼きそばのアップと雷のようなフォントで、ど迫力を演出。赤・黒・黄のカラーを使い濃いソースを彷彿とさせ、ボタンをクリックすると文字がブルブル震えます。動きを加えて注意を引く工夫です。
画像引用：日清焼きそば UFOのランディングページ
下にスクロールしても必ず焼きそばが追いついてくるので、ユーザーの頭にこびり付きます。インパクトを出したいランディングページの参考になるデザイン事例です。
資生堂 recipist（ユーザーが選びやすいフローチャートを活用）
画像引用：https://www.shiseido.co.jp/recipist/lp/
続いては化粧品のデザイン事例、資生堂が販売するrecipistのランディングページを紹介します。
パッケージも白のボトルに華美な装飾をせず、シンプルなデザインの商品。ストーリー仕立てに問題点・解決策を述べ、recipistの商品にどんな人があっているか、必要な理由を示すことで、利害が合致した人の即決購入につなげています。
画像引用：https://www.shiseido.co.jp/recipist/lp/
工夫されているのは、自分にどの商品が合うのか選びやすくするフローチャートが設置されていること。成分の説明や、商品の詳しい解説などが無くてもユーザーが購入できます。
BOTANIST（使い方によって「自分ごと化」を促進）
画像引用：BOTANISTのランディングページ
化粧品ブランド「BOTANIST」のランディングページのデザイン事例です。主なターゲットは女性ですがユニセックスで使えるもので、筆者も男性ですが10年以上BOTANISTを愛用しています。
背景に植物の画像を載せていますが、完全にスマートフォンのユーザーを意識したデザインになっています。
画像引用：BOTANISTのランディングページ
資生堂と同じく、ユーザーが商品を選びやすくするためのフローチャートを設置。商品やサービスのラインアップが複数ある場合は、おすすめです。
画像引用：BOTANISTのランディングページ
また、BOTANISTはアイテムの使い方をイラストで解説しています。使い方を提示することで、購入するつもりのなかったユーザーも、自分で使った気になり、購入を促す効果があります。
Dr.Grip（開発ストーリーで共感を醸成）
画像引用：Dr.Gripのランディングページ
学生時代にお世話になった方も多い筆記具・Dr.Gripのランディングページの事例です。筆者も使用していました。デザイン全体は文字数も写真点数も多くなく、シンプルなデザイン。
画像引用：Dr.Gripのランディングページ
工夫されている点は、Dr.Gripの歴史の年表があること。他社との差別化が難しい筆記具では、開発への想いやこれまでの歴史をユーザーに知ってもらうことで共感や関心を醸成できます。
年表は長くなるので、1クリックで開閉できるところが便利です。
AGAヘアクリニック（申し込みボタンがついて来る工夫）
画像引用：AGAヘアクリニックのランディングページ
薄毛治療行うAGAヘアクリニックのランディングページの事例です。広告塔であるサッカー選手を白黒で目立たなくし、サービスの特徴を前面に押し出しています。
スマートフォンで見るユーザー向けの縦長の画角にし、薄毛治療が年齢層の高めのターゲットなので、文字のサイズも大きくしています。
画像引用：AGAヘアクリニックのランディングページ
工夫されている点は、スクロールしても申し込みボタンが最下部に固定されてついて来ること。申し込みたいと思った瞬間にボタンをクリックでき、離脱を防ぐ効果があります。
桑田佳祐＆The Pin Boys（イラストに寄せたランディングページ）
画像引用：桑田佳祐＆The Pin Boys
続いては、ビクターエンタテイメントが手がける有名アーティスト桑田佳祐さんのCDのランディングページ。2020年のものです。アーティストや曲調に合わせてピンクのカラーを基調にしています。キャッチコピーも商品に合わせて「謎のストライク製造機、正体不明のスーパー・ガター軍団！？」
画像引用：桑田佳祐＆The Pin Boys
曲の動画以外はすべてイラストで統一し、本人の写真は1枚もありません。BtoCの場合、ある程度は認知を獲得できている種類（例えば化粧品や食品など）であれば、写真ではなくイラストや漫画のLPを作るのも有効です。普段、見慣れている写真であればスルーされる場合でも、イラストや漫画にすることで目を引き、関心を醸成させられることができます。
株式会社フージャース ホールディングス（比較表の活用）
※LPの配信は終了しています（LP幹事にて見られます）
続いては、中高齢者専用の分譲マンションのランディングページ。お金があったら住んでみたいマンションです。キャッチコピーは「今、シニアに選ばれている住まい」とシンプル。
ポイントはLPの冒頭に他のマンションとの比較表を入れていること。特にマンションのような高額な買い物をする場合、商品を気に入っても他社と比較したくなるのが人情。LPを一度、離脱されてしまいます。そのため、先回りしてLPに他社との比較表を入れておくと、訪問者が離脱しなくてすみます。
【費用あり】BtoC向けのLP（ランディングページ）デザイン事例11選
以下に、BtoC向けのLPデザイン事例を集めました。実際の制作費用も載っていますのでLPを作る際の参考にしてください。
※ランディングページ制作でお困りならWeb幹事にお気軽にご相談ください。
商材・ターゲット・予算などをヒアリングの上、最適なデザインを実現できるランディングページ制作会社をご紹介。豊富な過去事例についても無料で情報収集いただけます。
【BtoB】LP（ランディングページ）のデザイン事例15選
続いては、BtoBのLP（ランディングページ）のデザイン事例を4つ紹介します。BtoCとBtoBではランディングページのデザインや作り方が大きく異なります。
BtoCは個人の消費なので、エモーショナルな表現や短いキャチコピーで「欲しい」と思わせることが大切。しかし、BtoBは投資なので「いいな」と思っても社内で稟議を通すための説得材料が必要です。そのため、データや事例など文字や説明の分量は多くなります。
Web幹事（図解を活用して詳しく説明）
画像引用：Web幹事
まずはオーソドックスなBtoBのLPデザイン事例を紹介します。当サイトWeb幹事のランディングページです。サービスのメインカラーであるオレンジを基調に、カラフルなデザインにしています。
LPの構成は①サービスの特徴⇨②選ばれる理由⇨③お客様の声⇨④サービスの使い方と四段階。
画像引用：Web幹事
BtoBの場合、普段ユーザーが使うものではないので馴染みがなく、どんなサービスが理解しにくいことが難点です。ただし、テキストで全部説明しようとすると膨大な量になってしまい離脱の危険性があるため、Web幹事では簡単なイラストを使って分かりやすくする工夫がされています。
ビズリーチ（漫画LPで分かりやすく解説）
画像引用：株式会社ナインピース
予算に余裕がある場合は、漫画家を使って漫画LPにすることをおすすめします。無形サービスは実際にどんなものかイメージしにくく、漫画を使うことで分かりやすく解説できます。
また、楽しみながら読めるので離脱も少なく、成果につながりやすいです。
Chatwork株式会社（周年LPで目を引く）
画像引用：Chatwork株式会社
続いてはチャットツールで有名なChatwork株式会社の2018年のランディングページ。7周年を迎え、導入社数が167,000社を突破したことをファーストビューに持ってきています。
BtoBは投資なので、ユーザーは数字に弱いです。導入者数の多さはもちろん、7周年などポジティブな数字があると注目を引き、読んでみようと思わせられます。いかに数字を活用するかがBtoBのランディングページのポイントです。
ferret One(資料ダウンロードのCVでハードルを下げる）
※現在は配信を終了しています
続いては営業やマーケティングを支援するマーケティングオートメーションツール「ferret One」のランディングページ。LPの構成は「機能」「メリット」「お客様の声」とオーソドックスです。
注目はコンバージョンの導線を「ツールの申し込み」ではなく「資料ダウンロード」に置いていること。BtoBは投資であり高額になるため、LPだけで申し込んでもらうにはハードルが高くなります。そのため、まずは詳しい資料のダウンロードをCVに設定することで、訪問者が申し込みやすくなります。
資料ダウンロードでは意味がないと思うかもしれませんが、資料を読むことで興味・関心が醸成されいずれは申し込みにつながること、またダウンロードした方のメールアドレスや電話番号などの情報が取得できるので、あとから荷電することもできるのです。
【費用あり】BtoB向けのLP（ランディングページ）デザイン事例10選
以下に、BtoB向けのLPデザイン事例を集めました。実際の制作費用も載っていますのでLPを作る際の参考にしてください。
※ランディングページ制作でお困りならWeb幹事にお気軽にご相談ください。
商材・ターゲット・予算などをヒアリングの上、最適なデザインを実現できるランディングページ制作会社をご紹介。豊富な過去事例についても無料で情報収集いただけます。
就職・求人のランディングページのデザイン事例15選
最後に採用LPの事例を4つ紹介します。
株式会社クラシアン（図解を上手く活用！）
※現在は配信を終了しています
続いての採用LPの事例は、水道全般の工事・リフォームを行うクラシアンの正社員の募集。「クラシアンで働きませんか？」と、直球のキャッチコピーです。
通常の募集は「給与〇〇円以上」とシンプルな説明が多いですが、このLPでは図解を用いて詳しく書かれています。応募者目線に立った良い採用LPの事例です。
株式会社ワールドインテック（入社後のイメージがしやすい）
画像引用：株式会社ワールドインテック
最初は薬剤師、看護師や臨床検査技師、安全性情報業務職の正社員募集。スマートフォン向けのサイズにデザインされています。人体に関わる研究職で、丁寧に業務を説明し、信頼感のあるフォントにしています。
画像引用：株式会社ワールドインテック
どんな人材を求めているのかという企業の発信だけではなく、入社によって得られことをしっかり説明しています。
株式会社ワールドインテックRA事業部（離脱を防ぐ工夫）
画像引用：ワールドインテックRA事業部
続いても株式会社ワールドインテックのRA事業部の派遣スタッフの採用LP。いきなり正社員雇用はハードルが高い応募者向けに、やわらかいフォントや説明も簡略化したデザインにしています。
画像引用：ワールドインテックRA事業部
ページ最下部に赤いエントリーフォームが固定され、スクロールしても表示されます。離脱率を下げる工夫がされています。
JEM株式会社（インパクトで興味を引く）
※画像引用：JEM株式会社
建設事業者向けの技術コンサルティングを行う、JEM株式会社の採用ランディンページの事例です。特徴は、冒頭に動画を配置している点。インパクトで訪問者が興味を持ち、どんな職場で働くのか想像しやすいです。
※画像引用：JEM株式会社
また、アニメーションを効果的に入れている点もポイント。テキストとイラストが出てくる仕組みです。「挑戦者のストーリー」では、カーソルを合わせば「SEE MORE」のボタンが表示されます。アニメを取り入れて変化をつけると、ユーザーの興味を引けます。
【費用あり】就職・求人向けのLP（ランディングページ）デザイン事例10選
就職・求人向けのLPデザイン事例を集めました。制作費用も載っていますので、参考にしてみてください。
※ランディングページ制作でお困りならWeb幹事にお気軽にご相談ください。
商材・ターゲット・予算などをヒアリングの上、最適なデザインを実現できるランディングページ制作会社をご紹介。豊富な過去事例についても無料で情報収集いただけます。
LP（ランディングページ）のデザイン事例まとめサイト10選
ランディングページ事例集ごとにLP（ランディングページ）の分類方法が異なります。
「業種・商材で探す」「色で探す」といった目的に合った事例集をお選びください。
海外のLPを紹介している事例集もありますので、合わせて参考にしてください。
※サイト名をクリックすると、記事の該当箇所にジャンプします。
| サイト名 |
業種・商材 で探せる |
色 で探せる |
キャッチコピーを 見ることができる |
イメージ（※） で探せる |
|---|---|---|---|---|
| LP幹事 | ◎ | ○ | ○ | ○ |
| LP advance | ○ | ○ | ○ | ○ |
| LPアーカイブ | ○ | ○ | ○ | ○ |
| Web Design Clip [L] | ○ |
◎ メインカラーと サブカラーで探せる |
- | ○ |
| ランディングページ集めました。 | ○ | ○ | - | - |
| Land-book（英語） | ○ | ○ | - | ○ |
| One Page Love（英語） | ○ | - | - | ○ |
| SANKOU! | - | - | ○ | - |
| 縦長ページのデザイン集めました | ○ | ○ | - | - |
| - | - | ○ | - |
（※）「かっこいい系」「キレイ系」といった分類
LP幹事
画像引用：LP幹事
おすすめポイント
圧倒的な事例の探しやすさ
あらゆる業界・色・イメージからLP事例を探すことが可能
スマホのデザインも閲覧可能
キャッチコピーも閲覧可能
掲載数
2,586件（2023年4月時点）
LP幹事の特徴
当サイト「Web幹事」の兄弟サイトです。
これまで「ランディングページの事例まとめサイトはたくさんあるが、本当に探しやすいサイトがない」という想いから「事例の探しやすさ」を追求して作成しました。
業界・色・イメージなど、あらゆる切り口からLPデザインを検索可能。
「化粧品業界でピンクがメインカラーのLP」など、組み合わせの検索も可能にしました。
またWeb幹事と同じく、プロが選んだ優良なLP制作会社を無料で紹介してもらうことも可能です。
LPデザインでお悩みの方は、ぜひご覧ください！
LP advance
おすすめポイント
業種・商材で探せる
色で探せる
キャッチコピーを見ることができる
イメージで探せる
「お気に入り」機能
掲載数
約2,019（2023年4月時点）
LP advanceの特徴
「カテゴリ（業種）」「色」「タイプ（かっこいい・クール系、高級感・リッチ系など）」「メインビジュアル」を掛け合わせてランディングページ（LP）を検索することができます。
「and検索」が可能ですので「ホームページデザインはシンプルにしたいけど色は赤をメインに使いたい」「男性のビジュアルを使って食品系のホームページを作りたい」といった場合も、参考になる事例を見つけることができます。
また、LPで使われているキャッチコピーをカテゴリ（業種）ごとに探すことも可能。
それらのキャッチコピーが実際にLP上でどのように使われているかを見ることもできますので、WebデザイナーだけでなくWebディレクター、Web編集者にとっても有益な事例集です。
「お気に入り機能」があり、気になったLPを「マイリスト」に入れておけば再訪時にも迷うことがありません。
LPアーカイブ
おすすめポイント
業種・商材で探せる
色で探せる
キャッチコピーを見ることができる
イメージで探せる
「お気に入り」機能
掲載数
約36,080（2023年4月時点）
LPアーカイブの特徴
13,000を超えるランディングページの事例が紹介されています。
事例の豊富さに加え、カテゴリ（商材）、イメージ（シンプル系・キレイ系など）が細分化されており、実用性の高いランディングページ事例集です。
特に、「カテゴリ（商材）」は約100個に分類されておりますので、同業種・競合他社のLPを容易に見つけることができます。
また、画面を切り替えればLPで使用されているキャッチコピーの一覧を見ることが可能。Webディレクター、Web編集者には嬉しい機能です。
スマートフォン用のLP事例も7000以上掲載。
各LPの紹介ページでは、PC用デザイン、スマホ用デザインをワンクリックで切り替えられます。
その他、各LP紹介ページには、企業名、サービス名のほか、独自のキーワードを掲載。検索しやすいよう工夫が凝らされています。
Web Design Clip [L]
![LPDesign Clip [L]の特徴](https://cf.web-kanji.com/files/media/IjH8-5c8f186ca824e.jpg)
おすすめポイント
業種・商材で探せる
色で探せる
イメージで探せる
掲載数
約2,248（2023年4月時点）
Web Design Clip [L]の特徴
Web Design Clip [L]の最大の特徴は「メインカラー」「サブカラー」それぞれでランディングページ（LP）の検索が可能であること。
「メインカラーを黒にした場合、どの色との組み合わせが多く使われているか」「差し色をピンクにしたい場合、メインカラーは何色が適しているか」などを知ることができる、とても便利な機能を持つランディングページ事例集。
配色で悩んでいるときに非常に役立ちます。
また「カテゴリ（業種）」「タイプ」「テイスト」別に事例を見ることも可能。
「ヘッダー固定」「ナビゲーション固定」といった、レイアウトごとの検索もできます。
その他、各LPの紹介ページには似た配色のLPが掲載されていますので、参考になるLPを見つけやすいです。
ランディングページ集めました。
おすすめポイント
業種・商材で探せる
色で探せる
掲載数
約2,800（2023年4月時点）
ランディングページ集めました。の特徴
開設後約10年経過している老舗ランディングページ事例集。
「カテゴリ（商材）」と「色」で分類されています。事例集内でのランディングページ紹介はなく、ワンクリックで各LPへ遷移します。
他の事例集との大きな違いは、更新年月ごとにLPを見ることができること。
その時代時代でどんなデザインが流行っているかがひと目で分かります。
また、「ランディングページのレイアウト」や「ABテスト」「キャッチコピー」に関する読み物もありますので、Webデザイナー、Webディレクターなどあらゆる立場の方に有益なサイトです。
Land-book【英語】
おすすめポイント
業種・商材で探せる
色で探せる
イメージで探せる
掲載数
約300（2023年4月時点）
Land-book【英語】の特徴
海外のランディングページ事例集です。業種・商材での分類はされておりませんが、各LPに紐づけられているタグを使って希望のLPを探すことができます。
「Flat Design（フラットデザイン）」と「Medical（医療）」、「Fashion（ファッション）」と「Light Colors（淡色）」といった複数のタグで絞り込むことも可能。フリーワードで検索することもできます。また、それぞれのLP紹介ページには大きなSNSボタンが設置されており、シェアも簡単。
One Page Love【英語】
おすすめポイント
業種・商材で探せる
イメージで探せる
掲載数
約480（2023年4月時点）
One Page Love【英語】の特徴
500近いランディングページ（LP）が紹介されている海外のランディングページ事例集。各紹介ページには多くのタグがつけられており、タグでの検索に強みを持っています。
また、LPのテンプレートの配布も行っています。無料のテンプレートもあるので、手軽にLPを作りたいといった場合などに使ってみるのも良いかもしれません。
SANKOU!
おすすめポイント
シンプルで探しやすい
掲載数
227（2023年4月時点）
SANKOU!の特徴
パソコンであれば1つの画面に8個のLPが並び、スッキリしているので、スクロールしながらLPを見比べやすい特徴があります。
縦長ページのデザイン集めました
画像引用：縦長ページのデザイン集めました
おすすめポイント
カテゴリが豊富
掲載数
89（2023年4月時点）
縦長ページのデザイン集めましたの特徴
９色のカラーから探せて、下記のようなジャンルに分かれて検索ができ、探したい参考サイトが見つけやすいです。
- コンピュータ・IT
- スポーツ
- ハウツー
- ビジネス
- マーケティング・SEO
- 健康
- 学習・自己啓発
- 情報商材
- 生活
- 税務・会計
- 美容・ダイエット
- 観光・旅行
- 金融
- 食料品
画像引用：Pinterest
おすすめポイント
作成者に直接依頼できる
掲載数
1,500以上（2023年4月時点）
Pinterestの特徴
PinterestはLPの作成者が自分の作品を投稿するSNSなので、誰が作ったかがわかるようになっており、気に入ったLPがあれば、作成者に連絡して依頼することもできます。
LP（ランディングページ）のデザイン事例の探し方
まずは、ランディングページ（LP）のデザイン事例を探すときのポイントを4つ紹介します。
世の中に無数にあるランディングページ（LP）を闇雲に見ても、参考になりにくいです。これから紹介する4つのポイントを意識して探してみてください。
同業種/競合他社の事例を探す
正直、ランディングページ（LP）が効果的であるかは、業種や商材により異なります。健康食品のLPを作成するのに、クレジットカードのデザインを見ても参考にならない場合があります。
まず参考にすべきは同業種/競合他社のLPのデザインです。差別化を図る上でも、同業種/競合他社のLPを知っておくことは大切。業種や商材で検索可能なランディングページ事例サイトを使い、参考になりそうな同業種/競合他社LPを探すと良いでしょう。
本記事で紹介するサイトは全て「カテゴリ」「ジャンル」での検索が可能です。
他業種でも参考になる場合がある 同業種や競合を見ても参考にならないと思った場合、ヒットしている商品やサービスのLPを見ることはおすすめです。化粧品を扱う事業であっても、飲食のLPで参考になる部分があるかもしれません。自分がユーザーの視点になって、どうして購入しよう思ったのか？何が良かったのかを探ると、自社のLPを作るときも参考になります。
使われている色で探す
ランディングページ（LP）にコーポレートカラーや商品、業界に合った色を使う必要がある場合、「色」をキーにしてLPの事例を探すのも一つの方法。
本記事で紹介するランディングページのサイトの大半は「色」をキーにしてLPを探すことができます。メインで使用する色での検索だけでなく、サブカラーで探すことができる事例集もあります。
キャッチコピーを参考にする
ランディングページ（LP）を制作する際、ついデザインばかりを気にしてしまいますが、同じくらい重要なのがキャッチコピー。どんなに綺麗なデザインのLPを作っても、読み手に響かないキャッチコピーを使っていては成果があがりません。
キャッチコピーの作り方は記事の後半で詳しく解説します。
関連記事：ランディングページの売れるキャッチコピーを現役コピーライターが徹底解説
購入・申し込みボタンを参考にする
ランディングページ（LP）は見てもらうだけでは意味がなく、購入や申し込みにつながって初めて成果と言えます。そのために大切なのがクリックしてもらう購入・申し込みボタン。
他のランディングページ（LP）を参考にするときは、購入・申し込みボタンの色や大きさ、配置している場所などを参考にしてください。記事の後半の「ランディングページ（LP）の作り方」でも詳しく解説します。
LP（ランディングページ）デザインの基本と作り方のポイント
最後に、効果の出るランディングページをつくパフォーマンためのポイントを4つ紹介します。全部説明すると膨大な量になるますので、ここでは重要ポイントのみ説明し、詳しい関連記事を載せますので、そちらも参考にしてください。
徹底的にリサーチをする
LPで成果が出ない原因のひとつに、リサーチが足りていないことがあります。リサーチが不十分だと適切なターゲットや戦略を選べず、LPの方向性がぶれてしまいます。たとえばマッチングアプリの婚活サービスのLPひとつにしても、年代によって響くデザインやキャッチコピーは変わります。
リサーチで意識すべきポイントは大きく3つ。
・商品やサービスの強みは何か？
・それを欲しがる人は誰なのか？
・その人はどこにいるのか？
まずは、商品・サービスの良さを見つけること。その商品・サービスを求めている人はどこかに必ずいるはずです。LPでは強みを訴求しましょう。
さらに大切なのが、誰が欲しいのか、その人はどこにいるのかを見つけることです。リサーチを徹底すれば、極論、LPを作らないという選択肢もあり得るかもしれません。LPが有効な手段か確かめるためにもまずはリサーチが重要です。具体的なエピソードは下記の記事を参考にしてください。
LPに必要な構成を意識する
|
順番 |
構成 |
載せるべき情報 |
|
1 |
興味を持たせる |
キャッチコピー、画像、購入・申し込みボタン |
|
2 |
課題を解決できることを示す |
ユーザーの課題を商品・サービスがどう解決するか |
|
3 |
商品の魅力・メリットの根拠を示す |
数値的根拠、科学・医学的根拠 |
|
4 |
「お客様の声」で共感を与える |
実際に使ったお客様の声 |
|
5 |
「権威者の評価」で信頼性を与える |
有名人や専門家の推薦、受賞歴、 テレビ出演や新聞掲載の実績 |
|
6 |
制作者の思いを伝える |
商品開発のストーリー、 開発者・代表者の想いやメッセージ |
|
7 |
購入・申し込みに導く |
お得情報、購入・申し込みフォーム |
前提としてランディングページはFAQ（よくある質問）に答えるつもりで作ると良いです。なぜなら、購入・申し込みの意思決定に必要な要素に対して、重要なものから順に答えれば自然とユーザーの購入意欲は高まるからです。
上の表の構成は、多くの商材で購入・申し込みの決め手となる要素を、重要な順に並べたものです。商材によっては上図の2から6の順番を変えることもありますが、基本の「型」として覚えておきましょう。詳しくは下記の記事をご覧ください。
関連記事：売れるLP（ランディングページ）の構成の鉄板7ステップを解説！
改善を繰り返す
LPには「こうすれば絶対に売れる」というものはありません。「こうしたら売れるのでは？」という仮説を立てたうえでLPを作成し、公開後の結果を見ながら、改善を重ねていく必要があります。改善する際は、複数パターンを同時に試し、最も効果が高いものを調べるABテストを行います。主に改善で見るべきポイントは13個あります。
- ファーストビューに3つの要素を入れる
- キャッチコピーを改善する
- ファーストビューの画像を改善する
- 申し込みボタンの文言を変える
- ボタンのデザインを改善する
- ボタンの数や位置を改善する
- 実績などで権威づけをする
- 入力の手間を少なくする
- エラーの箇所をわかりやすくする
- 画面を見やすく、操作しやすくする
- LPとフォームを一体化する
- コンテンツの構成を改善する
- LPの表示速度を上げる
たとえば当サイトWeb幹事では以下2パターンでテストを行いました。
Aパターン
Bパターン
結果、Aパターンの方がLPを訪問した人のうち申込みまでつながった人の割合が高かったため、テスト後にAパターンの画像でLPを配信しました。
テストのポイントはひとつひとつの要素をテストしていくことです。上記の例では画像ですが、他にもキャッチコピーの文言や申込フォーム、コンテンツの内容や順序などをテストしてブラッシュアップしていきます。
LPの詳しい改善方法やABテストの詳しい知識については、以下の記事をご覧ください。
関連記事：プロが実践するランディングページの改善（LPO）！
ツールが難しいと感じたら外注もあり
ここまで読んで「自分で作るのは難しい」「ツールを使いこなすのは難しそうだ」と感じた方は、外注を検討するのがよいでしょう。LPの平均制作相場は数万円〜数十万円で、最も一般的な価格帯は30万円〜60万円になります。
画像：Web幹事経由で発注された「WEBサイト発注金額データ」をもとに作成したランディングページ制作の費用相場グラフ
制作会社のノウハウや作業範囲によって費用が変動します。また、どの業者が合うかは目的や予算、任せたい範囲などによって決まります。以下の記事ではLP制作の費用と料金相場を解説しています。目的別に相場感をまとめているので、ぜひ参考にしてください。
関連記事：LP制作（ランディングページ）の費用と料金相場を徹底解説！【相場早見表・事例あり】
※LP制作の費用相場や見積もりを知りたい方はWeb幹事にご相談ください。予算や目的から最適な制作会社を紹介します。相談料などは一切かかりません。
ランディングページのデザイン事例まとめ
成果の上がるランディングページを作るには、効果的な事例収集が欠かせません。そのためには、探しやすく分類されたランディングページ事例集を使うのが最短距離。
本記事で紹介したランディングページ事例集はどれも使いやすいものばかり。効果的に使い、自社に合ったランディングページの事例を探してください。
| サイト名 |
業種・商材 で探せる |
色 で探せる |
キャッチコピーを 見ることができる |
イメージ（※） で探せる |
|---|---|---|---|---|
| LP幹事 | ◎ | ○ | ○ | ○ |
| LP advance | ○ | ○ | ○ | ○ |
| LPアーカイブ | ○ | ○ | ○ | ○ |
| Web Design Clip [L] | ○ |
◎ メインカラーと サブカラーで探せる |
- | ○ |
| ランディングページ集めました。 | ○ | ○ | - | - |
| ランディングページまとめサイト | ○ | ○ | - | ○ |
| Land-book（英語） | ○ | ○ | - | ○ |
| One Page Love（英語） | ○ | - | - | ○ |
（※）「かっこいい系」「キレイ系」といった分類
いかがでしたでしょうか？
一口にランディングページと言っても業界によってキャッチコーピーや色など様々な工夫が必要になります。
ぜひ参考にしてください！
自社に合ったランディングページの事例を見つけたら、次は依頼する制作会社を探しましょう。
ランディングページは、通常のホームページに比べ構成やデザインのポイントが異なるため、LPの実績が豊富な制作会社に依頼するのがポイントです。
- どのような業界のLPの実績が多いのか
- LP公開後の改善（LPO）についても対応してもらえるのか
- リスティング広告などの運用も一緒におこなってくれるのか
といったポイントを中心にしっかりと見極めるのが重要です。
参考記事：プロが教えるホームページ制作会社の選び方5ポイント【失敗したくないかたへ】
しかし、実際は 「制作会社のホームページを見ても得意分野や、料金の目安が書かれていない」 ことが多く、検索で調べて手に入る情報だけでは、なかなか判断できないのが実情です。
そのような場合は当サイト「Web幹事」にお任せください。
「Web幹事」では、実際に制作会社から直接ヒアリングした内容など、ホームページだけでは分からない情報をもとに、あなたに最適なホームページ制作会社をご紹介させていただきます。
また、 Web制作の業界を経験したプロが対応するから、安心してご相談いただけます！
コンサルタントのご紹介
岩田
Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。
様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください！
「とりあえずLP制作の相場情報を教えてほしい」などのご相談も対応しております！
必ず制作会社と打ち合わせする必要はありません。お気軽にご相談ください。
LP（ランディングページ）制作に役立つ記事もご覧ください
LP（ランディングページ）に強い制作会社をプロが厳選！目的別におすすめします
Q. ランディングページ（LP）で参考になるデザインの事例集にはどのようなものがある？
ランディングページ（LP）で参考になるデザインの事例集として「LP幹事」「LP advance」等を紹介しています。そのほか豊富な事例と参考になるポイントも記事内であわせて紹介していますので、ぜひご覧ください。
