LPデザインとは？成果が出るレイアウトのコツと参考例の探し方

• 成果が出るLPデザインの5原則を、根拠つきで理解できる
• 近接・整列・強弱・反復などデザインの基本原則を、LPのどの場面で使うかがわかる
• 配色・フォント・余白・画像・CTA・フォームの要素別のコツがわかる
• 参考デザインの探し方（ギャラリーサイト）と「正しい真似方」がわかる
• 制作フロー・自作／テンプレート／外注の判断・デザインで直せない問題を区別できるようになる

「LPのデザインをどうすればいいかわからない」「参考を探しても、どれを真似すればいいのか判断できない」——LP制作で最初に迷うのがデザインです。

最初に結論を言うと、LPデザインの良し悪しは「おしゃれかどうか」では決まりません。成果（コンバージョン率）が出るかどうか——それだけが判断基準です。そして成果が出るデザインには、センスではなく再現可能な原則があります。

この記事では、中小企業のLP制作・改善を支援しているマーケティングの専門家として、成果が出るLPデザインの原則と、参考デザインの正しい使い方を解説します。後半では、デザインの基本原則のLPへの当てはめ方、要素別のコツ、制作フロー、自作・テンプレート・外注の判断まで一通り整理しました。

▶ 関連記事：伴走支援とは？コンサル・代行との違いと選び方／Web集客とは？中小企業のための方法8選と予算別の始め方

LPデザインとは？「作品」ではなく「成果装置」

LPデザインとは、訪問者を迷わせず、読み進めさせ、行動（問い合わせ・購入）まで導くための視覚設計のことです。Webデザインの中でも特殊な領域で、コーポレートサイトのデザインとは目的が根本的に違います。

コーポレートサイトが「信頼される佇まい」を目指すのに対し、LPは1つの行動だけを起こさせる装置です。だから評価基準もシンプルで、訪問者100人のうち何人が行動したか（CVR）がすべて。「きれいだけど売れないLP」は、LPデザインとしては失敗作です。

この前提に立つと、優先順位も決まります。まず「読める・押せる・迷わない」を満たし、そのうえで「信頼できそう」「自分向けだ」と感じさせる。装飾の凝り具合は最後です。

成果が出るLPデザイン5つの原則

支援現場で「これを外すと数字が落ちる」と実感している原則は、次の5つです。

1. 1カラムで迷い道を作らない
2. ファーストビューに「誰に・何を・どうする」を集約する
3. 配色は3色に絞り、CTAだけ目立つ色にする
4. 視線の流れに物語の順序を合わせる
5. スマホから先に設計する

1. 1カラムで迷い道を作らない

LPにサイドバーやグローバルメニューは不要です。読む順番が一本道になる1カラム構成が基本。出口（リンク）を増やすほど、訪問者はゴールの前に離脱します。ヘッダーのメニューを消すだけでCVRが改善するのは、LP改善の定番パターンです。

2. ファーストビューに「誰に・何を・どうする」を集約する

最初に見える画面で、対象者・提供価値・次の行動（ボタン）の3点が伝わるか。ここで数秒以内に「自分に関係がある」と思わせられないと、下のコンテンツは存在しないのと同じです。デザイン的には、キャッチコピーの可読性（背景写真に文字が沈んでいないか）が最頻出の問題です。

3. 配色は3色に絞り、CTAだけ目立つ色にする

ベースカラー（背景系70%）・メインカラー（ブランド色25%）・アクセントカラー（5%）の3色構成が原則です。重要なのは、アクセントカラーをCTAボタン専用にすること。ボタンと同じ色を装飾に使い回すと、ボタンの発見性が下がります。色数が増えるほど視線が散り、行動率は下がります。

4. 視線の流れに物語の順序を合わせる

人の視線は上から下へ、各ブロック内では左から右へ流れます。この流れに「共感→解決策→根拠→行動」の順序を載せるのがLPの型です。デザイン実務では、ブロックの背景色を交互に変えて「話の切り替わり」を視覚化する、矢印や人物の目線でCTAへ視線を誘導する、といった手法が効きます。構成の設計は『LPの構成』で詳しく解説しています。

