# ChatGPT に本当に LP デザインを作らせて、コードへ忠実に落とす指示書 AI コーディングエージェント（Claude Code / Cursor / Codex 等）に「ChatGPT でデザインを作って、それを実装して」と頼むと、**ほぼ確実に失敗する**。原因は決まっていて、回避策も決まっている。この指示書はその型をそのまま渡せる形にしたもの。 対象: 自社サービスの LP・サービスサイトを AI に作らせたい人。フレームワークは Next.js を例にするが、考え方はどれでも同じ。 --- ## この指示書が解決する4つの失敗 実際に「ChatGPT が作ったものと違う／デザインレベルが落ちている」と4回連続で差し戻された案件から抽出した。 | # | 症状 | 真因 | |---|---|---| | 1 | 「ChatGPT で作ってないでしょ」と言われる | コード生成 CLI（ChatGPT アカウントでログインするタイプ）で CSS を書き直しただけ。**その CLI は画像を生成できない** | | 2 | 抽象的なアート画像しか出てこない | 単発のテキスト→画像 API を叩いている。フルページの UI モックアップには**スクショ入力＋会話の継続**が必要 | | 3 | 画像ごとに色味・照明がバラバラで安っぽい | 画像を1枚ずつ個別生成した。同じブランドの写真に見えない | | 4 | 主役の被写体が枠外で切れている | 生成画像の縦横比と表示枠の比が違い、`object-cover` が黙って切り落とした | --- ## 前提: 「コード生成 CLI」と「画像生成 API」は別物 - ChatGPT アカウントで認証するコード生成 CLI は **テキスト（コード）専用**。`Logged in using ChatGPT` と出ても画像は作れない。CSS を書き直しても「ChatGPT がデザインした」ことにはならない。 - 画像は **画像生成モデルの API を直接叩く**。エンドポイントは2種類あり、用途が違う。 | 用途 | エンドポイント | 向いている物 | |---|---|---| | 単発の素材生成 | `POST /v1/images/generations` | 写真風の1枚絵、アイコン、抽象素材 | | **スクショを見せて反復修正** | `POST /v1/responses` + `tools:[{type:"image_generation"}]` | フルページの UI モックアップ、既存画面のブラッシュアップ | Web 版の ChatGPT がやっているのは後者。**任意の URL を裏でブラウズしているわけではない**（URL を貼っても「実ページを確認できない」と返る）。実体は「渡されたスクリーンショット画像＋テキスト指示」からモックアップ画像を生成し、会話の続きで直していく、というだけ。 --- ## 手順1: 現状スクショを撮る ```js // Playwright await page.goto(TARGET_URL, { waitUntil: "networkidle" }); await page.screenshot({ path: "current.png", fullPage: true }); ``` 新規サイトでまだ画面が無い場合は、この手順を飛ばして手順2をテキストだけで投げる。 ## 手順2: スクショ＋ブリーフでモックアップを生成する ```js const res = await fetch("https://api.openai.com/v1/responses", { method: "POST", headers: { Authorization: `Bearer ${OPENAI_API_KEY}`, "Content-Type": "application/json" }, body: JSON.stringify({ model: "gpt-4.1", // vision 対応モデル input: [{ role: "user", content: [ { type: "input_text", text: BRIEF }, // ↓の書き方参照 { type: "input_image", image_url: `data:image/png;base64,${screenshotBase64}` }, ], }], tools: [{ type: "image_generation" }], }), }); const json = await res.json(); const call = json.output.find((o) => o.type === "image_generation_call"); const pngBase64 = call.result; // これがモックアップ画像 const responseId = json.id; // 次ターンで使う ``` BRIEF に必ず入れる要素: - 誰に売るサイトか（例: `ビルオーナー・管理会社向けの B2B サービス紹介`） - 含めるセクションを列挙（ヒーロー／課題提起／機能3〜4／導入フロー／活用シーン／FAQ／お問い合わせ） - トーン（例: `明るい白基調、濃紺の見出し、青のアクセント、余白を広く取った SaaS 的な印象`） - 禁止事項（例: `実在企業名・ロゴを描かない`） ## 手順3: 会話を継続して直す ```js // 2ターン目以降。画像は送り直さない（前ターンの記憶を使う） body: JSON.stringify({ model: "gpt-4.1", previous_response_id: responseId, input: [{ role: "user", content: [{ type: "input_text", text: "情報量が少なく簡素すぎる。比較表とFAQを足して密度を上げて。" }] }], tools: [{ type: "image_generation" }], }) ``` 目安2〜3ターンで収束する。**大量に回さない**（1回あたり数円〜数十円かかる）。 --- ## 手順4: 複数枚の画像は「1枚のコンタクトシート」から切り出す ヒーロー＋カード3〜4枚のように複数の画像が必要なとき、**1枚ずつ生成すると照明・色味・雰囲気が毎回変わり、同じブランドの写真に見えない**。これが「クオリティが落ちた」と言われる最大の原因。 正しいやり方は、必要な絵を**全部まとめて1枚のグリッド画像として生成し、機械的に切り分ける**。 ```js // 1) 1回のプロンプトでコンタクトシートを生成（size は 1536x1024 等） const prompt = `A single professional contact sheet image, divided into a clean grid of 3 columns and 2 rows (6 panels), with thin white gutters between panels, no captions. All six panels MUST share the exact same color grade, lighting mood and photographic style so they clearly belong to one brand shoot. Panel 1 (top-left): <描写> Panel 2 (top-middle): <描写> ... Panel 6 (bottom-right): <描写> Ultra-sharp focus, no glitch artifacts, no garbled text, no real brand names.`; ``` ```js // 2) sharp で切り出す。角丸カード由来の白縁が入るので少し内側で切る import sharp from "sharp"; const meta = await sharp(SRC).metadata(); const cols = 3, rows = 2, inset = 14; const cellW = Math.floor(meta.width / cols), cellH = Math.floor(meta.height / rows); let i = 0; for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) { await sharp(SRC).extract({ left: c * cellW + inset, top: r * cellH + inset, width: cellW - inset * 2, height: cellH - inset * 2, }).toFile(`out/panel-${++i}.png`); } ``` ```js // 3) 必要なら2枚を横に合成して1枚のヒーローにする await sharp({ create: { width: wA + wB, height: h, channels: 3, background: "#000" } }) .composite([{ input: bufA, left: 0, top: 0 }, { input: bufB, left: wA, top: 0 }]) .png().toFile("out/hero.png"); ``` **注意**: 合成すると比率が変わる（例: 正方形2枚を横並び → 2:1 の横長）。手順5に直結する。 個別に生成し直すのは「1箇所だけ差し替えたい」ときに限る。 --- ## 手順5（最重要）: 生成画像は「表示枠の縦横比」に合わせる `object-cover` は枠からはみ出した分を**問答無用で切り落とす**。比がズレていると、一番見せたい被写体が枠外に消える。実際に 2:1 の画像を約 1.15:1 の枠に入れて**横幅の42%が切れ**、主役が消えた。 **実装前に枠の実寸比を計算する。** 例（Tailwind、幅1440pxのビューポート）: ``` コンテナ max-w-7xl = 1280px、左右 px-10 = 80px → 1200px 2カラム gap-10 = 40px、右カラムが .95fr / (1.05+.95) → 1160 × 0.475 ≒ 551px 高さ h-[480px] → 比は約 1.15 : 1 ``` 画像生成 API の size は選択肢が限られる（例: `1024x1024`=1:1 / `1536x1024`=1.5:1 / `1024x1536`=0.67:1）。 **枠比に最も近いものを選び、枠側も `aspect-square` などで比を合わせる。** プロンプトには必ずこう書く: > the main subject is FULLY VISIBLE with generous empty margin on all four sides so nothing is cropped **縦横比が混在する既存写真（実績写真など）を並べる場合**は、一律の枠に入れず1枚ずつ実比率を持たせる: ```tsx // 各画像の実寸を設定に持たせる export const PHOTOS = [ { file: "a.jpg", w: 1600, h: 2133 }, // 縦 { file: "b.jpg", w: 1600, h: 900 }, // 16:9 ] as const; ``` ```tsx
{PHOTOS.map((p) => (
))}
``` --- ## 手順6: モックアップ内の「数字」は必ず捨てる 生成されたモックアップには、それらしい数値が勝手に描き込まれる。実測例: - `導入実績 300棟以上` / `配信コンテンツ 12,000件以上` / `入居者満足度 98%` - `来訪者の印象が向上 92%` / `テナント満足度 96%` / `運営コスト 約35%削減` - `月額 ¥19,800 / ¥39,800 / ¥79,800` といった料金プラン表 **これは全部 AI の創作で、実データではない。** そのまま公開すると景品表示法上の不当表示になりうる。 - 数値は「お問い合わせ・お見積り」等の正直な表現に**置き換える** - ただし**レイアウトとトーンは変えない**（内容の正しさとデザインの忠実度は別軸） - ナビの「料金プラン」「資料ダウンロード」も、実体（価格表・PDF）が無いなら**リンクを作らない**（踏むと行き先が無い） - 数値を載せたい場合は、実データの出所を人間に確認してからにする ## 手順7: 実装は「作り直さず、忠実に写す」 ここが一番守られない。**モックアップが承認されたら、配色・レイアウト・セクション構成・アイコンの雰囲気を忠実にコードへ移植する。** AI が自分の CSS の好みで再解釈・簡略化するのは禁止。AI の担当はテキスト・構成・データ配線（フォーム・API）に限定する。 - 画像 → `next/image` などで実ファイルとして配置 - アイコン → インライン SVG の線画（アイコンライブラリを新規追加しない方が、モックアップの線の太さに寄せやすい） - コピー → モックアップから**逐語**で取る（勝手に言い換えない） --- ## 手順8: 検証は「画像が読み込めた」では足りない `naturalWidth > 0` だけ見ていると、**切れている画像を合格にしてしまう**。枠の実寸比と画像の実寸比を突き合わせ、crop 率を数値で assert する。 ```js import { chromium } from "playwright"; const browser = await chromium.launch(); const page = await browser.newPage({ viewport: { width: 1440, height: 900 } }); await page.goto(URL, { waitUntil: "networkidle" }); // 遅延読み込みを起こすため最下部までスクロールする（これを忘れると全部「未読込」に見える） await page.evaluate(async () => { for (let y = 0; y < document.body.scrollHeight; y += 700) { window.scrollTo(0, y); await new Promise((r) => setTimeout(r, 120)); } window.scrollTo(0, 0); }); await page.waitForTimeout(1200); const imgs = await page.locator("img").evaluateAll((els) => els.map((el) => { const r = el.getBoundingClientRect(); return { src: el.getAttribute("src"), natW: el.naturalWidth, natH: el.naturalHeight, boxW: Math.round(r.width), boxH: Math.round(r.height) }; })); let bad = 0; for (const i of imgs) { if (!i.natW) { console.log(`FAIL not loaded: ${i.src}`); bad++; continue; } const boxRatio = i.boxW / i.boxH, natRatio = i.natW / i.natH; const crop = Math.round((1 - Math.min(boxRatio, natRatio) / Math.max(boxRatio, natRatio)) * 100); if (crop > 6) { console.log(`FAIL crop ${crop}%: ${i.src}`); bad++; } } console.log(bad === 0 ? "PASS all images uncropped" : `${bad} problem(s)`); ``` あわせて確認する項目: ```js // 見出しが意図した行数に収まっているか（日本語は全角1文字=約1em で折り返しを読める） const h1 = await page.locator("h1").first().evaluate((el) => { const r = el.getBoundingClientRect(); return Math.round(r.height / parseFloat(getComputedStyle(el).lineHeight)); }); // 複数の幅で確認する（1440 / 1280 / 768） // 架空の数値が残っていないか const html = await page.content(); for (const s of ["300棟", "12,000", "98%", "料金プラン", "資料ダウンロード"]) { if (html.includes(s)) console.log(`FAIL fabricated/dead: ${s}`); } // ページ内アンカーが全部着地するか（href="#" は除外する） for (const h of await page.locator('a[href^="#"]').evaluateAll((e) => [...new Set(e.map((x) => x.getAttribute("href")))])) { if (h === "#") continue; console.log(`${(await page.locator(h).count()) > 0 ? "PASS" : "FAIL"} anchor ${h}`); } // モバイルで横スクロールが出ていないか const overflow = await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth); ``` --- ## 実装を別のコード生成 CLI に投げる場合の落とし穴 大きな実装を定額枠のコード生成 CLI に委譲するとコストが下がるが、呼び出し方で静かに失敗する。 1. **指示はファイルに書き、ファイル名だけ渡す。** `cli exec "$(cat brief.md)"` の形はシェルがブリーフ内のバッククォートを**コマンド置換として実行**し、指示の一部が消えたものが届く。 2. **「コマンドを実行するな」と書くと `cat` すら拒否される。** 禁止対象は `npm` / `node` / `npx` / ビルド だけだと明記する。 3. **Windows のファイルを Linux（WSL）側から触らせない。** `/mnt/c` 上のプロジェクトで Linux 側から `npm` を走らせると、ネイティブバイナリが Linux 用に置き換わり Windows 側のビルドが壊れる（`Cannot find module '../*.win32-x64-msvc.node'`）。復旧は `rm -rf node_modules .next && npm install`。 **生成スクリプトは「書かせるだけ」にして、実行は元の OS 側から自分で行う。** 4. **git リポジトリでないディレクトリでは起動を拒否される。** `--skip-git-repo-check` が必要。 5. **自己申告を信用しない。** 「指定ファイルのみ変更しました」と言いつつ別ファイルを触ることがある。`git status` の変更一覧と**ファイルの更新時刻**を突き合わせて、委譲前から dirty だったファイルと切り分ける。 --- ## 完了チェックリスト - [ ] 画像は画像生成 API で実際に生成した（コード生成 CLI で CSS を書き直しただけになっていない） - [ ] 複数画像は1枚のコンタクトシートから切り出し、トンマナが揃っている - [ ] すべての画像で crop 率 ≦ 6% を数値で assert した - [ ] 主要見出しが 1440 / 1280 / 768px で意図した行数に収まっている - [ ] モックアップ由来の架空の数値・料金が実装に残っていない - [ ] 実体の無い CTA（料金表・資料DL）へのリンクが無い - [ ] ページ内アンカーが全部着地する - [ ] モバイルで横スクロールが出ない - [ ] フォームは実際に送信し、受け側にデータが届いたことを読み戻して確認した（テスト送信は必ず削除する） ---