ランディングページのデザイン事例｜目的別4つの型とワイヤーフレームで見る設計の考え方【2026年版】

公開日
2026.09.18

「LPのデザイン、何を参考にすればいいのか分からない」——LPの制作をご相談いただくと、最初によく聞く言葉です。参考サイトを集めたまとめは多くありますが、見た目を真似しても成果にはつながりにくい、というのが正直なところです。結論から言うと、LPのデザインは見た目の好みではなく「このページを見た人に何をしてほしいか」という目的で決まります。この記事では、シエロデザイン（東京都港区）がこれまで手がけてきたLPの設計をもとに、目的別の4つの型をワイヤーフレーム付きで解説します。

ランディングページ（LP）とは

ランディングページ（LP）とは、広告や検索から訪れた人に、予約・資料請求・申し込みなど「ひとつの行動」をしてもらうために作る、縦に長い1枚のWebページのことです。「ランディング（landing）」は着地という意味で、訪れた人が最初に着地するページであることから、こう呼ばれています。

会社のホームページが「会社のことを幅広く知ってもらう場所」だとすれば、LPは「ひとつのことを決めてもらう場所」です。そのため、メニューで他のページへ移動させる作りにはせず、上から下へ読み進めるうちに自然と行動したくなる流れを、1ページの中で組み立てます。

LPのデザインは「目的」で決まる

LPを作るとき、私たちが最初に決めるのはデザインのテイストではなく、「このページを見た人に、最後に何をしてほしいか」です。予約してほしいのか、資料を受け取ってほしいのか、それとも取り組みを知ってもらうだけでいいのか。目的が変わると、CTA（「予約する」「資料をもらう」などの行動ボタン）の回数も、置く場所も、信頼の見せ方も変わります。

LPは目的によって、大きく次のような型に分けられます。この記事では、シエロで実際に手がけてきた4つの型を、ワイヤーフレーム（ページの骨組みの図）付きで詳しく解説します。それ以外の型は、特徴だけご紹介します。

【型1】予約型LPのデザイン事例

サロンやスクール、体験型の施設など、「一度来てもらえれば良さが伝わる」サービスで使う型です。見ている人はサービスに興味を持ちながらも、「行ってみて合わなかったらどうしよう」と迷っています。この型では、その迷いをひとつずつ消していく順番でセクションを並べます。

CTAに「ハードルを下げる一言」を添える

予約型のLPを見ている人は、行動のすぐ手前まで来ています。あとひと押しが欲しい状態なので、ボタンには「初回無料」「同伴1名無料」のように、予約の心理的な壁を下げる一言を入れます。都内の体験型施設のLPでは、予約ボタンの文言そのものに「同伴1名無料」を入れました。ボタンの中に書くことで、どこで押しても特典が目に入るようにしています。

予約ボタンはヘッダーにも固定する

同じ施設のLPでは、予約ボタンをヘッダー・ファーストビュー・料金の下・アクセスの下など、計5か所に置きました。予約したいと思うタイミングは人によって違います。料金を見て決める人もいれば、アクセスを確認してから決める人もいる。どこで気持ちが固まっても、すぐ押せる位置にボタンがあることが大切です。

当日の流れを時間つきで見せる

初めての場所に行く不安の多くは、「何をされるか分からない」ことから来ています。体験の流れを「STEP1〜4」に分け、それぞれにかかる時間を書いておくだけで、当日の自分の姿が想像できるようになり、予約のハードルが下がります。

キャンセル規定は独立したブロックで見せる

キャンセル料や支払い方法は、予約ボタンを押す直前に気になる情報です。よくある質問の中に埋もれさせず、「安心の取り組み」として独立したブロックで見せることで、最後の迷いを消します。

【型2】資料請求型LPのデザイン事例

法人向けのサービスやSaaSなど、BtoB（企業向け）の商材で使う型です。法人の担当者は、LPを見てすぐに契約を決めることはほとんどありません。上司に相談したり、他社と比べたりする時間が必要です。そこで、まずは資料を受け取ってもらい、商談につなげる流れをつくります。

入口を2つ用意し、ボタンに強弱をつける

ある法人向けサービスのLPでは、「3分でわかる資料をダウンロード」と「まずは気軽にお問い合わせ」の2つのボタンを並べました。まだ情報を集めている段階の人には資料を、すでに比較検討している人には相談を。検討の段階が違う人を、どちらも取りこぼさないための設計です。

ただし、2つのボタンが同じ見た目だと、どちらを押せばいいのか迷わせてしまいます。メインの行動（資料）は塗りつぶしのボタン、サブの行動（相談）は枠線だけのボタン、というように強弱をつけます。

実績は「数字」と「ロゴ」で見せる

法人の担当者は、社内で説明するための材料を探しています。「導入社数」「利用者数」のような数字や、導入企業のロゴは、担当者が上司を説得するときにそのまま使える材料になります。そのため、この型ではファーストビューのすぐ下に実績を置くことが多くなります。

料金のすぐ後にCTAを置く

