graphic-design

グラフィックデザイン

魅力的なビジュアルグラフィックを生成するための主要なスキルです。2 つの出力モードに対応しています。

1. AI 画像生成（デフォルト）— Gemini 3.1 Flash Image Preview を使用して、プロンプトや参照画像からピクセル単位で精密なグラフィックを生成します
2. コード生成 — Web ネイティブのグラフィック向けに、本番環境ですぐに使える HTML/CSS/SVG を作成します

SNS 投稿、ポスター、広告、リッチなビジュアルには AI 生成を選びます。インタラクティブな Web グラフィック、アニメーション要素、または編集可能な HTML 形式での出力が必要な場合は、コードを選びます。

---

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

デザイン作業を始める前に：

1. まず .agents/design-context.md を読み込みます。主要色、サブカラー、アクセントカラー（hex）、見出しと本文のフォント、スタイルのアーキタイプを抽出します
2. ファイルが存在しない場合は、design-context のデフォルトのフォールバックを使用し、出力にはデフォルトを使用していることをユーザーに伝えます。ブランドイメージに合った結果を得るため、design-context の実行を提案します

---

ステップ 2：依頼内容を分析する

グラフィックの目的を特定します。

意図	アプローチ	主要な要素
プロモーション	大胆で目を引くデザイン	大きな見出し、CTA、製品画像
情報提供	明確な階層、読みやすさ	構造化されたコンテンツ、アイコン、データ
感情訴求	雰囲気を重視	写真、色のムード、最小限のテキスト
祝賀	活気があり、華やか	動きのある図形、鮮やかな色、紙吹雪／パーティクル
告知	すっきりとして信頼感のあるデザイン	日付／詳細を目立たせる、プロフェッショナルな印象
ブランド認知	ブランドイメージに沿った、記憶に残るデザイン	ロゴを目立たせる、ブランドカラーを中心に使用

必要な要素を特定します。

• 見出しテキスト
• サブ見出しまたは補足テキスト
• 製品画像または視覚的な焦点
• CTA またはアクションテキスト
• ブランド要素（ロゴ、色）
• 寸法／アスペクト比

---

ステップ 2b：製品画像を分析する（提供されている場合）

1. 主要な色を特定する -- 画像から重要な色を 3～5 色抽出します
2. 構図を評価する -- 被写体の位置と、余白の位置を確認します
3. 雰囲気を判断する -- 暖色／寒色、活気のある／落ち着いた、豪華／カジュアル
4. 色の組み合わせ方を選ぶ： 調和（画像の色を再利用）、コントラスト（補色で引き立たせる）、またはモノクローム（彩度を下げてブランドカラーを重ねる）

---

ステップ 3：Gemini 画像生成の手順（デフォルト）

出力を編集可能な HTML にする必要がある場合、アニメーションが必要な場合、または長文／正確な文言を含める場合（その場合はステップ 7 を使用）を除き、この手順を使用します。API と CLI の詳細は image-generation にあります。ここではデザインを扱います。ステップ 4～6 で決めた構図、色、タイポグラフィを取り入れます。

プロンプトを作成する

キーワードを並べるのではなく、場面を物語のように描写します。 正確な文言は二重引用符で囲み、hex コードを使い、空間的なレイアウトを説明し、スタイルを明示して、含めない要素を指定します（完全なチェックリストは image-generation のステップ 2 を参照）。

Create a [style] [format] for [purpose].
Scene: [foreground, background, how elements are arranged]
Colors: ["navy blue #1a2b4a background with coral #ff6b6b accents"]
Typography: [large bold sans-serif headline "[TEXT]" in white, upper third]
Mood: [energetic, calm, professional, playful]
Exclude: [no borders, no clip art, no extra text]

製品画像がある場合は、--image product.png で渡します：

この製品を、鮮やかなグラデーション背景（#1a2b4a から #ff6b6b）に配置してください。製品本体、ラベル、ロゴは写真とまったく同じに保ちます。上部に白い太字のサンセリフ体で、大きな見出し「NEW ARRIVAL」を追加します。幾何学的なアクセント図形を加えます。

対応アスペクト比を選び、正確なピクセルサイズに切り抜く

