キャンペーンポスターデザイン

ユーザー向け: 1つのメッセージを送信します。例：

ポスターデザインスキル（https://github.com/greatopomu/claude-assets）を使って、[ブランド名]のInstagramポスターを5枚デザインしてください。ウェブサイト/古いチラシはこちら：[リンクまたはファイル]。

以上です。Claudeは必要なものを尋ねます。

Claude向け: このファイルはジョブ全体の進め方を説明しています。最初から最後まで従ってください。ユーザーの負担を最小限に抑えてください。一度だけ質問し、あとは作業を進めてください。

パート0: セットアップ（最初に、静かに実行）

ヘルパーツールは同じリポジトリの tools/ にあります。以下の tools/export_png.py などのパスは、リポジトリのルートからの相対パスです。

ツールを入手する。 コマンドを実行でき、リポジトリがこのコンピュータにまだ存在しない場合： git clone --depth 1 https://github.com/greatopomu/claude-assets.git gitが利用できない場合は、https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip をダウンロードして解凍します。
インストールと確認: python -m pip install -r tools/requirements.txt 次に python tools/check_setup.py を実行します。このコンピュータで何が動作するかがレポートされます。すべてのツールが動作することを確認するには、python tools/selftest.py を実行します。
テンプレートから開始する: skills/poster-design/template/index.html をプロジェクトフォルダにコピーします。これにはブランドトークン、プレビューページ（Fit / Phone / 100%）、および ?solo=pN エクスポートモードが既に含まれています。

フォールバック。 以下のうちどれが該当するかをユーザーに明確に伝えてください。

これがない場合	代わりにこれを行う
コードを実行する方法がない（プレーンチャットのみ）	テンプレートを使用して、1つのHTMLファイル（またはアーティファクト）としてポスターを作成します。エクスポートするには、ユーザーがChromeでファイルを開き、アドレスに `?solo=p1` を追加し、DevTools（F12 / Cmd+Opt+I）→ コマンドメニュー（Ctrl/Cmd+Shift+P）→ 「フルサイズのスクリーンショットをキャプチャ」を開きます。各ポスターについて繰り返します。
Pythonは動作するがブラウザが見つからない	Google ChromeまたはEdgeをインストールし、`CHROME_PATH` をChromiumベースのブラウザに設定するか、`pip install playwright` を実行してから `python -m playwright install chromium` を実行します。それ以外の場合は、上記の手動エクスポートを使用します。
Higgsfield CLIまたはクレジットがない	ストックフォト（ルートA）またはChatGPT（ルートB）を使用します。
ChatGPT用の組み込みブラウザ（Claudeデスクトップ）がない	ユーザーにChatGPTで画像を生成してダウンロードし、ファイルを共有するよう依頼します。
インターネットからダウンロードできない	ユーザーに選択したストックフォトをダウンロードして共有するよう依頼します。

画像ツールはオプションのヘルパーです。1つが実行できない場合は、別の方法で同じステップを実行し（例：目視で写真を選択）、続行します。

作成するもの

シニアグラフィックデザイナーが作成したような、デザインされたキャンペーンポスター。テキストが上に重ねられたAI画像ではありません。

すべてのポスターを HTML、CSS、SVG で構築し、ヘッドレスブラウザ（tools/export_png.py）を使用して PNG としてエクスポートします。
画像（人物、製品、場所）は 材料のみ です。3つのルートのいずれか（パート4）から取得します。画像ツールが完成したポスターを作成することはありません。
各ブランドには 独自の外観 があります。方法は同じですが、アートディレクションは毎回新たに選択されます。他のブランドのレイアウトを再利用しないでください。

パート1: 最初に質問する（1つのメッセージで、不足しているもののみ）

ユーザーのメッセージとファイルまたはリンクを読みます。次に、1つの短いメッセージ を送信し、まだ回答が必要な質問のみを含めます。各質問には妥当なデフォルト値を提供し、ユーザーが「デフォルトで問題ない」と返信できるようにします。

以下について、この順序で質問します。既に回答済みのものはスキップします。

