ランディングページの参考デザイン10選！欠かせない6つの要素を紹介

ランディングページのデザイン事例「LPまとめサイト」3選

ランディングページのデザイン事例として「LPまとめサイト」のおすすめ3選を紹介します。

ランディングページのデザインを構築するうえで、LPまとめサイトを利用すると参考デザインを見つけやすくなります。ジャンルやカラーなどランディングページの特徴で検索できるため、気になるデザインをすぐに見つけることが可能です。ぜひ参考にしてください。

1. LPadvance

LPadvanceは、業種や色・イメージなど複数の条件で絞り込み検索ができるサイトです。「メインカラーは白で、不動産系のシンプルなランディングページが見たい」というイメージが明確な場合、効率よく理想の事例にたどりつけます。

キャッチコピーを業種別にまとめているページがあるのも特徴です。ユーザーの心に響くキャッチコピーは、商品・サービスの魅力を的確に伝えられます。コンバージョン率アップに直結するため、ぜひ参考にしてみてください。

2. WebDesignClip[L]

WebDesignClip[L]は、シンプルで見やすいまとめサイトです。メニューや検索バーが隠されているため、それぞれのランディングページが際立っています。トップページには参考ランディングページが新着順に表示されるため、流行の傾向がわかりやすいです。

メインカラー・サブカラーの2つを指定した検索もできます。商品・サービスのイメージカラーやロゴにあわせて検索ができる点も魅力です。設置パーツやレイアウトで検索できるサイトは少ないため、ぜひ活用してください。

3. Pinterest（ピンタレスト）

Pinterestは、インターネット上の画像を個人や企業がブックマークしてシェアできるWebサービスです。一般ユーザーがアーカイブしているランディングページを多数見ることができますが、ランディングページのまとめサイトではありません。

企業のマーケティングにも利用されているサービスなため、実際のランディングページにすぐにアクセスできます。デザインまとめサイトとの使い分けが必要ですが、ランディングページに関わらず参考になるデザインが見つかるでしょう。

ランディングページのデザイン事例「BtoC向け」4選

ランディングページのデザイン事例として「BtoC向け」のおすすめ4選を紹介します。

多くの認知を得ている商品・サービスのランディングページは、デザイン構築の際にとても参考になります。ターゲット心理をくすぐるデザインや、ユーザーの「次の行動」を促しやすい構造になっている事が多いため、ぜひ参考にしてください。

1. 日清食品グループ「焼きそばUFO」

参照：日清食品グループ「焼きそばUFO」

日清食品グループ「焼きそばUFO」のランディングページは、とにかくインパクトが強いデザインです。「売上No.1」「濃」「旨」を強調することでユーザーの関心をひきつけています。商品パッケージと同じ黄・赤・黒の配色が印象的です。

箸で掬い上げた焼きそばのアップや沸き立つ湯気が食欲をそそり、購買意欲をかき立てます。個性的なキャラクターや画面上を飛びまわる商品など、視覚的にもユニークで楽しいランディングページです。

2. 株式会社SHARP「プラズマクラスター」

参照：株式会社SHARP「プラズマクラスター」

株式会社SHARP「プラズマクラスター」のランディングページは、ポップな色合いと意図が伝わりやすいイラストが印象的です。身の回りで起こる「空気」に関する悩みを1つひとつ解決していく構成で、購入を迷っているユーザーの一押しになるでしょう。

購入検討中のユーザーだけではなく「サポート」「取扱説明書」「別売品」のようなボタンを設けているのも特徴です。すでにプラズマクラスターを持っている人へのアフターサービスもできるようになっています。

3. AGAヘアクリニック

参照：薄毛治療の専門クリニック「AGAヘアクリニック」

薄毛治療の専門クリニック「AGAヘアクリニック」のランディングページです。「副作用へのフォロー」を印象づけることで、ユーザーへ安心感を与えています。薄毛に悩む世代にも読みやすいように、大きくはっきりとした文字で書かれているのも特徴的です。

スーツを着用した人気のスポーツ選手を起用し、誠実さをアピールしています。実績や効果を表す数字が多用されているため、信用性が高いです。ボタンの色や形がはっきりとしていて、ユーザーが行動しやすい導線になっています。

