Webアイソメ画像生成

ゴール

LP・Webサイトへ掲載できるアイソメトリック画像ファイルを生成する。画像候補の分析、方針整理、プロンプト提示だけで完了しない。

ユーザーが「作って」「生成して」と依頼した場合は、$imagegenを使って画像を生成し、結果を目視確認し、必要なら修正生成する。「プロンプトだけ」と明示された場合に限り、生成を行わずプロンプトを返す。

画像生成前に、必ずWebアイソメ画像用プロンプトを最後まで読む。このプロンプトは要約せず、入力変数を埋め、案件固有の主役と場面を追加して使用する。章や規則を独自判断で削らない。

最優先の配色ルール

ユーザーから配色変更の明示がない限り、最終的な画像生成プロンプトへ#009FE8、#7DCCF3、#02A550、#34B772の4文字列を含める。

「青と緑」「プロダクトカラー」「均整の取れた配色」「サイトになじむ色」などの抽象表現だけで代用しない。各カラーコードを、どの要素にどう使うかまで明記する。

このルールを変更できるのは、ユーザーが別の色を明示した場合、または対象サイトから配色を抽出するよう明示した場合だけとする。

配色変更の明示がない場合は、次のブロックを省略・要約せず、画像生成プロンプトへそのまま含める。

配色は白・青・緑を基調とする。背景は #FFFFFF または淡い背景 #F2F9FD、主線と主要文字は #10161D、補助線は #4C565E。メインブルー #009FE8 はAI・整理・工程・システム・情報の流れ、ライトブルー #7DCCF3 は接続線・補助工程・弱い強調に使う。メイングリーン #02A550 は一次情報・人間の確認・承認・資産化・前進、ライトグリーン #34B772 は確認後の状態・蓄積・成果側の補助面に使う。色を装飾として散らさず、同じ意味には同じ色を使う。

対象

• サービスの仕組みやワークフロー
• Before/AfterやA/B比較
• 課題、詰まり、選択、解決を示す場面
• 情報、記事、実績、資産などの蓄積
• 複数要素の関係や分解図
• アイソメモチーフを主役にしたヒーロー画像、OGP、サムネイル
• 短い見出しや数値を組み込んだアイソメ画像

実写写真、写真合成、漫画、人物のキャラクターシート、一般的なバナー制作は対象外とする。それらは通常の$imagegenまたは別の専用スキルで扱う。

入力

ユーザーが任意指定できる定型項目は次の2つだけとする。

text_mode: none
aspect_ratio: 4:3

• text_mode: none: 画像内に文字を入れない。既定値とする。
• text_mode: include: 確定済みの短い見出し、ラベル、主要数値だけを入れる。
• aspect_ratio: 明示指定、実際の掲載枠、4:3の順で決める。掲載枠の根拠がなければ必ず4:3とする。

配色はWebアイソメ画像用プロンプトの固定された青・緑をデフォルトとして使う。ユーザーが別の色を明示した場合、または対象サイトから配色を抽出するよう明示した場合だけ変更する。

画像形式、表現方針、構図、人物の有無、要素数は、原稿と掲載箇所から内部で決める。表現方針は、本文に根拠のある直接描写を優先し、具体的な視覚材料が不足する場合だけ比喩を使う。これらを追加オプションとしてユーザーへ選ばせない。

出力規約

Image Gen共通の出力契約は imagegen-core を読む。保存先、候補画像、修正生成、メタデータ、報告形式はimagegen-coreの規約に従い、このスキル側で再定義しない。

生成手順

1. 必要な資料だけを読む

対象の原稿、掲載セクション、画像計画、掲載枠を確認する。対象サイトのCSSや既存画像は構図、余白、掲載比率の確認に使うが、配色は自動抽出しない。ユーザーが対象サイトから色を抽出するよう明示した場合だけ、CSSや既存画像から配色を抽出する。すでに資料から分かることをユーザーへ聞き直さない。

内部で「この画像が伝える1メッセージ」「最初に目へ入る主役」「主役が示す1つの関係または動作」を決める。先に、本文に根拠のある具体的な場面、人物、物、行動、実例を抽出する。原稿に登場する名詞を描画対象の一覧へ変換しない。長い分析レポートは作らない。

2. アイソメ構図を決める

Webアイソメ画像用プロンプトに従い、TYPE A、TYPE B、TYPE Cのいずれかへ分類する。text_mode: noneではTYPE Aを使わず、TYPE BまたはTYPE Cを使う。