5. スマホから先に設計する

LPへの流入は、広告経由なら7〜9割がスマホです。PCで綺麗にデザインしてからスマホに「縮める」と、文字が小さい・表が崩れる・ボタンが押しにくいLPになります。順序を逆に——スマホの縦長画面で成立するデザインを先に作り、PCはその拡張として設計してください。

LPデザインの基本原則: 近接・整列・強弱・反復をLPに当てはめる

前の5原則はLPという媒体に固有のルールでした。ここでは、その土台にあるデザイン一般の基本原則をLPの場面に翻訳します。入門書の定番『ノンデザイナーズ・デザインブック』で知られる4原則（近接・整列・コントラスト＝強弱・反復）に、Web制作の現場でよく併せて語られる階層化・統一・リズムを加えた7つです。

近接：関係のある情報を近づけ、無関係なものを離す

LPで効くのは、サービスの特長や料金プランをカードで並べる場面です。カード内のアイコン・見出し・説明文の間隔が隣のカードとの間隔と同じだと、どれがどの説明かが一瞬わからなくなります。カード内は狭く、カード同士は広く。お客様の声も、顔写真・名前・コメントが1つの塊に見えるように寄せます。

整列：見えない線に沿って要素を揃える

セクションごとに素材の出どころが違うと、左揃え・中央揃えが混在してガタつきが出ます。ガタつきは「雑な会社」という印象になり、実績・資格・会社概要など信頼形成の場面で特に響きます。「キャッチコピーは中央、本文は左」のように揃え方のルールを1つ決め、最後まで通してください。

強弱：伝えたい順に「差」をつける

最も重要な使いどころはファーストビューとCTAです。キャッチコピーだけを圧倒的に大きく、補足文は小さく、ボタンはアクセントカラー1色だけ。ありがちな失敗は「全部大事だから全部太字」で、結果的にどこにも強弱がなくなることです。差は中途半端につけると弱く見えるので、大きくするなら思い切って大きく、が基本です。

反復：同じ役割には同じ見た目を繰り返す

LPは縦に長く、CTAボタンが3〜5回登場します。このボタンの色や形が場所によって違うと、訪問者は毎回「これは押すものか」を判断し直します。形と色を一貫させれば、2回目以降は考えずに認識できます。セクション見出しの装飾も同様で、「ここから新しい話」という合図の繰り返しが、長いLPを読み進める助けになります。

階層化：情報の親子関係を見た目で示す

大見出し→小見出し→本文→注釈の階層を、文字サイズ・太さ・色の段階で表します。「よくある質問」「料金プラン」など情報量の多いセクションで効き、階層が見えると訪問者は必要な部分だけを拾い読みできます。文字サイズは3〜4段階に絞ると整理しやすくなります。

統一：LP全体でトーンを揃える

配色・フォント・写真やイラストのテイスト・角丸の有無をLP全体で揃えます。よくあるのは、ファーストビューは撮り下ろし写真なのに中盤で急にフリー素材のイラストが混ざるケースで、テイストが変わるたびに信頼の積み上げが途切れます。制作前に「使う色・フォント・写真かイラストか」をメモ1枚で決めておくと崩れません。

リズム：緊張と緩和を交互に置く

データ・実績・比較表のような密度の高いセクションの後に、CTAや短いメッセージだけの軽いセクションを挟むと、読み進める負荷が下がります。背景色を交互に変えるのもリズムを作る手段です。全セクションが同じ密度・同じ背景で続くLPは、内容が良くても中盤で離脱されやすくなります。

要素別のデザインのコツ（配色・フォント・余白・画像/図解・CTA・フォーム）

LPを構成する要素ごとのコツを要約します。専用の解説記事がある要素は、詳細をリンク先で確認してください。

ファーストビュー：3秒で「自分向け」と伝わるか

最優先はキャッチコピーの可読性です。背景写真の上に文字を載せるなら、写真を暗くする・文字の背後に帯を敷くなどでコントラストを確保します。次に、対象者・提供価値・ボタンの3点が画面内に収まっているか。スマホではボタンが初期表示の画面外に落ちやすい点に注意してください。必須要素と型は『LPのファーストビューに入れるべき5つの必須要素』で解説しています。

