editorial-illustrations

エディトリアルイラスト — 主張 → ジオメトリ

目指す見た目（monotykamary.com、linear.app/now）は、チャートライブラリではありません。 それは規律です。つまり、各図はひとつの主張をジオメトリとして表現し、極細線の枠で囲み、意味を大文字の等幅フォントでキャプションに記し、グレースケールにアクセントカラーをひとつだけ使って描きます。この規律を守れば、どんな形も「このブランドらしい」と感じられます。テンプレートを考えずにコピーすると、雑な仕上がりになります。

決まったチャートのセットに頼らないでください。 以下の手法を使い、その文に必要な図を作りましょう。 references/worked-examples.mdにある6つの作例は、この手法が汎用的であることを示すものであり、メニューではありません。

中心となる考え方

図で証明すべき一文を取り出します。その文の構造を見極めます。 読者がその文を読む前に納得できるよう、構造を表現します。

キャプションは主張を述べるものなので、最初に書きます。図の主張を一文で言い表せないなら、まだ図はできていません。あるのは装飾だけです。作業を止めてください。

手法（毎回実行）

1. 主張を書く。 断定的な一文にします。これをそのまま<figcaption>にします。例：「仕事が納品の境界を越えるまで、請求対象にはなりません。」

2. 主張の構造に名前を付ける。 その文が実際に述べているのは、次のうちどれでしょうか？ 幾何学的な基本形に対応付けます。

   主張の対象…	表現方法…	Atom（§5）
   スペクトラム／多い・少ない／グラデーション	順序付きセル、塗りを段階的に増やす	5a
   大きさの順位／割合／比較	実際の軸を使った横棒グラフ	5b
   転換点のある一連の流れ	ステージグリッド＋移動する点	5a + rail
   相互の因果関係／フィードバック関係	連結した2つの軌道＋ブリッジ	5d
   分岐／不確実な状況下での意思決定	ノードと枝で構成するSVGツリー	5c
   形を変えるもの／データパイプライン	ステージごとにグリフを置いたレール	5e
   目標に向けた蓄積	積み上げ棒／塗りつぶされていく棒	5a/5b
   境界／内と外	枠で囲まれた領域＋境界を越える要素	compose
   分布／量の偏り	ドット列またはスモールマルチプル	compose

   該当するものがなければ、references/design-system.md §5にあるAtomを組み合わせて新しい基本形を作ります。新しさは歓迎され、期待されています。変えてはならないのは、トークンと抑制です。

3. 要点を特定する。 主張を証明する要素はどれでしょうか？ その要素に--accent（コーラル）を使います。それ以外はすべてグレースケールにします。アクセントはひとつ、場合によってはふたつまでです。要点がないなら、図に主張がありません。ステップ1に戻ってください。

4. システムに沿って描く。 references/design-system.mdを適用します。トークン、タイポグラフィのルール（ディスプレイ書体＝Inter 480–540のタイトな設定、それ以外はすべて等幅の小さな大文字ラベル）、枠付き図の装飾、幅720のSVG viewBox、極細線のみ、チャートジャンクなし、を守ります。

5. 主張を示す場合に限り、動きを加える。 境界の手前で止まる点、2つのループ間を横切るパルス、枝を下っていく信号などです。2〜6秒、ease-in-outとし、prefers-reduced-motionが設定されている場合は必ず無効にします。動きによって主張を示せないなら、省略してください。静止した図でも問題ありません。多くの場合、そちらのほうが優れています。

6. キャプションを付ける。 等幅フォント、8px、大文字で、罫線の上に配置します。意味を述べ、データソースだけを示すものにはしません。「図3」ではなく、「Xであるため……」と記します。

美学をひと言で

• 分野： ホストページに合わせます。暗いページではほぼ黒の --ground:#080807、明るいページでは白／オフホワイトです（両方のトークンセットは design-system.md にあります）。図はかすかな背景面に枠を付け、暗いページでは backdrop-filter: blur(16px)、明るいページでは極細の線と淡い影を使います。
• 書体： 大きなディスプレイ表示をまれに使う場合は Inter、図の中はすべて等幅フォントで、7～11px、ラベル／キャプションは大文字にします。2種類目のサンセリフ体は使わず、太字のディスプレイ書体も使いません。
• 色： グレースケールの階調（--ink → --quiet）に、アクセントカラーをひとつだけ加えます。Claude コーラルの #D97757 は点のみに使います。（monotykamary に忠実な純粋なグレースケールにするには、--accent: var(--ink) を設定します。）
• 構造： 1px の極細線、真円のノード、暫定／失敗を示す破線、影なし、グラデーションは軸方向の極細線1本を除いて使いません。
• 密度： 小さな文字、詰まったセル、端から端まで。抑制こそがスタイルです。

完全な仕様、コピーして使えるトークンブロック（ダーク／ライト両方）、プリミティブ CSS： references/design-system.md。主張→図形の根拠を示した実例： references/worked-examples.md。チャート以外のエディトリアル要素（メトリック帯、ステータス補足、キッカー＋シジル、番号付き章インデックス、本文の書体、インラインカード）： references/elements.md。ライブレンダリングによる実証（コーラルの基本スタイル、切り替え可能）： assets/gallery.html。

図はホストページのテーマに合わせます（必ず）

図は誰かのページに置かれるものです。独自のテーマを押しつけず、そのページのライト／ダークに合わせる必要があります。明るい記事に暗い展示パネルを置くと、異質なものに見えます（2026-07-22に身をもって学びました）。

