mcpField
P
poster-design

poster-design

github.com/arnavpuriデザイン・UI17160 回インストール4 週間前に更新
リポジトリ

poster-design について

poster-designは、イベント、販促、告知、製品発表向けのポスターを作るデザインスキルです。通常はGeminiで画像を生成し、情報量が多い場合や編集可能にする場合はHTML/CSS/SVGを使ってPNG/PDFに出力できます。

主な機能

  1. 01Geminiによるポスター画像生成
  2. 02HTML/CSS/SVGで編集可能なポスター作成
  3. 03印刷サイズ・塗り足し・解像度の参照
  4. 04多様な構図と文字階層への対応
  5. 05ポスター情報と出力の確認

活用シーン

  1. 01イベントやコンサートのポスター制作
  2. 02セールや製品発表ポスターの作成
  3. 03印刷・デジタル配信用ポスターの準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/arnavpuri/designskills --skill poster-design

インストール後、Claude Code で/poster-designを入力して読み込まれたか確認します。

詳細

ポスターのデザイン

イベント、プロモーション、告知、製品発売向けの目を引くポスターを作成します。デフォルトでは、適切な比率と解像度の Gemini 生成画像を出力します。コピーが多い場合や編集可能な状態を保つ必要がある場合は、HTML/CSS/SVG を使用してから PNG/PDF にレンダリングします。

ステップ 1：デザインコンテキストを読み込む

  1. 最初に .agents/design-context.md を読みます。ブランドカラー（hex）、フォント、スタイルの類型を確認します
  2. ファイルがない場合は、design-context のデフォルトのフォールバックを使用し、デフォルト設定を使用したことをユーザーに伝えます
  3. ポスターはほかの形式よりも自由な創作が可能なことが多いですが、ブランドカラーとフォントはデザインの軸にします

Gemini 画像生成の手順

パイプライン／CLI：image-generation。プロンプトの作成、トリミング、テキストオーバーレイのフォールバックについては、graphic-design のステップ 3 を参照してください。

  1. ステップ 2 の表から Gemini の比率を選びます。印刷用には --size 4K、デジタル用には 2K を使用します
  2. 余白を指定します：「すべてのテキストを各端から少なくとも 5% 内側に配置してください」。これにより、断裁と塗り足しに備えられます
  3. 出力された PNG を読み取り、イベント名、日付、時刻、会場、価格、URL を一文字ずつ確認します。日付の誤りはポスターの価値を損ないます。問題がある場合は、追加のやり取りごとに 1 つずつ修正します。小さな文字が何度も崩れる場合は、コードでオーバーレイして配置します
プロンプトの例
  • イベントポスター：「[event name] のイベントポスターを作成してください。[color palette] を使った [style] のデザイン。上部に大きく目立つ文字で '[event name]' と配置。下部に日付 '[date]' と会場 '[venue]' を配置。」
  • コンサートポスター：「[venue] で開催される [artist/band] のコンサートポスターを作成してください。[neon/vibrant] のアクセントカラーを使った暗い背景。アーティスト名は太いコンデンスト書体で。かすれた質感のオーバーレイ。下部に日付とチケット情報。」
  • セールチラシ：「セール告知ポスターを作成してください。'[discount]% OFF' を [color] で最も目立つ要素として配置。下部に商品画像。緊急性を訴えるテキスト '[deadline]' をバナー帯に配置。すっきりとした活気ある小売レイアウト。」

ステップ 2：ポスターの種類と寸法を決める

標準寸法
形式印刷サイズ300 DPI 時のピクセル数（断裁サイズ）Gemini の比率用途
A4 縦210 x 297mm2480 x 35082:3 または 3:4、その後トリミング標準的なチラシ
A3 縦297 x 420mm3508 x 49612:3 または 3:4、その後トリミング大型ポスター
US レター8.5 x 11in2550 x 33003:4、その後トリミング標準的な米国向けチラシ
US タブロイド11 x 17in3300 x 51002:3、その後トリミング大型の米国向けポスター
18 x 24in18 x 24in5400 x 72003:4標準的なポスター
24 x 36in24 x 36in7200 x 108002:3大型ポスター
Web ポスターN/A800 x 12002:3デジタル配布
ソーシャルポスターN/A1080 x 13504:5Instagram 縦向き

（72 DPI の場合、A4 は 595 x 842、レターは 612 x 792 です。画面でのプレビュー専用です。）

