社内にノウハウを溜めていても、必要なときに、必要な形で取り出せなければ意味がありません。この資料は、私たちが社内に蓄えてきたLP制作のノウハウ（4本・約2.5万字）と、同じ様式で分析したLP事例53本から、「LP制作の進め方」を1本に引き出したものです。
新人が読んでそのまま手を動かせる細かさで書きつつ、お客様に見せて「うちはこう作ります」と説明できる形にしています。各工程には実際に打ち込む指示文と、そこから返ってくる出力の例を載せました。
この資料は、LPを1本つくり切るまでの手順を、迷わず順番に進められる形にしたものです。読み物ではなく、手元に開いたまま作業するための台本として使ってください。
実務で使う手順書は、これよりずっと細かくなります。節の数も、素材の点数も、確認項目も、実案件では数倍になります。ここでは進め方の骨組みを見ていただくために、意図的に削っています。そのまま現場に配れる形ではないことを、先にお断りしておきます。
各工程にそのまま打ち込める指示文と、返ってくる出力の例を載せています。指示文の中の 〔 〕 は、自社の情報に置き換える箇所です。出力例は「こういうものが返ってくる」という目安であって、そのまま使えるものではありません。
この資料は一から書き下ろしたものではありません。案件をこなすたびに社内へ追記してきた記録を、ひとつの手順書として引き出したものです。
| 元の資料 | そこに書いてあること | 分量 |
|---|---|---|
| 制作の作法 | 色数・余白・フォント・情報量の原則 | 約6千字 |
| 制作の手順 | 何を、どの順で、どの資料を使うか | 約7千字 |
| 実行チェックリスト | 案件ごとに複製して埋める記入欄 | 約1万字 |
| 品質の採点表 | 出す前に見る10項目と、5点の状態 | 約1.2万字 |
| 事例の分析 | 業種・配色・演出・構成から逆引きできる形 | 53本 |
合計およそ25万字。溜まっているから、引き出せます。逆に言えば、溜める場所と引き出す仕組みを分けていないと、この作業はできません。
上流ほど、あとから覆すと手戻りが大きくなります。工程1と2で決めたことが、最後まで効きます。急ぐ案件ほど、ここを飛ばさないでください。
このページで何を達成するのかを1つに絞ります。複数のゴールを載せたページは、どれも達成しません。
後押しする条件は、最初の画面のコピーと最後のボタンに直結します。あとから足そうとすると全部書き直しになるので、ここで決めてください。
これから作るページの目的を決めたいので、次の5つを埋める質問を 1つずつ順番にしてください。私が答えてから次に進んでください。 1. ゴール（購入／問い合わせ／資料請求／予約／認知 から1つだけ） 2. 読む人がいまどの段階か 3. 売りたいものを1つに絞る 4. 後押しする条件（初回割引・特典・返金保証・期間限定 など） 5. 何をもって成功とするか 最後に、5つを1行ずつにまとめて出してください。
まず1つめです。このページのゴールは、次のどれにあたりますか。
購入／問い合わせ／資料請求／予約／認知 — 一番近いものを1つ選んでください。
（回答後）承知しました。「問い合わせ」ですね。では2つめです。読む人はいま、どの段階にいますか。
【最終まとめ】
ゴール：問い合わせ（フォーム送信）
読む人の段階：比べている
商材：工場のリノベーション工事
後押し：現地調査と概算見積が無料
成功の基準：月あたりの問い合わせ3件
「30〜50代の経営者」では絞れていません。たった1人まで具体化してください。刺さるデザインも、刺さる言葉も、この1人で変わります。
| 絞れていない | 絞れている |
|---|---|
| 忙しい経営者 | 現場に出ながら見積も自分で書いていて、事務作業は夜にまわしている |
| 品質にこだわる人 | 前の業者で手直しが続き、今回は「途中で相談できる相手か」を見ている |
| コストを気にしている | 総額より、追加費用が後から出るかどうかを気にしている |
次の情報をもとに、このページが向き合う相手を1人に絞って書き出してください。 ・年代／職業／役職 ・生活の背景（家族・働き方・1日の流れ） ・悩みを3つ以上 ・このページで、その悩みにどう応えるか ・全体の雰囲気（温かみ／端正／ポップ／堅実 から1つ） 悩みは「忙しい」のような一般的な言葉ではなく、 その人が実際に口にする言葉で書いてください。 根拠のない決めつけは書かず、推測した箇所には〔推測〕と付けてください。 〔ここに、事業の内容と、いまのお客様の様子を貼る〕
ゼロから構成を考える必要はありません。同じ業種でうまくいっているページの型を借ります。ただし、レイアウトや文章をそのまま真似ることはしません。
ゼロから探す必要はありません。業種や配色から逆引きできるギャラリーサイトがあります。下の5つを使い分けてください。
| サイト | 絞り込める軸 | 使いどころ |
|---|---|---|
| LPアーカイブ | 14色 × 20の雰囲気 × 50以上の業種 | 国内最大級。まず業種で網羅的に当たる |
| Web Design Clip | メイン色13 × サブ色13 × レイアウト6型 | 配色から厳密に探すならここ |
| LP advance | 業種／色／主役の要素（人・物・イラスト・動物） | 「イラストが主役の例」のように絵の作りから探せる |
| SANKOU! | 業種40以上／様式／配色／動き／レイアウト | 動きのある例を見たいとき |
| RESPONSIVE WEB DESIGN JP | カテゴリ／色／レイアウト／手法 | スマホとPCを並べて見え方を比べたいとき |
※ 掲載URLは2026年7月31日に確認しました。過去の記録にあった2サイトは、閉鎖またはアクセス不可のため外しています。
添付した同業種のページ3件について、それぞれ次を表にしてください。 ・構成の順番（上から何を見せているか） ・最初の画面で何を伝えているか ・配色と、押させたい場所の見せ方 そのうえで、次の目的と読む人に一番合う型を1つ挙げ、 なぜそれかを3行で書いてください。 選ばなかった2件についても、外した理由を1行ずつ書いてください。 目的：〔工程1の結果を貼る〕 読む人：〔工程2の結果を貼る〕
| 構成の順番 | 最初の画面 | 押させ方 | |
|---|---|---|---|
| A社 | 実績 → 工程 → 費用 → 問い合わせ | 施工写真＋「操業を止めない改修」 | 各節の末尾にボタン |
| B社 | 悩み → 解決 → 実績 → 費用 | イラストで工程を図解 | 最下部に1つだけ |
| C社 | 会社紹介 → 事業 → 実績 | 社屋の写真＋社名 | ヘッダーに常時表示 |
推す型：B社型
A社型を外した理由：実績が先だと、まだ比べている段階の人には自慢に見えます。
C社型を外した理由：会社紹介から入ると、悩みに触れるまでが遠すぎます。
ここでつくるのは文章ではありません。情報の流れそのものです。最初の画面に何を置き、そのあと何を、どの順で見せていくのか。1画面ずつ、上から下への流れを決めます。あわせて、各節にどんな素材が要るのかも書き出します。
この工程が、制作でいちばん効きます。ここが決まっていれば、あとは埋めるだけになります。逆に、流れが決まらないまま作り始めると、素材もデザインも作り直しになります。
上から読むあいだに、読む人の気持ちは順に動きます。1つの枠が、1つの不安に答える。これが鉄則です。
| # | 気持ちの動き | 枠 | ここで消す不安 |
|---|---|---|---|
| 1 | 気になる | 最初の画面 | 「これは自分向けか。何がもらえるのか」 |
| 2 | 自分ごとになる | 悩みへの共感 | 「分かってくれているか」 |
| 3 | 欲しくなる | 解決できること | 「で、どう解決されるのか」 |
| 4 | でも本当か | 実績・事例 | 「証拠はあるのか」 |
| 5 | なら安心 | お客様の声 | 「他の人はどうだったのか」 |
| 6 | できそう | 進め方 | 「面倒ではないか。流れはどうなるのか」 |
| 7 | 最後の引っかかり | よくある質問 | 「まだ聞きたいことがある」 |
| 8 | 動く | 最後のひと押し | 「いま動く理由は。どこを押すのか」 |
| 9 | 受け止める | 受け皿 | 「押したあと、どうなるのか」 |
8つの枠は材料であって、決まった順番ではありません。工程3で選んだ型と、工程2で決めた読む人の段階によって並べ替えます。ここを機械的に上から並べると、どこかで読むのをやめられます。
| 読む人の段階 | 並べ方 | 理由 |
|---|---|---|
| まだ知らない | 共感 → 解決 → 実績 → 進め方 | いきなり実績を出しても、自分に関係があると思われない |
| 比べている | 解決 → 費用・進め方 → 実績 → 声 | 比較中の人は、条件が見えないと先へ進まない |
| 決めかけている | 実績 → 声 → よくある質問 → 申し込み | あとは不安を消すだけ。悩みの確認は不要 |
1画面ずつ、何が目に入るかを決めます。同じ密度が続くと読み疲れます。重い節のあとには軽い節を置いて、息を継がせてください。
ここだけは、ゼロから考えるより型に当てはめる方が速くて強いです。
| 型 | 形 | 例 |
|---|---|---|
| 便益を直球で | 〈対象〉の〈悩み〉を〈解決〉 | 「地域で一番、怖くない歯医者へ。」 |
| 一言で位置を決める | 〈A〉以上、〈B〉未満。 | 「貯金以上、投資未満。」 |
| 体験を言い換える | 〈日常〉が〈価値〉に変わる。 | 「生活費が株に変わる。」 |
| 否定して定義し直す | ただの〈分類〉ではない。 | 「ただのベンチャーキャピタルではない。」 |
よくある失敗／社名や機能名から入る（自社目線）。誰向けか書いていない。最初の画面にボタンが無い。
実際に1本つくって、いちばん作り直したのがここでした。引用文を並べただけでは、余白ばかりで痩せて見えます。声として成立させるには、次の3つが要ります。
読ませる8つの枠だけでは、行動を受け止める器が構成書に現れません。ボタンを置くと決めた時点で、押した先も同時に決めてください。あとから足すと、色も余白もボタンの階層も後付けになって浮きます。
| 決めること | 中身 |
|---|---|
| 受け方 | フォーム／電話／LINE／メール／予約。複数なら優先順位も決める |
| 項目 | 名前＋連絡先（＋1項目）の3つ以内。多いほど落ちます |
| 必須と任意 | どれを必須にするか |
| 送信後 | 次に何が起きるかを書く（「2営業日以内にご連絡します」） |
| 4つの状態 | 通常／入力エラー／送信中／完了。この4つを構成書に明記する |
| 個人情報 | 取扱いへの導線。チェックボックスの要否 |
決めた順番で節を並べ、1行ずつ埋めていきます。この表がそのまま、次の工程への引き渡し物になります。「必要な素材」の列が素材の発注書に、「見出し・本文」の列が原稿になります。
この資料では8つの枠で説明していますが、実際はもっと多くなります。1つの枠が複数の節に分かれるためです。たとえば「実績・事例」は、一覧の節と個別の詳細節に分かれ、「解決できること」も3本柱それぞれで節を持つことがあります。実際のLPで10〜30節、素材は数十点になるのが普通です。ここでは説明のために骨だけを示しています。
| # | 役割 | 見出し | 本文 | ボタン | 必要な素材 |
|---|---|---|---|---|---|
| 1 | 最初の画面 | 言い切る一言 | 補足1〜2行 | あり | 主役の写真 1枚 |
| 2 | 悩みへの共感 | 問いかけ | 一言＋背景3〜4行 ×3 | なし | 人物イラスト 3点 |
| 3 | … | … | … | … | … |
本文は下書きで構いません。事実の確認は後の工程でやります。ここで止めないでください。逆に、順番と役割だけは、ここで確定させてください。あとから入れ替えると、素材もデザインも作り直しになります。
構成書を作ってください。次の8つの枠を材料に、 読む人の段階に合わせて並べ替えてから、1節ずつ埋めてください。 材料：最初の画面／悩みへの共感／解決できること／実績・事例／ お客様の声／進め方／よくある質問／最後のひと押し 各節ごとに、次の5つを埋めてください。 役割／見出し／本文の下書き／ボタンの有無と文言／必要な素材 条件： ・まず並び順を決め、なぜその順にしたかを先に3行で書く ・重い節（表・長文）の次には軽い節を置き、読み疲れないようにする ・ボタンは最初と最後に置く。途中に置くならその理由を書く ・1つの節で1つのことだけ言う ・読み進めるうちに、不安が順に消えていく並びにする ・最初の画面の見出しは、次の4つの型のどれかで書き、どの型かを明記する （便益直球／一言で位置を決める／体験の言い換え／否定して定義し直す） ・事実でないことは書かない ・埋められない箇所は空欄にせず〔要確認〕と書く ・実績や数値は、こちらが渡した情報にあるものだけを使う ・「必要な素材」は、何枚・どんな絵かまで具体的に書く 最後に、必要な素材だけを一覧にまとめ直してください。 目的：〔工程1の結果〕 読む人：〔工程2の結果〕 型：〔工程3で選んだ型〕 使ってよい事実：〔実績・保有資格・対応エリアなどを貼る〕
【並び順】最初の画面 → 悩みへの共感 → 解決できること → 進め方 → 実績・事例 → お客様の声 → よくある質問 → 最後のひと押し
【この順にした理由】
1. 読む人は「比べている」段階なので、実績より先に進め方（操業への影響と費用の出方）を見せます。
2. 進め方は図が中心の軽い節なので、長文になる共感・解決のあとに置いて読み疲れを避けます。
3. ボタンは最初の画面と最後の2か所のみ。比較中の相手を急かさないためです。
1. 最初の画面［型：便益直球］
見出し：操業を止めずに、工場を建て替える。
本文：〔要確認：直近3年の工場改修の施工件数〕件の施工実績。現地調査と概算見積は無料です。
ボタン：まず現地を見てもらう
必要な素材：稼働中の工場で改修が進んでいる横位置の写真 1枚（人物が写り込まないもの）
2. 悩みへの共感
見出し：工場の改修で、最初につまずくのは工事ではありません。
本文：「古いのは分かっている。ただ、どこから手をつければいいのか」「前に頼んだところは、着工してから追加が出た」「操業を止めずにやれるのか、そこが読めない」
ボタン：なし
必要な素材：悩みを表すアイコン 3点（線画）
【必要な素材の一覧】
写真 4枚／線画アイコン 7点／工程の図 1点／お客様の顔写真 2枚〔要確認：掲載許可〕
構成書ができたら、デザインに入る前に素材を集めます。ここを飛ばして作り始めると、あとから「絵が無い」で止まります。
| 素材 | 使う枠 | だいたいの作り方 |
|---|---|---|
| 主役の1枚 | 最初の画面 | 撮る、または生成する |
| アイコン | 解決できること | 線画で作る（軽くて、色を変えやすい） |
| 現場・生活の写真 | 悩みへの共感／お客様の声 | 既存の写真を優先。無ければ生成 |
| お客様の顔 | お客様の声 | 実在の方は掲載許可が要ります。難しければ生成か、頭文字の丸で代替 |
| 工程の図 | 進め方 | 線画で作る |
| ロゴ | 全体 | 支給が最優先。無ければ簡易に作る |
| 背景の地紋 | 節の背景 | 単色か、ごく薄い地紋。文字が読める濃さを超えない |
| 共有時の画像 | SNSに貼られたとき | 最後にまとめて書き出す |
実際に1本つくって分かったことです。写真だけで組むと、堅くなって人が見えません。ビジュアルは3つの層に役割を分けてください。どれか1つが欠けると、そこが痩せます。
| 層 | 担う役割 | 使いどころ |
|---|---|---|
| 実写 | 信頼・具体性・証拠 | 施工事例、現場、商品。「本当にできるのか」に答える |
| イラスト | 情緒・親しみ・人の存在 | 人物。お客様の声、悩みの当事者。顔写真が撮れない相手を出せる |
| 装飾 | 雰囲気・業種の文脈 | 地紋・セクションのつなぎ。言葉を使わずに業種を伝える |
装飾は業種に紐づけて選びます。建設・建築なら設計図のグリッド線やコンクリートの断面。水産なら青海波。テックならドットグリッド。言葉を使わずに文脈が伝わるのが利点です。
構成書の「必要な素材の一覧」を、4つに仕分けてください。ここで生成が要るものだけに絞られます。
| 仕分け | 意味 | 目安 |
|---|---|---|
| 支給 | もう手元にある | まずここを探す。現場のカメラロールに眠っていることが多い |
| 撮る | これから撮影する | 実在の現場・人・商品。信頼につながるものは撮った方が強い |
| 生成 | AIで作る | 撮れないもの、抽象的なもの、背景 |
| 線画 | 手で作る | アイコン・工程図。生成より速くて、あとから色を変えられる |
構成書の「必要な素材の一覧」を、次の4つに仕分けてください。 ・支給（もう手元にある） ・撮る（これから撮影する） ・生成（AIで作る） ・線画（手で作る） そのうえで、「生成」に仕分けたものについて、 全部の素材に共通して付ける《共通の指定》を先に決めてください。 光の向き・色味・質感・画角。ここを揃えないとバラバラになります。 そのあと、素材ごとの指示文を書いてください。 各指示文の先頭に《共通の指定》を必ず入れてください。 条件： ・文字は画像に入れない ・実在の人物・企業名・ロゴは生成しない ・生成する枚数を最後に合計で出す 必要な素材の一覧：〔工程4の出力を貼る〕 全体の雰囲気：〔工程2で決めた雰囲気〕
仕分け結果／支給4点（現場写真）・撮る2点（社屋、代表）・生成3点（背景、主役の1枚、抽象カット）・線画7点（アイコン、工程図）
《共通の指定》／午前の自然光、やや低い彩度、青みを抑えた暖色寄り、粒状感は控えめ、水平画角、人物は写り込ませない
素材1（主役の1枚）／《共通の指定》＋ 稼働している金属加工工場の内部。奥で改修中の足場が組まれ、手前では機械が動いている。横位置。文字は入れない。
合計／生成 3枚
出てきた絵をそのまま置かないでください。採用してよいかを人が決めてから、構成書の枠にはめます。
構成書と素材がそろってから、見た目に入ります。ここでやるのは構造に、決まった文言と採用した素材をはめていく作業です。守ることは多くありません。この5つを外さなければ、素人っぽさは消えます。
| # | 守ること | よくある外し方 |
|---|---|---|
| 1 | 色は3〜4色。メイン・サブ・アクセント | 節ごとに色を足して、7色8色になる |
| 2 | 押させたい場所だけにアクセント色 | 見出しにもボタンにも同じ色を使い、どこを押すか分からない |
| 3 | フォントは1種類。太さで差をつける | 見出しだけ別の書体にして、ちぐはぐになる |
| 4 | 余白を詰めない | 情報を入れたくて行間と余白を削る |
| 5 | ボタンは高さ44ピクセル以上 | PCで整えて、スマホで押せない |
〔工程4の構成書〕と〔工程5でそろえた素材〕を、HTMLとCSSにしてください。 素材は構成書で指定された枠にはめてください。守ること： ・色は3〜4色（メイン・サブ・アクセント）。増やさない ・押させたい場所だけにアクセント色を使う ・フォントは1種類に揃え、太さで差をつける ・余白を詰めない ・ボタンは高さ44ピクセル以上 ・スマホ375px／タブレット768px／PC1440px で崩れない 作ったあと、上の6つを自分で1つずつ確認し、 守れていない箇所があれば直してから出してください。 確認結果も一緒に出してください。
最後に「自分で確認させる」の一文を足すかどうかで、出てくるものの質が変わります。指示の中でいちばん効く一行です。
作った本人は見落とします。点検は、作った直後ではなく一度置いてから行ってください。
作ったページについて、次を確認し、結果を一覧にしてください。 問題があれば、直し方も添えてください。 1. スマホ375px／タブレット768px／PC1440px で崩れないか 2. 読み込み中・入力エラー・送信完了の見え方が自然か 3. 文字と背景の明暗差が足りているか 4. 押せない、または小さすぎるボタンがないか 5. 画像に代替テキストが入っているか 6. リンク切れがないか 7. 事実と違う記述、根拠のない数値が残っていないか 7については、断定している箇所をすべて挙げ、 根拠がどこにあるかを併記してください。
公開して終わりではありません。直すところは、感想ではなく数値で決めます。
アクセスの数値を見て、どこで読むのをやめているかを挙げてください。 そのうえで、直す案を3つ、効果が大きい順に出してください。 それぞれ次の3点を書いてください。 ・何を変えるか ・なぜ効くと考えるか ・どう確かめるか 〔ここに、アクセス解析の数値を貼る〕
離脱の山：「費用の目安」の直前で62%が読むのをやめています。
各項目を1〜5点で採点し、根拠を1行書きます。5点は、プロが受注して納品する水準を基準にしています。作った人と、見る人が別々に採点して突き合わせてください。
| # | 見るところ | 5点と言える状態 |
|---|---|---|
| 01 | 第一印象 | 3秒で「誰向け・何が得られる・次に何をする」が伝わる |
| 02 | 言葉 | 短くて、記憶に残る。冗長でない |
| 03 | 構成 | 読み進めるうちに不安が順に消える。過不足がない |
| 04 | 見た目 | 色数・文字の階層・余白が揃っている。素人っぽさがない |
| 05 | 素材 | 写真とイラストの光・色・質感が1つに揃っている |
| 06 | 動き | 演出が主題に効いている。多すぎない |
| 07 | 例外時 | 読み込み中・空・エラー・完了の見え方が自然 |
| 08 | スマホ・見やすさ | 崩れない。押せる。動きを減らす設定にも対応している |
| 09 | 独自性 | 参考の原則は使うが、特定のページの複製になっていない |
| 10 | 信頼 | トーンが一貫し、実績・声・質問で裏づけがある。誇大でない |
| 合計 | 判定 |
|---|---|
| 45〜50点 | プロが受注して納品する水準と同等 |
| 38〜44点 | 納品できる。数点直せば上位へ |
| 37点以下 | 下地は良いが、出す前に直す |
用途が変われば、引き出す形も変わります。元にする社内ノウハウは同じです。
8工程のうち、初日・3日目・1週間で到達する地点を切り分けたもの。できたかどうかの確認欄が付きます。
同じ8工程から社内向けの記入欄を外し、「いつ何を決めていただくか」を中心に組み替えたもの。
10項目を1枚に切り出し、担当と確認者が別々に採点して突き合わせる形にしたもの。
この資料の8工程を、書いてあるとおりに通して実行しました。指示文もそのまま使い、写真4枚もAIで生成しています。 できあがったものを、そのまま置いておきます。
工程1〜3で目的・読む人・型を決め、工程4で9節の構成書に落とし、工程5で写真4枚を生成、 線画7点は手で作成。工程6でHTMLに組み、工程7の総点検（画面幅3種・明暗差・押せる大きさ・代替テキスト）まで実施しました。
3つとも、元にしているのは同じ社内ノウハウです。溜めるところと、引き出すところを分けておくと、用途が増えても書き直しが要りません。
↑ 先頭へもどる