配色：3色ルールと業種の期待色

3色ルールに加えて押さえたいのが「業種の期待色」です。医療・士業なら青系の信頼感、食品なら暖色の食欲感など、訪問者が無意識に期待している色調から大きく外すと、内容を読む前に違和感を持たれます。色の印象・業種別パターン・NG配色は『LPの配色の選び方』にまとめています。

フォント：可読性・太さ・スマホでのサイズ

画面上の本文はゴシック体が基本で、明朝体は高級感を出したい見出しなどに限定します。書体は1つのLPで2種類まで。太さは強弱をつける道具で、本文は標準、見出しと重要語だけ太字にします。スマホでは本文16px前後を目安にし、行間はPCよりゆったり取ります。「PCでは読めたのにスマホでは文字が潰れる」が、フォントで最も多い失敗です。

余白・レイアウト：視線誘導と「無駄な余白」の区別

余白には、要素を区切り重要な要素を際立たせて視線を次へ導く「意味のある余白」と、スマホで画像の下に不自然な空白が空くような「無駄な余白」があります。前者は積極的に使い、後者は減らす。セクション内よりセクション間の余白を大きくすると、話の区切りが視覚的に伝わります。ファーストビュー直下で次の見出しが少し見える配置にするのも、視線誘導の定番です。

画像・図解・比較表：文章より速く伝える

写真は「誰が・どんな場面で」使うかが伝わるものを選び、フリー素材の使い回し感が出るものは避けます。手順や仕組みは3〜4コマの図解にした方が文章より速く伝わります。比較表は自社の列だけ背景色や枠線で強調し、違いが一目でわかるようにしてください。詳細は『LPの画像・写真の選び方』を参照してください。

CTAボタン：色・大きさ・距離・文言

「アクセントカラー専用・ファーストビューに必ず1つ・押しやすい大きさ」が3点セットです。スマホではタップ領域を44px四方以上確保し、他のリンクと近づけすぎないようにします。文言は「送信」より「無料で資料を受け取る」のように得られるものを含めた方が反応が取れます。詳しくは『CTAボタンとは？クリック率を高める文言・色・配置の作り方』で解説しています。

入力フォーム：項目を減らし、必須・任意を明示する

フォームはLPの最後の関門で、ここでの離脱はそれまでの説得を無駄にします。項目を必要最小限に絞る、必須・任意をラベルで明示する、入力欄に記入例を置く、エラーはその場で表示する、の4点が基本です。フォーム最適化（EFO）の具体策は『EFOとは？入力フォーム最適化でフォーム離脱を防ぐ方法』にまとめています。

LPデザインの参考例の探し方と「正しい真似方」

ゼロからデザインを考える必要はありません。ただし参考の使い方には正しい方法があります。

探す場所：LP専門ギャラリーサイト

LPのデザインだけを集めたギャラリーサイトで、業種・カラー・テイスト別に事例を探せます。検索するときのコツは、自社の業種だけでなく「同じ価格帯・同じ緊急度の商材」で探すこと。高額BtoBサービスなら、業種が違っても同じ検討行動の商材のLPが参考になります。

代表的なLPギャラリーサイト

日本語のLPを多く収録している代表的なギャラリーは次のとおりです（サイト名で検索すれば見つかります）。

• LP ARCHIVE：収録数が多く、タイプ・業種・配色・書体・動きなど絞り込みの軸が細かい
• LP advance：最新のLPが日々追加され、新しい表現の傾向をつかみやすい
• ランディングページ集めました。：カテゴリー・色・メインビジュアルから探せ、キャッチコピー一覧も参考になる
• SANKOU!：Webデザイン全般のギャラリーで、LPやスマホ表示に絞って閲覧できる
• Web Design Clip：Webデザイン全般に加え、LP専用のギャラリー（Web Design Clip [L]）がある