• TYPE A: 強い結論や問いと、それを支える象徴的な主役モチーフで見せる。text_mode: includeのときだけ使う。
• TYPE B: 課題、感情、利用、選択、解決を、視聴者代理の人物が行う1つの行動または瞬間へ絞ったアイソメ場面で描く。
• TYPE C: 工程、関係、比較、分解、蓄積のうち、今回の主張に必要な1つの関係または変化を、視聴者代理の人物を含むアイソメ図解で描く。

表現方針は次の順序で決める。

1. 本文に根拠のある具体的な場面、人物、物、行動、実例を抽出する。
2. 具体的な視覚材料だけで1メッセージが成立する場合は、直接描写を選ぶ。
3. 一部だけ具体的な場合は、その具体物を主役にし、抽象表現は関係を補助する範囲に留める。
4. 具体的な視覚材料が不足する場合だけ、最も直感的な比喩を1つ選ぶ。

直接描写または比喩のどちらを選んだ場合も、画像内では1つの表現方針へ統一する。比喩世界の全景を作らず、主張を伝える断片だけを描く。白紙と余白から構図を始め、主役と人物の行動を大きく置く。TYPE B、TYPE C、ヒーローには視聴者代理の人物を1〜3人必ず入れる。選んだ直接描写または比喩を識別する環境の輪郭と主要な区切りは残し、その内部の細かな反復だけを簡略化する。グリッドや接続線は、人物の行動や関係を読む助けになる場合だけ加える。

3. 生成プロンプトを組み立てる

プロンプトは、1メッセージ、主役、主役が示す関係または動作、アイソメ表現、配色、文字、アスペクト比、不要なものの順に組み立てる。配色変更の明示がなければ、青#009FE8・淡青#7DCCF3・緑#02A550・淡緑#34B772を明記する。

TYPE Aでは見出しと主役モチーフ、TYPE BとTYPE Cでは人物、その行動、主役モチーフを先に置く。次に、選んだ比喩や場所を識別する外形、階層、境界、接続などの大きな構造を加える。大量、蓄積、選択肢などは個々の物体を網羅せず、まとまりと疎な反復リズムで表す。簡略化するときは、選んだ比喩のカテゴリや機能が識別できる特徴を消さず、内部の細かな反復を大きなまとまりへ統合する。縮小表示を想定し、視線の着地点が分かれるなら、人物と環境の主要構造を保ったまま、内部の反復素材を削除、統合、トリミングしてから生成へ渡す。

4. 画像を生成する

$imagegenの手順に従って生成する。参照画像がある場合は事前に確認し、必要な画像だけを渡す。

複数画像を依頼された場合は、指定順またはLPの掲載順で全件生成する。最初の1枚だけを試作して止めない。ただし生成失敗が連続する場合は、原因を修正してから続ける。

5. 目視確認して修正する

生成画像を必ず開き、次を確認する。

• アイソメ投影と視点が崩れていないか
• 1メッセージと主役が3秒程度で分かるか
• 記事幅へ縮小しても、最初に見る場所が1つに定まるか
• 原稿の名詞や反復物を網羅して、主役より細部が目立っていないか
• 人物の行動が読み取れ、周辺素材や内部の反復が人物より目立っていないか
• 選んだ比喩を識別する環境の輪郭と主要な区切りが残っているか
• 簡略化した背景が、意味を失った無特徴な面や不自然な空白になっていないか
• 余白が構図の一部として働き、背景が世界観説明のために増えていないか
• 流れ、比較、工程、蓄積の関係が読み取れるか
• デフォルトの青・緑、またはユーザーが明示した配色と意味付けが守られているか
• 意図しない文字、疑似UI、透かし状要素がないか
• 人物、手、道具、線、接続、重なりが破綻していないか
• PCとモバイルの想定トリミングで重要要素が欠けないか
• 同じシリーズの線、面、影、色、密度が揃っているか

問題があれば、問題箇所を明示して修正生成する。密度が高い場合は人物、その行動、環境の主要構造を保ち、新しい要素や説明を足さず、内部の反復素材を削除、統合、トリミングして直す。簡略化で環境の意味が消えた場合は、細かな描き込みではなく、大きな区切りと疎な反復リズムを戻す。生成できたという理由だけで採用しない。

6. 保存して報告する

採用画像、候補画像、メタデータをimagegen-coreの出力契約に従って整理する。

完了時はimagegen-coreの報告形式に従い、アイソメ画像固有の主要オプションとしてtext_modeとaspect_ratioを含める。