01_director_playbook | 編集長の「やること・やらないこと」

💡 本書の目的：
AI（Antigravity/Gemini）という「完全な実装の自動機関」を手に入れた上で、人間のディレクターが「何に100%集中し、何を捨てるべきか」を明文化したもの。えりさんはコードを書く「コーダー」ではなく、「クリエイティブ・ディレクター兼編集長」として振る舞うことが最大の価値となります。

えりさんが「やるべき」3つの仕事

1 【防波堤】素材の調達とちゃぶ台返しの粉砕（着手前）

クライアントと対峙し、ビジネスの方向性をロックするのは人間にしかできません。

素材を全てむしり取る： 会社の写真、インタビュー文言、ロゴなどを、着手前に徹底的に集めきる（０次要件の完遂）。
A/B案の提示と約束： /dual_presentation ワークフローを使い、「極端なA案・B案」を事前のディレクション段階で見せる。「どちらの土台で進むか」をヒアリングし、後出しの修正要求（ハイエンドだけどやっぱり文字をデカくして等）を初期段階で完全に封殺する。

2 【総監督】 AIへの「素材渡し」と「画像生成」（制作中）

コードは一切書きません。優秀な職人であるAIをどう指揮するかが鍵です。

魔法の呪文を唱える： チャットの最初に /read-rules を叩き、AIに最新のコーディングマニュアルを強制インストールさせる。
テキストと画像を渡す： 「この階層にこのテキストを入れて」「このセクションにはImageFXで生成した画像を使って」と、素材と配置の「指示出し」だけを行う。
世界観の統一： ImageFXやMidjourney等のAI画像生成ツールを活用し、「佐藤健太／整備士」のような一貫した自社専用のアクター画像を作り出し、フリー素材の安っぽさを徹底排除する。

3 【編集長】品質チェックと「美的感覚」のフィードバック（納品前）

AIが組み上げたサイトをプレビューし、「プロの目」で最終ジャッジを下します。

美学のチェック： 「文字の抜け感が足りない」「スマホで見た時に縦の余白が詰まっていて安っぽい」など、Premium基準の『美しさ』に到達しているかをチェックし、AIに「直せ」と指示する。
最終承認（デプロイ）： リンク切れやブラウザ崩れがないか目視し、GOサイン（本番環境での noindex 解除など）を出す。

【実践編】Antigravityへの具体的な「指示の出し方」

編集長としてAIを動かす際は、「コードの書き方」ではなく「ビジネスと美学の要件」を伝えてください。技術的な最適解はAIに考えさせます。

制作スタート時の「魔法の呪文」

新しい制作チャットを立ち上げた際、最初の1投目として必ず以下のプロンプトをコピー＆ペーストしてAIに投げてください。

/read-rules
/dual_presentation （※初回A/B提案を行う場合のみ）

ーーー
【新規プロジェクト始動】
[クライアント名]のコーポレートサイトを制作します。
ベースとするテンプレートは「[Type-G Premium等]」です。
0次要件（ヒアリング資料）は以下の通りです。
[ここに資料をペースト]

まず、マスタールールを読み込み、本プロジェクトの「設計方針」を提示してください。
私の指示があるまでコードは書かないでください。

良い指示（ディレクター視点）

美学でのフィードバック： 「スマホで見た時、なんだか大衆的で安っぽいです。『Premium美学のルール』に基づいて余白や改行リズムを再調整して」
ビジネス・デザイン要望： 「このヒーローセクション、もっと法人向けの高級感を出して。文字間隔を広めにとり、色はゴールド系に」
スコープ（範囲）の限定： 「まずABOUTセクションだけテキストを流し込んで。他はまだ触らないで」
トラブル時の丸投げ： 「なんか文字化けしたから、手作業で直さずに git checkout で直前の綺麗な状態に戻して！」

避けるべき指示（コーダー視点）