絞り込みは3段階で使い分けます。まず業種・カテゴリーで「この業界のLPは何を最初に見せているか」の定石を把握し、次に配色で自社のブランドカラーに近いLPの配色バランスを見て、最後にビジュアル（写真主体・イラスト主体・人物の有無）で自社が用意できる素材で成立しているLPを探します。撮り下ろしの人物写真が前提のLPを参考にしても、素材がなければ再現できません。

真似るのは「装飾」ではなく「構造」

参考LPを見るとき、色やイラストのテイスト（装飾）を真似たくなりますが、成果に効くのはブロックの順序・情報量の配分・CTAの置き方（構造）の方です。「このLPは最初に何を見せて、どこで信頼を作り、何回行動を促しているか」を書き出してみると、装飾の下にある設計が見えてきます。装飾は自社のブランドに合わせて変えてよい部分です。

なお、ギャラリーのLPは「デザインが目を引く」ことで選ばれており、成果が証明されているわけではありません。表現の引き出しとして使い、構成は型から組み立てる方が確実です。

LPデザインの制作フロー: 構成→ワイヤーフレーム→デザイン→コーディング→公開後改善

デザインは制作フローの中の1工程です。強調したいのは、デザインは構成が決まってから着手すること。構成が固まらないままデザインに入ると、「セクションを足したい」「順番を変えたい」が起きるたびにやり直しになり、費用と期間が膨らみます。

企画から公開までは2週間〜1.5ヶ月程度が目安です。急ぐ場合にデザインの作り込みや新規撮影は圧縮できますが、構成の工程は削れません。工程ごとの発注側の準備は『LP制作の流れ｜企画から公開までの5ステップと準備』にまとめています。

自作・テンプレート・外注の判断

「自分でやるか、テンプレートに頼るか、プロに頼むか」は、予算だけでなく「構成・コピーを自社で担えるか」「初対面で信用してもらう必要がどれだけあるか」で決まります。

選択肢	費用の目安	向いているケース	注意点
自作（Canva・ペライチ・STUDIO・Wix等）	0〜5万円＋自分の時間	まず検証したい／低単価・低リスクの商材	高額商材では「手作り感」が不信感になる。構成・コピーも自分で担う
テンプレート（WordPressのLP向けテーマ等）	数千円〜数万円＋自分の時間	すでにWordPressを運用中／型に沿って早く公開したい	用意されるのは並び順と見た目まで。中身は別の仕事
外注（フリーランス・制作会社）	フリーランス10〜30万円／制作会社30〜60万円	構成・コピーから任せたい／信頼形成が重要な商材	金額でなく「含まれる工程」で比較する

自作・テンプレートが向くケース

Canvaやペライチ、STUDIO、Wixなどのノーコードツールは、テンプレートに文章と画像を差し替えるだけで一定の見栄えになります。「まず反応を見たい」「広告を少額で試したい」段階ならこれで十分です。WordPress運用中ならLP向けテーマで作る方法もありますが、ヘッダー・フッターのメニューを消せるかを先に確認してください。注意点は、テンプレートが用意するのは並び順と見た目までで、言葉と素材は肩代わりしてくれないことです。ツールの選び方は『LPの自作方法』、目的別の構成パターンは『LPテンプレート集』で解説しています。

外注が向くケースと選び方

高額商品や専門性の高いサービスなど、初対面で信用してもらう必要があるビジネスでは、見た目の粗さがそのまま不信感になり、外注を検討する価値があります。内訳ではデザイン工程が10〜30万円程度の目安で、構成・コピーの工程（5〜20万円）が含まれるかで見積もりが大きく変わります。10万円のLPと60万円のLPの差は多くの場合この工程と「公開後の改善」の有無で、見た目だけなら価格差ほどの違いは出ません。依頼先は実績ページの見た目でなく「そのLPでCVRがどう変わったか」で選んでください。相場は『LP制作費用の相場』、依頼先3タイプの違いと面談で聞くべき質問は『LP制作会社の選び方』にまとめています。

デザインでは直せない問題もある

正直にお伝えすると、LPの成果問題のうちデザインで解決できるのは一部です。

• 訴求のズレ：誰の何を解決するかが響いていない → デザインではなくコピーとベネフィット設計の問題
• オファーが弱い：行動する理由（特典・保証）がない → オファーの作り方の問題
• 流入とのミスマッチ：広告の約束とLPの中身が違う → 集客設計の問題

