data-illustration は何をしますか？
プレーンなチャートライブラリ（棒グラフ、折れ線グラフ、レーダーチャート）は正確ですが、印象に残りません。一方、AIが生成する「データ可視化」画像の失敗例は、美しいものの数値を忠実にエンコードできず、データを装った単なる飾りになります。このスキルは両方を正直に実現します。データが生成されたSVGの形状を決定し（正確で再現可能なコア）、AI生成画像は雰囲気としてのみ重ねられ、値の伝達には使用されません。
使用すべき場面
- スコア/指標/次元を可視化したいが、プレーンな棒グラフや折れ線グラフでは退屈だったり、ブランドイメージに合わない場合。
- 「この可視化を実際にデザインされたように見せて」「チャートよりも説明的なものに」「デフォルトのチャートではなく、本物のグラフィックをダッシュボードに生成して」といったリクエストがある場合。
- 出力を意図的にデザインされたものに見せたい場合、デフォルトライブラリではなく、このスキルを優先してください。
正確性の契約（交渉不可）
- 出力内のすべての数量は、入力値からコードで計算されなければなりません。 形状の長さ、半径、ラベルテキスト、中央の読み取り数値など、すべてプログラムによって導出され、画像モデルによって目視や描画が行われてはなりません。
- AI画像生成は装飾のみに使用します。 生成された背景を重ねる場合、プロンプトを抽象的なテクスチャに制限してください。テキスト、数字、図形、ロゴは含めないでください。画像生成が利用できない場合でも、グラフィックはそのなしで完全かつ正確でなければなりません。
- すべてにラベルが付けられていなければなりません。 エンコードされた要素すべてにラベルが付けられ、見出しの数値には中央の読み取り表示、そしてフォームが実際に何を意味するかを一文で説明する凡例が必要です。誰も解読できない美しいグラフィックは失敗であり、成功ではありません。
画像モデルに直接「チャートを描かせる」誘惑にかられたら、やめてください。それは契約を破り、結果は微妙に（あるいはひどく）間違ったものになります。
デフォルトのフォーム：有機的な「ブルーム（花開き）」
N次元/スコア → 中心点から放射状に広がるN枚の花びら。花びらごとに:
- 長さ が値をエンコードします（長いほど高い）。かすかな整数ガイドリングと組み合わせることで、単なる雰囲気ではなく、数値として読み取れるようにします。
- ふくらみ は値に応じてわずかに広がります。スコアが高いほど、視覚的に「より豊か」に見えます。
- 色 は、セマンティックな段階（例：高値は緑、中間は琥珀色、低値は暖かい赤/テラコッタ）を介して値の帯域にマッピングされます。
- 先端ラベル に次元名と正確な数値が表示されます。
- 中央のディスク に平均値が表示され、自身の値に応じて色分けされ、短いキャプションが付きます。
- 凡例行 にエンコード方法が平易な言葉で記載されます（「花びらの長さ = 5点満点中のスコア」）。
これは、データセットごとに固有の有機体として読み取れます（一般的なレーダーチャートではありません）。一方で、すべての値は正確に読み取り可能です。
構築方法
- 入力として、単純な
{dimension: value}マップとタイトル、平均値を受け取ります。 - 各花びらの形状を値から直接計算する小さなスクリプト（SVG出力が可能な任意の言語で構いません）を記述します。角度 = 次元数で等間隔に配置、半径 = 値の関数、色 = 帯域のしきい値に基づくルックアップ、とします。
- ラベルと凡例は、実際のSVGテキスト要素としてレンダリングし、画像レイヤーに焼き込まないでください。
- 任意の雰囲気レイヤー: 利用可能な任意の画像生成APIを介して、テーマに沿った抽象的な背景画像を生成します。イラストの下に低い不透明度で合成し、ヴィネットで囲むことで中央の可読性を維持します。これをキャッシュしてください。ビルド時またはオーサリング時に一度だけ生成し、ページレンダリングのたびに生成しないでください（処理が遅く、コストがかかります）。
- 出力を自己完結型（単一の
.svgファイルで、背景はデータURIとして埋め込む）にし、別途管理するアセットがないようにします。 - 各要素にインタラクティブ性（ホバー/クリックで各次元の定義、正確なスコア、ソースを表示）を持たせたい場合は、各要素をデータ属性（
data-dimension、data-score、data-definition）でラップします。小さなスクリプトがこれを読み取ってサイドパネルを駆動できます。
フォームの拡張
ブルームはデフォルトであり、唯一の選択肢ではありません。データの形状に合ったフォームを選択してください。ただし、どのフォームを選択しても正確性の契約は守ってください:
- リッジライン/コンター: 分布や、多くのアイテムにわたって追跡された値に。
- アイソタイプ: （繰り返されるグリフ、最後のものは部分的に塗りつぶす）カウントが重要で、文字通りの数量として読み取らせたい場合に。
- コンステレーション: 個々の大きさよりも、アイテム間の関係が重要な場合に。
アンチパターン
- 画像モデルにチャートや数値をレンダリングさせること。値が間違っていたり、捏造されたりします。
- ラベルや凡例のない豪華なグラフィック。解読できなければ、どれだけ見栄えが良くても役に立ちません。
- データレイヤーの可読性を損なうほど派手な生成背景。低い不透明度を保ち、ヴィネットの背後に配置してください。
- キャッシュせずにページレンダリングのたびに画像生成APIを呼び出すこと。処理が遅く、不必要にコストがかかります。
使用方法
インストール: 個人で使用する場合はこのフォルダを ~/.claude/skills/data-illustration/ に、プロジェクトリポジトリ内の場合は .claude/skills/data-illustration/ にコピーします。
呼び出し:
これらの6つのスコアを、退屈な棒グラフの代わりにdata-illustrationのブルームに変換してください。タイトルは「Q3 Retro」、中央に平均値を表示し、凡例を追加してください。
このダッシュボードのチャートは一般的すぎます。data-illustrationを使用して、正確でラベル付けされたイラストにしてください。AIが描いた数字は使わず、すべて実際のデータから計算してください。