content-infographic

コンテンツインフォグラフィックスキル

目的

ブランドに沿い、アクセシビリティに配慮し、ウェブ、印刷、ソーシャルメディアへの埋め込みに最適化された、本番環境で使える SVG および HTML インフォグラフィックを生成します。このスキルが生成するのはビジュアルアセットであり、プレゼンテーションやドキュメントではありません。

---

このスキルが有効になる条件

• ユーザーがインフォグラフィック、データビジュアライゼーション、プロセス図、比較チャート、または統計カードを求めている。
• ユーザーが可視化したいデータを持っている。
• ユーザーがブログ記事、ソーシャルメディア、レポート、またはプレゼンテーション用のビジュアル要約を必要としている。
• ユーザーがデータやプロセスについて「これを可視化して」または「これをビジュアルにして」と言っている。

---

SVG を優先するアプローチ

ユーザーが別の形式を希望しない限り、常に SVG 出力を既定としてください。SVG の利点：

• 拡大縮小可能：ソーシャルメディアのサムネイルからカンファレンスポスターまで、どのサイズでも鮮明に表示されます。
• 埋め込み可能：HTML にインラインで記述したり、Markdown に埋め込んだり、プレゼンテーションに含めたりできます。
• 印刷対応：どの DPI でもピクセル化しません。
• 編集可能：生成後に色、テキスト、レイアウトを変更できます。
• アクセシブル：スクリーンリーダー向けに <title>、<desc>、aria-label 属性をサポートします。
• ファイルサイズが小さい：ベクター画像は効率よく圧縮できます。

SVG ではなく HTML を使う場合：

• ホバー状態、ツールチップ、アニメーションを備えたインタラクティブなインフォグラフィック。
• 画面サイズに応じてレイアウトが変化する必要があるインフォグラフィック。
• ライブデータ連携を備えたダッシュボード。

---

生成フロー

ステップ 1：ブランドのコンテキストを確認する

次のファイルがあれば読み込みます：

• brand/VISUAL.md -- 色、フォント、ロゴのルール
• brand/BRAND.md -- アイデンティティ、対象者（ビジュアルのトーンに影響します）

以下を抽出します：

• プライマリカラー、セカンダリカラー、アクセントカラー
• フォントファミリー（または汎用的で読みやすいサンセリフ体を使用）
• ロゴマークの SVG パス（インフォグラフィックに埋め込むため）
• ビジュアルスタイルの好み（ミニマル、力強い、遊び心のある、コーポレート）

brand/ が存在しない場合は、2～3 色を尋ね、読みやすい標準スタイルで進めます。

ステップ 2：データを理解する

デザインに着手する前に、伝えるべき内容を理解します：

• データの内容は何ですか？ 数値、カテゴリ、プロセス、比較、タイムライン。
• 重要なインサイトは何ですか？ すべてのインフォグラフィックには、主な伝達事項が 1 つあります。それを特定します。
• 対象者は誰ですか？ 技術者向けか一般向けか、社内向けか社外向けか。
• どこで使われますか？ ブログ記事、ソーシャルメディア、メール、印刷物、プレゼンテーションのスライド。

ユーザーがコンテキストなしで生データを提示した場合は、確認の質問をします。

ステップ 3：レイアウトを選ぶ

データの種類と重要なインサイトに基づいて、適切なテンプレートの種類を選択します：

データの種類	テンプレート	使用する場面
定量的な比較	data-viz	棒グラフ、折れ線グラフ、円グラフ、指標
順序のあるステップ	process-flow	ワークフロー、仕組みの説明、タイムライン、パイプライン
並列評価	comparison	対決形式、長所と短所、機能マトリックス、ビフォーアフター
単一の主要指標	stat-card	強調する数値、KPI のハイライト、ソーシャルメディアでの共有

各テンプレートの種類については templates/ を参照してください。

ステップ 4：SVG を生成する

次の原則に従って SVG を作成します：

• 出力先に適した viewBox を設定します（ブログへの埋め込みには 1200x800、ソーシャルメディアには 1080x1080、その他にはカスタムサイズ）。
• 色には CSS カスタムプロパティを使い、ユーザーが簡単にテーマを変更できるようにします。
• ブランドフォントは SVG 内の <style> で埋め込むか、ウェブセーフな代替フォントを使います。
• ブランドのロゴマークを隅に配置します（既定：右下、小さめ、不透明度 50%）。
• アクセシビリティに配慮し、インフォグラフィック名には <title>、プレーンテキストの要約には <desc> を追加します。

ステップ 5：検証する

納品前に確認します：

• 重要なインサイトがすぐにわかる（最も重要な情報が、最も大きく、または最も目立つ要素になっている）。
• すべてのテキストで WCAG AA のコントラスト要件を満たしている。
• 色の総数が 5～6 色以内である。
• 想定される表示サイズでテキストが読みやすい。
• ブランドカラーとフォントが正しく適用されている。
• ロゴが配置されているが、目立ちすぎていない。
• SVG が有効で、主要なすべてのブラウザーで表示される。

---

デザイン原則

全体のリファレンスについては design-principles.md を参照してください。主なルール：

データインク比

すべての視覚要素はデータを表現する必要があります。データを表現しない要素は取り除いてください。