リニューアルの見積もりを取る前に、問題がデザイン起因かどうかを切り分けることをおすすめします。切り分けの手順は『LPの離脱率』も参考にしてください。CVRが低いときに疑う原因と施策の優先順位は『CVR改善の方法』、見直し時の確認項目は『LP改善チェックリスト』にまとめています。デザインの作り直しは「原因はデザインだ」と確認できてからで遅くありません。

LPデザインについてのよくある質問

デザインツールは何を使えばよいですか？

自作ならCanvaやSTUDIO、ペライチなどテンプレートベースのツールで十分です。プロに依頼する場合はFigmaでのデザイン共有が主流です。ツールの差より、この記事の原則を守れているかの差の方がはるかに大きく出ます。

おしゃれなデザインは成果に悪影響ですか？

おしゃれ自体は悪ではありません。問題になるのは「おしゃれ優先で可読性・ボタンの発見性を犠牲にした」場合です。美容・ブランド系など、世界観自体が商品価値になる業種では、おしゃれさが信頼形成に直結することもあります。

デザインのA/Bテストはどこから始めるべきですか？

影響が大きい順に、ファーストビュー（キャッチコピーと画像）→CTAボタン（文言・色）→ブロックの順序です。細部の色味などから始めると、差が出ずに時間だけ失います。

制作会社とフリーランス、どちらに頼むべきですか？

予算と求める範囲次第です。デザインだけならフリーランス（10〜30万円）が機動的、構成・コピー・計測まで含めるなら制作会社（30〜60万円）が安定します。どちらの場合も「成果の出たLPの実績」を見せてもらってください。

LPデザインだけを依頼できますか？費用感は？

依頼できます。構成と原稿を自社で用意し、デザイン（と実装）だけを頼む形で、費用の内訳ではデザイン工程が10〜30万円程度、コーディング・実装が5〜15万円程度の目安です。ただし「構成・コピーを自社で担える」ことが前提で、担えない場合は構成の工程を含む依頼にした方が結果的に安くつきます。

デザインテンプレートを使うと成果は落ちますか？

テンプレート自体で成果が落ちるわけではありません。成果を左右するのは構成・コピー・オファーで、テンプレートはそれを載せる器です。落ちるとすれば「他社と見た目が似る」「高額商材で手作り感が出る」場合で、商材の価格帯と信頼形成の重要度で判断してください。3色ルールとCTAの一貫性だけ自分で守ると、テンプレ感は大きく減ります。

スマホとPCでデザインは分けるべきですか？

別々のLPを作る必要はありませんが、「同じデザインを縮小するだけ」では不十分です。スマホの縦長画面を先に設計し、PCではその配置を横に広げる順序で作ると破綻しません。本文16px前後・タップ領域44px四方以上・横並び要素を縦に積んだときの順番・表の横スクロール対応を確認してください。詳しくは『スマホLPの最適化』で解説しています。

まとめ

この記事の要点を整理します。

• LPデザインの判断基準は「おしゃれさ」ではなくCVR。LPは作品ではなく成果装置
• 原則は5つ：1カラム・ファーストビュー集約・3色ルール・視線と物語の一致・スマホ先行設計
• 見た目の問題は近接・整列・強弱・反復（＋階層化・統一・リズム）で説明がつく。迷ったら近接→整列→強弱の順に疑う
• 参考は「同じ価格帯・緊急度の商材」から探し、装飾ではなく構造を真似る
• デザインは構成が決まってから。自作・テンプレート・外注は「構成・コピーを自社で担えるか」と商材の信頼形成の重要度で選ぶ
• 訴求・オファー・流入の問題はデザインでは直せない。切り分けてから投資する

「うちのLPの問題はデザインなのか、それ以外なのか」を切り分けたい方は、まずWeb集客ドック（無料診断）で集客導線のどこに穴があるかを整理してみてください。個別に相談したい方には、私たちマーケティングサポートがデータを見ながら、リニューアルが必要か・部分改善で足りるかを率直にお伝えします。