料金を見て「これなら検討できそう」と思った瞬間が、資料を請求してもらう一番のチャンスです。料金表の直後には、必ずボタンを置きます。

フォームの項目は必要最小限にする

資料請求の段階で入力項目が多いと、そこで離脱されてしまいます。詳しい状況は、資料を読んでもらった後の商談で伺えば十分です。フォームは会社名・お名前・メールアドレスなど、最低限の項目に絞るのが基本だと考えています。

【型3】加入・申込型LPのデザイン事例

食材の宅配や定期便、会員制サービスなど、その場で申し込んでもらうことがゴールの型です。この型で一番の敵は、「良さそうだけど、今じゃなくてもいいか」という後回しです。だからこそ、「自分のためのサービスだ」と感じてもらうことと、「今申し込む理由」を早めに見せることを重視します。

誰のためのサービスかを最初に言い切る

食材宅配サービスのLPでは、ファーストビューで「子育てや仕事で忙しい毎日」に向けたサービスであることを言い切りました。対象を絞ると、当てはまらない人は離れていきます。それでも、当てはまる人が「これは自分のことだ」と感じて読み進めてくれる方が、結果的に申し込みにつながると考えています。

特典はページの上の方に置く

お試し価格やポイントのプレゼントなど、今申し込むと得をする特典は、ファーストビューのすぐ下に置きます。特典をページの下の方に置くと、そこにたどり着く前に「また今度」と閉じられてしまうからです。

第三者の評価で、最後のひと押しをする

申し込む前の最後のひと押しには、自社のアピールよりも、受賞歴やメディア掲載など「人に言われた評価」の方が効きます。先ほどの宅配サービスのLPでも、育児誌の賞を受けたことを独立したブロックで見せました。第三者の声が持つ力については、口コミ・お客様の声についての記事でも詳しく書いています。

申込ボタンを「立場別」に分ける

はじめての方とすでに会員の方で手続きが違う場合は、申込ボタンを分けます。1つのボタンにまとめると、自分に合わないフォームに進んでしまい、途中で離脱する原因になります。入口で迷わせないことが大切です。

【型4】認知型LPのデザイン事例

自治体の取り組みや新規事業の告知など、「売ること」ではなく「知ってもらうこと」が目的の型です。ほかの3つの型とは考え方がほとんど逆になるので、同じLPでも設計の違いが一番よく分かる型だと思います。

ファーストビューにCTAを置かない

この型では、ファーストビューにあえてボタンを置きません。いきなり「お問い合わせはこちら」と見せると、売り込みのページに見えてしまうからです。ファーストビューは「何のための取り組みか」を伝えるメッセージに集中させます。

機能より先に「なぜやるのか」を語る

できることを並べる前に、「なぜこの取り組みを始めたのか」「誰のためなのか」という背景を見せます。読む人が共感してから中身に入る流れにすることで、内容が自分ごととして伝わりやすくなります。

CTAは最後に1回だけ

自治体と連携した取り組みの紹介LPでは、問い合わせのボタンをページの最後に1回だけ置きました。読み終えて関心を持った方だけが問い合わせてくれればいい、という設計です。回数を絞ることで、公共性のある落ち着いたトーンを保てます。

4つの型を比べて分かること

シエロで手がけた4つのLPを並べてみると、同じ「LP」でも設計がかなり違うことが分かります。

いちばん差が大きいのはCTAの回数です。5回置く型もあれば、1回しか置かない型もあります。CTAは多ければいいわけではなく、見ている人がどれくらい行動の手前まで来ているかで決まります。予約型のように「行こうかな」と思っている人が見るページなら何度も置き、認知型のようにまず知ってもらう段階なら、最後に1回で十分です。

信頼の見せ方も、型ごとにまったく違います。予約型ではキャンセル規定、資料請求型では数字とロゴ、申込型では第三者の評価。これは、見ている人が「何を不安に思っているか」が違うからです。行動をためらう理由が分かれば、何を見せればいいかも自然と決まります。

LPのデザインを決める5ステップ

1. 最後にしてほしい行動をひとつに決める：予約なのか、資料請求なのか、申し込みなのか。ここが決まらないと、型も決まりません。
2. 見ている人がどこまで来ているかを考える：すぐ行動したい人なのか、比べている途中の人なのか、まだ知らない人なのか。CTAの回数はここで決まります。
3. 行動をためらう理由を書き出す：「合わなかったらどうしよう」「上司にどう説明しよう」「今じゃなくてもいいか」など、見ている人の迷いを具体的に書き出します。
4. 迷いを消す順番にセクションを並べる：書き出した迷いに答えるセクションを、気になる順に上から並べます。これがワイヤーフレームになります。
5. CTAの回数と置き場所を決める：気持ちが固まりそうなセクションの直後にボタンを置きます。料金の後、流れの後、事例の後などが定番です。

写真や色、フォントを決めるのは、この骨組みが固まってからです。見た目から入ると、きれいなのに行動につながらないLPになりがちです。

シエロデザインの現場から

シエロデザインでは、これまで業種も目的も違うさまざまなLPを手がけてきました。その経験から、LPづくりで大事にしていることを3つご紹介します。