技術的なコードを直接指定してしまう：
「ここを letter-spacing: 0.2em にして、flex-direction: column にして」
※ えりさんの役割ではありません。AIに「どうコードを書けば高級感が出るか」を考えさせてください。
全ページ・全セクションの一括処理：
「全ページのテキストデータがあるから一気にはめ込んで」
※ エラーが起きた際の手戻りが巨大化します。必ずセクション単位・ページ単位で進行させてください。
AIへの遠慮や忖度：
「もし可能なら直してみてほしいんだけど…」
※ 遠慮は不要です。「ルール違反だからPremium基準へ修正せよ」と断定的に命じてください。

【完全版】高品質を担保する「黄金のプロンプトルート 6ステップ」

近年確立した「AIが生成プロンプトを書き、えりさんがWhiskやFLOWで素材を作る」という超効率的な並行作業（分業）を組み込んだ、エラーを出させないための鉄壁のカンペです。

【第1投】初期要件のロック（ちゃぶ台返し防止）
/read-rules と /dual_presentation を実行し、ヒアリング資料を渡します。「コードはまだ書かずに、まずは極端なA案・B案を提示して」と指示し、クライアントと方針を確定させます。
【第2投】素材プロンプトの要求＆ AIによる骨組み並行構築
「B案（重厚感）で進めます。まずはこの世界観に合うWhisk用の画像プロンプトとFLOW用の動画プロンプトを英語で作成して。 私がそれを生成している間に、あなたはTOPページの骨組みをプレースホルダー状態で組んでおいて」
※ これにより、えりさんが画像・動画生成ツールを回している裏で、AIが素早くHTMLの土台を作ります。
【第3投】実素材の流し込みとTOP完成（セクション分割）
「素材が完成しました。これをヒーローとABOUTセクションに当てはめ、CSSをPremium基準で仕上げて。（※全ページ一気にやらず、必ずセクション単位で区切る）」
【第4投】下層ページへのコンポーネント展開（コーポレート用）
「TOPが完璧に仕上がりました。このデザイン美学（CSS・UIコンポーネント）を引き継いだまま、会社概要などの下層ページを展開して」
【第5投】美学の磨き上げ（モバイル余白とアニメーション）
「全ページ組み上がりました。ここからPremiumな『魔法』をかけます。スマホ表示での縦の余白を再点検し、スクロール時の上品なフェードインやホバー時のマイクロアニメーションを付与して」
※ 骨組みが完成した後にアニメーションを一括で指示することで、レイアウト崩壊を防ぎます。
【第6投】インフラ・SEOの最終仕上げ
「デザイン決定。最後にOGP、Favicon、絶対パス（shared-nav.js）などが完全かチェックし、デプロイ用状態にして」

えりさんが「もう二度とやらなくていい」仕事

以下のことは全てAIの泥臭い仕事です。えりさんの脳のメモリから完全に消去し、クリエイティブ思考のための余白を作ってください。

style.css のクラス名（BEMなど）や詳細度で悩むこと
※ コンポーネント構造の管理はAIに丸投げします。
ページ間リンク（絶対パス・相対パス）の整合性を気にしてコードを見直すこと
※ shared-nav.js 等のルーティング・アーキテクチャの制御はAIが担当します。
スマホ用の改行調整のために HTML内で <br class="sp-only"> をチマチマ出し入れすること
※ テキストブロックの完全分離やGridでの解法は、美学ルールに従いAIが自動実装します。
TerminalのGitコマンドで文字化けしてパニックになり、手作業で必死にテキストを直そうとすること
※ 即座にAIを呼び出し git checkout 等で秒速のタイムリープ復旧を命じてください。
OGP設定やFavicon、Google Fontsの設定コードを全ページ手作業でコピペすること
※ HTMLの <head> への動的注入などは一括処理させます。

えりさんの唯一にして最大の仕事は、
「クライアントをコントロールし、最高の素材（文章・画像）を揃え、
AIに『これを作れ』と命令し、ハイエンドな美しさを承認すること」です。

編集長（えりさん）のプレーブック