poster-designer

ポスターデザイナー

概要

ポスターデザイナーは、適切な生成戦略を内部で選択しながら、指定された数の完成版ポスター／画像アセットを出力する、統合型のポスター生成スキルです。

ソフトでヒューリスティックなツールとは異なり、このスキルでは厳格なルーティングルールを適用し、情報量の多いポスターが直接画像生成ではなく、決定論的なレイアウトで生成されるようにします。

このスキルでは、内部戦略として次の2つをサポートしています。

• レイアウト優先（HTMLベース）：構造化された情報を伝えるポスター向け
• 画像優先（直接画像生成）：視覚的・象徴的な表現のみを目的としたポスター向け

ルーティング条件が満たされた後の戦略選択は確定しており、変更できません。

---

使用する場面

求める出力が次のいずれかである場合、このスキルを使用してください。

• ポスター／横長バナー／縦長ビジュアル
• 公開または長期掲示を目的とした、単独の画像1点以上
• 中国語版と英語版のポスター／画像を別々に作成するなど、言語に応じたビジュアルのバリエーション

一般的な使用例は次のとおりです。

• オープンソースのマイルストーン告知
• コミュニティまたはプロジェクトのお知らせ
• 採用ポスター
• 製品またはプラットフォームのお知らせ
• 技術インフォグラフィック

---

出力仕様

このスキルは常に次を出力します。

• 指定された完成版ポスター／画像アセット
• ユーザーが枚数やバリエーションを指定していない場合は、完成版ポスター／画像をちょうど1点

このスキルでは、次を出力してはなりません。

• HTMLまたはCSS
• 画像生成プロンプト
• デザインの説明
• 中間生成物

完成した画像のみを返します。

---

戦略の選択（厳格なルーティング）

ポスターデザイナーは、生成戦略の選択にあたり必須のルーティングルールを適用します。

これらのルールは上流のプランナーによる優先設定より優先され、回避してはなりません。

---

レイアウト優先が必須となる条件

次の条件のいずれかに該当する場合、レイアウト優先（HTMLベース）戦略を必ず使用してください。

• ポスターが告知、お知らせ、または正式なマイルストーンとして説明されている

• ポスターが、次のものを含むがこれらに限定されない、長期掲示を目的としている

  • README ファイル
  • 公式ウェブサイト
  • ドキュメントページ
  • コミュニティのお知らせ

• リクエストで、次の内容が明示または暗示されている

  • 構造化された情報
  • 明確な階層
  • 読みやすさ
  • セクション、段落、または複数のテキストブロック

• ポスターに、次のような意味上の役割が異なるテキストが複数含まれている

  • タイトル
  • 数値のハイライト
  • 説明文または描写文
  • 謝辞またはクレジット
  • フッターまたはメタ情報

これらの条件のいずれかを満たす場合：

• 直接画像生成を使用してはなりません
• タスクはレイアウト主導の成果物として扱う必要があります
• 完成画像の生成前に、HTMLベースの構成が必須です

---

レイアウト優先戦略（HTMLベース）

特徴

• 固定幅レイアウト（デフォルト：1080px）
• コンテンツに応じて高さを調整（高さをハードコードしない）
• 決定論的なタイポグラフィ、余白、配置
• 明確な読み順と視覚的階層
• コンテナ全体のスクリーンショットから完成版ポスター画像を生成

スクリーンショットに関する重要な要件

ブラウザーのスクリーンショットツールを使用する場合、ビューポートの幅をレイアウト幅（デフォルト：1080px）に合わせて明示的に設定し、出力ファイル名からポスターの用途が明確にわかるようにしてください。

目的

この戦略では、次を優先します。

• テキストの明瞭さと判読性
• 情報の階層
• 長期的な使いやすさと安定性

純粋に視覚的なシンボルではなく、情報を伝える成果物として機能するポスターには、この戦略をデフォルトで使用します。

---

画像優先戦略（直接画像生成）

使用上の制約

Image-first 戦略は、以下の条件をすべて満たす場合にのみ使用できます。

• ポスターに含まれる見出しが1つだけ、または数値のハイライトが1つだけである
• 補足テキストは最小限で装飾的であり、段落やセクションを含まない
• 情報の明確さよりも、雰囲気、感情、視覚的なインパクトを重視する依頼である
• ポスターが基調講演のKV、ローンチビジュアル、または象徴的な節目を表す画像に似ている

