ツールに頼めば“それっぽい一枚はすぐ出る。でも、できあがりはなぜか「どこかで見た」見た目になる。これが“AIっぽさの正体で、いま一番差がつくところ。
ここでは Claude Code 上に組んだ制作ライン（拠点＝makeLP プロジェクト）で、同じ土台から性格の違う3サイトを作り分けた経験をもとに、再現できる作り方を短くまとめる。
1発の魔法でなく工場
単発で良いものが出ても、再現できなければ資産にならない。だから4工程で回す。
制作 → 品質 → 検証 → 改善。
支える登場人物は4種類。
・スキル … やり方の型（motion-lp-builder＝作る型、frontend-design＝脱AI感の原則、bulk-categorize＝大量分類）
・サブエージェント … 担当者（描いて講評する lp-visual-verifier、参考を仕様化する design-reference-analyst、分類する bulk-classifier）
・資料室 … SANKOU掲載 4,074件を「サイトタイプ×業種」で1件ずつ分類した参照棚
・育つルール … CLAUDE.md（標準フロー・規律）＋メモリ（ダメ出しを永続化）
準備と前提
土台は Vite + React + GSAP(ScrollTrigger) + Lenis に固定。肝は「スクロール進行度を演出に直結させる」こと。下る量がそのまま表現の入力になる（背景動画のフレームスクラブ、ピン留め、パララックス、入場リビール）。
素材は2系統で、題材で選ぶ。
・AI生成（Higgsfield）… リゾート等の写実が要るとき
・コード描画（SVG/Canvas/CSS）… B2Bやテックはこちらが“らしい。クレジット不要
迷ったら「写真であるべきか、図であるべきか」で決める。
STEP1 制作
順番が肝心。いきなり書かず、ブランドブリーフ（誰に何を約束するか、色・タイポ・動きの強度）を1枚に固めてから手を動かす。同じ土台でも、出力を分けるのはコードでなくブリーフ。
AI生成を選んだらクレジット規律を守る
①残高を確認
②get_costで事前見積もり
③ヒーロー画像を先に1枚作る
④それを参照に他を生成して質感統一 ⑤完了を待ってDL。
実装は、スクロールに演出を直結（フレームスクラブ／ピン／パララックス／リビール）。そして必ず堅牢に：prefers-reduced-motionで静的フォールバック、アセット欠損でも npm run dev が動く、touchやcanvasの省電力配慮。
STEP2 品質 脱・量産デザイン
AIっぽさを6つに分解して潰す。
- グラデ多用（特に文字グラデ・紫グラデ）→ 単色＋1アクセントに絞る
- 定番パーツを定番順に並べただけ → 固有のコンセプトで構造ごと作る（例：ページ全体をワークフローのキャンバスに）
- キリのいい盛り数字 → 具体に（“請求書600件/月→0件の before→after）
- 絵文字アイコン → 使わない。必要ならSVGを描く
- ブロック左端だけの色バー → 使わない。差し色は面・余白・タイポで
- 全部が対称・均等・角丸・ふわ影 → 非対称と余白の強弱を入れる
原則は、配色は単色＋1アクセント、タイポは特徴的な1書体で押す、余白に強弱、動きは“焦点のために。
STEP3 検証 ビルドが通る ≠ 良い
コードが通っても、ピンやスクラブやリビールは実画面で崩れていることがある。だから lp-visual-verifier が dev を立て、puppeteer-core で既存の Chrome/Edge を操作し、各セクションを実際に描画して撮影 →“目で講評する。
ポイント3つ。
・検証役はコードを直さない（原因の切り分けのため）
・prefers-reduced-motion で撮ると、ピン留めやリビール待ちの下部も静的に可視化できる
・モバイル幅でも必ず撮る
講評 → 修正を1回まわすだけで品質が一段上がる。ビルド成功で満足しない。
STEP4 改善＋資料室
design-reference-analyst が参考サイトを読み、印象でなく「共通パターン」と「改善仕様（どこを・どう）」に落とす。資料室 sankou-reference は 4,074件を2軸で分類済みで、「観光×特設LPの実例だけ」を一瞬で引ける（各行の note で中身が分かる）。
その大量分類自体も型にしてある（bulk-categorize：分割 → サブエージェント並列 → 集約 → 補正）。
ルールが育つ
最大の発見はここ。依頼主のダメ出しを“その場の修正で終わらせず、永続ルールに昇格させる。
実例
「絵文字アイコンはAIっぽい」「ブロック左端の色バーはAIっぽい」→ メモリと CLAUDE.md に禁止ルール化 → 次回からどのサイトでも自動で避ける。
つまり、使うほど“AIっぽさが抜けていく。スキルやサブエージェントを置いておけば横展開も効く。
3サイトの作り分け
・AZURE BAY（夏のプールLP／B2C）… ターコイズ＋ゴールド。Higgsfield生成。スクロールでプール動画をフレームスクラブ。
・FLOWGEAR（n8n導入支援／B2B）… コーラル1色＋フラット、画像生成なし。ページ全体を n8n のワークフロー・キャンバスに。盛り数字でなく before→after。
・STATIK（架空スタジオの実験Lab）… ニアブラック＋モノ＋アシッド1色。canvas のキネティック文字格子＋カスタムカーソル。LPでなく没入体験。
共通項は「単色＋1アクセント」「具体で語る」「コンセプト一点突破」。題材で手段を選ぶこと自体が、平均から外れる第一歩。
自分で組む最小構成
- スクロール連動の土台を“型にする（毎回ゼロから書かない）
- 脱・量産の原則を1枚のルールに（グラデ／絵文字／左バー禁止…）
- 作ったら必ず“実画面を撮って見る
- ダメ出しは毎回ルールに昇格させる
つまずきの定番と対策：クレジット浪費（ヒーロー先行＋事前見積もり）、検証漏れ（実画面を撮る）、モーションのアクセシビリティ（reduced-motion）、モバイル崩れ（必ず別幅で撮る）。
まとめ
AIは「速い手」であって「目」じゃない。
目（検証）とルール（学習）を仕組みに持たせた瞬間、AI製サイトはAIっぽさから抜けます。
