メインコンテンツへスキップ
見出し画像

Claude Codeで、デザイナー以外がLPを量産できる仕組み


    デザイナー以外の方でもLPを量産していける仕組みを、Claude Codeで作りました。

    今回の判断は「AIの精度をどう上げるか」ではなく「AIにゼロから生成させない」という点です。その仕組みの設計思想と構造を書き留めます。



    画像


    Claude Codeで完結するワークフロー

    仕組みは1本の流れに集約されます。正典をclone → 可変のみ差替 → 機械ゲート → 人の判断。

    ベストプラクティスとして完成させたLP(=正典)を1つ用意し、それを複製し、変更したいセクションのみを差し替える。そのあと機械が品質を検査し、最後に人が承認する。

    特徴は、担い手が段階ごとに受け渡されること。人+AI → AI → 機械 → 人。誰がどこを担うかを、工程として固定しました。

    画像
    ワークフロー


    "生成"ではなく"複製"させる

    AIの生成は、毎回わずかにズレます。色が少し違う。余白が違う。同じ意図の要素が、前回と別の書き方になる。1枚だけ見れば気づかない差が、積み重なると「揃っていないLP群」になります。

    生成の精度をいくら上げても、この揺らぎは完全には消えません。ゼロから書く限り、毎回が"初回"だからです。

    よって、新しく作るのではなく、良いものを正確に複製する。完成した正典をcloneし、課題や提供価値といった[可変]要素だけを差し替える方式。構造・レイアウト・装飾は、正典のものをそのまま受け継ぐ。作るのではなく、受け継ぐことに重心を置きました。


    値の"正"を1ファイルに

    色・余白・フォントの役割は、`tokens.json` 1ファイルに集約しました。ここが、この仕組みで唯一の"正"です。

    正典もこの値で組まれ、あとで触れるlinterもこの値を基準に検査します。基準が1箇所にあるからこそ、そこからの逸脱を機械的に判定できる。「なんとなくこの黄色」などの曖昧な判断が紛れ込む余地を、構造で消しました。

    値を変えたくなったら、直すのは `tokens.json` だけ。正典に反映し、使う人はそれをpullで追従する。品質の変更点が、常に一箇所に集まり続けます。


    品質チェックを、人から機械へ

    生成物の品質チェックを、人の目視から機械に移しました。

    HTMLを書くと、その直後にlinterが自動で起動します(Claude Code の hook を使っています)。`tokens.json` にない値を直接書いていれば、ERRORとして処理を止め、AIが自分で直すループが回る。人が「ここ、色が違うよ」と指摘する工程を、そもそも無くしました。

    ERRORがゼロであることが、実装完了の条件です。人はこの検査を見ません。機械が弾けるものは機械に任せ、人の集中力は、機械には判断できないところに残す。レビューで消耗するのをやめる、という判断です。


    要件整理をSkillにした

    要件ヒアリングもSkillにしました。何を目的とし、どう訴求するか。"要件設計から公開まで"一気通貫、すべてClaude Codeで実現します。

    ヒアリングは、LPの型に沿って実行されます。「自由な要件発見」ではなく「決まった型の可変スロットを順番に埋めていく質問」に落ちる。探索ではなく、穴埋めです。

    この工程をSkill(`/lp-hearing`)にしました。質問は型のスロットに1対1で対応しているので、ツールの性能や担当者の"質問力"に左右されない。誰がヒアリングしても、同じ観点が漏れなく拾えます。

    画像
    ディレクトリ構成


    人が判断するのは1箇所だけ

    この仕組みで人が判断するのは、最後の1箇所だけです。

    ヒアリング(人+AI)→ 実装(AI)→ 品質ゲート(機械)→ 承認(人)。手前の工程を、型・トークン・リンター・AIがそれぞれ担保する。よって人は、途中の細かい正しさを追わない。「最終的にこれを世に出していいか」という判断だけを担います。

    デザイナー以外が量産できる理由はここにあります。技術ではなく"型"で再現し、仕組みを配布する。そして、判断しなければならない箇所を1つまで減らすことです。


    部品化に抵抗する表現レイヤー

    一方、複数施策が走ることで、2種のLPが同時期に組まれた場合「見た目の印象に差をつけたい」という要望が浮上してくることもあります。事業会社ならではの課題です。

    LPには「部品化に抵抗する表現レイヤー」が存在します。特にFVはWebサイトの顔。その施策独自の特徴を表現するビジュアルは部品化が難しい。それらは別途生成し組み合わせる必要があるでしょう(ここはまた別の機会に紹介します)。

    LPの量産は「型の一貫性 x 核の自由度」を共存させる設計と運用が求められるのです。




    AIで作るのではなく、AIが崩せない土台を作る。

    それは、自分以外の"他者"を速くすることに繋がります。誰もが作れる仕組み。作る力を配るのではなく、崩れない土台を他者へ配ることです。

    今後も、他者のため・組織のための仕組みを作っていこうと思います。




    あなたへのおすすめ