プロフェッショナルフォトグラフィックデザイナー & アートディレクタースキル

このスキルは、生の写真をスタジオ品質のソーシャルメディアグラフィック、ポストカード、記念ポスターに変換します。画像生成AIを写真に上書きする方法（顔が歪む、空が変わる、タイ語タイポグラフィが崩れる）の代わりに、HTML5 + CSS3 + カスタムSVGベクターアートワーク + Google Fonts を使用し、4K Retina解像度（--force-device-scale-factor=2） でHeadless Chromeを介してレンダリングし、Python Pillow（subsampling=0）で合成するワークフローを採用しています。

コアワークフロー（6フェーズ）

フェーズ1: 写真検査と自動ビジュアル分析

対象写真を表示: まず常に read_file を実行して、被写体、雰囲気、照明、障害物（例: 顔、テントポール、ガイロープ、地平線、木々）を視覚的に理解します。
写真分析スクリプトを実行: 対象画像に対して analyze_photo.py を実行し、以下を抽出します:
- 正確なピクセル寸法、アスペクト比、EXIFメタデータ。
- 3×3グリッド輝度＆ネガティブスペースマップ（どのゾーンが暗いか、中間調か、明るいか、そしてタイポグラフィに適した低ディテールゾーンを識別）。
- 抽出カラーパレット（支配的な背景のHEX色 + 推奨される高コントラストアクセントHEX色）。
```
python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<image_path>"
```

フェーズ2: インタラクティブなスタイル＆方向性の発見

グラフィックを生成する前に、style_catalog.md を参照し、ask_question を使用して、写真に合わせて厳選されたデザインの方向性からユーザーに選択してもらいます:

デザインスタイルの選択（style_catalog.md の12以上のスタイルから3～5個の最適なスタイルを提示し、比較用に複数スタイルを生成するオプションも含む）:
- 天体＆星空ロマンス（ラグジュアリーゴールドセリフ、コンステレーションライン、輝く星明かり、アストロラーベ境界線）
- ミニマルエディトリアル / マガジンポストカード（Kinfolk / GO OUT / NatGeo レイアウト、ヘアライングリッド、メタデータヘッダー、ロケーションスタンプ）
- 温かみのあるキュートな手書き風イラスト（居心地の良いフェアリーライト、スケッチ風点線ボーダー、浮かぶハート、曲線のポインター矢印、手書き風スクリプト）
- ヴィンテージフィルム＆アナログコダクローム（ハレーショングロー、フィルムボーダーフレーム、日付スタンプ、レトロセリフ）
- モダングラスモーフィズム＆フローティングUI（曇りガラスカード、ミュージックプレーヤー / メモリーバー、洗練されたサンセリフ）
- アウトドアアドベンチャー＆レトロバッジ（国立公園 / キャンプエンブレム、トポグラフィックライン、コンパス＆パインのベクター）
- 和風ミニマルポスター（Zakka / Muji風）（縦書き/非対称タイポグラフィ、たっぷりとした余白、繊細な線画）
- シネマティックレターボックス＆ストーリー字幕（アナモルフィックバー、映画タイトルクレジットブロック、詩的なバイリンガル字幕）
アスペクト比＆出力フォーマット:
- 元のアスペクト比（例: 3:2 ランドスケープ 3600×2400）
- ポートレートソーシャルフィード（4:5 2400×3000）
- スクエア（1:1 2800×2800）またはストーリー/リール（9:16 2160×3840）

フェーズ3: マルチトーンコピーライティングワークショップ（重要！）

一般的で安っぽい引用はしばしば不自然に感じられます（"ไม่ใช่ตัวเอง"）。テキストを確定する前、またはユーザーが文言のアイデアを求めてきた場合、copywriting_tones.md を読み、ask_question を使用して、ユーザーがセクションごと、パーソナリティトーンごとに文言を選択またはミックス＆マッチできるようにします:

テキストをモジュラースロットに分割:
1. トップバッジ / アイブロウ（例: 英語のタイトルや機会タグ）
2. メインヘッドライン（プライマリータイ語/英語の挨拶）
3. サブタイトル / コアアンカー（温かいキーフレーズ）
4. ボディメッセージ / 引用ボックス（2行の心のこもったメッセージ—またはすっきり見せるために省略可）
5. 被写体コールアウト / ポインターノート（手書きの矢印が人物/被写体を指す横にある短い可愛いラベル—または省略可）
スロットごとに5～6個の異なるパーソナリティトーンを提供:
- สายลุย-ชิลล์ๆ（アウトドア / リラックスしたパートナー）: ナチュラルで、リラックスした、冒険仲間のような雰囲気。
- แมนๆ จริงใจ ไม่เลี่ยน（誠実で地に足のついた）: 正直で、温かく、気取りゼロ。
- อบอุ่น-เรียบง่าย（温かくクラシック）: 優しく、感謝に満ち、時代を超えた。
- กวนนิดๆ กันเอง（遊び心 & からかい）: 本当のカップルの愛情のあるじゃれあい。
- โรแมนติก-ลึกซึ้ง（詩的 & ロマンチック）: 星明かり、運命、深い感情。
- สั้นกระชับ-มินิมอล（短くインパクトのある）: ミニマルなインパクト。