• 装飾的な枠線や影は使わないでください。
• グラフに3D効果を付けないでください。
• 情報を表さない背景のテクスチャやパターンは使わないでください。
• グリッド線は薄い灰色で最小限にするか、軸ラベルで十分な場合は完全に取り除いてください。

意味のある色使い

• 装飾ではなく、情報を表すために色を使ってください。
• 主要なデータ系列や最も重要な要素には、ブランドのメインカラーを使ってください。
• 補足データにはセカンダリカラーを使ってください。
• コンテキスト、ラベル、軸にはニュートラルなグレーを使ってください。
• 色だけを唯一の区別手段にしないでください。アクセシビリティのため、ラベル、パターン、または位置と組み合わせてください。

タイポグラフィの階層

最大3段階にします。

1. タイトル：大きく、太字にします。グラフの種類ではなく、重要な洞察を伝えます。「売上が第3四半期に47%増加」ではなく、「売上グラフ」とします。
2. ラベル：中程度の大きさで、標準の太さにします。軸ラベル、カテゴリ名、データポイントの注釈を含みます。
3. 脚注：小さく、細字にします。出典、手法に関する注記、日付範囲を含みます。

余白

余白は空白ではなく、構造です。次の目的で使ってください。

• インフォグラフィックのセクションを分けます。
• 重要な洞察の周囲に、視覚的なゆとりを作ります。
• ある要素から次の要素へと視線を誘導します。

グリッドへの整列

要素を目に見えないグリッドに沿って配置してください。配置がずれた要素は視覚的なノイズを生みます。SVGでは、一貫したx/y座標と間隔の値を使ってください。

---

テンプレートの種類

データの可視化（templates/data-viz.svg.template）

定量データ向けです。棒グラフ、折れ線グラフ、ドーナツグラフ、面グラフなどに使います。

主なルール：

• 棒グラフのy軸はゼロから始めてください（軸の途中を省略すると誤解を招きます）。
• カテゴリラベルが長い場合は、横棒グラフを使ってください。
• 円グラフ／ドーナツグラフは5セグメントまでに制限してください。残りは「その他」にまとめます。
• 可能な場合は、データポイントにグラフ上で直接注釈を付けてください（凡例の必要性を減らせます）。

プロセスフロー（templates/process-flow.svg.template）

順序のある情報向けです。ワークフロー、仕組みの説明図、タイムライン、パイプラインなどに使います。

主なルール：

• 左から右、または上から下へ流れるようにします。右から左へは流さないでください。
• 各ステップには、アイコンまたは番号、タイトル、1行の説明を含めます。
• ステップ同士を矢印または線でつなぎます。
• ステップ間の間隔を一定にします。
• 現在のステップ、または最も重要なステップをブランドのアクセントカラーで強調します。

比較（templates/comparison.svg.template）

並べて評価する場合に使います。対比レイアウト、機能マトリクス、長所と短所、変更前と変更後などが対象です。

主なルール：

• インフォグラフィックが一方を優先する設計でない限り、両側に同じ視覚的な重みを持たせます。
• 明確な視覚的区切りを設けます（縦線、色の違い、または余白）。
• 両側でカテゴリの順序をそろえ、構成を一貫させます。
• アイコンまたは色分けを使って、肯定／否定／中立を示します。

統計カード（templates/stat-card.svg.template）

主要な指標を1つ示す場合に使います。大きく強調した数値、KPIのハイライト、ソーシャルメディアでの共有などが対象です。

主なルール：

• 数字を他の要素より大幅に大きくします。
• 数字の下に、小さな文字でコンテキストを添えます。
• 必要に応じて、傾向を示すマーカー（上／下向き矢印）や比較情報（「前四半期の32%から増加」）を加えます。
• カードの内容を絞り込みます。統計値1つ、コンテキストの説明1行、任意の傾向マーカー1つにします。

---

ブランドロゴの埋め込み

brand/logo/logo-mark.svgが存在する場合は、インフォグラフィックに埋め込んでください。

<g transform="translate(1120, 750)" opacity="0.5">
  
</g>

配置：デフォルトでは右下隅に配置します。レイアウトに応じて位置を調整してください。 サイズ：インフォグラフィックの幅の約5～8%にします。 不透明度：データと競合しないよう、40～60%にします。

---

出力形式

形式	使用する場面	方法
.svgファイル	ウェブへの埋め込み、プレゼンテーションスライド、さらなる編集	SVGを直接出力
HTML内のインラインSVG	ブログ記事への埋め込み、メール	レスポンシブCSSを適用した<div>でSVGを囲む
HTML + CSS	インタラクティブなインフォグラフィック	CSSスタイルと任意のJSを使ったHTML構造

ソーシャルメディア用には、svgexportなどのツールやブラウザーのスクリーンショットを使って、SVGを2倍の解像度でPNGに変換するよう提案してください。

---

エラー処理

• ユーザーからデータが提供されていない場合は、データを尋ねてください。架空の数値を使ったプレースホルダーのインフォグラフィックは生成しないでください。
• 選択した形式に対してデータのカテゴリが多すぎる場合（例：円グラフに15項目ある場合）は、別の形式を推奨するか、グループ化を提案してください。
• brand/ がない場合は、シンプルでミニマルなスタイルで進め、content-setup を実行すると一貫性が向上することを伝えてください。
• データから明確なストーリーが読み取れない場合は、次のように問いかけてください：「閲覧者に持ち帰ってほしいことは何ですか？」