フロントエンド画像アートディレクション
開発者が一目で読み取れるフラットなWebサイトコンポジションを作成します。各コンポジションに明確な階層、一貫性のあるグリッド、意図的な余白、特徴的なタイポグラフィまたは写真表現を与えます。画像を実装のための参照として扱います。実装が要求された場合は、実際のHTMLとCSSをプロダクションテキスト、UI、正確な測定に使用します。
1. ワークフローを選択する
リクエストと利用可能なプロジェクトガイダンス（例：AGENTS.md、CLAUDE.md、スタイルガイド、デザイントークン、関連するビジュアルアセット）を読みます。まず明示的なユーザー指示に従い、次に割り当てられた役割内の承認済み参照、次にプロジェクトのデフォルトに従います。ギャップを埋めるためにアートディレクションを使用します。
| リクエスト | ワークフロー |
|---|---|
| 新しいページ、ヒーロー、またはセクション | 概要からデザインします。一貫性のあるビジュアルディレクションを選択します。 |
| 同じサイトの別のセクション | ビジュアルシステムを再利用し、新しいコンテンツに適したコンポジションを作成します。 |
| 承認済みデスクトップからモバイルへ | 承認されたコンテンツとコンポーネントを新しいビューポート用に再構成します。 |
| 1つのものを削除、置換、色変更、または修正 | 承認済み画像をその場で編集し、何を保存するかを定義します。 |
概要が十分な方向性を与えている場合は直接生成します。必須の編集ターゲットや承認済みアセットを取得できない場合は、その特定の入力をリクエストします。
2. 各参照に役割を割り当てる
入力を番号付けし、ファイル名またはビジュアルコンテンツで識別します。これらの役割を実際の画像プロンプトに引き継ぎます。
- 編集ベース — 変更を受ける承認済み画像。API編集を使用する場合は最初に配置します。
- 承認済みデスクトップ — レスポンシブバージョンのコンテンツ、順序、コンポーネントスタイル、画像とロゴの識別情報のソース。
- スタイルのみ — パレット、タイポグラフィ処理、グレイン、写真グレーディングなどの名前付き特性を継承します。新しいセクションのコンポジションとコピーは独立させます。
- スケールとスペーシングのみ — サイドマージン、ヘアライン、ラベルサイズ、表示数字のスケールなど、名前付きの測定値または関係のみを継承します。
- 正確なアセット — 提供された写真、製品、部屋、またはロゴを認識可能なままにします。識別可能な詳細を保持し、許可されたクロップまたはグレーディングを指定します。
マルチスライスページの場合、承認済みのビジュアルアンカー1つと、パレット、タイプの役割、ガター、スペーシング、ルール、CTA処理、イメージのコンパクトな記録を引き継ぎます。各スライスにどのセクションが表示され、どこで開始および終了するかを明記します。全体で同じビジュアルシステムを使用します。ヘッダーまたはフッターは、それが属する場所にのみ導入します。
3. アートディレクションとプロンプト
オリジナルコンセプトの場合、1つのスタンス（クラフト、明瞭さ、温かみ、劇場、または大胆な表現）、1つのレイアウト（オフセットエディトリアル、スプリット、フルブリード、ディシプリンドモジュラーグリッド、またはタイプリード）、1つの仕上げ（クリーンデジタル、微妙なフィルムグレイン、ハーフトーン、またはテクスチャーペーパー）を選択します。コンテンツに役立つコンポーネントのみを選択します。ダイニングメニューはルールと十分な余白を持つタイプリードにできます。ヒーローは単一の決定的なクロップを使用できます。パネルのエッジは長方形にするか、単純な水平仕切りを使用します。明示的にリクエストされない限り、ひし形、ダイヤモンド、斜めの平行四辺形パネルは避けます。
複雑なブリーフには短いラベル付きブロックを使用します。シンプルなリクエストの場合は、関連する行のみを使用します。
- デリバラブル — ページまたはセクション、ターゲットビューポート、フレーミング、キャンバスに名前を付けます。デバイスフレームがリクエストされない限り、フラットなエッジツーエッジのサイトコンポを指定します。
- 参照 — 入力をそれぞれの個別の役割にマッピングし、各入力がどの詳細を制御するかを示します。
- レイアウト — 読み取り順序、エッジマージン、グリッドアンカー、セクション境界、配置、焦点を指定します。目に見える用語で署名となるデザインムーブを説明します。
- コピー — 正確なテキストを引用し、配置を指定し、繰り返しが必要でない限り各文字列を1回レンダリングします。提供された見出し、価格、名前、日付、プレースホルダーを保持します。オープンコンセプトの場合は、簡潔で根拠のあるコピーを使用し、実際の組織に対する主張をでっち上げないようにします。
- ビジュアルシステム — タイプ階層、必要な箇所の改行、カラーの役割、イメージとクロップ、仕上げ、コンポーネントスタイルを指定します。名前付きスタジオ参照を可視特性の速記として使用します。
- 制約 — 重要ないくつかの除外事項に名前を付けます。ブリーフがそれらの処理を明示的に要求しない限り、ストック風のイメージ、動機のないグロー、反復的なカードグリッド、フィラーコピーを避けます。
4. モバイル用に再構成する
要求されたCSSビューポート幅、またはデフォルトで約390 CSS pxを使用します。レンダリングされたピクセル寸法は別のキャンバス設定として扱います。適切な場合はシングルカラムを使用し、承認されたコンテンツを指定された順序でリフローし、ラベル、正確なアセット、CTAスタイル、ルール、プレースホルダーコンポーネントを保持します。テキストを折り返し、タップスペースを増やし、許可された場合にのみイメージクロップを調整します。要求された場合、または承認されたデザインの一部である場合にのみ、スティッキー要素を追加します。テキストが判読できなくなる前に、論理的なセクション境界で長いコンポを分割します。
5. 特定の領域を編集する
承認済み画像を編集ベースとして添付します。アクションを記述し、要素を外観と位置で特定し、次に何を保存するかを記述します。パーセンテージ座標を左上から測定したプレーンランゲージのロケーターに変換し、プロンプトで両方を使用します。変更が明示的に影響を与えない限り、キャンバス、コピー、クロップ、ジオメトリ、パレット、近隣のコンテンツを保持します。
例：
画像1をその場で編集します。左上からx=43.4%、y=29.6%の位置で、ラベルの後ろのローカル塗りのみを削除し、隣接するセクションテクスチャをその領域に継続します。レタリング、ヘアライン、タイプスケール、周囲のパネル、キャンバス全体を保存します。セクションの背景は不透明に保ちます。
ローカル塗りの削除とアルファカットアウトの作成を区別します。要求された場合、または目的のアセットに必要な場合にのみ、透明な背景を使用します。厳密なピクセル保存が必要な場合は、利用可能な承認済みコンポジットワークフローを使用し、未処理の領域をオリジナルと照合します。プロンプトの指示と生成マークアップだけでは、ピクセル同一の結果を保証できません。
6. 利用可能な画像バックエンドを使用する
存在する場合は、ホストの画像生成および編集ツールを優先します。サポートされている入力メカニズムを通じて参照画像を提供し、サポートされていない制御はプロンプトで意図として表現します。実際のバックエンドまたは設定は、既知の場合のみ報告します。画像バックエンドが利用できない場合は、すぐに実行可能なプロンプトを提供し、必要な入力を特定します。
OpenAI Image API統合が利用可能な場合は、以下の開始点を使用します：
| 用途 | モデル | 品質 | 複雑さ |
|---|---|---|---|
| 高速オリジナルコンセプト | gpt-image-2.6-flare | medium | medium |
| 詳細なレイアウト、小さな正確なコピー、または要求の厳しい参照一致 | gpt-image-2.6-sunburst | high | medium または high |
| ターゲット編集 | gpt-image-2.6-sunburst | medium または high | low |
品質は詳細と可読性のために調整します。複雑さは計画と構成のために調整します。新しいコンポジションには生成を、既存の画像ベースには編集を使用します。GPT Image 2.6編集ではinput_fidelityを省略します。マークアップガイド編集には、最初の入力のピクセル寸法に一致する透明なPNGオーバーレイを使用します。マークアップまたはマスクはサポートされている場合に別々に提供し、同じマークアップガイドリクエストで両方を一緒に提供しないでください。アノテーションは最終的なアートから除外します。
ターゲットアスペクト比に近いサポートサイズを選択します。GPT Image 2.6 APIカスタムサイズの場合、16で割り切れる寸法を使用し、現在のモデル制限を確認します。サンプルキャンバスには、16:10ヒーロー用の1536×960、3:2セクション用の1536×1024、縦長ページスライス用の1088×1920、電話コンポ用の1088×2352が含まれます。ホストがキャンバスサイズを管理する場合は、要求された比率と寸法をターゲットとして保持します。正確なエクスポートを主張する前に、実際の寸法を確認します。
詳細なコンポやアルファアセットにはPNGを使用します。バックエンドがサポートしている場合、ベクターアセットまたはユーザーが希望するモーションスタディのためにのみ、SVGまたはGIF生成をリクエストします。納品前にベクター出力とループの連続性を検査します。
APIリファレンス：Image generation · Image prompting
7. 検査と修正
実際の画像を通常表示で検査し、小さな文字や編集領域をズームインします。ブリーフおよび承認された入力と比較します：
- すべてのロックされたコピー、日付、価格、ラベル、ロゴ、認識可能なアセットの詳細を確認します。
- 要求されたセクション数と読み取り順序、視覚的階層、ガター、配置、タイポグラフィ、ヘアライン、コンポーネントの連続性を確認します。レイアウトが要求されたビューポートに適合していることを確認します。
- 参照の役割が分離されたままであることを確認します。借用したレイアウト、無関係なコピー、アセットの置換、または要求されていないパネルにフラグを立てます。
- 編集の場合、変更された領域とその周辺を承認されたベースと比較します。カットアウトの場合は、利用可能なときにアルファチャンネルを検査します。
ロックされた要件の違反はチェック失敗として扱います。リクエストごとに最大1回の自動修正パスを行います。承認済み画像編集の場合、候補がずれた場合は承認されたベースから再試行します。局所的な欠陥がある新しいコンポジションの場合は、候補を編集します。コンポジション自体を再構築する必要がある場合にのみ再生成します。修正後、再検査し、残っている重大な不一致や利用できない検証を開示します。コンテキストを追加する場合は、選択したビジュアルを短いメモとともに返します。