いずれかの条件を満たさない場合、Image-first 生成を使用してはいけません。

特徴

• 構図を軸にしたデザイン
• 映画のような照明と雰囲気
• テキストを構造化されたコンテンツではなく、グラフィック要素として扱う

---

ビジュアルデザインの原則

どの戦略でも、Poster Designer は以下の原則を徹底します。

• 装飾よりも構造を優先
• エフェクトよりも明瞭さを優先
• 抽象的な装飾よりも意味を伝えるビジュアルを優先

ポスターでは、以下を明確に伝える必要があります。

• ポスターが何を表しているか
• なぜそれが重要なのか
• 主なビジュアルの基点は何か

---

意味を伝えるビジュアルの基点

Poster Designer では、一般的な背景ではなく、分野固有のビジュアルの基点を取り入れます。

例：

• Docker の節目 → コンテナ、イメージレイヤー、レジストリからノードへのプルネットワーク
• 採用 → 構造化されたセクション、エンジニアリング環境、技術図
• 製品プラットフォーム → アーキテクチャ図、UI のような構成
• コミュニティの節目 → ノード、星座、グローバルネットワーク

意味を持たない純粋に抽象的な背景では不十分です。

---

タイポグラフィとテキストの扱い

• 見出し、補足テキスト、メタ情報の間に明確な階層を設ける
• テキストの量は選択した戦略に合わせる
• ポスターのサイズでテキストが読み取れるようにする
• 装飾効果によって可読性を損なわない

---

画像の使用

• 画像には明確な目的を持たせ、単なる埋め草として使わない
• 背景画像によってテキストの可読性を損なわない
• ポスター中央部のビジュアルは意味を補強する
• 競合する焦点を作らない

---

要素の重なりと視覚的な明瞭さの確認

最終スクリーンショットを撮る前に、以下を確認してください。

1. 重要なコンテンツが隠れていない

   • メインタイトル、重要な数値、主要な CTA がすべて見えている
   • 背景画像がテキストの可読性を妨げていない
   • 画像の上にテキストを配置するのは、隠れる画像領域が重要でない場合に限る

2. レイヤーの適切な管理

   • 固定位置の要素が中央のコンテンツを覆っていない
   • 装飾要素が意味を持つコンテンツを隠していない
   • z-index の高い要素（ツールチップ、ポップアップ、オーバーレイ）は、常時表示ではなくユーザーの操作で表示される

3. 視覚的な階層

   • 主なビジュアルの基点が一目でわかる
   • 見る人を混乱させるような、競合する焦点がない
   • 前景のコンテンツと背景の装飾が明確に分かれている

4. 画像上のテキストの安全性

   • 画像の上にテキストを配置する場合は、十分なコントラストを確保する
   • 可読性を損なうほど視覚的に情報量の多い領域には、テキストを配置しない
   • テキストの可読性を高めるために、不透明またはグラデーションのオーバーレイを使用してもよい

これらの確認項目を1つでも満たさない場合は、最終スクリーンショットを撮る前にポスターを調整してください。

---

品質基準

成功した出力は、以下の用途に適している必要があります。

• GitHub README バナー
• Docker Hub またはオープンソースの告知
• カンファレンスやミートアップのビジュアル
• 企業やコミュニティのソーシャル投稿

出力が以下のいずれかに似ている場合：

• ダッシュボードや分析画面のスクリーンショット
• ありきたりな AI マーケティング画像
• テキストを大まかに配置した抽象的な背景

その場合、このスキルは失敗です。

---

呼び出し例（概念）

「Xinference のDocker Hub ダウンロード数 5,000,000 件を祝う、格式ある節目の告知ポスターを作成してください。ポスターには、タイトル、目立つ数値のハイライト、説明文、謝辞、そして README や公式ウェブサイトに長期間掲載するのに適したフッター情報を含めてください。」

---

概要

Poster Designer は、意図を考慮し、ルールを適用するポスター生成スキルです。

情報量の多いポスターは決定論的なレイアウトを使用して生成し、画像の直接生成は最小限のビジュアルのみのユースケースに厳密に限定することを保証します。