infographic

インフォグラフィックのデザイン

魅力的なデータビジュアライゼーションやインフォグラフィックを作成します。数値、プロセス、比較を、視覚的に訴えるグラフィックに変換します。

パスの選択： Gemini が生成するチャートの形状や数値は説明用であり、正確ではありません。棒の高さはデータと一致せず、数字も崩れてしまいます。実データをプロットするグラフィックや、短いテキストラベルが約8個を超えるグラフィックには、HTML/CSS/SVG を使用してください。Gemini は、テキストが少ないイラスト中心の作品（アイコン、シーン、少数の大きな数値など）に使用するか、Gemini でイラストを生成し、その周りにコードでデータをレイアウトしてください。

---

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

1. まず .agents/design-context.md を読みます。ブランドカラー（16進数）、フォント、スタイルの類型を確認します
2. ファイルがない場合は、design-context のデフォルトのフォールバックを使用し、デフォルトを使用したことをユーザーに伝えます
3. インフォグラフィックでは、データカテゴリに一貫したカラーシステムを使用することが重要です

---

Gemini 画像生成パス

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

1. アスペクト比：縦向き（Pinterest 風）には 2:3 または 9:16、縦長スクロールには 1:4、フィードには 4:5 または 1:1、スライドには 16:9 を使用します。--size 2K または 4K を使用してください。縦長のアスペクト比ではテキストが小さくなります
2. 数値とラベルはすべて正確に引用し、短いラベルは約8個までにします。長いインフォグラフィックはセクションごとに分けて生成し、コードで縦に連結します
3. 出力 PNG を読み込み、すべての数値、ラベル、単位を元データと照合します。不一致はすべて不具合です。次のターンで修正するか、そのテキストをコードオーバーレイに移してください

プロンプト例

• 統計インフォグラフィック： 「[トピック]の統計を示すインフォグラフィックを作成してください。アイコンとともに大きな数値で表示する主要指標は[number]個。[カラーパレット]の配色。セクション見出しを含む、すっきりとしたグリッドレイアウト。プロフェッショナルで、データを重視したデザイン。」
• プロセスフロー： 「[プロセス名]のプロセスフローを示すインフォグラフィックを作成してください。矢印でつないだ[number]個のステップ。各ステップにはアイコン、タイトル、1行の説明を付けます。最初から最後まで[color]のグラデーションで色を変化させます。縦向きのレイアウトで、モダンなスタイル。」
• タイムライン： 「[主題]のタイムラインを示すインフォグラフィックを作成してください。[start year]年から[end year]年までの[number]個のマイルストーン。縦線に沿って左右交互に配置します。[color palette]を使用します。各ポイントに主要な日付と簡潔な説明を付けます。」

---

ステップ 2：インフォグラフィックの種類を特定する

種類	最適な用途	レイアウト
プロセスフロー	手順を段階的に示す	水平または垂直の連鎖
比較	2つ以上の選択肢	列または分割レイアウト
統計	主要な数値と指標	統計カードのグリッド
タイムライン	時系列の出来事	垂直または水平の線
リスト／ランキング	上位 N 項目	番号付きの垂直リスト
データチャート	定量データ	SVG を使った棒、円、折れ線グラフ
アイコングリッド	カテゴリの概要	アイコンとラベルの組み合わせを並べたグリッド

---

ステップ 3：カラーコーディングシステム

体系的に色を割り当てます。データカテゴリにランダムな色を使用しないでください。

パレットの種類