4. 株式会社ヤクルト「BF-1」

参照：株式会社ヤクルト「BF-1」

株式会社ヤクルト「BF-1」のランディングページは、商品パッケージに合わせた配色やデザインです。グラフやイラストを積極的に使用することで、小さな文字を読まなくても意図が伝わる仕組みになっています。

ユーザーの悩みに寄り添ったあとに、胃痛の改善を期待できそうな「ポジティブなクロージング」という流れがスムーズです。ユーザーは購買意欲をかきたてられるでしょう。注文ボタンが赤色でわかりやすく、ボタン上の「送料無料」表示も最後の一押しに効果的です。

ランディングページのデザイン事例「BtoB向け」4選

ランディングページのデザイン事例として「BtoB向け」のおすすめ4選を紹介します。

企業向けサービスのランディングページは、難しくなりがちなサービス紹介をわかりやすく伝えることが大切です。文字が多いとユーザーの離脱率も高くなります。イラストや画像、数字を効果的に配置して、伝わりやすいデザイン事例を集めました。参考にしてください。

5. Talknote株式会社「Talknote」

参照：Talknote株式会社「Talknote」

企業や組織の情報共有プラットフォームサービス「Talknote」のランディングページです。さまざまな業種で導入されていることをイラストで表しています。メインカラーの青が目を引き、1度見たら忘れられない鮮やかなデザインです。

ファーストビューにボタンが設置されていることで、すでに導入を決めている企業が離脱しないように配慮がされています。最終的に「無料トライアル」に促す導線も参考になるランディングページです。

6. 株式会社イー・イレブン「イケポ」

参照：株式会社イー・イレブン「イケポ」

パワーポイント資料作成の定額サービス「イケポ」のランディングページです。イラストと表をうまく使って、複雑なサービス内容や発注の手順・契約の流れなどをわかりやすく紹介しています。

ユーザーの悩みを明確にしたあとに、解決できるサービス紹介をする基本的な構成です。最初に悩みを言語化することで、ユーザーの興味をひきつけられます。職場で見られることを想定して、パソコンで見やすいデザインになっているのも特徴です。

7. 株式会社Minconパートナーズ「MINCON」

参照：株式会社Minconパートナーズ「MINCON」

株式会社Minconパートナーズの経理DX支援サービス「MINCON」のランディングページです。実際のコンサルタントの写真や実名を公開しているため、信用性や安心感を感じられます。

企業向けの経理サポートですが、笑顔で明度の高い写真を掲載することで堅苦しくなりません。サービス内容も簡潔にまとまっていて、わかりやすいランディングページです。

8. 株式会社タノム「TANOMU」

参照：株式会社タノム「TANOMU」

食品卸向けサービス「TANOMU」のランディングページは、白を基調としたシンプルなデザインです。イラストがわかりやすく、端末を利用して飲食店と卸売業者をつなぐサービスであることがファーストビューでわかります。

企業ロゴを表示し、導入実績の多さをアピールしているのが特徴です。たくさんの感想や口コミによって、ユーザーはサービス利用後の未来を想像し、前向きに検討できるでしょう。

ランディングページのデザイン事例「就職・求人向け」2選

ランディングページのデザイン事例として「就職・求人向け」のおすすめ2選を紹介します。「株式会社ワールドインテック」と「JEM株式会社」です。

就職・求人向けのランディングページに必要なのは、求人情報だけではありません。実際に働く人の様子や声・採用後のキャリアプランなどを示すことで、応募側の不安を取り除くことが可能です。ユーザーが欲しい情報をわかりやすくまとめている事例を紹介します。

9. 株式会社ワールドインテック

参照：株式会社ワールドインテック

株式会社ワールドインテックの臨床開発職・安全性情報業務職の採用ランディングページです。ファーストビューや職場をイメージした写真に女性を多く登場させることで、男性が多い業界でも女性も応募しやすい印象になっています。

比較的文字が多めですが、強調したい部分は目に入りやすく装飾してあるため読み飛ばす心配がありません。企業側が求める人材をアピールするだけではなく、入社後の待遇やキャリアを具体的にイメージできる工夫がされています。

