Visual Explainer — コンポーネントギャラリー

デザイントークン

カラーパレット

--ivory #FAF9F5
背景

--paper #FFFFFF
カード面

--slate #141413
本文・終端ノード

--clay #D97757
主役アクセント

--clay-d #B85C3E
アクセント濃

--olive #788C5D
第2アクセント

#FBEFE7
clay系ノード面

#EEF1E7
olive系ノード面

--g100 #F0EEE6

--g200 #E6E3DA

--g300 #D1CFC5
枠線

--g500 #87867F
補助文字

タイポグラフィ・原則

項目	規定
書体	sans-serif統一（游ゴシック→Hiragino Sans→Meiryo→system-ui）。serif・斜体は全面禁止
本文	18px / line-height 1.75（一般的な16pxより大きめ）
h1 / h2	clamp(38px, 5.4vw, 62px) / clamp(25px, 2.8vw, 32px)・weight 600
セクション番号	mono・clay色・clamp(36px, 4vw, 46px)＝見出しの約1.4倍
monoラベル	11〜14px / UPPERCASE / letter-spacing 0.08〜0.12em（eyebrow・図キャプション・軸ラベル）
カード	border 1.5px var(--g300)・radius 14px・ホバーで border-color: slate＋浮き上がり
強調	見出し中の `<em>` は色のみ（clay）。太字は weight 600

UI部品

ヘッダー系 ── .eyebrow / .src-card / .toc

UI-01 ── eyebrow（見出し上のキッカー）

Article Explainer ── Sample Kicker

UI-02 ── src-card（出典カード・全ページ必須）

Source / 出典

著者名「記事タイトル」媒体名、閲覧日。本文・図表の著作権は原著者に帰属。本ページは非公式の日本語要約・図解であり、掲載図は独自再構成の概念図。

UI-03 ── toc（目次ピル）

本文系 ── .stats / .quote / .takeaway / .gloss

UI-04 ── stats（定量ハイライト3列）

約 6 倍

主要な定量結果のハイライトをここに

9 基準 × 8 時間

組み合わせ数値もmonoで映える

最高スコア

短い結論ワードでも可

UI-05 ── quote（引用ボックス）＋ UI-06 ── takeaway（結論ボックス）

「引用文はカギ括弧で明示する。意訳には（大意）を添える」（大意）

── 発言者名（出所の説明）

Takeaway ── 実務への示唆

セクションや記事全体の結論・実務への示唆をここにまとめる。左の縦線がclay、ラベルはmono大文字。

UI-07 ── gloss（用語ミニ解説・4語まで）

用語A

13px程度の短い説明文をここに置く

用語B

1〜2行で収まる分量が目安

用語C

monoの用語名＋ゴシックの説明

用語D

5語以上になるなら表を使う

比較系 ── table / .cmp-grid / .steps

UI-08 ── table（仕様・事実の比較表）

観点	選択肢 A	選択肢 B
形式	行見出しはmono小文字	セルは15.5pxの本文
用途	列挙可能な事実の対比	性格の対比なら .cmp-grid を使う

UI-09 ── cmp-grid（性格対比カード：主役 .clay vs 比較対象 .gray）

主役 A大胆な戦略

強調したい側を clay 背景に
箇条書きは currentColor のダッシュ

比較 B堅実な戦略

比較対象側はグレー背景
3項目程度までが読みやすい

UI-10 ── steps（段階的プロセス・矢印つき）

01 ── PHASE

第1段階

各ステップの説明を13.5pxで

→

02 ── PHASE

第2段階

モバイルでは縦並びに自動切替

→

…

未確定の段階

破線 .ghost で「続き」を表現

図版・出典 ── .fig / .srcs

UI-11 ── fig（図版コンテナ：cap＋diagram＋note。この枠自体が実例）

※ fig-note には概念図の再構成注記を必ず書く。SVGは .diagram（min-width:600px・スマホ横スクロール）、小さい図は .diagram.narrow＋.grid2 で2枚並べる。

UI-12 ── srcs（出典リスト）

一次出典：著者「タイトル」媒体・公開日・閲覧日
言及資料：記事内で参照されている資料を列挙する

SVGダイアグラム 8種

座標・クラスはすべて動作検証済み。references/diagrams.md のレシピ番号（§1〜§8）と対応しています。ラベルを差し替えてそのまま使えます。

D-01 ── フローチャート（§1：手順・分岐・修正ループ）

D-02 ── シーケンス図（§2：役割間のやり取り・ループ枠つき）

D-03 ── ループ型アローダイアグラム（§3：サイクル）

D-04 ── 関係図・相関図（§4：2パターン対比・自己ループ・境界）

D-05 ── ベン図（§5：3要素の重なり・成立条件）

※ 解釈を含む整理には「原典を基に作成者が整理」の注記を付けること。

D-06 ── 折れ線グラフ（§6：推移・2系列比較・注釈・差分ブラケット）

※ 実データを再現できない場合は「傾向の概念的な再構成」と必ず明記する。

D-07a ── 棒グラフ（§7：相対比較）

D-07b ── 推移曲線（§7：grid2で並べる）

D-08 ── 入れ子ループ図（§8：二重構造・包含・ストレージ円筒）