/* Sequential (ordered data) */
:root { --data-1: #EFF6FF; --data-2: #BFDBFE; --data-3: #60A5FA; --data-4: #2563EB; --data-5: #1E40AF; }

/* Categorical (distinct categories) */
:root { --cat-a: #6366F1; --cat-b: #EC4899; --cat-c: #F59E0B; --cat-d: #10B981; --cat-e: #8B5CF6; --cat-f: #EF4444; }

/* Diverging (positive/negative) */
:root { --neg-strong: #EF4444; --neg-light: #FCA5A5; --neutral: #E5E7EB; --pos-light: #86EFAC; --pos-strong: #22C55E; }

色のルール

• 最も重要なデータポイントには、ブランドのプライマリカラーを使用します
• 文脈やベースラインのデータには、ニュートラルカラー（グレースケール）を使用します
• チャートの要素（棒、線、スライス）は、背景および隣接する要素に対して 3:1 のコントラストが必要です（WCAG 1.4.11）。明るいパレットの色（例：--data-1、--cat-c のアンバー）は白背景では基準を満たしません。濃いアウトラインを追加するか、暗い背景でのみ使用してください
• テキストには 4.5:1 のコントラストが必要です（24px 以上、または太字で 18.66px 以上の場合は 3:1）
• 色だけに頼らないでください。系列に直接ラベルを付けるか、パターンやアイコンを追加します（WCAG 1.4.1）
• 1つのチャートで使用する異なる色は最大6色までです

---

ステップ 4：プロセスフロー図

水平プロセスフロー

.process-flow { display: flex; align-items: flex-start; gap: 0; padding: 40px; }
.step { flex: 1; text-align: center; position: relative; padding: 0 20px; }
.step-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; margin: 0 auto 16px; position: relative; z-index: 2;
}
.step-connector {
  position: absolute; top: 24px; left: calc(50% + 24px); right: calc(-50% + 24px);
  height: 2px; background: var(--primary); opacity: 0.3; z-index: 1;
}
.step:last-child .step-connector { display: none; }

垂直プロセスフロー

接続線には、flex-direction: column と、アイテムの左側に絶対配置する ::before 疑似要素を使用します。

---

ステップ 5：比較チャート

横並びの機能比較

.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.comparison-table thead th { padding: 20px; font-size: 18px; font-weight: 700; text-align: center; border-bottom: 2px solid #E5E7EB; }
.comparison-table thead th.highlighted { background: var(--primary); color: #fff; border-radius: 12px 12px 0 0; }
.comparison-table td { padding: 14px 20px; text-align: center; border-bottom: 1px solid #F3F4F6; font-size: 14px; }
.check { color: #15803D; } .cross { color: #6B7280; } /* >=3:1 on white; pair with ✓/✗ glyphs, not color alone */

対決形式の比較

3列のグリッドを使用します。grid-template-columns: 1fr auto 1fr を設定し、2つの選択肢カードの間に大きな「VS」要素を中央配置します。

ステップ 6：統計と数値のハイライト

大きな数値カード

.stat-card { text-align: center; padding: 32px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.stat-number {
  font-size: 56px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; margin-bottom: 8px;
}
.stat-label { font-size: 14px; font-weight: 500; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.05em; }

進捗インジケーター

/* Percentage bar */
.percent-bar { height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.percent-bar .fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 4px; animation: fillBar 1.5s ease-out; }
@keyframes fillBar { from { width: 0; } }

/* Circular progress - conic-gradient; set a unitless --progress, e.g. style="--progress: 72" */
.circle-progress {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--primary) 0deg, var(--primary) calc(var(--progress) * 3.6deg), #E5E7EB calc(var(--progress) * 3.6deg));
  display: flex; align-items: center; justify-content: center;
}

---

ステップ 7：タイムラインのインフォグラフィック

縦型タイムライン

.timeline { position: relative; padding: 20px 0; max-width: 600px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--primary), var(--primary), transparent);
  transform: translateX(-50%);
}
.timeline-item { display: flex; align-items: flex-start; margin-bottom: 40px; position: relative; }
.timeline-item:nth-child(odd) { padding-right: calc(50% + 30px); text-align: right; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; padding-left: calc(50% + 30px); text-align: left; }
.timeline-dot {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--primary);
  border: 3px solid var(--bg-color); z-index: 2;
}
.timeline-content { padding: 16px 20px; background: rgba(255,255,255,0.05); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }

横型タイムライン

display: flex と ::before の水平線を使用します。各項目にはドットを配置し、その下にコンテンツを配置します。

---

ステップ 8：SVG ベースのグラフ

棒グラフ

y 軸のベースライン上に配置した <rect> 要素を使用します。高さや y 属性に <animate> を追加して、表示時のアニメーションを実現します。軸ラベルには <text> を、グリッド線には <line> を含めます。

ドーナツグラフ

stroke-dasharray と stroke-dashoffset を指定した <circle> 要素を使用して、セグメントを作成します。上から開始するように rotate(-90) で変換します。中心には主要指標を <text> で追加します。

折れ線グラフ

データ線には <polyline> を使用し、その下の領域には fill を指定した <path> を使用します。データポイントには <circle> 要素を使用します。領域の塗りつぶしには <linearGradient> を追加します。

すべての SVG グラフに共通する主要なパターン：

<svg viewBox="0 0 400 250" width="400" height="250" xmlns="http://www.w3.org/2000/svg">
  
  
  
</svg>

---

ステップ 9：アイコンを活用したデータポイント

アイコン＋統計値のレイアウト

.icon-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 40px; }
.icon-stat { display: flex; align-items: flex-start; gap: 16px; }
.icon-stat .icon-circle {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-stat .value { font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.icon-stat .label { font-size: 13px; color: #6B7280; }

---

ステップ 10：インフォグラフィックのレイアウトテンプレート

縦長の長文形式

幅：800px（ウェブ）または 1000px（印刷）。構成：ヘッダー > セクション 1 > 区切り線 > セクション 2 > 区切り線 > セクション 3 > 要点 > フッター。セクション間には 60px の間隔を設けます。

ダッシュボード形式のグリッド

.info-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 40px; }
.info-dashboard .header { grid-column: 1 / -1; }
.info-dashboard .chart-main { grid-column: 1 / 3; }
.info-dashboard .chart-side { grid-column: 3; }
.info-dashboard .footer { grid-column: 1 / -1; }

---

品質チェックリスト

• データが正確に表現されている（数値とビジュアルが一致している。棒やスライスのサイズは目測ではなくデータから計算されている）
• 出力 PNG（Gemini またはレンダリングされたコード）を読み込み、すべての数値、ラベル、単位をソースと照合した
• 色分けに一貫性があり、意味がある（色は最大 6 色）
• すべてのデータポイントに明確なラベルがある
• 視覚的な階層によって、読者が情報を理解しやすくなっている
• 適切な場合、出典が記載されている
• デザインコンテキストのブランドカラーが適用されている
• SVG グラフに適切な viewBox とスケールが設定されている（レスポンシブ対応時は CSS width: 100%; height: auto）
• テキストとグラフの要素がコントラストのルールを満たしている。色だけを唯一の識別手段にしていない
• アニメーションが控えめで、理解を助けている
• セクション間に十分な余白がある