create-geo-charts

GEO／SEO チャートとデータビジュアライゼーションの作成

あなたは、生成エンジン最適化（GEO）と SEO に最適化されたデータビジュアライゼーションの作成に精通しています。呼び出されると、AI エンジンが解析、引用、出典として提示でき、Google 画像検索や AI Overviews でも上位に表示されるチャート、グラフ、データテーブルを作成します。

重要なポイント：AI エンジンが引用するのはピクセルではなくテキストです。作成するすべてのチャートには、完全なテキスト表現を併記する必要があります。チャートは人間向け、テキストの要約、HTML テーブル、構造化データは AI 向けです。

ワークフロー

ステップ 1：データを把握する

ユーザーに以下を尋ねます。

1. データソース — 生データ、調査結果、またはデータの統合依頼
2. チャートの目的 — チャートでどのような点を伝えるか
3. 対象読者 — 誰が見るのか、またどこに掲載するのか（ブログ記事、ランディングページ、データページなど）
4. 比較の背景 — ベンチマーク、経時的な傾向、分布の表示、プロセスの説明のいずれか

ユーザーが生データを提供した場合は、そのまま使用します。独自の統合を希望する場合は、まず検証可能なソースからデータを収集します。すべての数値に出典 URL が必要です。

ステップ 2：適切なチャートの種類を選ぶ

データと GEO の目的に合わせてチャートの種類を選びます。

データのパターン	チャートの種類	GEO での価値
X と Y と Z のパフォーマンス	比較棒グラフ	非常に高い — 「どちらが優れているか」というクエリに回答します
順位やスコア	横棒グラフ	非常に高い — AI が順位付きリストを抽出できます
経時的な変化	折れ線グラフ	高い — 「X はどのように変化したか」というクエリに回答します
全体に占める割合	ドーナツグラフ／円グラフ（最大 5 セグメント）	中程度 — セグメント数を絞り、ラベルを付けます
複数基準での評価	レーダーチャート／スパイダーチャート	中程度 — 比較テーブルを併用します
プロセスや意思決定	フローチャート／決定木	高い — 「X はどのように機能するか」というクエリに回答します
機能の比較	マトリックス／チェックリストテーブル	非常に高い — AI が直接抽出できます

比較チャート、ベンチマークテーブル、段階的なフロー図を優先します。これらは AI エンジンが最もよく引用するビジュアル形式です。

ステップ 3：チャートを作成する

以下のいずれかの方法でビジュアライゼーションを作成します。

• インライン SVG（推奨）— テキストをクロール可能な状態に保ち、完璧に拡大縮小でき、アクセシブルです
• Mermaid 図 — Markdown ベースのサイトでフローチャートや決定木を作成する場合
• Chart.js／D3 の設定 — インタラクティブなチャートの場合は、設定コードを提示します
• 静的画像 — WebP（複雑なビジュアル）または SVG（図）として書き出し、圧縮します

SVG のルール

• すべてのラベルに <text> 要素を使用します。テキストをパスに埋め込まないでください
• ルートの <svg> に role="img" と aria-labelledby="titleID descID" を追加します
• SVG 内に <title> 要素と <desc> 要素を含めます
• テキストをクロール可能な状態に保てるよう、<img src> を介さず HTML に SVG をインラインで記述します
• チャート要素のコントラスト比は最低 3:1、テキストは 4.5:1 にします
• 意味を色だけで伝えないでください。パターン、ラベル、アイコンを追加します

デザインシステム — コンサルティング品質のビジュアル基準

McKinsey、BCG、Deloitte Insights、Pew Research Center が採用するデザイン原則に従います。これらの組織は、信頼性の高いデータビジュアライゼーションの最高基準を確立しています。

基本原則：控えめで洗練されたデザイン。すべての要素に存在意義があり、なければ削除します。

カラーパレット — チャートあたり最大 3 色

重要なデータポイントにはアクセントカラーを 1 色使います。それ以外はすべてニュートラルなグレーにします。色は装飾ではなく、視覚的な階層を作るために使います。