10. JEM株式会社

参照：JEM株式会社

JEM株式会社の土木・建築・設備エンジニア職採用ランディングページです。ベテラン層に響く重厚なデザインと、ストーリー性のある印象的なキャッチコピーに引きつけられます。

動画やアニメーションを積極的に取り入れることで最後まで飽きずに見られます。企業紹介の動画にアクセスでき、文字を読むわずらわしさもありません。実際に働いているシニア世代の写真やエンジニアの平均年齢を表すことで、ターゲットを絞っています。

ランディングページの参考デザインを探す際の4つのポイント

ランディングページの参考デザインを探す際のポイントを4つ紹介します。

具体的な参考企業が見つからない場合は、ランディングページまとめサイトを活用するといいです。まとめサイトには、たくさんのデザインがあります。どれを参考にすればいいのか迷ってしまう前に、デザインを探す際の4つのポイントを確認しておきましょう。

1. 同ジャンル・競合他社の事例

差別化を図る意味でも、同ジャンル・競合他社の事例を参考にするのがおすすめです。業者や商材によって、効果的なデザインは異なります。たとえば、英会話教室のランディングページを作成するのに、食料品のLPを見てもあまり参考になりません。

まずは、競合他社のランディングページを確認しましょう。他ジャンルを確認したい場合は、ヒットしている商品や人気のあるサービスのランディングページがおすすめです。ランディングページまとめサイトでは、ジャンル検索もできるため探しやすくなっています。

2. 使われているキャッチコピー

ランディングページの参考デザインを探す際は、使われているキャッチコピーも参考にしてみましょう。キャッチコピーは、説明文の5倍は印象に残るといわれています。デザインや色だけではなく、見ている人の心を掴むためにはキャッチコピーも同じくらい重要です。

せっかくいいデザインができても、ユーザーが「購入したい！」と思わなければ意味がありません。ランディングページでは、ユーザーがつい次の行動に移りたくなるキャッチコピーが求められます。

3. 購入・申し込みボタンの位置

ランディングページの参考デザインを探す際は、購入・申し込みボタンの位置も参考にしましょう。ランディングページはコンバージョンにつなげるのが目的なため、どのようなボタン配置にするのかが重要です。

購入・申し込みボタンの位置は「常に画面下にボタンが表示されている」「画面の1番下に配置している」「コンテンツごとにボタンが配置されている」などさまざまです。購入・申し込みボタンの位置を参考にすることで、ユーザーの行動を促しやすくなります。

4. ランディングページの配色

ランディングページの参考デザインを探す際は、自社ランディングページのメインカラーにあった色が使われているサイトを参考にしましょう。メインカラーをベースにしたランディングページの配色にも注目してみてください。

商品や業界・ターゲット層によって、好まれる配色が異なる場合もあります。メインカラーとサブカラーを指定して検索できるまとめサイトもあるため、活用しましょう。

ランディングページのデザイン構築に欠かせない6つの要素

ランディングページのデザイン構築に欠かせない要素を6つ紹介します。

ランディングページは、商品・サービスの新規受注につなげるためのページです。色やレイアウトだけではなく、ユーザーの心理を理解して行動を促す構成にすることでコンバージョン率は格段に上がります。

1. 一目惚れさせるような「ファーストビュー」

ファーストビューでは、一目惚れさせるような印象的なデザインが求められます。ユーザーが最初に目にする部分のため、第一印象が重要です。ユーザーに「自分の悩みを解決できるかも」と感じさせるデザインにしましょう。

ファーストビューを目にしたユーザーが続きを読むかどうかは、約3秒で判断するといわれています。ユーザーが「もっと知りたい」と思っている情報をファーストビューに盛り込んで、離脱されないデザインにすることが大切です。

2. ユーザーの悩みに共感する「導入部分」

ユーザーの悩みに寄り添い「そうそう」と共感してもらう導入部分が必要です。ユーザーの悩みを理解し「この悩みを解決できるのではないか」と思わせるコンテンツ作りが求められます。