フェーズ4: 構図、視線誘導＆色彩理論のルール

HTML/CSS/SVGオーバーレイを作成する際は、composition_and_color.md を参照してください。以下の黄金ルールを必ず適用します:

被写体＆障害物保護ゾーン:
- 顔、体、構造線（テントポールや斜めのガイロープなど）の正確なバウンディング座標 (x, y) をマッピングします。
- テキスト、浮かぶハート、星、矢印が顔を横切ったり、ガイロープと不格好に交差したりしないようにします。コールアウト要素をロープ/ラインの片側にきれいに移動させます。
視覚的な視線誘導（ビジュアルベクタリング）:
- 見る人の視線をプライマリータイポグラフィブロック（開いたネガティブスペース内）から -> セカンダリー装飾 / コールアウト矢印 に沿って -> 直接 人間の被写体の顔/笑顔 に導きます。
- 被写体に向かって指す、またはテキストを内側にフレーミングするような、湾曲したSVGパス（<path d="M ... Q ...">）、三日月の向き、流れ星の角度を使用します。視線をキャンバスの端から外に導くことは絶対に避けます。
カラーハーモニー＆適応型可読性:
- 60-30-10 カラールール:
  - 60% ベース写真アンビエントトーン（例: ディープミッドナイトネイビー #0A1530 またはフォレストグリーン）。
  - 30% プライマリータイポグラフィカラー（高コントラストのウォームアイボリー #FFFAF0 またはピュアクリスピーホワイト #FFFFFF）。
  - 10% シーンからサンプリングまたは調和させたアクセントハイライトカラー（例: ウォームフェアリーライトゴールド #FFE299、シャンパン #F0CA86、またはソフトコーラルハート #FF7B93）。
- ボディテキストの背後には、常に目立たないエッジのない放射状/線状グラデーション（rgba(8, 16, 38, 0.38)）または曇りガラスコンテナ（backdrop-filter: blur(4px)）を配置し、星、雲、葉の上でもタイポグラフィが100%読み取れるようにします。
タイ語タイポグラフィの完成:
- 複数文のタイ語引用行には white-space: nowrap を使用するか、自然なフレーズの区切りで明示的な <br> 改行を入れ、タイ語の単語（例: "ฉัน" や "วัน"）が単独で行末に来ないようにします。
- 大きなタイ語表示テキスト（高い母音/声調記号 ั ิ ี ึ ื ่ ้ ๊ ๋ ์ や低い母音 ุ ู を含む）と、周囲のSVG星、月、境界線の間に、少なくとも 35px～50px の明確なパディングを残します。

フェーズ5: 4K Retina レンダリングパイプライン

render_graphic.py を使用して、任意のHTML/CSS/SVGテンプレートを対象写真の上に4K解像度でレンダリングします:

python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
  --photo "DSC03461.jpg" `
  --html "path/to/design.html" `
  --output "DSC03461_Output.jpg" `
  --width 1800 --height 1200 --scale 2

--scale 2 と --virtual-time-budget=3000 が重要な理由:
- CSSピクセル 1800×1200 でデザインし、--force-device-scale-factor=2 を使用すると、超鮮明な 3600×2400 Retina出力が生成されます。
- --virtual-time-budget=3000 により、Chromeがフレームをキャプチャする前にGoogle Fontsのダウンロードと適用が完了します（システムフォントへのフォールバックを防止）。
- quality=96, subsampling=0 で保存すると、色付きテキストや細いベクターラインの100%シャープなエッジが維持されます。

フェーズ6: 必須ビジュアルQA検証

すべての画像をレンダリングした後、生成された .jpg ファイルを read_file を使用して検査し、ユーザーに表示する前に以下のチェックリストを確認する必要があります:

フォント検証: 意図したGoogle Fontsが正しく読み込まれているか（Tahoma/Arialへのフォールバックなし）？
単独行の単語なし: すべてのタイ語の文は、意図した <br> ポイントできれいに分割され、末尾に単独の単語が残っていないか？
衝突ゼロチェック: 星、月、ハート、境界線、矢印がタイ語の母音/声調記号、人間の顔、テントロープに接触または重なっていないか？
視覚的バランス＆コントラスト: すべてのテキスト行は、サムネイル表示でも全画面表示でも問題なく読めるか？

read_file 検査中に問題が見つかった場合は、すぐにCSS/SVG座標を調整し、結果を提示する前に再レンダリングします。

リファレンステンプレート＆ドキュメント

スタイルカタログ＆フォントペアリング: references/style_catalog.md
構図、視線誘導＆カラーガイド: references/composition_and_color.md
タイ語＆英語コピーライティングマトリックス: references/copywriting_tones.md
すぐに使えるHTML/SVGリファレンステンプレート:

写真グラフィックデザイナー & アートディレクター