tufte

Tufte — 本に忠実なビジュアル表示

このスキルは、「グラフを作って」という依頼をTufte準拠のグラフに変えます。The Visual Display of Quantitative Information（1983/2001）、Envisioning Information（1990）、Visual Explanations（1997）から要点をまとめています。

このスキルが生成するもの

ユーザーのプロジェクトの状況に応じて、次の2つの出力スタックから選択します。

1. 自己完結型のHTML/SVG — 単一ファイルで、SVGをインラインに含み、外部依存関係はありません。単発の用途、埋め込み、スクリーンショット、スライドデッキ向けです。
2. React（Recharts + D3フォールバック） — すでにReactを使用しているプロジェクト向けです。グラフの種類に適している場合はRechartsを使い、適さない場合（スロープグラフ、表内のスパークライン、スモールマルチプル）はReact内で生のD3を使います。

このスキルの使い方

呼び出されたら、次の手順を順番に進めます。

1. principles.mdを読む — ルールは10項目で、それぞれ1段落です。基本となる考え方がすべてまとめられています。
2. ユーザーのデータと目的からグラフの種類を選ぶには、chart-selection.mdを使います。知っているグラフに飛びつかず、この表で指定されているものを選びます。
3. 描画する前に**kill-list.mdを適用します** — Tufte準拠のグラフにふさわしくない要素を取り除きます。
4. ユーザーが違いを見たい場合は、before-after.htmlを確認します。AIツールが不適切な形で既定の選択肢にしがちなケースを取り上げた、6つの左右比較例があります。
5. 出力がレポート、振り返り、またはグラフの周囲に文章があるスライドの場合は、report-voice.mdを読みます。文章は、整ったグラフを台無しにすることがあります。平易なビジネス英語を使い、emダッシュや、AIらしい粗雑な表現は避けます。
6. グラフの完成を宣言する前に**checklist.mdを実行します**。項目は20個で、所要時間は30秒です。

手早く確認するには、cheatsheet.html（およびcheatsheet.pdf）が1ページのリファレンスです。

既定の動作

既定ではTufteのルールを適用します。ユーザーがキルリストにあるものを明示的に依頼した場合（「CFOが求めているので、この取締役会向けのスライドデッキには円グラフが必要です」など）は応じますが、コード内のコメントまたは回答に、Tufteによる代替案を1行で記載します。

グラフの周囲に添える文章

出力がレポート、振り返り、またはスライドの場合、文章はグラフと同じくらい重要です。平易なビジネス英語を使い、emダッシュ、芝居がかった表現や大げさな演出、誇張する動詞、AIらしい粗雑な専門用語は避けます。ラベルとキャプションはプレースホルダーではなく、個々のケースに合わせて名付けます。まず数値を示し、次にその意味を説明します。キルリストと推奨リストの全項目については、report-voice.mdを参照してください。整ったグラフも、雑な文章に包めば雑な印象になります。

キルリストの概要

ユーザーが明示的に変更を求めない限り、Tufte準拠のグラフには次の要素を含めません。

• 2Dの数量に対する3D効果
• 円グラフ（並べ替えた棒グラフまたは小さな表を使います）
• 二軸グラフ（代わりに2つのスモールマルチプルを使います）
• 順序のあるデータに対する虹色のカラースケール（代わりに単一色相の連続スケールを使います）
• 太いグリッド線、枠線ボックス、すべての小目盛りへの目盛り線
• ドロップシャドウ、グラデーション塗りつぶし、ベベル、グロー、「アヒル」
• データから離れた場所に配置する凡例（データに直接ラベルを付けます）
• モアレ模様、クロスハッチング、密な点描
• 冗長なデータインク（棒、数値、軸、グリッド線がすべて同じ数量を示すこと）
• 文脈のない大きな数値を載せたKPIカード

推奨リスト

Tufteのグラフでは、次の要素をよく使います。

• データへの直接ラベル（凡例は使いません）
• 数値の横にスパークラインを配置
• あらゆる切り口にスモールマルチプルを使用
• 範囲フレーム（軸の範囲はデータが存在する領域に限定）
• 控えめなグリッド線（明るい背景に白、または省略）
• 単一のアクセントカラー（--accentの赤）を焦点となるデータポイントに実際に適用 — 宣言しただけで使わずに済ませてはいけません。インクを最小限にすることと、情報を示さないことは別です。アクセントが何にも使われていないと、グラフは平坦な印象になります。読者が注目すべきポイントを選び、色を付けます。
• 読み取りに役立つデータマーク：折れ線の端点にドットを付ける、棒だけで示す代わりにドットプロットを使う
• 並べ替えたカテゴリ（アルファベット順はまれで、入力順のままはほとんどありません）
• n ≤ ~20で正確な値が重要な場合は表を使う

ファイル一覧

ファイル	用途
principles.md	Tufteの10のルールと実践的な解釈
chart-selection.md	データ＋目的 → グラフの種類の決定表
kill-list.md	どのグラフからも取り除くもの
before-after.html	6つの比較例（ブラウザーで開く）
report-voice.md	レポート／要約／スライドの文章ルール（冗長な表現なし、ダッシュ記号なし）
checklist.md	公開前の20項目チェック
cheatsheet.html	1ページの印刷用リファレンス
cheatsheet.pdf	同じ内容のPDF
presets/html-svg.md	スタイルトークン＋実際に動作するSVGの棒グラフ、折れ線グラフ、スパークライン、小規模複数グラフ
presets/react.md	スロープグラフ、表内スパークライン、小規模複数グラフ向けのRechartsテーマ＋D3パターン