ブランドの基本情報: 名前、販売しているもの、都市または国、顧客層。
ブランドアセット: ロゴファイル、ブランドカラー（またはサンプリングできるウェブサイトやチラシ）、およびブランドフォント。
サイズと用途: デフォルトはInstagram用の1080 × 1350。他のオプション：1080 × 1080、1080 × 1920のストーリーズ、A4またはA3の印刷物。
ポスターの枚数と、それぞれに記載する内容: 例：サービス、オファー、イベント、または「お任せ」。
必須の詳細: 価格、日付、電話番号、住所、ウェブサイト、または行動喚起。指定されていないものはプレースホルダーとしてマークされます。
人物に関するルール: デフォルトはパート6のルール。
画像: デフォルトは、利用可能なものをこの順序で使用：ストックフォト（無料）、組み込みブラウザのChatGPT（無料、制限あり）、次にHiggsfield（有料クレジット）。有料クレジットを使用してもよいか質問します。
保存場所: デフォルトはブランド名にちなんだ新しいフォルダ。

スタイル、レイアウト、エフェクトなどのデザインの選択については質問しないでください。それらはあなたの仕事です。パート2で方向性を示します。

パート2: 計画を立て、1つのチェックポイントを表示する

これらすべてを自分で実行し、承認を得るためにユーザーに 1つの短い計画 を表示します。

ブランドカラーをサンプリングする スクリプト（tools/sample_colours.py）を使用してファイルから取得します。推測しないでください。ロゴはぼやけた切り抜きではなく、クリーンなSVGとして再描画する計画を立てます。
カテゴリを調査する: 3〜4の主要ブランドがどのように広告を出しているか（レイアウト、タイポグラフィ、イメージ、トーン）、1つのローカル競合他社を含む。考え方は借用しますが、アセットは決して借用しません。メモとソースを RESEARCH.md に保存します。
ローカルの真実を収集する: 実際の場所、日常の習慣、人々が実際に使用する言葉、および地域の詳細。地域の詳細の例：その州での一般的な車の色、または地元の服装。
アートディレクションを選択する: パート3の表から、このブランドとオーディエンスに合うように各行から1つのオプションを選択します。また、フォント（Google Fonts）と色の使用方法（どれがリード、アクセント、背景か）も選択します。
ポスターのアイデアを書く: 各ポスターについて、1つのアイデア、8語未満の見出し、顧客が得るものから始まる1つのサポートライン、行動喚起、必要な画像、およびそのストーリー要素。2つのポスターでレイアウトやストーリー要素が同じであってはなりません。

チェックポイント（構築前の唯一のもの）。 ユーザーに以下を表示します：

色
2〜3行でのアートディレクション
フォント
見出し付きのポスターのリスト

「続行してもよろしいですか、それとも変更しますか？」と質問します。簡潔にしてください。

パート3: アートディレクションの選択肢

ブランドごとに選択します。異なるブランドは複数の行で異なる必要があります。

選択肢	オプション
明るさ	ダークでムーディー · 明るくエアリー · アーシーな中間トーン · モノクロ+1色
色の使い方	1色がリードしアクセントを持つ · デュオトーン写真 · 大胆なカラーブロック · ニュートラル+ブランドアクセント
タイポグラフィ	ヘビーグロテスク · 凝縮された背の高い · 丸みのある幾何学的 · エディトリアルセリフ+サンセリフ · 手書きアクセント
形状	有機的なブロブと波 · ハードな幾何学的な角度 · 細い線とグリッド · カットペーパー · 円と弧
写真処理	形状上での切り抜き · カラーオーバーレイ付きフルブリード · 形状内の写真 · ワイドフォトバンド · 色合い · コラージュ
テクスチャと光	グローと光の軌跡 · フラットでクリーン · グレイン · ハーフトーンドット · ソフトシャドウのみ
レイアウト	上部に見出し、下部に画像 · 分割画面 · 画像を中央に、周りにタイプ · タイプリード · 斜め · パネルのグリッド
ストーリー要素	アプリまたはインターフェースカード · ステッカーまたはバッジ · チケットまたはレシート · 地図またはルート · 大きな数字またはグラフ · 引用 · ビフォーアフター

