Claude CodeでLP制作を量産しても品質を落とさない手順──型をCLAUDE.mdとSkillsに置き、確認を自動と人の2段に分け、本数で元が取れるかを計算する

この記事は、Claude CodeでLP制作を量産するときに、品質を落とさないための「型・確認・レビュー」の手順を扱います。

「速く作れるようになったのに、修正の往復が増えた」

Claude Codeを使い始めて、LPの1本目は驚くほど速く組み上がった。
ところが3本目、5本目と進むうちに、余白の値がページごとに違い、見出しの階層が崩れ、フォームの確認が抜けていく。

速さが上がるほど、確認の抜けも同じ速さで増えます。
量産で利益が残るかどうかは、生成の速さではなく、確認の仕組みで決まります。

Claude CodeでのLP量産とは、毎回の指示に頼らず、型と確認の手順をファイルに置いて、誰が作っても同じ基準で仕上げる仕組みである

黒字化の外科医です。LPを量産しても品質が落ちない、Claude Codeの使い方を解剖します。

型と確認をファイルに置くべき理由は、三つあります。

第一に、毎回の指示は、毎回ぶれるから。
「余白は8の倍数で」を、担当者が毎回書き忘れずに伝えることはできません。

第二に、機械で確かめられることと、人が決めることが混ざっているから。
HTMLの構文や画像の代替テキストの有無は、機械で拾えます。訴求の順番が先方の商品に合っているかは、人にしか分かりません。

第三に、レビューの時間を先に決めないと、納期の前に消えるから。
レビューの体制は、別の記事で扱いました。

▶ AIコードレビューの体制、制作会社は「誰が何を見るか」を先に決める──書いた人・確かめる人・承認する人の役割分担と、レビュー工数を月の予定に確保する計算例

Claude Codeで使う機能：公式で確かめた範囲

確認日：2026年10月27日（code.claude.com の公式ドキュメント）。

・CLAUDE.md：プロジェクトの ./CLAUDE.md か ./.claude/CLAUDE.md。
　毎回のセッションの始めに読まれる。1ファイル200行以内が目安とされている
・Skills：.claude/skills/〔名前〕/SKILL.md。/〔名前〕で呼び出せる。
　本文は使うときだけ読み込まれる
・hooks：PostToolUse と Edit|Write の組み合わせで、編集のあとに
　整形などのコマンドを自動で実行できる
・Chrome連携：claude --chrome。画面の確認、コンソールのエラーの読み取り、
　スクリーンショットの保存ができる。Pro・Max・Team・Enterpriseのプランが必要とされている

LP量産の3つの置き場所

【CLAUDE.md】毎回守る事実（短く）
・使う色・文字・余白の値（例：余白は8の倍数）
・共通部品の置き場所（ヘッダー、CTA、フォーム）
・やらないこと（外部のスクリプトを勝手に足さない、など）

【Skill：/lp-build】1本を組む手順
・構成案のファイルを読む → 共通部品で組む → 確認の手順に渡す

【Skill：/lp-check】仕上げの確認
・HTMLの構文、画像の代替テキスト、見出しの階層、リンク切れ
・フォームの送信先と確認画面
・指定した画面幅でのスクリーンショット

CLAUDE.mdに手順まで書くと長くなり、守られにくくなります。公式も、事実ではなく手順になった部分はSkillにするよう案内しています。

今すぐ試せる：LPの確認手順をSkillにする下書きのプロンプト

このリポジトリは、〔商材〕のLPを量産するためのものです。
仕上げの確認を行うSkillの下書きを、.claude/skills/lp-check/SKILL.md として作ってください。

【確認したい項目】
・〔HTMLの構文、画像の代替テキスト、見出しの階層、リンク切れ、フォーム〕
・画面幅：〔375px、768px、1280px〕

【条件】
・機械で確かめられる項目と、人が判断する項目を分けて書く
・人が判断する項目は、結果を「要確認」として一覧に出すだけにする
・ファイルの削除や、外部への送信はしない

まず下書きを見せ、私が承認するまで保存しないこと。

LP量産工場：本数で元が取れるかを計算する

例（数字はすべて例）

【従来】1本あたり
コーディング16時間＋表示の確認4時間＝20時間

【型を作った後】1本あたり
実装8時間＋自動の確認1時間＋人のレビュー3時間＋表示の確認4時間＝16時間

型の準備（CLAUDE.md、Skill、共通部品）：最初に24時間

1本あたりの差：20時間−16時間＝4時間
元が取れる本数：24時間÷4時間＝6本

10本作った場合
従来：20時間×10本＝200時間
型あり：24時間＋16時間×10本＝184時間
差：16時間

検算：16＋4＝20。8＋1＋3＋4＝16。24÷4＝6。20×10＝200。16×10＝160、160＋24＝184。200−184＝16。

5本で終わる案件なら、型の準備は元が取れません。量産の型は、本数が見込める商材か、社内の標準として使い回せるときに作ります。

人のレビューの3時間を削れば、数字はもっと良く見えます。けれど、そこが量産の品質を守る唯一の場所です。

構造的なリスク

逆説を指摘しておきます。

型がよくできているほど、LPはどれも同じ顔になります。
お客様が欲しいのは、自社の商品に合った訴求です。型が守るのは「崩れないこと」までで、「売れること」は守りません。構成と訴求は、ディレクターが案件ごとに決めてください。

よくあるQ&A

Q. 自動の確認だけで、アクセシビリティも済むか？

済みません。機械で拾える項目は一部です。点検の分担は、こちらで扱いました。

▶ アクセシビリティのチェックをClaude Codeで補助する範囲──機械で拾える項目の下調べはAIに、達成基準を満たすかの判断は人に。点検の手順と、時間がどれだけ減るかの正直な計算例

Q. Figmaのデザインから組む場合は？

デザインデータの状態で、手直しの量が変わります。手順はこちらです。

▶ Figma MCPとClaude CodeでFigmaから実装する手順──つなぐ前のデータの点検、1画面ずつの生成、スクリーンショットとの照合、部品の対応づけまでの5工程

Q. 手順書の雛形はあるか？

LP・保守・改修・点検の手順書とSkillの雛形を、キットにまとめました。

▶ Claude Codeの作業手順書キット、Web制作会社向け──保守・LP・改修・点検の4つの手順書、CLAUDE.mdとsettings.jsonとhooksの雛形、人が見る線の表、記録の型

最後に

LPの量産で利益を分けるのは、生成の速さではなく、確認の型です。

型をCLAUDE.mdとSkillに置き、人のレビューの時間を先に確保した会社だけが、本数を増やしても品質を落とさずに納品できるのです。

これまでの記事は、メンバーシップ「黒字化オペ室」でまとめて読めます。月額1,980円、記事2本分の金額です。詳しくはプロフィールから。

#Web制作会社 #ClaudeCode #LP制作 #ランディングページ #AI駆動開発 #品質管理 #制作会社経営 #中小企業 #コーディング #ClaudeCodeSkills