- デザイン
- 運用
ランディングページ（LP）制作 デザイン参考事例18選｜新規受注・売上に繋がるLPの作り方
ランディングページ制作は、ホームページ制作以上に深いユーザー理解と洗練された構成が大切です。なぜならランディングページ（LP）は、アピールしたい商品やサービスの魅力を端的に伝え、コンバージョン（問い合わせ・資料請求・成約など）に至るまで、ユーザーの心を動かすための重要な役割を持っているからです。
こちらの記事では、これまで1,600社以上のホームページ・LP制作を手掛けてきた「ドコドア」のノウハウを元に、ランディングページが持つ特徴や役割を解説。参考にしたい事例や効果的なコンテンツ構成についてもご紹介していきます。
「コーポレートサイトはあるけど、サービスに特化したランディングページを作りたい」
「サービス紹介のLP制作を任されたけど、いまいちよくわからない…」
「ランディングページを作ったものの、問い合わせがなかなか増えない…」
そんなお悩みを解消する内容になっているので、ぜひお役立ていただけたら嬉しいです。
目次
ランディングページが持つ3つの重要な役割
はじめに、ランディングページ（LP）が持つ重要な役割について説明します。下記を理解した上で、新規受注・売上アップにつながるランディングページを目指しましょう。
ランディングページとWebサイトの違い
そもそもランディングページとは、Web広告をクリック（タップ）したり、自然検索などを経由してサイトを訪れたりしたユーザーが最初に見る（着地）するWebページのことをいいます。
豊富な情報を整理するために複数の下層ページを持つWebサイトとは違い、LPの場合は一つのサービスに特化した情報が縦に長い1ページにまとめられているのが特徴です。
また、会社概要や採用情報、取り扱い製品といった幅広い情報を網羅しているWebサイトとは異なり、LPは一部のサービスの魅力を理解してもらい、ユーザーに問い合わせや資料請求などのアクションを起こしてもらう役割を担っています。
そのため、LP制作では、ユーザーの気持ちや行動を理解し、コンバージョンを促す仕掛けを1ページの中に盛り込むことが大切なのです。
役割1：商品・サービスの情報をまとめた営業ツール
ビジネスのオンライン化が進む中、これまで訪問型の営業をメインにしてきた企業では、「どのように顧客を獲得していくか」という課題を抱えているケースも多いのではないでしょうか。
サービスの魅力をまとめたLPを活用すれば、営業時間や人的リソース、場所に関わらず、いつでもユーザーに商品・サービスの価値を伝えることが可能です。サービス導入によるベネフィットから導入実績まで、他のページに遷移することなく1ページの中で完結しているので、上から下までスクロールしているうちに理解を深めることができます。既存顧客に新しい商品やサービスを案内する場合も、営業ツールとして活躍するでしょう。
役割2：インターネット広告の受け皿
LPは、リスティング広告やディスプレイ広告、SNS広告といった広告を目にして、商品やサービスに興味を持ったユーザー（=見込み客）が訪れる受け皿になります。
そのため、ユーザーの期待に応えるコンテンツを用意することが大切です。広告効果を最大限に生かすためにも、ターゲットのニーズに即した構成で、購買意欲の醸成やアクションを促進できるLPを作りましょう。
役割3：問い合わせ・資料請求の窓口
繰り返しになりますが、ランディングページはコンバージョン獲得を目的としているものです。Webページであれば24時間いつでも問い合わせを受け付けられるので、商品・サービスに関心を持ったユーザーが思い立った時に行動に移すことができます。
もしWeb上に問い合わせ窓口がなければ、コミュニケーションをとれるのが営業時間中に限定されてしまうため、新規受注のチャンスを逃してしまう可能性もあります。そうした取りこぼしを防ぐ役割もランディングページは担っているのです。
効果的なランディングページを作るために必要なコンテンツ
ランディングページが持つ役割についてお伝えしたところで、成果を上げるために必要なコンテンツをご案内します。
上記でも伝えたとおり、ランディングページはターゲット心理を理解した上で、行動を促す構成になっていなくてはいけません。新規受注につなげるためには、次のようなコンテンツを取り入れましょう。
①心を掴むファーストビュー
サイトを訪れたユーザーが最初に目にするファーストビューは、非常に重要な役割を担っています。まずは「どんなサービスで、どんな課題を解決できるのか」が一目で伝わる構成を意識しましょう。ユーザーの印象に残るメインビジュアルの作り込みも重要です。
②ユーザーの悩みに寄り添う共感
「こんなお悩みはありませんか？」とユーザーが抱える具体的な課題をピックアップすることで、お悩みへの理解を示すと同時に、それを解決できることを示唆する導入セクションです。
何気なくページを開いた場合にも、まさに気持ちを代弁するような悩みが書かれていれば、ユーザーの興味・関心は一気に高まるでしょう。その後に続くサービス紹介や魅力の訴求をより効果的にすることができます。
③商品・サービスの概要
共感を示したあとで、アピールしたい商品・サービスの概要を紹介します。まずは、ポイントを端的に述べた上で、より詳しい内容を伝えることで、ユーザーの興味を惹きつけることができます。
④商品・サービスの特徴や強み
商品・サービスの魅力をさらに深掘りするセクションです。自社ならではの強みや他社製品との違いを訴求したり、サービス導入によるベネフィットを訴求しましょう。実績や効果の数値をグラフ形式で掲載することで、より効果的に信頼感をアピールできます。
⑤導入事例・お客様の声
自社サービスの魅力をお客様視点から紹介できるセクションです。お客様が持つ課題に対して、自社の製品がどんなふうに役立ったか、という一連の流れを伝えられるので、サービスの内容を具体的にイメージすることができます。また、導入実績をアピールすることで、安心感を与える効果もあります。
⑥よくある質問
ユーザーが抱える疑問や不安をQ&A形式で解消するコンテンツです。発信したい情報を端的に伝えることができるので、サービスの理解を深める効果もあります。
⑦お問い合わせフォーム
ランディングページの目的であるコンバージョンにつながるフォームです。ただ設置するのではなく、ユーザーがスムーズに問い合わせられるように導線をしっかりと確保しておくことや、ユーザーの負担を軽減できる作りにすることも大切です。
BtoCのランディングページ参考事例10選
続いて、参考にしたいBtoCのランディングページ事例を厳選して紹介します。ユーザーの心を強く掴むことを目的としたランディングページは、ターゲット心理を理解した構成やインパクトのあるデザインが重要です。
参考にしたい事例は、下記10ページです。
- プラズマクラスター／株式会社SHARP
- 住まいる倶楽部／有限会社スマイルクラブ
- no+af／第一ニットマーケティング株式会社
- 日本海夕日ヴィラOne Story／株式会社ADVENTURE TRIP
- 放送大学学園
- B/43／株式会社スマートバンク
- BF-1／株式会社ヤクルト
- ステンレスキッチンパートナー／シゲル工業株式会社
- e-bikeでやかげおでかけ／矢掛町
- 一升餅／八百彦本店
プラズマクラスター／株式会社SHARP
こちらは、生活スタイルやお悩みに合わせた商品を提案するプラズマクラスターのランディングページです。原色に近いポップな色使いやアニメーションで、楽しい世界観に仕上がっています。
とことん悩みに焦点を当てた構成は、生活者に近い商品だからこそ。課題解決力が効果的に伝わり、購買意欲をそそられます。
住まいる倶楽部／有限会社スマイルクラブ
大阪府を拠点にリフォーム・リノベーションを手がけている「住まいる倶楽部」。こちらのランディングページでは、確かな技術とプランニングを強みとしているサービスについて、詳しく知ることができます。
実例の写真が大きく使われたレイアウトで、スクロールしているうちにサービスへの期待値が上がります。
問い合わせフォームは、選択肢の設置によってユーザーの負担を抑えつつも、提案に必要な項目を網羅した作りになっています。
no+af／第一ニットマーケティング株式会社
国内屈指の製造技術を持つ第一ニットマーケティング株式会社が立ち上げたブランド「no+af」。さまざまなコンテンツを盛り込んだランディングページとは異なり、余白を生かしたページデザインが印象的です。
製品の着用写真を主役に、まるで物語のようなページが続きます。あえてシンプルに仕上げた“読ませるレイアウト”で、ブランドイメージを大切にしたランディングページの事例になっています。
日本海夕日ヴィラOne Story／株式会社ADVENTURE TRIP
引用元：日本海夕日ヴィラOne Story／株式会社ADVENTURE TRIP
こちらは、新潟県出雲崎町にあるサウナ併設の宿泊施設「日本海夕日ヴィラOne Story」のサービスサイト。サイト全体を通して、ゆったりとしたリゾート感が伝わってくる作りになっています。
シンプルなデザインですが、ロゴがじんわりと浮かび上がるローディングや波のようなアニメーションを取り入れ、遊び心もプラス。縦書きのテキストや高品質な写真でリッチな印象を演出しています。
迷わず予約サイトにアクセスできるように、スクロールしても追従する予約ボタンが設置されているのもポイントです。
放送大学学園
引用元：放送大学学園
テレビ・ラジオ・インターネットなどでいつでも学習できる放送大学。15歳以上のすべての人に開かれた学びの場として、さまざまな世代・職業の人が自由に学べる環境が整っています。
学びたい大人に向けたLPはストーリー仕立ての構成が魅力。縦書きのテキストやメッセージ性の強い文章、余白を広く取り入れたレイアウトで、つい最後まで見たくなるページに仕上がっています。
B/43／株式会社スマートバンク
引用元：B/43／株式会社スマートバンク
チャージ式Visaプリペイドカードと家計簿アプリがセットになった「家計簿プリカ」サービス「B/43」。
ランディングページを訪れると、まず目を引くのが、飛び出してくるような立体的なメインビジュアルです。真ん中が透けたこれまでにないデザインが強調されていて、思わずどんなサービスなのか気になってしまうのではないでしょうか。
カラフルな商品を際立たせる、シンプルかつアグレッシブなデザインも秀逸です。
BF-1／株式会社ヤクルト
引用元：BF-1／株式会社ヤクルト
乳酸菌飲料でおなじみの株式会社ヤクルトによる「BF-1」のランディングページです。
こちらのページは、アンケートや引用試験の結果がグラフでまとめられているのが特徴で、テキストを読み込まなくても商品の魅力が伝わる構成になっています。
商品パッケージに合わせた配色・デザインなので、スーパーやコンビニの店頭で見かけた時にふと思い出す効果も期待できるのではないでしょうか。
ステンレスキッチンパートナー／シゲル工業株式会社
ステンレスシンクやステンレスカウンターを製造しているシゲル工業のBtoC向けサイトです。リノベーション・DIYに興味のあるユーザーをターゲットに、見やすくユーザビリティの高いサイトに仕上げています。
クオリティーの高い写真やすっきりとしたデザインで、製品の上質さを見事に表現しています。
e-bikeでやかげおでかけ／矢掛町
岡山県にある矢掛町は、江戸時代の風情が残る町並みと田園風景が魅力の町です。こちらのランディングページでは、そんな矢掛町で利用できるe-Bikeレンタルのサービスを紹介しています。
スマートフォンでの見え方に特化したモバイルファーストのデザインが特徴です。PCでは、モバイルデザインを中央に設置し、両サイドの余白部分に矢掛町の風景写真を使用しています。
スマートフォンで見られることが前提とされるBtoC向けのランディングページの場合であれば、このようにモバイルファーストのデザインを取り入れることも検討されてみてはいかがでしょうか。
一升餅／八百彦本店
引用元：一升餅／八百彦本店
名古屋市にある約300年の歴史を誇る老舗仕出し料理屋「八百彦本店」が販売する「一升餅」のランディングページです。
子どもの１歳の誕生日に「一生健康でいられるように」「一生食べ物に困らないように」と願いを込めて行われる伝統行事に相応しく、明るく、おめでたい雰囲気のデザインです。
また、商品説明を縦書きで表記したり、和紙のようなテクスチャーをイラスト部分に使用することによって、日本らしさも感じられます。
セット商品の使用方法についてもイメージしやすい構成となっており、「我が子にも一升餅でお祝いしたい」と願うターゲット（親）の購買意欲を高める為の工夫が感じられます。
BtoBのランディングページ参考事例8選
次に、参考にしたいBtoBのランディングページ事例を紹介します。どのページも、サービスの魅力を伝えるためのアイデアが満載なので、ぜひ参考にしてください。
参考にしたい事例は、下記8ページです。
- MINCON／株式会社MINCONパートナーズ
- medeco／株式会社Medeco
- 遵法性調査／株式会社ジャスト
- M&Aアドバイザリー／弁護士法人千代田中央法律事務所
- Talknote／Talknote株式会社
- イケポ／株式会社イー・ブレイン
- SIGN&TRUCK／株式会社キネクト
- TANOMU／株式会社タノム
MINCON／株式会社MINCONパートナーズ
大阪府を拠点に、全国の企業へ財務コンサルティングやIPO・M&A支援などを行なっている「MINCON」。頼れるプロフェッショナルがずらりと並んだファーストビューで、一気に安心感を得ることができます。
コンテンツは、基本に則った構成でサービスへの理解と関心を深めることができます。ところどころイラストが挿入されていたり、写真の明度を明るめに調整していることで、親しみやすさも感じられるではないでしょうか。
medeco／株式会社Medeco
症例と医療機器のデータを連携し、医療現場の仕事を効率化するプラットフォーム「medeco」。柔らかな印象を与えるオレンジを基調に、親しみやすさを感じるデザインのランディングページです。
描き込みが少ないイラストや余白を生かし、症例写真は小さめに掲載。堅いイメージがある医療サービスですが、身近に感じられる工夫が随所に施されています。
遵法性調査／株式会社ジャスト
引用元：遵法性調査／株式会社ジャスト
続いて紹介するのは、構造物調査の専門会社・ジャストが実施している遵法性調査サービスのランディングページです。
導入セクションでは、サービスにまつわる3つの悩みをピックアップ。こちらは、サービス導入のメリットを伝えるセクションと連動していて、読み手の課題・疑問を解消できる構成になっています。
ランディングページの中では比較的テキストが多いですが、写真やアイコンを取り入れたり、文字サイズにメリハリをつけたりすることで、最後まで飽きずに閲覧することができます。
M&Aアドバイザリー／弁護士法人千代田中央法律事務所
引用元：M&Aアドバイザリー／弁護士法人千代田中央法律事務所
東京都千代田区の弁護士法人 千代田中央法律事務所様が運営する、中小企業・ベンチャー企業向けM&Aファイナンシャルアドバイザリーサービスのサービスサイトです。
選ばれる理由や依頼の流れ、費用といった基本的なコンテンツ構成でありながら、専門性の高い情報をわかりやすく伝えています。読み進めるごとに、「ここなら任せられる」という期待感を高め、問い合わせへ繋げる工夫が施されているページです。
Talknote／Talknote株式会社
Talknoteは、組織内の情報共有を円滑にするプラットフォームです。MVには、飲食店や病院、介護施設といったシーンが描かれていて、幅広い業種で活用されていることがひと目で伝わります。
鮮やかな色がたくさん盛り込まれていますが、キーカラーのブルーが全体をしっかりとまとめていて、統一感のあるデザインに仕上がっています。ところどころ背景に水彩のような質感のイラストが使われている点も、デザインの完成度を高めているポイントです。
イケポ／株式会社イー・ブレイン
引用元：イケポ／株式会社イー・ブレイン
こちらは、パワーポイントの資料作成に特化した定額制サービス「イケポ」のLPです。耳残りのいいサービス名も魅力的ですが、LPの基本に則った伝わる構成と親しみやすいデザインも参考になります。
まずはよくあるお悩みを羅列して共感を呼び、それに応えるサービス概要を紹介。さらに自社ならではの強みやサービス利用の流れ、プラン料金が端的に解説されていて、スムーズに読み進めることができます。
SIGN&TRUCK／株式会社キネクト
「SIGN&TRUCK」は、街を走っているトラックを広告媒体として商品やサービスの訴求をする輸送トラックを利用した宣伝・告知サービスです。
LPは爽やかな青空のような水色を基調に、ブルー系の配色でまとめています。背景やあしらいは淡い色でまとめ、テキストは深いネイビーや黒を使用することで、自然とテキスト情報に目が行くように工夫されています。
TANOMU／株式会社タノム
引用元：TANOMU／株式会社タノム
卸業者の声から生まれた受発注システム「TANOMU」のLPは、暖色の色使いとポップなイラストが印象的。ところどころグラデーションや反対色であるブルーが使われていて、メリハリのあるデザインになっています。
ただ単に親しみやすいデザインというだけでなく、実績や導入メリット、お客様の声といったコンテンツも充実していて、ユーザーに優しいLPといえるでしょう。
まとめ｜ランディングページの制作会社選びに迷ったらドコドアへ
今回は、商品・サービスの魅力を伝えるランディングページの事例をご紹介してきました。
ターゲットのニーズにマッチしたページを作ることで、営業活動におけるリソース不足を解決できるだけでなく、コンバージョン獲得を期待できます。
しかし、成果が出るランディングページを作るためには、ユーザーを理解した設計と正しい分析・運用が不可欠です。そのため、ランディングページの制作を依頼する場合は、Webマーケティングに精通している会社をパートナーに選びましょう。
当社・ドコドアでは、これまでに全国1,600社以上のホームページ・ランディングページを制作してきました。その経験から得たWebマーケティングの知識やターゲット分析のノウハウを活用して、課題解決に向けた提案をいたします。
ランディングページの新規制作やリニューアルを検討している方は、お気軽にご相談ください。
◎お問い合わせ・ご相談はこちらから
▼ドコドアの制作事例一覧
https://docodoor.co.jp/design/
【こちらの記事も読まれています】
▶︎集客できるホームページに！簡単に実践できる5つの改善ポイント
▶︎ホームページ制作に使える補助金・助成金とは？対象者や補助額を徹底解説
▶︎2022年4月改正個人情報保護法施行｜プライバシーポリシーの見直しはお済みですか？