• まずホストページを確認します。 明るいページなら明るい図、暗いページなら暗い図にします。 ホストサイトはライトをデフォルトとし、独自のテーマ切り替え（例：Charter のセリフ体見出し＋Public Sans の本文、青のアクセント）を備えている場合があり、<html> に data-theme="light"|"dark" を設定します。そのようなページの図は**data-theme に従い**、デフォルトはライトにします。
• ホストに明示的なテーマシステムがある場合、ダークテーマの上書きにはメディアクエリではなく、そのシステムを使います。 :root[data-theme="dark"] .yourfig { … } を使い、:root[data-theme="dark"] .yourfig { … } ではなく @media (prefers-color-scheme: dark) を使います。実際に起きた不具合（2026-07-22）：メディアクエリに連動した図が、閲覧者の OS はダーク、ページのテーマはライトだったため、ライトテーマのブログで暗く表示されました。正しい基準はページの data-theme です。メディアクエリを使うのは、テーマ切り替えのないホストに限ります。テーマ切り替えのあるホストでは、サイト独自のダークトークン（ground #171b22、line #262c36、ink #f1f5f9）に合わせ、図のダークパネルが異質なほぼ黒ではなく、サイトのダークテーマになじむようにします。
• トークンベースで作り、テーマに適応させます。 図のスコープ内にパレットを定義し、デフォルトではホストのデフォルトテーマを使います。さらに :root[data-theme="dark"] .fig の上書きを加えます（@media (prefers-color-scheme: dark) の上書きも加えるのは、ホストに切り替え機能がない場合に限ります）。コストはかからず、将来にも対応できます。
• コーラルは背景ごとに AA 基準を満たします。 白の上では、文字／線に --accent:#c15f3c を使います（大きなノードの塗りつぶしに限り #D97757 を使います）。ほぼ黒の上では #D97757 をそのまま使います。
• 主張→図形の手法と抑制のルールはテーマに左右されません。 切り替えるのはパレットのトークンだけです。グレースケールの階調とコーラルのアクセントひとつという構成は、どちらの背景でも変わりません。

出力仕様

• イラストごとに自己完結型の <figure> を1つ使用します。<figure> にスコープを限定したインラインの <style>（または共有トークン :root）、インライン SVG を含め、外部へのリクエストは行いません。
• テーマはホストに合わせます（上記を参照）。ライトページに埋め込む場合はライトをデフォルトにしますが、常にトークンベースとし、prefers-color-scheme と :root[data-theme] によるオーバーライドを設け、モーションセーフにします。どちらも必須ルールであり、任意ではありません。
• Artifact の場合、外部フォント／CDN は使用しません（CSP によってブロックされます）。インラインの @font-face データ URI を使うか、system-ui／ui-monospace にフォールバックします。
• 自サイトのブログ記事の場合は、図の HTML／CSS を記事本文に出力します（Markdown は build.py によって生の HTML をそのまま出力します）。ブログはライトなので、ライト用トークンを適用します。移植性を保つため、ダーク用のオーバーライドも残します。python3 build.py で再ビルドしてください。ビルド済みページではアセットパスが絶対パスになるため、ローカルサーバー経由でプレビューするか、自己完結型のスタンドアロンコピーを使用してください。file:// で直接開いてはいけません（記事のスタイルが適用されません）。自己完結型の HTML プレビューを参照してください。

検証（必須 — これは UI／UX の出力です）

ビジュアル検証のルールに従い、DOM のチェックだけでは不十分です。レンダリングして目視確認してください。

1. browser-harness で図を開き、スクリーンショットを撮影します（evidence_shot）。
2. 画像と主張を照らし合わせます。図形によって文の内容が明確に伝わっていますか？コーラルは要点だけに使われ、それ以外には使われていませんか？等幅フォントのテキストが切れていませんか？SVG のラベルはずれていませんか？棒グラフの計算に1つずれた値はありませんか？≤720px でレスポンシブ表示が崩れていませんか？
3. 問題があれば修正し、撮り直して修正を確認します。ライト版も確認してください。
4. モーションが prefers-reduced-motion の設定時に停止することを確認します。

アンチスロップ・チェックリスト（1つでも満たさない場合は図を却下）

• figcaption は、1文で述べた明確な主張になっています。
• 図形は、その主張の構造を表現しています（無関係な汎用チャートを貼り付けただけではありません）。
• アクセント要素（コーラル）は要点の1か所だけに使われています。
• 図中のすべてのラベル／値／キャプションは、等幅フォントかつ小さく表示されています。ラベルはすべて大文字です。
• 使用するのは細線のみです。シャドウ、グラデーション（棒グラフの軸の細線は除く）、角丸長方形は使用しません。
• グリッド線を使うのは、図が実際に定量的な場合だけです。
• モーションを使う場合は主張を示すものであり、prefers-reduced-motion の設定時には停止します。
• ダークとライトの両方で正しくレンダリングされ、モバイルではきれいに積み重なって表示されます。

ブログ図版キット

ブログ記事では、新しい装飾を考案する前にキットを使用してください。references/blog-figure-kit.md（6つのパターン、スクリーンショット用とツイート用のフレーム、注意点）と assets/blog-figure-kit.html（実際に動作する図と完全なスタイルシート）を参照してください。本文中の図解にはこれらの図を使い、ASCII はアニメーション付きヘッダーでのみ使用します。