josemidev/piezas-graficas

広告グラフィック制作

このスキルは、キャンペーンのグラフィック制作の全サイクルをカバーします。エージェンシー素材を読み取り、実際のリソース（写真、ロゴ、フォント、テキスト）を抽出し、各フォーマットを合成し、すべてをレビュー用HTMLギャラリーにエクスポートして納品します。ユーザーはすべてのピースを一覧で確認し、フィードバックを返します。クライアントの修正はラウンドで行われるため、すべてが編集可能なソースから迅速に再生成できる必要があります。

中心ルール：常にレビュー用HTMLギャラリー

各納品（修正ラウンドも含む）は、エクスポートされたすべてのピースを表示する index.html で終了し、export/ フォルダとともにユーザーに送信されるか（またはFinderで開かれます）。これにより、ユーザーはフォーマットを一目で比較し、単一ファイルでは気づきにくいエラーを検出し、実際のフィードバック（「ここで文字が重なっている」「160x600ではこの特典を削除して」）をスクリーンショットで返すことができます。

ギャラリーは以下を満たす必要があります：

• ファミリー（ホームページ / ディスプレイ / 投稿 / ストーリー…）ごとにグループ化し、各ピースを実際のサイズまたは拡大/縮小せずに表示する。
• 各ピースの下に、サイズ、ファイル名、JPGのファイルサイズ、PNGおよび@2xバージョンへのリンクを表示する。
• セーフゾーンがあるフォーマット（ストーリー、カルーセル背景）では、セーフゾーンと予約エリアを重ねて表示するチェックボックスを備える。
• ライトモードとダークモードの両方で動作し、ダブルクリックで開く（export/ への相対パスを使用）。

scripts/gallery.py を使用し、ピースが変更されるたびにギャラリーを再生成します。

ワークフロー

1. プロジェクトフォルダ。 ブランドまたはキャンペーンごとに1フォルダ（<ブランド>-<キャンペーン>/）を作成し、src/（編集可能なソース、アセット、スクリプト）、export/<ファミリー>/、index.html を配置します。ブランドを混在させないでください。2つのブランドが同時に来た場合は、それぞれを別のフォルダに配置します（ユーザーのリクエストに応じて、並行セッションで行うことも可能）。
2. 素材を読む。 references/extraccion.md を参照：
   • 公開Googleスライド：/export/pptx と /export/pdf をダウンロードし、スライドをレンダリングしてキービジュアルを確認し、.rels から編集可能ファイルへのリンク（「EDITABLE」、「DESCARGAR」、「IMÁGENES」）を抽出します。
   • Illustrator PDF：マスク（smask）付きの写真、ベクターとしてのロゴ（get_drawings → SVG）、埋め込みフォント、実際の法的テキスト。
   • PSD：psd-tools を使用してアートボードとレイヤーを取得し、各要素をレイヤーから個別に合成します。
3. 合成前のインベントリ。 各ピースに含まれるモデル、価格、特典、法的テキスト、ロゴをユーザーに一覧表示し、各データの出所を明示します。2つのスライドが矛盾している場合（同じモデルに2つの価格がある場合）、最新の編集可能ファイルを使用し、そのことを指摘します。黙って選択しないでください。
4. 合成。 最適なソースを使用します：
   • HTML + CSS (assets/banners-template.html)：ピースごとに div.ad[data-name] を使用し、すべて絶対配置で、抽出したフォントとSVGを使用します。ラウンドでの修正に最速です。
   • Python (PIL) によるレイヤーベース：ソースがPSDで、ラスタライズ済みの要素を再配置する必要がある場合に使用します。
5. エクスポート。 scripts/export_pieces.mjs（Playwright）が各 .ad を @1x と @2x のPNGとしてキャプチャし、scripts/to_jpg.py がフルカラーのJPGをファミリーごとの重量制限で生成します。references/formatos.md を参照。
6. 納品前に1つ1つ確認。 エクスポートされた各ピース（特に重要な領域を拡大）を確認し、references/checklist-revision.md に従います。修正して繰り返し、確認していないものは納品しないでください。
7. 納品。 ギャラリー + Finderで開かれたフォルダ + 簡潔な概要：何を行ったか、どのような判断を下したか、確認待ちの事項。

構成の原則

• 明示的な階層。 優先順位を質問または推測し、すべてのフォーマットでそれを尊重します。プロモーションでの一般的な順序：1) オファー（価格または割引率）、2) ショップまたはブランドのロゴ、3) それ以外は同じレベル（キャンペーンロゴ、特典、製品）。
• スペースを活用。 各フォーマットには独自の構成があり、単にスケーリングするだけでは不十分です。製品がワイドの場合は、幅を最大限に使い、情報を1行に配置します。製品がハイの場合は、テキストと一緒に列に配置します。大きな隙間や小さすぎる要素がないか確認します。
• 製品を再生成しない。 車両や製品の実際の写真を使用し、色、ホイール、デザインを変更しないでください。新しいフォーマットにシーンが不足している場合は、空、海、地面を自然に拡張します（references/extraccion.md、「背景の拡張」を参照）。
• 写真内のナンバープレートとテキスト。 プレートのテキストを変更する必要がある場合は、実際の輪郭に合わせてパースペクティブで再描画し、決して平らな長方形を重ねないでください。
• コントラスト。 写真上の白いテキスト：テキストブロック全体で少なくとも4.5:1のコントラスト比を達成するまでソフトなグラデーションを追加し、測定します。
• 行間。 編集可能ファイルの行間を測定して再現します。行間が非常に狭い凝縮フォントでは、行が接触する可能性があります。

修正ラウンド

修正は、クライアントからのスクリーンショットまたはメールとして届きます。それぞれについて：

• 変更をソースに適用し（PNGを直接編集しないでください）、影響を受けるすべてのピースを再エクスポートします。
• リクエストが「Xサイズのすべてのピース」の場合、プロジェクト内のすべてのブランドでそのサイズを検索し、どのピースを変更したか、どのピースが該当しなかったかを通知します。
• 変更したピースを再度視覚的に確認します（テキストの変更は、狭いフォーマットで改行を壊すことがよくあります）。
• ギャラリーを更新します。

すでに発生したエラーで予防すべきもの：モデル名の不完全（キービジュアルに含まれているバージョンがない）、別のバージョンの価格、クライアントが望まない場所のボタン（ホームページにボタンなし、ディスプレイにボタンあり）、不要なフォーマットの銀行特典、段落末の孤立語（「LLENO」のみ、「90%」のみ）。

このスキルのファイル

• references/extraccion.md：PDF、PSD、スライドから写真、ベクター、フォント、テキストを抽出する方法、背景の拡張、プレートの処理。
• references/formatos.md：一般的なサイズ、セーフゾーン、重量制限、鮮明なエクスポート。
• references/checklist-revision.md：納品前に各ピースで確認すべき項目。
• scripts/export_pieces.mjs：HTMLの各 .ad をPNG @1x/@2x にエクスポート。
• scripts/to_jpg.py：PNG → JPG sRGB 4:4:4、重量制限付き。
• scripts/gallery.py：レビュー用の index.html ギャラリーを生成。
• scripts/pdf_assets.py：Illustrator PDFからマスク付き画像、フォント、ベクター（SVG）を抽出。
• scripts/psd_elements.py：PSDのアートボードとレイヤーを一覧表示し、各レイヤーグループを透明PNGとして抽出。
• assets/banners-template.html：ピースごとのレイアウトテンプレート。