ユーザーの課題を具体的に言語化し「自分の事だ！」と感じさせることで、ユーザーを引き込むのが狙いです。導入部分でしっかりとユーザーの悩みに共感することで、商品・サービスの紹介や魅力が伝わりやすくなるでしょう。

3. 商品やサービスの概要や特徴・強みを紹介する「アピール部分」

ランディングページのデザイン構築では、商品やサービスの概要や特徴を伝える「アピール部分」が欠かせません。ユーザーの悩みに対してアプローチする「キャッチコピー」や「画像」が効果的です。

商品やサービスのメリットやベネフィットを紹介すると、購買意欲が高まります。メリットとベネフィットの違いは次のとおりです。

たとえば、パワーポイント資料作成サービスを利用した場合のメリットは「パワーポイントの資料作成をする必要がなくなること」です。ベネフィットは「浮いた時間で別の仕事に取り組める」ことをいいます。

4. 利用者の声や導入事例の「紹介コンテンツ」

ランディングページのデザイン構築では、利用者の声や導入事例を紹介するコンテンツが必要です。「購入して何が変わったのか」「どのようなことに役立ったのか」など、メリットとベネフィットを示すことで、商品やサービスに対して安心感を与えられます。

実際に利用した方の感想は、購入へのハードルを下げるために効果的です。前向きに検討してもらうために、ユーザーが利用後の明るい未来を想像できる「紹介コンテンツ」を作成しましょう。

5. よくある質問に答える「FAQ」

FAQとは、ユーザーが抱える悩みや不安をQ＆A形式で答えるコンテンツです。ユーザーが直接質問するわけではありませんが、ユーザーの疑問に答えるコンテンツとなります。

悩みの内容や答えをユーザーに届けたい情報とリンクさせることで、商品・サービスの理解を深められます。最後にユーザーの疑問を解消して、安心して利用に踏み切れる内容にしましょう。

6. コンバージョンにつながる「問い合わせフォーム」

問い合わせフォームとは、ランディングページの目標であるコンバージョンにつながるフォームのことです。意外と問い合わせフォームでの離脱は多いといわれています。

ここまでの構成で魅力的な訴求ができていたとしても、お問い合わせフォームまでの導線がわかりにくいとコンバージョンができません。「入力項目を最低限にする」「エラーメッセージは入力中にリアルタイムで表示する」など、ユーザーの負担を軽減する配慮も必要です。

まとめ

ランディングページのデザインに迷ったときは、競合や同業種のランディングページを参考にしてみましょう。

ランディングページの作成には、ユーザーに次の行動を促すためのキャッチコピーや要素の構築が必要です。コンバージョン率の高いランディングページにするため、ユーザーの心の声を代弁し、悩みを先回りして解消していくデザインを意識しましょう。

比較ビスは、多数のWebメディア制作会社の中から自社にぴったりの業者を探せる無料の比較サイトです。ランディングページの制作を考えている方は、ぜひ比較ビズを利用してください。

監修者のコメント

tenicom合同会社

代表者　新井田　禎治

鎌倉・藤沢を拠点にWEBに関わる支援を行っているtenicom合同会社の代表。WEBプログラマー、WEBディレクターを経て5年前に起業。現在は神奈川県の中小企業様を中心にWEBまわりを支援中。tenicomでは、「コンテンツの力で、Businessを支援」というキャッチコピーをもとにメディア事業の他、WEBサイト制作を安価に試せるサービスを展開中。

詳しく見る

ランディングページにもSEOと同じように、LPOという用語があり、色々な知見が溜まっています。どのような構成にすれば成功するかはある程度わかっていますが、どこのLPも同じような構成になってしまい、独自性を出すのがとても難しいです。

ランディングページの成功させるために一番大事なことは、PDCAサイクルをしっかり回すということです。色々なパターンを試して、効果のあったものにブラッシュアップしていくという検証を繰り返す必要があります。GoogleAnalyticsだけでなくヒートマップなども併用して検証をしていくと良いです。

なお、そもそも集客が足りていないこともありえます。正しい広告とセットでLPは考える必要がありますので、ここは抑えておきたい所です。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。