印刷仕様
  • **塗り足し：**背景を各辺の断裁位置から、メートル法では 3mm、米国単位では 0.125in 延長します。塗り足し込みの A4 は 216 x 303mm = 2551 x 3579px（300 DPI）です。Gemini の出力は断裁サイズではなく、塗り足し込みのサイズにトリミングします
  • **安全マージン：**テキストとロゴは断裁位置から少なくとも 3～5mm（0.125～0.25in）内側に配置します
  • **解像度：**手に持って見るチラシでは、最終サイズで 300 DPI にします。1m 以上離れて見る大型ポスターなら 150～200 DPI で問題ありません。Gemini 4K は長辺が約 4K px までなので、A4／レターでは約 300 DPI、A3／タブロイドでは約 200 DPI に十分です。18 x 24in 以上の場合は、アップスケールするか、ベクター／コードで作り直します
  • **カラー：**Gemini とブラウザーの出力は RGB です。RGB の PDF を受け付けるか印刷業者に確認します。CMYK が必要な場合は、印刷業者の ICC プロファイルを使って（Pillow の ImageCms またはレイアウトツールで）変換し、特に色の変化が大きい鮮やかな青や緑を再確認します
  • DPI メタデータの設定：img.save("poster.png", dpi=(300, 300))。品質を決めるのはメタデータではなくピクセル数です
  • **見やすい距離：**見出しの文字の高さは、見る距離 10 フィート（3m）ごとに約 1 インチ（25mm）を目安にします

ステップ 3：構成のフレームワークを選ぶ

Zパターン

視線は自然にZ字を描くように動きます。明確な読み順があるポスターに最適です。

[Logo/Brand].............[Date]
.............................
......[MAIN VISUAL].........
.............................
[Details]...........[CTA/URL]

配置：

  • 左上：ブランドマーク／識別要素
  • 右上：重要な日付またはラベル
  • 中央：メインビジュアル／見出し
  • 左下：イベントの詳細
  • 右下：CTAまたはチケットへのリンク
フォーカルポイント（中央配置）

すべての要素を1つの中心点から放射状に配置します。大胆でグラフィックなポスターに最適です。

         [Decorative Top]
     -------------------------
     |                       |
     |    [MAIN HEADLINE]    |
     |    [Visual Element]   |
     |    [Subheadline]      |
     |                       |
     -------------------------
         [Details / Footer]
レイヤー／オーバーラップ

要素を重ねて奥行きを生み出します。躍動感のあるモダンなポスターに最適です。

Background layer:  Full-bleed gradient or image
Middle layer:      Large transparent text or shape
Content layer:     Headline + details on semi-transparent card
Top layer:         Decorative accents, floating elements
分割構成

キャンバスを2つの異なるゾーン（垂直または斜め）に分割します。

[Image/Visual Half] | [Text/Info Half]

または斜めに分割します：

.poster { position: relative; }
.visual-half {
  clip-path: polygon(0 0, 65% 0, 45% 100%, 0 100%);
  position: absolute; inset: 0;
}
.text-half {
  clip-path: polygon(65% 0, 100% 0, 100% 100%, 45% 100%);
  position: absolute; inset: 0;
}
グリッドベース

見える、または見えないグリッドを使った構造的なレイアウトです。情報量の多いポスターに最適です。

.poster-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 40px;
}
.poster-grid .headline { grid-column: 1 / -1; }
.poster-grid .visual { grid-column: 1; }
.poster-grid .details { grid-column: 2; }
.poster-grid .footer { grid-column: 1 / -1; }

ステップ4：ポスターのタイポグラフィ階層

ポスターでは、極めて明確なタイポグラフィ階層が必要です。見出しは、物理的な距離からでもスクロール中でも読み取れる大きさにします。

4段階の階層
/* Fixed-size poster canvas: set `container-type: inline-size` on .poster so cqw
   scales with the poster width, not the browser window */
/* Level 1: Display / Headline -- the hook */
.poster-headline {
  font-family: var(--font-heading);
  font-size: clamp(48px, 10cqw, 160px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase; /* optional, depends on style */
}

/* Level 2: Subheadline -- context */
.poster-subheadline {
  font-family: var(--font-heading);
  font-size: clamp(20px, 4cqw, 48px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* Level 3: Body / Details -- the specifics */
.poster-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 2.2cqw, 24px);
  font-weight: 400;
  line-height: 1.5;
}

/* Level 4: Fine print / Meta -- secondary info */
.poster-meta {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.5cqw, 16px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
ポスターのタイポグラフィ表現
/* Stacked headline -- each word on its own line */
.stacked-headline {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}
.stacked-headline span {
  display: block;
}
.stacked-headline span:nth-child(odd) {
  font-style: italic;
  font-weight: 300;
}

/* Mixed weight headline */
.mixed-weight span.light { font-weight: 300; }
.mixed-weight span.bold { font-weight: 800; }

/* Oversized first letter */
.drop-cap::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  font-weight: 800;
}

/* Knockout text (text reveals background) */
.knockout-text {
  background: url('texture.jpg') center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

ステップ5：背景のテクニック

グラデーションメッシュ
.gradient-mesh {
  background:
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
    radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.4) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(34, 197, 94, 0.3) 0%, transparent 50%),
    radial-gradient(at 0% 100%, rgba(245, 158, 11, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, #0F172A, #1E293B);
}
グラデーションを重ねた写真
.photo-bg {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.8) 100%),
    url('event-photo.jpg') center/cover;
}
幾何学模様
.geo-pattern {
  background-color: var(--primary);
  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%),
    linear-gradient(30deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
}
ノイズテクスチャのオーバーレイ
<svg style="position:absolute;inset:0;width:100%;height:100%;opacity:0.06;pointer-events:none;">
  <filter id="noiseFilter">
    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
  </filter>
  <rect width="100%" height="100%" filter="url(#noiseFilter)"/>
