LPのデザインを考えるとき、多くの人がまず参考サイトを見に行きます。ところが100本眺めても、自社のLPが良くなるとは限りません。
理由は、見えているのが結果だけで、なぜその配色にしたのか、なぜその余白なのかという判断の理由が見えないからです。判断基準を持たないまま真似ると、うまくいったLPの見た目だけが移植されます。
この記事では、LPデザインで成果を分ける12のコツを先に整理します。そのうえで弊社が制作した実物のLPを見ながら、判断がどう反映されているかを確認します。参考サイト11選は最後にまとめました。
この記事の結論（LPデザイン 早わかり）
StockSunに依頼する場合の支援範囲は、LP制作コンサルティングのサービスページで支援事例とあわせて掲載しています。
目次
LPデザインとは、1ページで完結するランディングページの見た目と情報の並べ方を設計する作業です。通常のWebサイトのデザインとは、目的も評価の仕方も違います。
「LP制作 デザイン」を実務に落とし込むうえで要点になるLP設計の基本からデザイン、効果測定、改善施策までの品質基準を、StockSunでは『ランディングページ制作ガイドライン』として無料で配布しています。
》【無料DL】「LP制作 デザイン」の設計でCVRを上げる方法｜『ランディングページ制作ガイドライン』をダウンロードする
← 横にスクロールできます →
| 観点 | LPのデザイン | 通常のWebサイトのデザイン |
|---|---|---|
| 目的 | 1つの行動（申込・購入・問い合わせ）をさせる | 情報を探しやすくする・ブランドを伝える |
| 導線 | 上から下への一本道。回遊させない | ページ間を行き来させる |
| ナビゲーション | 置かない、または最小限 | グローバルナビを常設する |
| 評価指標 | CVR・離脱率 | 回遊率・滞在時間・指名検索数 |
| 情報量 | 説得に必要な分だけ縦に長く積む | ページを分けて整理する |
いちばん大きな違いはナビゲーションを置かないことです。通常のサイトでは親切な導線が、LPでは離脱口になります。読者に他のページへ行かれた時点で、そのLPの役目は終わってしまうためです。
この違いを理解しないままコーポレートサイトの延長でLPを作ると、綺麗だけれど問い合わせが来ないページができあがります。LPデザインの評価軸は美しさではなく、視線をCTAまで運べたかどうかです。
LPそのものの役割や、どんな商材に向くのかを先に押さえたい方は、定義から解説した記事も用意しています。
▼合わせて読みたい
LPとは？ホームページとの違いと、LPが向いているケース・向かないケースを解説
LP構成の型と要素の並び順｜実物のLPを分解して解説
ここからが本題です。判断に迷ったときの基準になる12項目を、影響の大きい順に並べました。
すべてを一度に直す必要はありません。既存のLPを改善する場合は、上から3つ（ファーストビュー・配色・CTA）だけでも効果が出ます。これから作る場合は、順番に確認していってください。
← 横にスクロールできます →
| 分類 | コツ | 効きやすい場面 |
|---|---|---|
| 見せ方の優先順位 | ①情報を詰め込まない ②色は3色 ③CTAは余白で目立たせる | 既存LPの改善で最初に触る |
| 読みやすさ | ④余白 ⑤フォント ⑥スマホから設計 ⑦視線誘導 | 離脱率が高いとき |
| 運用のしやすさ | ⑧文字を焼き込まない ⑨画像を圧縮 ⑩図解で短くする | 公開後に改善を回したいとき |
| CVへの接続 | ⑪フォームの項目を減らす ⑫広告と世界観を揃える | クリックはあるのにCVが出ないとき |
ファーストビューで伝えるのは3つまでです。誰向けか、何が得られるか、次に何をすればよいか。これ以上入れると、どれも読まれません。
実務でよく見るのが、企業ロゴ・受賞歴・キャンペーン・キャッチコピー・写真をすべて画面1枚に押し込んだ状態です。作り手は情報が多いほど親切だと考えますが、読者は選べずに離脱します。
判定の方法は簡単です。作ったファーストビューを3秒だけ見せて、何のサービスか答えてもらってください。社外の人に頼むのがポイントで、社内の人は前提を知っているため参考になりません。
ベースカラー・メインカラー・アクセントカラーの3色で組み立てます。目安の比率はベース70%、メイン25%、アクセント5%です。
アクセントカラーはCTAボタンだけに使ってください。見出しにも装飾にも同じ色を使うと、ボタンが背景に埋もれます。色数が増えるほど、どこを見ればよいか分からなくなります。
アクセントカラーの選び方は、メインカラーの反対側にある色を持ってくるのが基本です。青が基調なら橙、緑なら赤といった具合に、色相環で離れた位置を選ぶと自然に浮き上がります。
ブランドカラーが決まっている場合でも、LPではその色をベースかメインに置き、ボタンには別の色を当てる判断がありえます。ブランドの統一より、押されることを優先する場面があるためです。
商材と与えたい印象から配色を決める場合、次の対応が出発点になります。あくまで一般的な傾向なので、参考サイトで実例を確認してから決めてください。
← 横にスクロールできます →
| 与えたい印象 | ベース・メイン | アクセント | 相性のよい商材 |
|---|---|---|---|
| 清潔・信頼 | 白＋青 | 橙・黄 | 医療・クリニック・士業・BtoB |
| 親しみ・活気 | 白＋橙 | 緑・青 | スクール・コーチング・飲食 |
| 高級・落ち着き | 黒＋金／濃紺 | 白・ベージュ | ブライダル・不動産・高価格サービス |
| やさしさ・女性向け | 白＋淡いピンク | 濃いピンク・赤 | 美容・エステ・ベビー用品 |
| 健康・自然 | 白＋緑 | 橙・黄 | 健康食品・オーガニック・整体 |
注意したいのは、アクセントカラーがベース・メインと近い色にならないようにすることです。淡いピンクが基調のLPにピンクのボタンを置くと、埋もれて見つけてもらえません。
ボタンを目立たせようとすると、まず色を派手にしがちです。しかし周囲がにぎやかなままだと、色を変えても埋もれます。
効くのはボタンの周りを空けることです。上下に十分な余白を取り、近くに競合する要素を置かない。それだけでクリック率は変わります。ボタンの文言も「送信」ではなく「無料で相談する」のように、押した先が読めるものにしてください。
大きさにも目安があります。スマートフォンで指がしっかり収まる高さが必要で、44px前後が下限とされています。小さいボタンは押しにくいだけでなく、押してよいものだと認識されにくくなります。
あわせて、ボタンの直下に一言添えると効果が上がります。「相談後の営業連絡はありません」「1分で入力できます」のように、押すのをためらう理由をその場で消してください。
ページが長くなるのを嫌って余白を詰めると、かえって読まれなくなります。人は区切りが見えるところまでを1つのまとまりとして読むためです。
目安として、セクションとセクションの間はスマートフォンで指1本分ほど空けます。同じセクション内の要素間はその半分。この2段階が守られているだけで、読みやすさは大きく変わります。
行間も余白の一部です。日本語の本文は文字サイズの1.7〜1.8倍程度の行間を取ると読みやすくなります。詰まった文章は、内容以前に読む気を削ぎます。
余白を削りたくなるのは、たいてい「情報を減らしたくない」という理由からです。そういうときは余白ではなく、文章そのものを削ってください。削れない情報は、そもそも本当に必要かを疑ったほうがよいことが多いです。
見出し用と本文用の2種類あれば足ります。書体を増やすと統一感が失われ、素人が作った印象になります。
サイズも大見出し・小見出し・本文・注釈の4段階に固定します。段階が決まっていれば、読者は文字の大きさだけで情報の重さを判断できます。スマートフォンでの本文は16px前後が下限の目安です。
書体の選び方にも傾向があります。ゴシック体は視認性が高く、価格や条件など瞬時に読ませたい情報に向きます。明朝体は落ち着いた印象を与えるため、高価格帯の商材やブランド訴求で使われます。
太さの使い分けも有効です。同じ書体でも、太字と通常を使い分けるだけで強弱がつきます。書体を増やす前に、まず太さで解決できないかを考えてください。
広告経由のLPは、多くの商材でスマートフォンからの流入が過半を占めます。それなのにPC版から作り始めると、スマホ版が縮小版になってしまいます。
横に並べた3つの要素は、スマホでは縦に積まれます。この時点で意図した比較が成立しなくなることがあります。PCで完成したデザインを確認して終わりにせず、必ず実機で上から下までスクロールしてください。
表も同じ問題を抱えます。列が多い比較表はスマホで潰れるため、横スクロールにするか、カード形式に組み替える判断が必要です。表をそのまま縮小すると、文字が読めなくなります。
あわせて、追従ボタンの検討もしてください。縦に長いLPでは、スクロール中に常に画面下部へボタンを固定しておくと、読み終えた瞬間に押せる状態を作れます。
人の視線には癖があります。横書きの日本語では左上から右下へ流れるため、重要な情報は左側か中央に置くのが基本です。
また、人物写真が写っている場合、読者の視線はその人物が見ている方向につられます。写真の人物をCTAボタンの方向に向けるだけで、ボタンへの誘導が働きます。
矢印や三角形も誘導に使えます。セクションの区切りに下向きの三角を置くと、続きがあることが伝わってスクロールが促されます。細かい工夫ですが、離脱位置が変わることがあります。
逆に、視線を散らすものは置かないでください。動く装飾、複数方向を向いた矢印、意味のない背景パターンは、読ませたい場所から注意を奪います。
デザインの自由度が高いため、テキストを画像として書き出すLPは少なくありません。ただしこれをやると、あとから1文字直すだけでもデザイナーの手が必要になります。
LPは公開後に文言を試す前提のページです。改善のたびに外注が発生する作りにすると、テストが止まります。キャッチコピー部分だけは画像にする、といった線引きを最初に決めておいてください。
画像化にはもうひとつ問題があります。文字が画像になっていると、検索エンジンが内容を読み取れません。広告専用のLPなら影響は限定的ですが、検索流入も狙うなら避けるべきです。
LPは画像が多くなるため、そのまま載せると読み込みが遅くなります。表示が遅いLPは、内容を見てもらう前に閉じられます。
スマートフォンで開いて、主要な部分が3秒以内に表示されるかを基準にしてください。画像形式の見直しと圧縮だけで、体感は大きく変わります。
とくに効くのがファーストビューの画像です。ここが重いと、読者は白い画面を見ている時間ができてしまいます。最初に表示される1枚だけでも軽くしておくと、離脱の体感は変わります。
下部の画像は遅延読み込みにして、スクロールに合わせて読み込む設定にしてください。実装側の設定ですが、デザイン段階で画像点数を把握しておくと相談しやすくなります。
文章で3段落かかる説明が、図1枚で伝わることがあります。特に手順、比較、仕組みの3つは図解に向いています。
ただし装飾のための画像は逆効果です。意味のないイメージ写真は、読者にとってスクロールする距離が伸びるだけになります。載せるなら情報を持った図にしてください。
判断の目安は、その画像を外したときに情報が減るかどうかです。減らないなら装飾なので、削るか差し替えます。無料素材のオフィス風景が並んでいるLPは、この基準で見直す価値があります。
デザインが良くても、フォームで離脱されればCVは発生しません。必須項目は本当に必要なものだけに絞ります。
入力補助も設計対象です。郵便番号から住所を自動入力する、全角と半角を自動変換する、エラーをその場で表示する。この3つは実装コストの割に効果があります。
見た目の面では、入力欄の高さと文字サイズに注意してください。スマートフォンで文字が16px未満だと、タップした瞬間に画面が拡大される挙動が起きることがあります。
また、残りの入力項目数が見えると離脱が減ります。ステップ表示にする、あるいは「あと2項目」と示すだけでも、終わりが見えて手が止まりにくくなります。
▼合わせて読みたい
【フォーム決定版】LP制作でフォームを作成してコンバージョン率UP！？おすすめツール9つの比較や選び方を紹介！
広告で見たバナーと、着地したLPの色や雰囲気が違うと、読者は違うページに来たと感じます。この一瞬のずれが離脱を生みます。
広告とLPは、同じ担当者がセットで確認してください。デザインの良し悪し以前に、広告との連続性が切れているLPは成果が出ません。
揃えるのは色だけではありません。バナーで使った写真をファーストビューにも使う、キャッチコピーの一部をそのまま繰り返す。この重なりが「同じページに来た」という確信を作ります。
複数の広告を回している場合は、広告ごとにLPを出し分ける方法もあります。全部作り分けるのが難しければ、ファーストビューだけ差し替えるだけでも効果があります。
＼どこを直せば成果が変わるか整理します／
【無料】今のLPデザインを見てもらうコツを並べただけでは、実際にどう反映するのかが見えません。弊社が制作した2本のLPで確認します。
配色は青と白の寒色系に統一し、アクセントに黄色を置いています。コツ②の3色ルールがそのまま適用された状態です。
注目したいのは、金額を示すバッジだけが黄色で塗られている点です。ほかに黄色を使っていないため、視線が自然にそこへ集まります。色数を絞ることが、そのまま誘導になっています。
ファーストビューの情報も3つに絞られています。対象を示す一言、得られる状態、そして今申し込む理由。コツ①のとおりです。
書体は明朝体を主体にしています。美容やリラクゼーションの商材では、ゴシック体より落ち着いた印象を出しやすいためです。一方で金額まわりはゴシック体にして、瞬時に読める状態を保っています。
1枚のLPの中でも、読ませたい速度によって書体を使い分けているということです。コツ⑤で「2種類まで」と書いたのは、こうした意図のある使い分けまで禁じる意味ではありません。
こちらは暖色系で、親しみやすさを優先した配色です。同じ「サービスのLP」でも、届けたい印象が違えば色の選び方は変わります。
デザイン面で効いているのは配置です。左下の人物が画面中央を向いており、視線がキャッチコピーとボタンの方向へ流れます。コツ⑦の視線誘導が使われています。
また、条件を示す3つの丸型バッジは読まずに目に入る情報として機能しています。文章を読む前に、オンラインであること・1対1であること・無料で試せることが伝わる作りです。
CTAボタンは緑で、ページ全体の暖色系から意図的に外してあります。コツ②のアクセントカラーの考え方どおりで、ほかに緑を使っていないため自然に浮き上がります。
2本を並べると分かるのは、デザインの正解は商材ごとに違うが、判断の手順は共通しているということです。色数を絞る、視線を運ぶ、情報を3つに絞る。この手順は業種を問いません。
青枠で囲った2箇所がCTAボタンです。ヘッダーとファーストビュー下部の両方にあり、どちらもスクロールする前に見えます。
デザイン面で効いているのは、ボタンの周囲に何も置いていないことです。左右に余白があり、近くに競合する要素がありません。コツ③で書いた「色ではなく余白で目立たせる」がそのまま反映されています。
ヘッダーのボタンは小さめ、ファーストビュー下部のボタンは大きめと、サイズにも差をつけています。常時見えるヘッダーは控えめに、読み終えた位置では押しやすく、という使い分けです。
弊社が手がけたLP・Webサイトの制作実績は、公開ページにまとめています。業種の近い事例を探す際にご覧ください。
実績一覧：StockSun Web制作の実績一覧
＼デザインから運用改善まで一貫対応／
【無料】LP制作の相談をする判断基準を持ったうえで見ると、参考サイトの使い方が変わります。ここからは実際に使える11サイトを、探せる軸とあわせて紹介します。
← 横にスクロールできます →
| サイト | 絞り込める軸 | 向いている使い方 |
|---|---|---|
| LPアーカイブ | 業種・色・イメージ・タイプ | 掲載数が最も多い。まず量を見たいとき |
| SANKOU! | 業種・デザインテイスト | UI/UXの質で選びたいとき |
| LP advance | 業種・色・訴求 | 構成やコピーまで参考にしたいとき |
| Web Design Clip [L] | 業種・色・レイアウト | レイアウトの型を探すとき |
| LP幹事 | 業種50種以上・色13色以上・イメージ | 業種を細かく絞りたいとき |
| ランディングページ集めました。 | 色 | 配色から発想したいとき |
| デザインの参考になるLPリンク集 | 業種 | シンプルに一覧で眺めたいとき |
| キーワード・画像類似 | 断片的なパーツを集めたいとき | |
| Landingfolio | 業種・目的・要素 | 海外の型を取り入れたいとき |
| Landing Gallery | ツール・カテゴリ | 制作ツール別に見たいとき |
| One Page Love | CMS・スタイル | 使用CMSから逆引きしたいとき |
11本すべてを見る必要はありません。掲載数の多いサイトを1つ、業種で絞れるサイトを1つ、海外を1つ。この3本で十分に足ります。
迷う場合は、LPアーカイブ・LP幹事・Landingfolio の組み合わせから始めてください。量・業種の細かさ・海外の型という3方向をカバーできます。
掲載数が国内最大級のLPデザインまとめサイトです。業種・色・イメージ・タイプの4軸で絞り込めるため、条件を決めてから探す使い方に向いています。
注意点として、掲載数が多いぶん絞り込まないと時間を溶かします。業種と色を先に決めてから開いてください。
まず量を見て相場観をつかみたい段階では、ここから始めるのが早道です（LPアーカイブ）。
Webデザインギャラリーの中でも、掲載基準が厳しいことで知られるサイトです。おしゃれさだけでなく、操作感の良いサイトが集まっています。
LP以外のWebサイトも多く掲載されているため、カテゴリーをLPに絞ってから見るのが前提です。
数を絞って質の高いものだけを見たいときに向きます。動きのあるLPを作りたい場合の参考にもなります（SANKOU!）。
デザインだけでなく、構成やキャッチコピーの観点でも参考にできるリンク集です。広告用のLPが多く集まっています。
掲載されているのは実際に広告で回っているLPが中心です。実務で成果を出している型を見られる点が強みになります。
見た目を真似するのではなく、訴求の順番を学びたいときに使ってください（LP advance）。
LP・縦長ページに特化したクリップ集です。アイキャッチや構成、セールスライティングの観点で整理されています。
同系列にWebサイト全般のギャラリーもあります。LPだけを見たい場合は末尾に [L] が付いたほうを使ってください。
ワイヤーフレームを作る前に、レイアウトの型をいくつか持っておきたいときに便利です（Web Design Clip [L]）。
業種50種以上、色13色以上、イメージの3軸で絞り込めます。「歯科医院」「社労士」「保育園・幼稚園」のように分類が細かいのが特徴です。
ニッチな業種でも実例が見つかりやすいのが利点です。士業や医療系など、参考が少ない分野を扱う場合に重宝します。
自社と同じ業種の実例だけを見たいときに強いサイトです。あわせてLP制作の相談窓口も兼ねています（LP幹事）。
Webデザイナー向けに作られたLPデザイン集で、色から探す導線が中心です。白・桃・青といった色の切り口で一覧できます。
ブランドカラーが決まっている場合、同じ色の実例をまとめて見ると面積の使い方の差が分かります。
配色の方向性が先に決まっている案件で、実例を集めたいときに向きます（ランディングページ（LP）集めました。）。
シンプルな一覧型のリンク集です。細かい絞り込み機能はありませんが、そのぶん眺めるだけで数を見られます。
更新頻度は他サイトほど高くありませんが、そのぶん定番の型が残っています。
条件を決めずに広く見たい初期段階に向いています（デザインの参考になるランディングページリンク集）。
LP全体ではなく、ボタン・見出し・図解といったパーツ単位で集めたいときに便利です。画像の類似検索が効くため、1枚見つかれば近いものが芋づる式に出てきます。
ただし出典が不明な画像も混ざるため、参考として見る以上の使い方はしないでください。
ボードにまとめて社内で共有できるので、デザイナーへのイメージ伝達にも使えます（Pinterest）。
海外のLPを業種・目的・要素で絞り込めるギャラリーです。SaaSやアプリの事例が充実しています。
BtoBやIT系のLPを作る場合、国内の事例だけでは型が限られます。海外のギャラリーを1つ見ておくと、選択肢の幅が変わります（Landingfolio）。
どのツールで作られたLPかが分かるギャラリーです。ノーコードツールでの制作を検討している場合、そのツールで何ができるのかを実例から判断できます。
ノーコードで作る前提なら、実現できる表現の範囲を先に把握できるのが利点です。
ツール選びとデザイン検討を同時に進めたいときに役立ちます（Landing Gallery）。
1ページで完結するサイトを集めた老舗のギャラリーです。使用CMSやスタイルから逆引きできます。
掲載されているのはLPに限らず、ポートフォリオやイベントページも含みます。広い意味での1ページ設計を学べるのが特徴です（One Page Love）。
＼商材とターゲットから逆算して提案します／
【無料】自社に合うデザインの方向性を相談するギャラリーを開いても、目的なく眺めていると時間だけが過ぎます。探す軸を先に決めてください。
まずは自社と同じ業種で探します。同業のLPには、その市場で読者が求める情報の型が反映されているためです。
ただし同業だけを見ると、競合と似たLPになります。同業を3本見たら、まったく違う業種も3本見てください。差別化のヒントは業界の外にあることが多いです。
ブランドカラーが決まっている場合は、色から探すのが早いです。同じ色でも、面積の使い方で印象が変わることが分かります。
色は商材との相性もあります。食品なら暖色、医療や金融なら寒色、といった一般的な傾向は押さえたうえで、実例で確認してください。
「高級感」「かわいい」「信頼感」のように、届けたい印象から探す方法です。ターゲットが決まっているときに機能します。
この軸で探すときは、印象を先に言葉にしておくのがコツです。「なんとなくおしゃれに」で探し始めると、集めた参考LPがバラバラになり、社内の合意も取れなくなります。
参考LPが5〜10本たまったら、共通点を書き出してください。配色の傾向、ファーストビューの情報量、CTAの位置。複数のLPに共通している要素が、その市場での型です。
そのうえで、どこを外すかを決めます。全部型どおりにすると競合と同じになるため、1〜2箇所だけ意図的に違うことをします。差別化はここで生まれます。
最後に、集めたLPを社内で共有するときは順位をつけてください。「これが第一候補、理由は◯◯」まで書いておくと、デザイナーとの認識合わせが1往復で済みます。
StockSun 深井 嵐丸
参考LPを集めるとき、私は必ず「なぜ良いと思ったか」を1行で添えてもらいます。これがないと、デザイナーには見た目しか伝わりません。配色が上品なのか、価格の見せ方が分かりやすいのかで、作るものはまったく変わります。
LPデザイナーは、LPの見た目と情報の並べ方を設計する職種です。通常のWebデザイナーと重なる部分は多いものの、求められる範囲が少し違います。
← 横にスクロールできます →
| 依頼先 | 費用の目安 | 対応範囲 | 向いているケース |
|---|---|---|---|
| フリーランス（デザインのみ） | 5万〜10万円 | デザインデータの作成まで | 構成・原稿・実装を自社で用意できる |
| フリーランス（実装込み） | 10万〜30万円 | デザイン＋コーディング | 構成と原稿は用意できる |
| 制作会社 | 20万〜150万円 | 戦略設計から実装まで | 社内に判断できる人がいない |
| 広告代理店 | 30万〜200万円 | 広告運用とセット | 広告出稿が前提になっている |
費用の差は品質ではなく、対応範囲の差です。デザインのみ5万円で依頼する場合、構成案と原稿を書ける人が社内にいることが前提になります。ここを見落とすと、安く頼んだつもりが社内で止まります。
優秀なLPデザイナーを見分ける基準は、過去の制作物の見た目ではありません。その案件でどの工程を担当し、公開後に数値がどう動いたかを説明できるかです。デザインだけを担当した人は、成果について語れません。
面談で聞くなら、次の3つが効率的です。この実績でどの工程を担当したか。公開後の数値を知っているか。弊社の商材ならどこが訴求の軸になりそうか。3つ目にその場で仮説を返せる人は、事前に調べています。
発注時に決めておくことも2つあります。修正回数の上限と、デザインの元データを納品してもらえるかです。元データがないと、あとから文言ひとつ変えるのに再依頼が必要になります。
依頼先ごとの違いや費用の内訳は、専門記事で詳しく扱っています。
▼合わせて読みたい
LP制作の依頼先はどこがいい？フリーランス・制作会社・クラウドソーシングを実額比較
LP制作の費用相場は3万〜200万円｜8社の料金を実額検証【2026年最新】
LP制作会社おすすめ35選【2026年最新】目的別カオスマップ・費用相場・失敗しない選び方
StockSun 深井 嵐丸
私は広告運用の出身なので、デザインを見るときも数字から入ります。きれいなLPが売れるわけではなく、売れているLPを見るとたいてい理由が説明できる作りになっています。デザイナー選びで見るのは作品集より、なぜこうしたかを語れるかどうかです。
＼どこまで外注すべきかから相談できます／
【無料】伴走LPの内容を見る最後に、制作の現場で繰り返し見てきた失敗を挙げます。どれもデザインに入る前の段階で防げるものです。
社内レビューで「なんとなく好きじゃない」という意見が出ると、そこから議論が進まなくなります。デザインは主観が入りやすいぶん、判断基準を先に共有しておく必要があります。
有効なのは、レビューの観点を最初に配っておくことです。「ターゲットに合っているか」「3秒で何のサービスか分かるか」「CTAが見つけやすいか」の3点に絞れば、好みの話にはなりません。
作る側にとって最もつらいのは、修正指示が「もう少しいい感じに」で来ることです。観点を決めておくと、指示が具体的になって手戻りも減ります。
同業のLPばかり参考にすると、配色もレイアウトも似てきます。読者からすると区別がつかず、結局は価格で比較されることになります。
対策は、参考にする範囲を業界の外へ広げることです。まったく違う業種のLPから1〜2箇所だけ要素を借りると、同業の型を守りながら差別化できます。
1枚画像で作られたLPや、文字がすべて画像化されたLPは、公開後の改善ができません。文言を1つ変えるだけで制作会社への依頼が必要になります。
LPは公開してからが本番です。初稿の完成度より、直せる状態で出せるかどうかのほうが成果に効きます。発注時に、公開後の修正をどこまで自社でできるかを確認しておいてください。
StockSun 深井 嵐丸
3つとも、デザイナーの腕ではなく発注側の準備で決まる話です。とくに①は根が深く、決裁者の一言で全部やり直しになる現場を何度も見てきました。レビューの観点を1枚の紙にして着手前に配るだけで、制作期間が2週間縮んだ案件もあります。
1ページで完結するランディングページの見た目と情報の並べ方を設計する作業です。通常のWebサイトと違い、回遊させずに1つの行動へ導くことが目的なので、ナビゲーションを置かず上から下への一本道で組み立てます。評価軸は美しさではなくCVRです。
LPの見た目と情報設計を担当する職種です。Webデザイナーとの違いは、成果から逆算する視点が求められる点にあります。配色やレイアウトだけでなく、視線誘導やCTAの見せ方まで含めて設計できる人が該当します。
無料プランのあるツールは複数あります。ただし独自ドメインが使えない、広告が表示される、公開ページ数に制限があるなどの条件が付くのが一般的です。広告を出す前提のLPであれば、有料プランを検討したほうが結果的に安く収まります。
デザインのみをフリーランスに依頼する場合で5万〜10万円、実装まで含めると10万〜30万円が目安です。制作会社に戦略設計から任せる場合は20万〜150万円になります。金額の差は対応範囲の差だと考えてください。
ファーストビューです。ここで「自分に関係がある」と判断されなければ、その下は読まれません。次点は配色で、色数を3色に絞るだけでCTAボタンが目立つようになります。
レイアウトの型や情報の並べ方を参考にするのは問題ありませんが、デザインやコピーをそのまま複製するのは避けてください。著作権上の問題に加え、商材もターゲットも違えば最適解は変わります。骨格だけ借りて、中身は自社の材料で埋めるのが正しい使い方です。
上がることもありますが、原因がデザインにあるとは限りません。流入元と訴求がずれている、フォームの項目が多すぎる、そもそも商材と広告のターゲットが合っていない、といった要因のほうが影響が大きいケースもあります。計測データを確認してから手を入れてください。
基本は同じ内容で、レイアウトだけを最適化します。ただし流入の大半がスマートフォンなら、スマホ版から設計してPC版を後から整えるほうが確実です。横並びの要素が縦に積まれたときに意図が崩れていないかを必ず確認してください。
最終的な決裁者が、着手前に一度入るべきです。デザイン案が出てから決裁者が初めて登場すると、好みの問題で差し戻しが起きて工程が丸ごと戻ります。誰に何を届けるかの合意だけでも、着手前に取っておいてください。
たたき台を作る用途では実用段階に入っています。配色案の生成や、レイアウトのバリエーション出しは短時間で行えます。ただし誰に何を届けるかの判断と、公開後の数値を見た改善は人の仕事として残ります。使い方の詳細はAI活用の記事にまとめています。
▼合わせて読みたい
LP作成にAIはどこまで使えるか？作れる部分・作れない部分と、対応ツール4選
LPデザインの評価軸は、見た目の美しさではありません。訪問者の視線を上から下へ、最終的にCTAまで運べたかどうかです。この基準を持って初めて、配色も余白もフォントも判断できるようになります。
12のコツのうち、まず手をつけるなら色数です。ベース・メイン・アクセントの3色に整理し、アクセントはCTAボタンだけに使う。それだけでボタンが浮き上がり、視線の行き先がはっきりします。次にファーストビューの情報量を3つまでに削りましょう。
デザインは公開してからが本番です。数値を見て文言や配置を試せる状態にしておけば、初稿が完璧でなくても成果には近づけます。方向性の決め方から迷っている段階でしたら、商材とターゲットの整理からご相談ください。
比較してから依頼するまでの流れは、LP制作コンサルティングのサービスページで支援体制とあわせて掲載しています。
＼商材とターゲットの整理からお手伝いします／
【無料】LPデザインの方向性を相談する
![Web Design Clip [L] のトップページ](https://stock-sun.com/cdn-cgi/image/quality=75,format=webp,fit=scale-down,width=1920/wp-content/uploads/2024/02/unnamed-9-3.png)
StockSun 深井 嵐丸
12個並べましたが、1つだけ選ぶなら②の「色を3色に絞る」です。相談をいただくLPの多くが、まず色数で失敗しています。色が5色も6色もあると読者は何が大事か判断できず、3色に整理するだけでCTAボタンが自然に浮き上がります。