2つの高性能AIが、ひとつのチームになる。決めるのは、人。
業務に強い Claude Fable 5.1 と、描画に強い OpenAI GPT Image 2.5。MCPでつなぎ、ブログもLPも「人の設計」で量産する。株式会社ビズデザインの制作現場を、そのまま公開します。
AIが動き出す前に、人が決めておくことが5つある。この順番を飛ばすと、速く作れても「使えないもの」が量産される。
誰に、何を、どう感じてほしいか。LPの1文目を人が書く。
載せる実例・数値・失敗談を一次情報から選ぶ。
テイスト（白主体の Apple 風）・ブランド色・動きの方針。
SEO・AIO・計測（GA4／Search Console）の接続まで決める。
コンテンツ計画→サイトマップ→ワイヤー→カンプ→コーディング→チェック。
Claude Fable 5.1 は原稿と設計と実装を担い、GPT Image 2.5 は絵柄だけを描く。得意分野の違う2つの高性能エージェントをつなぐのが、Mac 上で動く小さな MCP サーバーです。
画像AIは日本語の文字が崩れる。だから文字は乗せない。
Claude Desktop の設定に 1 ブロック追加するだけ。鍵は環境変数で渡し、画像は指定フォルダに保存される。
業務遂行の頭脳。企画・原稿・HTML・公開・QA まで一気通貫。
描画の専門家。flare で生成、sunburst で細部修正。
何枚生成しても、使うかどうかを決めるのは人。今回の8点は、すべて1回目の生成で人が採用を判断した。
AIと道具をつなぐ差し込み口
機能の窓口と、その合い言葉
AIが処理する量の単位
AI活用で最初に決めるのは、ツールではなく役割分担。人が担うことと、AIに任せることを分けておく。
コンセプト・読者・ゴールを言葉にする。
生成物の採用／差し戻し。数値の一次情報を確認。
著作権・ブランド・公開可否。
企画書→サイトマップ→ワイヤー→コーディング。
GPT Image への構図・余白・色の指示を組み立てる。
REST 公開、Playwright 検証、SEO 設定。
速度優先で絵柄を描く。1536×1024・high。人物は同一設定で統一。
採用カットの細部だけを直す。
文字・ロゴ・UI は描かない。文字は HTML で乗せる。
2026年10月1日〜2日の実例。ブログ記事「AIを使う会社からAI時代に強い会社へ」。アイキャッチを CSS 描画の v2 から、GPT Image 2.5 の絵柄＋HTML文字の v3 に差し替えた。
| 項目 | BEFORE（v2） | AFTER（v3） |
|---|---|---|
| 絵柄の作り方 | CSS のみで描画 | GPT Image 2.5（flare・high）で生成 |
| 文字 | HTML | HTML（変更なし・崩れゼロ） |
| 採用までの生成回数 | — | 1回 |
| 生成あたりのトークン | — | 約1,600 |
| LINE配信画像 | 1040×1040 を別途作成 | 影響なし（別ファイル） |
記事 ID 585。アイキャッチは CSS 描画の v2。
公式コネクタに画像生成がなく、Mac 上のローカル MCP（Python）を自作。設定ファイルの場所で一度足止め。
1 回の生成で採用。縮小・クロップ → HTML で文字 → アップロード → アイキャッチ差し替え → OGP まで確認。
企画書からコーディング・QAまでの6工程を、人が先に指定し、Claude Fable 5.1 が実行し、GPT Image 2.5 が描いた。ビジュアル8点（抽象4点・人物4点）はすべて1回目の生成で採用。画像はすべて WebP で、1ページ分の合計は PC で約200KB。
企画書 v0.2。位置づけ・構成・ビジュアル計画・テイストを人が確定。
特集一覧・既存Room・ブログからの導線、スラッグ、内部リンク。
PC1280／SP390。動き6種を先に実装して確認。
GPT Image 2.5 で4点生成、1点ずつ採用判断。WebP 化。
固有の接頭辞・構造化データ・全幅化・遅延読込。
横スクロール 0・はみ出し 0・禁則違反 0・表示速度計測。
すべて1回目で採用
抽象4点 6,379＋人物4点 6,479
PNG 13.6MB → WebP で1ページ分（PC）
公開直後（2026-10-03）に自社の表示速度チェッカーで実測。TOPページと同じ86点。
画像16リクエスト・転送量 約340KB。レイアウトのずれはゼロ。
失敗を隠さない。「＋」で、何が起きて、どう切り抜けたかを開ける。
自作 MCP に切り替え
Mac 上の MCP が唯一の経路
開発者メニューから直接開く
文字は HTML に分離
全国どの業種でも同じ型で始められる。先に「誰が何を承認するか」を決めるのが、最初のステップ。
| 領域 | 人 | Claude | GPT Image |
|---|---|---|---|
| 企画・方針 | 決める | 整理・提案 | — |
| 原稿・構成 | 確認 | 作る | — |
| 画像 | 採用判断 | 指示文を設計 | 描く |
| 公開作業 | 承認 | 実行 | — |
| 計測・点検 | 判断 | 計測・報告 | — |
| 著作権・ブランド | 責任 | 点検を補助 | — |
承認者・ブランド基準・掲載してよい数値の範囲。
Claude Desktop・MCP・API キーの管理方法。
原稿→絵柄→文字→公開のテンプレートと命名規則。
著作権・ブランド・計測。月次で見直す。
経験を元に、AIを使いこなす。
仕組みは渡せる。何を作るか、どこまで任せるかを決めるのは、御社の経験です。その判断に、3つの型で伴走します。
社内チームが回せるようになるまで、設計と判断に同席する。
企画から公開までをこちらで実行し、成果物と手順書を渡す。
すでに回っている体制を、著作権・ブランド・計測の観点で点検する。
利用規約の範囲で可能です。採用前に人が内容を確認し、他者の著作物・商標・実在人物に似ていないかを点検する運用を型に組み込みます。
キーは設定ファイルの環境変数として Mac 内に置き、チャットや本文に書きません。生成に渡すのは構図と色の指示だけで、顧客情報は含めません。
画像AIは日本語の文字が崩れやすいためです。絵柄だけ生成し、文字は HTML で重ねると、修正も文字だけで済みます。
生成と文字合成はサイトの種類に依存しません。公開先が Shopify や Makeshop でも、同じ型で運用できます。
生成回数と画質に比例します。今回は8点とも1回の生成で採用しました。採用までの回数を減らす指示の精度が、費用を左右します。