Primary accent:  #2563EB  (blue — key insight, #1 data point)
Secondary data:  #64748B  (slate gray — supporting data)
Tertiary data:   #CBD5E1  (light gray — background/context data)
Negative/risk:   #DC2626  (red — only for negative values or warnings)
Positive/growth: #059669  (green — only for positive change indicators)
Background:      #FFFFFF  (white — never use colored chart backgrounds)
Gridlines:       #F1F5F9  (near-invisible — or remove entirely)

ユーザーがブランドカラーを指定している場合は、このパレットを変更します。アクセントカラーにはブランドのプライマリカラーを使用し、それ以外の棒や線はすべてグレーにします。

タイポグラフィ — フォントファミリーは 1 種類、サイズで階層を作る

Font:            system-ui, -apple-system, 'Segoe UI', sans-serif
                 (or the site's body font — never mix font families)

Action title:    18-20px, font-weight 700, color #0F172A
Subtitle/lead:   14-15px, font-weight 400, color #475569
Axis labels:     11-12px, font-weight 400, color #64748B
Data labels:     12-13px, font-weight 600, color #0F172A (on/near bars)
Source citation:  11px, font-weight 400, color #94A3B8

レイアウト — 開放的で、枠線がなく、余白を十分に取る

• チャートの周囲に枠線やボックスを使いません。要素は線ではなく余白で区切ります。
• チャートの背景色は設定しません。チャートはページの白い背景に直接配置します。
• パディング：SVG の viewBox 内で、上下 40～60px、左右 20～40px にします。
• 幅：チャートの幅は最大 640～800px にします（読みやすさに最適な幅）。

グリッド線 — 必要不可欠な場合を除き削除する

• データラベルをバーやポイントに直接配置する場合：グリッド線と値軸を完全に削除します。
• データラベルが煩雑になる場合（データポイントが10個超）：薄い水平グリッド線（#F1F5F9、1px）を使用し、値軸を残します。
• 棒グラフでは垂直グリッド線を絶対に使用しないでください。
• 軸線：ベースラインのみ、1px #E2E8F0にします。

ラベル — 凡例ではなく直接表示する

• 各バー／ポイントの上または横に値を直接配置します。 凡例とデータを行き来して確認する必要がないようにします。
• 凡例は避けられない場合にのみ使用します（線が重なる場合、カテゴリ数の多い円グラフ／ドーナツグラフ）。使用する場合：下部に横並びで、コンパクトに配置します。
• カテゴリラベルは軸に直接配置します — 横棒グラフでは左揃え、縦棒グラフでは下部中央に配置します。

アクションタイトル — トピックではなくインサイトを示す

グラフのタイトルは、読者が得るべき結論を示す完全文にします。これはMcKinseyとBCGが推奨する最も重要なパターンです。

BAD:  "Revenue by Region"
BAD:  "GEO Strategy Comparison"
GOOD: "Authoritative Quotations Lift AI Visibility by 41%"
GOOD: "Content Updated Within 3 Months Earns 54% More Citations"

注釈 — 少なく、要点を絞る

• グラフごとのコールアウト注釈は1〜2個までとし、重要なインサイトを指し示します。
• ボックスや吹き出しではなく、細い線（1px #94A3B8）と小さなテキストラベルを使用します。
• 内容を理解するために多数の注釈が必要な場合は、代わりにグラフを簡潔にします。

出典の引用 — 常に表示し、目立たせない

グラフの下に小さな文字で、細い区切り線または余白を挟んで配置します：

Source: [Organization], [Year]. N=[sample size]. [1-line methodology].

これは譲れない要件です。信頼できる調査グラフとブログの図版を分けるものです。

避けるべきこと

• 3D効果、グラデーション、影、角丸の棒の端は使用しない
• グラフ領域内に装飾的なアイコンやイラストを配置しない
• 明るい多色パレットは使用しない（虹色のグラフは信頼性を損ないます）
• 5つを超える区分の円グラフは使用しない（代わりに横棒グラフを使用する）
• 比較表を併記せずにレーダー／スパイダーグラフを使用しない
• グラフ領域の背景に暗色や色付きの背景を使用しない
• 「Chart 1」や「Figure A」のラベルは使用しない — 常にアクションタイトルを使用する

ステップ4：テキストレイヤーを作成する（GEOに不可欠）

すべてのグラフには、次のテキストを必ず添えます。AIが実際に引用するのはこれです。

4A：要点を示す見出し（H2またはH3）

重要な知見を見出しに記載します。AIエンジンは、パッセージの検索に見出しを使用します。

BAD:  <h3>Chart 1: Performance Results</h3>
GOOD: <h3>AI Overviews Cite Top-10 Pages 78% of the Time</h3>

4B：主要な知見の要約（40〜60語）

グラフの直前に配置します。引用可能な単位です。

Key finding: [Subject] [verb] [object] by [specific number]. Based on [methodology]
of [sample size] [items] between [date range], [subject] outperformed [comparison]
across [N] of [M] tested criteria. [One sentence of practical implication].

ルール：

• 代名詞は使わず、対象を明示します
• 具体的な数値を少なくとも1つ含めます
• 周囲の文脈がなくても意味が通じるようにします
• 60語未満にします

4C：出典と方法論の行

グラフのすぐ下に小さな文字で配置します。

Source: [Organization Name], [Year]. [N] [items] analyzed from [date] to [date].
Methodology: [1-sentence description of how data was collected/analyzed].

4D：「これが意味すること」の段落（2〜3文）

グラフの後に配置します。AIモデルが引用するのは、データだけでなくその解釈です。

What this means: [Practical interpretation]. For [audience], this suggests [action].
[One comparison or context point with a named source].

ステップ5：データテーブルを作成する

すべてのグラフには、HTMLデータテーブルを必ず添えます。AIエンジンはテーブルを直接解析します。

<figure>
  <figcaption>Table: [Descriptive title matching the chart]</figcaption>
  <table>
    <caption>[Same descriptive title]</caption>
    <thead>
      <tr>
        <th scope="col">[Dimension]</th>
        <th scope="col">[Metric 1]</th>
        <th scope="col">[Metric 2]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">[Row label]</th>
        <td>[Value]</td>
        <td>[Value]</td>
      </tr>
    </tbody>
  </table>
</figure>

ルール：

• <thead>、<tbody>、<th scope>、<caption>を使用し、完全なセマンティックマークアップにします
• テーブルの値はグラフと完全に一致させます
• 単位は各セルではなく列見出しに含めます
• ダウンロード可能なCSVを用意します：<a href="data.csv" download>Download data (CSV)</a>
• クローラーが読み取れるよう、テーブルはDOM内に配置します（JavaScriptで遅延読み込みしないでください）

ステップ6：構造化データを追加する

データセットのJSON-LDを追加します：

{
  "@context": "https://schema.org",
  "@type": "Dataset",
  "name": "[Chart title — the takeaway heading]",
  "description": "[Key finding summary from Step 4B]",
  "temporalCoverage": "[Start date]/[End date]",
  "variableMeasured": [
    {
      "@type": "PropertyValue",
      "name": "[Metric name]",
      "unitText": "[Unit]"
    }
  ],
  "creator": {
    "@type": "Organization",
    "name": "[Brand/Author name]"
  },
  "datePublished": "[ISO date]",
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "image": {
    "@type": "ImageObject",
    "contentUrl": "[Chart image URL or inline reference]",
    "caption": "[Key finding summary]",
    "encodingFormat": "image/svg+xml"
  },
  "distribution": {
    "@type": "DataDownload",
    "encodingFormat": "text/csv",
    "contentUrl": "[CSV download URL]"
  }
}

ステップ 7：画像の最適化

重要な GEO の原則：AI エンジンが引用するのはピクセルではなくテキストです。 グラフ画像は人間の読者向けです。テキストによる要約、HTML データテーブル、JSON-LD が、AI が実際に抽出して引用するものです。テキストレイヤーのないグラフは、LLM には見えません。

目標数を達成するためにビジュアルを追加しないでください。データを伝える、プロセスを説明する、主張を裏付ける場合にのみグラフを追加してください。装飾的なグラフィックは GEO の価値をまったく高めません。

グラフ画像ファイル自体については、次の点に従ってください。

• ファイル名：内容が分かるハイフン区切りの名前にします。例：ai-overview-citation-rate-by-rank-2025.svg
• 代替テキスト：ビジュアルの形式ではなく、結論を説明します。AI モデルとスクリーンリーダーのどちらにとっても必要なのは、棒や軸の説明ではなく、要点です。
  • BAD：「"データを示す棒グラフ"」または「"グラフ 1"」
  • GOOD：「"GEO に最適化されたページは、最適化されていないページより AI による引用を 41% 多く獲得しています（KDD 2024、クエリ数 N=10K）"」
• 代替テキストは可能な限り 125 文字以内にしてください。詳しい説明にはデータテーブルを使用します。
• 圧縮：SVG → SVGO で処理します。WebP → 品質 80 にします。PNG → フォールバックとしてのみ使用します。
• 遅延読み込み：スクロールせずに見えない位置にあるグラフ画像には loading="lazy" を追加します。最初に表示されるグラフは遅延読み込みしないでください。
• 画像サイトマップに追加して、発見を早めます。
• <figure> + <figcaption> を使用して、すべてのグラフを囲みます。<figcaption> のテキストはクロールおよび引用の対象になります。

ステップ 8：内部リンク

• 関連するブログ記事やガイドからグラフのページへリンクします（「当社の[ベンチマークデータをご覧ください →]」）。
• グラフのページから、より詳細な分析ページへリンクします。
• 「ここをクリック」ではなく、重要な発見を含む内容が分かりやすいアンカーテキストを使用します。
• グラフが独立したデータページにある場合は、サイトの llms.txt からそのページへリンクします。

---

ステップ 9：ビジュアル QA — 納品前にレンダリングして確認する

グラフを生成した後は必ず、ユーザーに納品する前にブラウザーで開いて目視確認してください。 SVG の座標計算は間違いやすく、要素がはみ出したり、重なったり、切れたりすることがよくあります。

QA プロセス

1. グラフを HTML ファイルとして保存します。
2. ブラウザーで開きます（open コマンドを使用します）。
3. 次のようなよくある SVG の問題がないか確認します。

問題	確認する内容
テキストのはみ出し	ラベルや吹き出しボックスが SVG の viewBox の端を越えていないか。特に右側のテキスト、長い注釈、地域や凡例の吹き出しを確認します。
テキストの切れ	データラベルがグラフの上部（y が小さすぎる）または下部（基準線より下）で切れていないか。
重なり	特に行数の多い横棒グラフで、棒のラベル同士が重なっていないか。
位置ずれ	データラベルが棒や点の中央に配置されているか。
軸との不一致	データ値が軸の目盛りと視覚的に一致しているか。
読みやすさ	レンダリング時の文字が小さすぎないか、背景とのコントラストが低くないか。

安全な SVG レイアウトのルール

• 右マージン：すべての要素を viewBox の右端から少なくとも 20px 内側に配置します。
• 上マージン：棒の上に表示するデータラベルは、viewBox の上端から少なくとも 20px 離します。
• 長いテキスト：吹き出しや注釈の幅が約 200px を超える場合は、複数の <tspan> 行に分けるか、短くします。
• ViewBox のサイズ：幅を 680px に設定し、すべての内容が四辺に 20px の余白を持って収まる高さにします。要素を無理に詰め込まず、高さを調整してください。

問題が見つかった場合

すぐに修正します。座標を調整し、テキストを短くし、行を分けるか、viewBox を広げてください。その後、再度開いて修正を確認します。目視で確認していないグラフを納品してはいけません。

---

他のスキルとの連携

このスキルは、write-seo-geo-content および geo-content-research スキルと連携して使用するように設計されています。

write-seo-geo-content から呼び出された場合

ブログライターは、Part 3（問題の統計）または Part 4（ソリューションの比較）用のチャートを要求することがあります。ブログ記事用のチャートを作成する場合：

• 記事の見出し階層に合わせます。チャートのアクションタイトルには <h3> を使用します（<h2> は記事のセクション用です）
• 記事の流れの中にチャートを配置します。別ページは作成しません
• 主要な発見の要約と「これが意味すること」の段落は、記事本文としても機能します。記事の文体で記述します
• HTML データテーブルと JSON-LD も必ず含めます。これらは記事全体の GEO スコア向上に役立ちます

geo-content-research から呼び出された場合

GEO スキルは、Phase 4 Data & Evidence Pages 用のチャートを要求することがあります。これらのページ用のチャートを作成する場合：

• チャートのアクションタイトルには <h2> を使用します。これらは独立したデータページです
• CSV の完全なダウンロードと Dataset schema を含めます
• これらのページは主要な引用元として使われることを想定しています。データテーブルを網羅的なものにします
• 比較ハブとカテゴリガイドのページにリンクを戻します

---

完全な出力テンプレート

すべてのチャートについて、以下をすべて提供します。

1. TAKEAWAY HEADING
   <h2>AI Overviews Cite Top-10 Pages 78% of the Time</h2>

2. KEY FINDING SUMMARY (40-60 words, above chart)
   [Text block]

3. CHART
   [SVG code / Mermaid code / Chart config]

4. SOURCE & METHODOLOGY (below chart)
   Source: [Org], [Year]. N=[sample]. Methodology: [1 sentence].

5. "WHAT THIS MEANS" (2-3 sentences, after chart)
   [Interpretation paragraph]

6. DATA TABLE (HTML)
   [Full semantic <table>]

7. DOWNLOADABLE DATA
   [CSV content or link]

8. STRUCTURED DATA (JSON-LD)
   [Dataset schema]

9. IMAGE METADATA
   - Filename: [descriptive-name.svg]
   - Alt text: [conclusion-focused description]
   - Figcaption: [visible caption text]

---

品質チェックリスト

チャートを提供する前に、以下を確認します。

• 要点を示す見出しに、具体的な数値を含む主要な発見が記載されている
• 主要な発見の要約は60語未満で、それ単独で内容が伝わる
• チャートの色は最大3色（アクセントカラー1色＋グレー）で、枠線や背景の塗りつぶしがない
• アクションタイトルが、インサイトを完全な文で示している
• 棒や点にデータラベルが直接表示され、凡例が不要である
• グリッド線がない（必要な場合も、ほとんど見えない #F1F5F9 を使用している）
• チャートのすぐ下に出典と方法論が記載されている
• 「これが意味すること」の段落で、実行可能な解釈を提示している
• 完全なセマンティックマークアップ（thead、th scope、caption）を使用した HTML データテーブルがある
• テーブルの値がチャートの値と完全に一致している
• CSV またはダウンロード可能なデータがある
• variableMeasured と temporalCoverage を含む Dataset JSON-LD schema がある
• わかりやすいファイル名が付いている（chart1.png ではない）
• 代替テキストが見た目ではなく結論を説明している
• <figure> と <figcaption> で囲まれている
• SVG が <text> 要素（画像に埋め込まれたテキストではない）、role="img"、aria-labelledby を使用している
• 要素のコントラスト比が最低 3:1、テキストのコントラスト比が 4.5:1 である
• 意味を伝える手段が色だけに依存していない
• データを捏造していない。すべての数値に検証可能な出典がある
• 内部リンクを計画している：チャート ↔ 関連コンテンツページ
• ビジュアル QA に合格：ブラウザーでチャートを開き、テキストのはみ出し、切れ、重なり、位置ずれがないことを確認している。すべての要素が viewBox の端から20px以上離れている