Gemini が出力するのは 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9, 1:4, 4:1, 1:8, 8:1 のみです。プロンプトにピクセルサイズを指定しても、そのサイズでの出力は期待できません。その他のサイズ（1200x628、300x250、A4 など）では、最も近い比率で生成し、--resize で中央を切り抜いてリサイズします。

python <image-generation>/scripts/gemini-generate.py --prompt-file prompt.txt --aspect-ratio 16:9 --size 2K \
  --resize 1200x628 --output graphic.png

• 切り抜き後も残る範囲内にテキストと主要な被写体を収めるよう Gemini に指示します（「すべてのテキストを中央の 80% の範囲内に収める」）
• 画面表示用には --size 2K、印刷物や大きな配置用には 4K を使用します
• 1 つの元画像から複数サイズを作成する場合：--resize を指定せずに 1 回生成し、その後 python <image-generation>/scripts/export-sizes.py master.png --group social --out exports/ を実行します（SNS、広告、動画向けのプリセットがあります。--focus x,y を指定すると被写体をフレーム内に保てます）

確認してから、調整する

確認していない画像を納品しないでください。

1. 出力された PNG を読み取ります。 次の点を確認します。すべての単語のスペルが指示どおりであること、表示されるサイズでテキストが読みやすいこと、ブランドカラーが正しいこと、明確な焦点が 1 つあること、重要なものがトリミングされた領域や UI が重なる領域にないこと、製品やロゴが歪んでいないこと
2. 1 回のターンにつき、修正する問題は 1 つだけです -- --image graphic.png --prompt 'Change "EVERYTHNG" to "EVERYTHING". Change nothing else.' -- 修正後、結果をもう一度読み取ります
3. テキストの修正に 2 回失敗したら、「テキストなしで、上部 3 分の 1 は空けて」と指定して再生成し、コピーをコードオーバーレイとして追加します。

<style>body{margin:0}</style>
<div class="canvas" style="width:1200px;height:628px;position:relative;background:url('visual.png') center/cover;">
  <h1 class="headline" style="position:absolute;left:64px;top:56px;max-width:60%;color:#fff;">NEW ARRIVAL</h1>
</div>

node <graphic-design>/scripts/render.mjs overlay.html --size 1200x628 --out final.png   # add --scale 2 for retina

<graphic-design> はこのスキルのディレクトリです。スクリプトは Web フォントの読み込みを待ち、指定されたサイズどおりに出力します。また、コンテンツがキャンバスからはみ出した場合（テキストが切れている場合）は、警告を表示して終了コード 3 で終了します。その後、final.png を読み取って確認します。

---

ステップ 4：構図の原則を適用する

三分割法

キャンバスを 3×3 のグリッドに分割します。主要な要素は中央のマスではなく、4 つの線の交点（33%／67%）に配置します。

/* Focal point centered on the upper-left power point */
.focal-point {
  position: absolute;
  left: 33.33%;
  top: 33.33%;
  transform: translate(-50%, -50%);
}

黄金比（1:1.618）

要素間のサイズの比率に使用します。

• 見出しが 48px の場合、小見出しは約 30px（48 / 1.618）にします
• メインコンテンツ領域が 600px の場合、サイドバー／アクセント領域は約 370px にします

焦点の階層

すべてのグラフィックに、明確な焦点が 1 つ必要です。重要度に応じて階層化します。

1. 主焦点 -- 最初に目を引く要素（最も大きく、コントラストが最も強い）
2. 二次要素 -- 補足情報（中程度のサイズ、中程度のコントラスト）
3. 三次要素 -- 細かい注記、ロゴ、装飾（最も小さく、コントラストが最も弱い）

Z パターン（テキストが多いグラフィック向け）

視線の動き：左上 -> 右上 -> 左下へ斜めに移動 -> 右下

F パターン（情報量の多いレイアウト向け）

視線は上部を横方向に走査してから下へ移動し、より短い横方向の行を走査します。

---

ステップ 5：配色の選択

デザインのコンテキストに合った色から始め、次の方法を適用します。

補色による強調

Primary + its complement for maximum contrast
Use 60-30-10 rule: 60% dominant, 30% secondary, 10% accent

グラデーションの手法