</svg>
網点効果（レトロ）
<svg style="position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;opacity:0.15;">
  <pattern id="halftone" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
    <circle cx="3" cy="3" r="1.5" fill="currentColor"/>
  </pattern>
  <rect width="100%" height="100%" fill="url(#halftone)"/>
</svg>

ステップ6：イベント情報のレイアウト

イベント情報の基本ブロック
<div class="event-details">
  <div class="detail-row">
    <span class="detail-icon">&#x1F4C5;</span>
    <div>
      <strong>Saturday, March 28, 2026</strong>
      <span>Doors open 7:00 PM</span>
    </div>
  </div>
  <div class="detail-row">
    <span class="detail-icon">&#x1F4CD;</span>
    <div>
      <strong>The Grand Hall</strong>
      <span>123 Main Street, San Francisco, CA</span>
    </div>
  </div>
  <div class="detail-row">
    <span class="detail-icon">&#x1F3AB;</span>
    <div>
      <strong>$25 Early Bird / $35 Door</strong>
      <span>tickets.example.com</span>
    </div>
  </div>
</div>

.event-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.detail-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
ポスター用CTAボタン
.poster-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
}
/* Print: a CTA is a label, not a button -- pair it with a short URL or QR code (min ~2cm) */

ステップ7：スタイルのバリエーション

コンサート／音楽ポスター
  • 暗い背景（黒、濃い紫、ネイビー）
  • コントラストの高いネオンカラーまたは鮮やかなアクセントカラー
  • アーティスト名を最も目立つ大きさで配置
  • かすれた質感、またはグランジ風のテクスチャ
  • 装飾要素：音波、スピーカー、レコード
  • タイポグラフィ：太字のコンデンスサンセリフ体またはディスプレイフォント
テックイベント／カンファレンス
  • すっきりとしたモダンなグラデーション背景
  • 幾何学図形や抽象的なパターン
  • 円形フレームに入れた登壇者の顔写真
  • テクノロジーをテーマにした装飾要素（回路パターン、コードの断片）
  • タイポグラフィ：すっきりとしたサンセリフ体、詳細には等幅フォント
  • 色：青、紫、ティール
セール／プロモーション
  • 明るく、人目を引く色（赤、黄、オレンジ）
  • 割引率を最も大きな要素として配置
  • 「SALE」の文字を太字で目立たせる
  • 緊急性を伝える表示（「期間限定」、カウントダウン）
  • すっきりとした商品画像
  • タイポグラフィ：数字にはインパクトのあるコンデンス太字、詳細にはすっきりとしたサンセリフ体
製品ローンチ
  • 製品画像をメインビジュアルとして配置（大きく、明るく照らす）
  • テキストは最小限にして、製品そのものを主役にする
  • 高級感のあるグラデーション背景
  • 発売日を目立たせる
  • 製品の周囲に控えめなグロー効果
  • タイポグラフィ：優雅で、字間を広く取ったモダンな書体
ミニマルなイベント
  • メインカラー1色と白または黒
  • 余白をたっぷり取る
  • タイポグラフィを主役にする――テキストそのものがデザインです
  • 細い線や幾何学的なアクセント
  • 必要な情報のみを載せ、装飾は加えない
  • 洗練された、ギャラリーのような美しさ
ビンテージ／レトロイベント
  • 温かみのあるカラーパレット（#C84B31、#F4E8C1、#2D1B00）
  • 網点パターン
  • セリフ体またはスラブセリフ体のタイポグラフィ
  • 古びた紙のテクスチャを使った背景
  • 枠線や装飾的な仕切り線
  • かすれや粗いエッジの効果

ステップ8：装飾要素

/* Gradient rule */
.divider { height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); margin: 24px 0; }
/* Ornamental divider: lines either side of a centered label */
.ornament-divider { display: flex; align-items: center; gap: 16px; }
.ornament-divider::before, .ornament-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.3; }
/* Blurred floating shapes behind content */
.floating-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.2; pointer-events: none; }
/* Inset border frame (keep it inside the safe margin for print) */
.poster-frame { position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; pointer-events: none; }

品質チェックリスト

  • 見出しは離れた場所からでも読める（大きく、太字で、コントラストが高い）
  • 視覚的な階層が明確：見出し > サブ見出し > 詳細 > メタ情報
  • 必要な情報が揃っている：内容、日時、場所、方法（イベントの場合）
  • 背景が適切な雰囲気やトーンを演出している
  • design-context のブランドカラーとフォントが適用されている
  • 構成が明確な枠組み（Z、フォーカル、分割、またはグリッド）に沿っている
  • 余白が十分にあり、窮屈に感じない
  • 装飾要素が内容を引き立て、競合していない
  • 寸法が想定する出力形式に合っている。印刷用ファイルには塗り足しが含まれ、目標DPIを満たしている
  • 出力されたPNGを読み取った：すべての日付、時刻、会場、価格、URLが正確である
  • コードを使用した場合、出力は自己完結型のHTML/CSSである

コメント

Markdown 対応