暗い背景に光るアクセントをデフォルトにしないでください。ブランドがそれを必要とする場合にのみ使用してください。

パート4: 画像の取得（3つのルート）

各ポスターに適したルートを使用します。使用する前に、すべての画像を人物ルール（パート6）に照らして確認します。ソースとライセンスを RESEARCH.md に記録します。

A. ストックフォト（Pexels、Unsplash、Pixabay）。無料、実際の人々と場所。

いくつかのローカルクエリで検索します。
1つのコンタクトシート（tools/contact_sheet.py）で20〜30のサムネイルを比較します。
以下の写真は拒否します：
- 間違った場所や人々
- ルール違反
- 読み取り可能なナンバープレートや個人情報
- メッセージを弱めるダメージや乱雑さ
- テキストのスペースがない
幅1600〜2000 pxでダウンロードします。
必要に応じてローカルの詳細を修正します。tools/recolour.py は領域内の1色を変更します。
写真の形状でレイアウトを決定します：ポートレート写真はフルブリード、ランドスケープ写真はバンドまたはフレーム内として使用します。

B. 組み込みブラウザのChatGPT。 無料、フルシーンに最適。

ユーザーはサインインしている必要があります。詳細なプロンプトを入力します：被写体、ルールに従った服装、設定、光、「portrait 4:5, no text, no logos」。
1つの詳細を変更するには、同じChatGPTチャット内に留まります：「Same image, change only …」。
制限: 無料プランでは1日あたり約3枚の画像。
ファイルの取得方法: ChatGPTのダウンロードはブラウザペインからは機能しません。
- 最善：ユーザーにダウンロードをクリックし、ファイル名を教えてもらいます。
- フォールバック：画像を実際のサイズで全画面表示し、2 × 2のスクリーンショットタイルでキャプチャし、tools/stitch_tiles.py で結合します。

C. Higgsfield。 有料クレジット、切り抜きに最適。

最初に残高と価格を確認します（higgsfield account status、higgsfield generate cost …）。
GPT Image 2.6 を --background transparent と組み合わせると切り抜きが得られます。人物には中品質、オブジェクトには低品質を使用します。基本プランでは約4つのジョブを同時に実行できます。
各切り抜きの周りのかすかなグローを tools/clean_cutout.py でクリーンアップします。
画像の1つの詳細を変更するには、--image を指定して画像を戻し、変更のみを記述します。

すべての画像プロンプト には以下が記載されます：被写体とアクション、人物ルールに従った服装、ポスターのムードに合った照明、フレーミング、「photorealistic, no text, no logos, no watermark」、フルシーンの場合はタイプ用のスペース。

パート5: ポスターの構築

最初にセットアップ（skills/poster-design/template/index.html から開始）：

カラートークン、フォント、SVGシンボルとしてのロゴを含む1つの index.html
アートディレクションに適合した共有サインオフ（ロゴ＋行動喚起スタイル）
すべてのポスターを実際の比率で、フィットするように拡大縮小して表示し、Fit / Phone（390 px幅）/ 100% ボタンを備えたプレビューページ
エクスポート用の ?solo=pN モード
ローカルサーバー（file:// ではない）からフォルダを提供し、ブラウザペインで開く

すべてのポスター：

1つのアイデア： 見出し、サポートライン、行動喚起。
少なくとも4つのレイヤー と、少なくとも1つの要素が被写体の前を横切るもの。
製品の動作を示すストーリー要素（例：現実的なアプリカード、チケット、トラッカー、地図、バッジ）。
カスタムシェイプ、グラデーション、ライト（テンプレートのボックスではない）。
セット全体で署名エフェクトを変えながら、共有システムを維持する。

デザイン原則（譲れないもの）。 これらはポスターを機械的に見せる間違いです。構築中に計画し、最後だけでなく対応します。