ポイント1：見た目より先に、骨組みで合意する

この記事で紹介したようなワイヤーフレームの段階で、お客様と構成をすり合わせます。「どのセクションを、どの順番で見せるか」が決まっていれば、デザインに入ってから大きな手戻りが起きにくくなります。デザインの好みの話ではなく、「見ている人の迷いをどう消すか」という話ができるのも、骨組みの段階ならではです。

ポイント2：表示の速さもデザインの一部と考える

LPはファーストビューに大きな写真を使うことが多く、気づかないうちにページが重くなりがちです。どれだけ良い構成でも、表示に時間がかかればその前に閉じられてしまいます。画像の書き出し方や読み込み方まで含めて、デザインだと考えています。表示の速さについては、WordPress高速化の実装手順の記事で詳しく書いています。

ポイント3：公開してからが本番

LPは、公開した時点が完成ではありません。実際に見られた数字を見て、ボタンの文言を変えたり、セクションの順番を入れ替えたりしながら育てていくものです。シエロデザインは「作って終わり」ではなく運用まで伴走する会社なので、LPも公開後に直していく前提で作ります。自社サイトでも同じ考え方で取り組んでいて、その話は自社サイトリニューアルの記事（第3回）にまとめています。

LPデザインでよくある失敗

• 参考サイトの見た目だけを真似する：目的が違えば、構成もCTAの回数も違います。参考にするなら、同じ目的のLPを選ぶのが近道です。
• 1ページに目的をいくつも持たせる：予約も資料請求も採用も、と欲張ると、見ている人はどれを選べばいいのか迷います。
• 伝えたいことを全部載せる：載せるべきなのは、こちらが伝えたいことより、見ている人が知りたいことです。
• CTAの回数を型に合わせずに決める：認知型でボタンを連発すれば売り込みに見え、予約型で1回だけなら押すタイミングを逃します。
• 公開したまま、手を入れない：一度で正解にたどり着くことはまずありません。公開後に数字を見て直すことで、LPは良くなっていきます。

よくある質問

Q. ランディングページとホームページは何が違いますか？

A. ホームページは会社や事業を幅広く知ってもらうための複数ページのサイトで、LPは「ひとつの行動」をしてもらうための1枚のページです。メニューで自由に移動させるのではなく、上から下へ読み進めるうちに行動したくなるように作ります。

Q. LPは縦に長い方がいいのですか？

A. 長さは目的によって変わります。予約型や申込型は迷いを消すための情報が多くなるので長くなりがちですが、認知型のように短くまとめた方がいい型もあります。長さそのものより、迷いに答える順番になっているかが大切です。

Q. CTAボタンは何回くらい置けばいいですか？

A. 型によって違います。この記事で紹介した例では、予約型と資料請求型が5回、申込型が3〜4回、認知型が1回でした。見ている人が行動の手前まで来ているほど、回数を増やします。

Q. ファーストビューには何を入れればいいですか？

A. 「誰のための、何のページか」がひと目で分かる一文と、それを伝える写真が基本です。予約型なら体験で得られる変化、資料請求型なら何を解決するサービスか、など型によって伝えることが変わります。

Q. LPのデザインで参考になるサイトはありますか？

A. LPのデザインを集めたまとめサイトは多くあり、見た目の参考にはなります。ただし見るときは、自分と同じ目的のLPに絞って、構成やCTAの置き方を見るのがおすすめです。

Q. スマホとパソコン、どちらを優先してデザインすべきですか？

A. 実際にどちらから見られているかで決めます。広告から来るLPはスマホで見られることが多いので、スマホで見たときの読みやすさとボタンの押しやすさを先に確認するのが基本です。

Q. LPは公開後に直してもいいのですか？

A. むしろ、直していくものです。ボタンの文言、セクションの順番、ファーストビューの一文など、数字を見ながら少しずつ改善することで成果は上がっていきます。

Q. LPの制作を依頼するとき、何を準備すればいいですか？

A. 一番大事なのは「このページで何をしてほしいか」という目的です。あわせて、ターゲット、特典やキャンペーンの有無、使える写真があると、打ち合わせがスムーズに進みます。

まとめ

LPのデザインは、見た目の好みではなく「見た人に何をしてほしいか」という目的で決まります。予約型、資料請求型、加入・申込型、認知型では、CTAの回数も、信頼の見せ方も、ファーストビューの役割もまったく違いました。まずは目的をひとつに決め、見ている人の迷いを書き出すところから始めてみてください。骨組みが決まれば、デザインは自然とそれについてきます。

シエロデザインでは、LPの設計から制作、公開後の改善まで一貫してお手伝いしています。「うちのLPはどの型だろう」という段階からでも、お気軽にご相談ください。

関連記事：Web制作会社が自社サイトをリニューアルした話（第3回）／WordPress高速化の実装手順もあわせてご覧ください。

この記事を書いた人

WEBデザイナー

齋藤 航太 Saito

関わる人へのリスペクトを忘れず、気持ちよく仕事ができる対応を大切にしています。

スタッフ紹介はこちら →