/* Smooth multi-stop gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Mesh-style gradient (multiple radials) */
background:
  radial-gradient(at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
  radial-gradient(at 80% 20%, rgba(255, 119, 115, 0.3) 0%, transparent 50%),
  radial-gradient(at 50% 50%, rgba(76, 29, 149, 1) 0%, rgba(15, 23, 42, 1) 100%);

/* Conic gradient for unique effects */
background: conic-gradient(from 45deg, #12c2e9, #c471ed, #f64f59, #12c2e9);

/* Animated gradient */
background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

画像へのカラーオーバーレイ

.image-with-overlay {
  position: relative;
}
.image-with-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.7), rgba(124, 58, 237, 0.7));
  mix-blend-mode: multiply;
}

---

ステップ 6：タイポグラフィの処理

見出しの階層

/* Display headline -- the main event */
.headline {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 8cqw, 5rem); /* cqw = % of .canvas width, not the browser window */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Subheadline -- supporting context */
.subheadline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.85;
}

/* Detail text -- dates, fine print */
.detail {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

テキストエフェクト

• グラデーションテキスト：background: linear-gradient(...) + background-clip: text + -webkit-text-fill-color: transparent
• アウトラインテキスト：-webkit-text-stroke: 2px currentColor + -webkit-text-fill-color: transparent
• 発光テキスト：ぼかし／広がりを段階的に強め、不透明度を段階的に下げた複数レイヤーの text-shadow
• エンボス加工：透明な色 + 明るい text-shadow + 暗い bg-clip テキスト
• 奥行き／3D テキスト：徐々に暗くなる色合いの text-shadow を 1px ずつずらして重ねます

---

ステップ 7：コード出力の方法

出力の構成

コードを使用する方法を選んだ場合（編集可能、アニメーション付き、またはテキスト量の多い出力）、CSS を埋め込んだ自己完結型の HTML ファイルを生成します。ヘッドレス Chromium で正確なサイズの PNG にレンダリングし（ステップ 3 を参照）、納品前にスクリーンショットを読み取ります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=[HeadingFont]:wght@700;800&family=[BodyFont]:wght@400;500&display=swap" rel="stylesheet">
  <style>
    /* Reset and canvas setup */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    .canvas {
      width: [WIDTH]px;
      height: [HEIGHT]px;
      position: relative;
      overflow: hidden;
      container-type: inline-size; /* enables cqw units inside */
      /* Background, gradients, etc. */
    }

    /* Layer structure */
    .background-layer { /* gradients, patterns, images */ }
    .content-layer { /* text, CTAs, key elements */ }
    .decoration-layer { /* shapes, accents, overlays */ }
  </style>
</head>
<body>
  <div class="canvas">
    <div class="background-layer">...</div>
    <div class="content-layer">...</div>
    <div class="decoration-layer">...</div>
  </div>
</body>
</html>

高度な CSS の手法

clip-path を使ったクリエイティブな図形

/* Diagonal section */
.diagonal { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }

/* Blob shape */
.blob { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }

/* Circle reveal */
.circle-reveal { clip-path: circle(40% at 50% 50%); }

/* Custom wave */
.wave-bottom {
  clip-path: path('M0,200 C150,250 350,150 500,200 L500,0 L0,0 Z');
}

グラスモーフィズム

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

画像の統合に使うブレンドモード

.image-overlay {
  background-image: url('product.jpg');
  background-size: cover;
  background-blend-mode: overlay; /* or multiply, screen, soft-light */
  background-color: rgba(37, 99, 235, 0.5);
}

SVG フィルター

インラインの <svg> と <filter> を使用して、ノイズ（feTurbulence + feColorMatrix + feBlend multiply）や発光（feGaussianBlur + feMerge）を作成します。

装飾要素

• 浮遊する円：絶対位置に配置し、ラジアルグラデーションと filter: blur(40px) を適用します
• グリッド／ドットパターン：不透明度を低くした linear-gradient または radial-gradient と、小さな background-size を使って background-image を設定します

控えめなアニメーション

• 浮遊：translateY(0 -> -10px -> 0) を 4s の ease-in-out で無限に繰り返します
• パルス発光：box-shadow の強さを 2～3s 間隔で交互に変化させます
• シマー：background-size を 200% にした線形グラデーションを使用し、background-position を -200% から 200% までアニメーションさせます

---

ステップ 8：スタイル別のフレームワーク

コードを使用する場合の出発点です。Gemini では、同じ指示をプロンプトに反映してください（image-generation のスタイルパターンを参照）。

/* Minimalist: single accent, generous whitespace, thin rules, max 2 colors + neutrals */
.minimalist-canvas { background: #FAFAFA; padding: 60px; }
.minimalist-canvas .headline { font-size: 3rem; font-weight: 300; color: #171717; letter-spacing: -0.03em; }

/* Bold / Vibrant: saturated gradients, oversized type, geometric overlays */
.bold-canvas { background: linear-gradient(135deg, #FF6B6B, #FFE66D); }
.bold-canvas .headline { font-size: 5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; }

/* Luxurious: dark ground, gold accents, serif, refined spacing */
.luxury-canvas { background: #0A0A0A; color: #F5F0E8; }
.luxury-canvas .headline { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 400; letter-spacing: 0.05em; }
.luxury-canvas .accent { color: #D4AF37; border: 1px solid rgba(212, 175, 55, 0.3); }

/* Playful: bright colors, rounded everything, organic shapes */
.playful-canvas { background: #FFF8F0; border-radius: 24px; }
.playful-canvas .headline { font-family: 'Fredoka', sans-serif; font-size: 3rem; color: #E03E3E; transform: rotate(-2deg); }

/* Corporate: blue/gray palette, structured 12-column grid, clean data */
.corporate-canvas { background: #FFFFFF; font-family: 'Inter', sans-serif; }
.corporate-canvas .headline { font-size: 2.5rem; font-weight: 700; color: #1E3A5F; }

/* Retro: warm palette #C84B31 #2D1B00 #F4E8C1 #ECDBBA, halftone (SVG), distressed texture */
.retro-canvas { background: #F4E8C1; color: #2D1B00; }
.retro-canvas .headline { font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 900; }

/* Brutalist: B&W, raw borders, monospace, visible grid, overlapping elements */
.brutalist-canvas { background: #FFFFFF; border: 4px solid #000000; }
.brutalist-canvas .headline {
  font-family: 'Space Mono', monospace; font-size: 4rem; font-weight: 700; text-transform: uppercase;
  color: #FFFFFF; mix-blend-mode: difference; /* white + difference = black on white, inverts over black blocks */
}

---

ステップ 9：品質チェックリスト

グラフィックを納品する前に、次の項目を確認してください。

• 色がデザインコンテキストのパレットと一致している
• 指定されたフォントを使用している（必要に応じて Google Fonts から読み込み済み）
• 明確な視覚的階層があり、最初にどこを見ればよいかがひと目でわかる
• テキストのコントラストが WCAG 2.x を満たしている：通常のテキストは 4.5:1、大きなテキスト（>=24px、または太字で >=18.66px）および CTA ボタンなどの UI 形状は 3:1
• 適切な余白があり、窮屈に感じる箇所がない
• 寸法が指定されたサイズと一致している
• 生成画像：出力 PNG を Read し、すべての単語を確認済み。指定ピクセルに合わせた切り抜きも完了している
• コード出力：フォントを除き自己完結している。レンダリングしたスクリーンショットを Read して確認済み
• 装飾要素がデザインを引き立てており、注意をそらしていない
• デザインが意図したスタイルの類型と一致している
• すべてのテキスト内容が正確で、スペルミスがない

---

プロのヒント

1. 背景から始める -- コンテンツを追加する前に、まず雰囲気を整えます
2. 不透明度を活用する -- 不透明度 0.05～0.15 の図形は、注意をそらさずに奥行きを生み出します
3. グラデーションを重ねる -- 半透明のグラデーションを複数重ねると、豊かで独自性のある背景になります
4. パレットを絞る -- ほとんどのグラフィックでは、ニュートラルカラーに加えて最大 3 色にします
5. サイズでコントラストをつける -- 見出しを本文の少なくとも 3 倍の大きさにします
6. 余白もデザインの一部です -- 空白は無駄なスペースではなく、ゆとりを生み出します
7. 実寸でテストする -- HTML ファイルを開き、100% 表示で読みやすさを確認します
8. CSS カスタムプロパティを使う -- 色を一度だけ定義し、全体で参照して一貫性を保ちます