余白。 テキストは、すべての形状の端、リング、ライン、バッジ、画像から少なくとも24 pxのクリアランス（40 pxがより良い）を確保します。円やリングがテキストに沿って、通過したり、接近したりしてはいけません。
ニアミスなし。 2つの要素は、明確に意図的に重なるか（小さい方の4分の1以上）、十分に離れている必要があります。ほとんど触れるエッジや、偶然の位置合わせは間違いのように見えます。例：製品の上部が後ろの円の上部と一直線になる、またはステッカーがボックスの角にかすめる。
円はパネルと明確に交わる。 フッターやバンドに触れる円は、その手前で十分に止まるか（24 px以上）、その下を明確に通過する（40 px以上）必要があります。決して端にかすめてはいけません。
クリアなパッケージング。 白と黒だけでなく、ポスターの実際の背景色で各切り抜きを確認します。残った背景、ギザギザのエッジ、ソリッドな「曇り」領域は、実際の色でのみ現れます。
装飾を減らす。 追加のリング、アウトライン、リーフはそれぞれ、テキストを窮屈にする可能性があります。意味を追加しない場合は、除外します。
視覚的階層。 読み取り順序を決定します：（1）見出しまたは製品、（2）サポートライン、（3）ストーリー要素、（4）サインオフ。サイズ、太さ、色はその順序に従う必要があります。強調するものは1つだけです。
ペアリングとグループ化。 各アイコンは、ラベル付けする1つのもののすぐ隣に、すべてのペアで等間隔に配置されます。各連絡先の詳細には独自のアイコンが付けられます：電話番号の横にWhatsApp、ハンドルの横にInstagram。関連するアイテムは1つの小さな見出し（「今すぐ注文」、「利用可能」）の下にグループ化します。無関係なグループは明確なスペースで区切ります。
整列。
- ロゴ、見出し、本文、フッターには1つの左マージン。
- フッターブロックは上部に揃え、小さな見出しがラインを共有するようにします。
- バッジの行と列は、均一で測定された間隔を持ちます。
改行。
- ランニングテキストは短い単語で終わらないようにします。見出しと本文テキストには text-wrap: balance を使用し、各行を読みます。
- 改行はフレーズ間に入れるべきで、フレーズ内に入れてはいけません（「over oats, / guinea corn」は誤り、「over / oats, guinea corn and soy pulp」が正しい）。
- 見出しは意味で改行し、<br> を適切な場所に配置します。
各ものに1つの名前。 セット内のすべてのポスターで同じ製品名、フレーバー名、成分リスト、クレームを使用します。公開前に、すべてのクレーム（「無糖」、「100%天然」など）をクライアントに確認するためにリストアップします。
フッターもデザインする。 ヒーローと同じ注意を払います：階層、ペアリング、整列、少なくとも36 pxのパディング。

テクニックメニュー（ポスターごとに選択、すべてを使用しない）：

奥行き：
- レイヤー順序：背景 → テクスチャ → グローまたはカラーフィールド → シェイプ → 被写体 → 前景要素 → ストーリー要素 → 可読性のためのオーバーレイ → タイプ → サインオフ
- 被写体を横切る前景の線、シェイプ、またはカード
- カードまたはフレームから飛び出す被写体
- 被写体の後ろに配置され、手が重なるカード
光と色：
- 被写体の後ろのぼかしたラジアルグロー
- ポスターに合わせて画像プロンプトで要求されたリムライト
- 光の軌跡（2回描画されたSVGパス：ぼかしたグロー＋シャープなコア）
- スタックされた filter: drop-shadow（text-shadow ではない）を使用したアウトラインまたはネオンタイプ
- 写真へのブランドカラーオーバーレイ：被写体上は透明、テキストの背後はソリッド
- スクリプトによる画像の再グレーディング（昼から夜、暖色へ）
シェイプとテクスチャ：
- 細いアクセントラインのあるブロブまたは波
- 曲線または角度のある写真の端
- フェードしたグリッド、ドット、またはパターン
- リングとレイ
- テキストパス上の円形バッジ（<textPath> と textLength）
タイポグラフィ：
- 1つのヘビーディスプレイフェイスと1つのクリーンテキストフェイス
- 見出しの行間0.85〜0.92、ややタイト

…

[翻訳のため省略]

キャンペーンポスター設計