diagram

図解

概念図や図表を SVG として作成し、PNG にレンダリングして、自己批評と反復を行い、ユーザーに提示します。

使用する場面

• 概念図（ベン図、フロー図、アーキテクチャ図）
• データグラフ（折れ線、棒、面）
• スライドやドキュメント向けの視覚的な説明

使用しない場面

• ヒーロー画像やフォトリアルなコンテンツ（picture スキルを使用）
• シンプルなテキストの書式設定（Markdown で十分です）
• スクリーンショットや画面のモックアップ（別のツールを使用）

ワークフロー

1. 内容を理解する

通常、ユーザーから提供されるのは次の内容です。

• 構成 — 「矢印でつながったボックス」、「重なりのあるベン図」
• 内容 — 含める実際のテキストやデータ
• 目的 — 伝えたいメッセージや洞察

描画する前に、これらを確認します。構成はユーザーが決め、実際の作成はあなたが行います。

2. ブランドを適用する（該当する場合）

ブランドスキル（例：itv-brand）がある場合は、仕様を確認します。

• カラーパレット
• タイポグラフィ
• ビジュアルの原則

ブランドの指定がない場合は、適切なデフォルトを使用します。

• 明確な階層（「コントラスト」を参照）
• パレットに変化をつけます。 毎回、暗い背景をデフォルトにしないでください。明るい色調、暖色系、パステル調、アースカラー、落ち着いた色調は、いずれも有効です。内容の雰囲気に合わせます。遊び心のあるテーマには明るい色、企業向けにはアクセントカラーを使ったすっきりした白、技術的なテーマにはクールなグレーを使います。暗い背景も選択肢の一つですが、デフォルトではありません。

3. SVG を作成する

キャンバス： デフォルトは 1280×720（16:9）です。ブランドスキルで上書きされる場合があります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
  <rect x="0" y="0" width="1280" height="720" fill="#BACKGROUND"/>
  
</svg>

人が編集しやすい SVG にする場合： 複数行のテキストは、1 つの transform グループ内の兄弟要素として構成します。

<g transform="translate(250, 175)">
  <text x="0" y="0" text-anchor="middle">Line One</text>
  <text x="0" y="28" text-anchor="middle">Line Two</text>
</g>

これにより、Inkscape などのエディターで各行をひとまとまりのオブジェクトとして選択できます。（注：Affinity ではインポート時に分解されます。references/svg-interop.md を参照してください。）

重要： 意味的にひとまとまりの行に対して、互いに関連付けられていない <text> 要素を個別に作成してはいけません。「新しい物語 / を伝える」が 1 つのラベルなら、必ず 1 つのグループにします。グループ化されていない行は、編集を非常に困難にします。

4. PNG にレンダリングする

前提条件： brew install librsvg — 矢印マーカーと SVG の忠実なレンダリングに必要です。

rsvg-convert -w 1280 -h 720 input.svg -o /tmp/chart.png

sips は高速ですが、SVG マーカー（矢印や矢印の先端）が警告なしに削除されます。sips はマーカーを含まない図にのみ使用してください。rsvg-convert がインストールされていない場合は、レンダリング前にユーザーに警告してください。矢印が表示されません。

5. 自己批評（CRAP + 構成）

ユーザーに表示する前に PNG を確認し、CRAP の原則に照らして批評します。

近接性 — 関連する項目がまとめられていますか？

• ラベルは、それが説明する対象の隣に配置します（別の列で 300px 離れた位置に置かないでください）
• 注釈は、視線を探し回らなくてすむほど近くに配置します
• グループ内よりもグループ間の余白を広くします
• 余白は整理して配置し、一か所だけ大きく空いて別の場所が詰まることのないようにします
• 関連のない要素間には最低約 22px（0.3" 相当）の間隔を確保します。意図的にグループ化している場合を除き、それより近いと衝突しているように見えます

整列 — 要素は視覚的につながっていますか？

• すべての要素をほかの何かに揃えます
• 支配的な整列システムを一つにします
• 注釈を列に並べる場合は、X 座標を一つに揃えます（不揃いだと素人っぽく見えます）
• キャンバス全体に強い不可視の線を通します
• キャンバス全体で整列させると、関連のない要素同士にも統一感が生まれます

反復 — スタイルに一貫性がありますか？

• 類似する要素は同じスタイルにします
• 色数を絞り、体系的に繰り返し使用します
• 明確な視覚的リズムを作ります
• フォントサイズは最大 3～4 段階にまとめます

コントラスト — 階層は明確ですか？

• タイトルを最も大きくし、次に強調要素、その次にコンテンツを配置します
• 主要なデータを副次的なデータより目立たせます
• 「弱々しい」差は避け、すべてのコントラストを大胆にします。階層の異なる 2 つの要素は、サイズを少なくとも 2 倍変えます（例：タイトル 36px、本文 18px。20px 対 16px ではありません）
• 小さいサイズでのコントラストも確認します。問題が表面化することがあります
• 暗い背景上のテキストには、最低でも #e2e8f0 を使用します。コントラスト比は WCAG の 4.5:1 を絶対的な下限とします

構成の確認 — CRAP の確認後、一歩引いて次の点を確認します。

• 構成はキャンバスの中央にありますか？（目測ではなく計算します）
• 余白は左右、上下でバランスが取れていますか？（両方の軸を確認します。横方向で中央に揃っていても、上部に偏っていると不自然に見えます）
• ほかの要素と視覚的な関係のない孤立した要素はありませんか？
• キャンバスの端の余白：すべての辺で外側約 10% の範囲にはコンテンツを置かないようにします。コンテンツが端に触れていると、未完成に見えます

中央揃えの計算：

left_edge = leftmost content x-coordinate
right_edge = rightmost content x-coordinate
content_center = (left_edge + right_edge) / 2
offset = canvas_center - content_center
# Shift everything by offset

詳細な改善方法については、references/design-principles.md を参照してください。

6. 縮小サイズでの確認

PNG を 50～75% のサイズで表示するか、目を細めて確認します。原寸では見えにくい問題が明らかになります。

• 中央揃えの問題が目立ちます
• 競合する要素がわかります
• 階層が平坦になり、重要な要素が引き続き目立っているか確認できます
• コントラストの低いテキストが見えなくなります

小さくしたときに何かがおかしく見えるなら、実際に問題があります。

7. 修正して再レンダリング

問題が見つかった場合は修正し、再度レンダリングします。一つの修正が別の問題を生むことはよくあります。重なりを直すために位置を変えると新たな隙間ができたり、テキストのサイズを変えると整列が崩れたりすることがあります。完了と判断する前に、少なくとも 2 回は批評のサイクルを実施します。

よくある修正：

• 中央揃えがずれている → オフセットを計算し、すべての要素を移動します
• 注釈が離れすぎている → 近づけるか、要素の内側に配置します
• 孤立した要素がある → 接続線を追加するか、何かに揃えます
• コントラストが低い → 暗い背景上のテキストは、最低でも #e2e8f0 に引き上げます
• テキストが図形の端に触れている → すべての辺で境界から 10～15px 内側にテキストを配置します
• 情報が詰まりすぎている → テキストを縮小するのではなく、複数のビジュアルに分けます

8. 完全性の確認

ユーザーに表示する前に、この分野に欠けているものはないかを確認します。誰かのメンタルモデルを視覚化するのですから、期待される重要な要素をすべて取り込めていますか？「データパートナーシップ」の図に、3 つあるのに 2 つしか記載されていなければ、ユーザーは気づきます。これはデザインではなく、コンテンツの正確性に関することです。

9. ユーザーに表示

open -a "Google Chrome" /tmp/chart.png

ユーザーがファイルを必要とする場合は、デスクトップにコピーします。

デザイン原則

階層

タイトル > 強調要素 > コンテンツ。階層は最大 3 段階にします。タイトルを最も大きくします。重要な洞察（例：ベン図の交差部分）は 2 番目にします。それ以外はすべて、これらを支える要素です。階層間の差は一目でわかるようにし、タイトルと本文のサイズは最低でも 2 倍変えます。

包含

ベン図では、共通部分のテキストが重なり合う領域の内側に視覚的に収まるようにします。各コンテンツがどの領域に属するか、明確に分かるようにしてください。

領域の明確さ

またがりや、「これはどちら側に属するのか」という曖昧さをなくします。コンテンツは明確な領域に配置してください。

ラベルを線に触れさせない

円やボックスのラベルは、端から十分に離します。ラベルは真上の中央ではなく、「時計の位置」（10時や2時の方向）に配置します。図形（カード、バナー、角丸長方形）の内側にテキストを置く場合は、すべての辺から10～15pxの余白を設けます。図形の端に触れるテキストは窮屈で、意図せず配置されたように見えます。

空間を活用する

• グラフ領域はキャンバスの約80％を使います（端から約10％の余白を確保）。
• 「空間を埋める」とは、単に「十分大きくする」ことではなく、中央に配置してバランスを取ることです。
• 下部に余白がある場合、要素が小さすぎるか、配置が適切でない可能性があります。
• 要素は縦横比を保ったまま一様に拡大し、テキストは決して引き伸ばしません（縦横比は厳守します）。
• すべてを1つに詰め込んで縮小するより、複数のビジュアルに分けることを優先します。窮屈なボックスが12個ある図は、ビジュアルではなく文書です。1つのキャンバスに3～4個の重要な要素がちょうどよい数です。

散らして配置し、積み重ねない

領域内に複数の詳細項目（ベン図の円の中の項目など）を配置するときは、領域を満たすように自然に散らして配置します。整然と縦に並べたり、箇条書きのように配置したりするのを既定にしないでください。それは文書としての考え方であり、ビジュアルとしての考え方ではありません。項目の間に余白を作り、自然に空間を占めるようにします。積み重ねると硬い印象になり、散らすとデザインされた印象になります。

表示テキストの大文字表記

ラベルとタイトルでは、一貫したタイトルケースの大文字表記を使います。

ラベルの具体性

仕上げる前に、ラベルが具体的か確認します。名詞だけでは意味が伝わりにくいことが多いため、修飾語を加えます。

• 「命名」→「一貫性のある命名」
• 「中小企業向け」→「中小企業向けツール」
• 「モデル」→「より優れた予測モデル」

次の点を確認してください。背景を知らない人でも、これが何を意味するか理解できるでしょうか。そうでなければ、形容詞を加えます。

チェスタトンの柵

要素を削除する前に、「これはどんな役割を果たしているのか」と問いかけます。

• 軸ラベルは概念上の空間（X軸とY軸）を示します。
• 注釈はラベルだけでなく意味を伝えます（「この広告がこのクリックにつながった」は「ラストクリック」とは異なります）。
• 幅を示す表示は、ビジュアルが示唆するメッセージを強調します。
• 凡例パネルはメタ情報をまとめます。
• 「説明」を「ノイズ」と取り違えないでください。

メタファーを尊重する

ビジュアルのメタファーにはルールがあります。ルールを破ると、理解しにくくなります。

• はしご：横木は支柱の内側に収め、支柱より幅を広くしません。
• ベン図：コンテンツがどの領域に属するか、明確にします。
• フロー：矢印は流れの方向を示します。
• ツリー：子要素は親要素の下に配置します。

ビジュアルがメタファーのルールに反すると、見る人のメンタルモデルも崩れます。

少ないほどよい（特に重なり部分）

すべての領域にラベルを付ける必要はありません。ベン図では、周囲のコンテンツから重なり部分の意味が明らかな場合、何も書かずに空けておきます。すべてにラベルを付けるとノイズになります。無理に「相乗効果」と付けるより、中央をラベルなしにするほうが効果的な場合があります。次の点を問いかけてください。このラベルは意味を加えているでしょうか。それとも、付けるべきだと思って付けているだけでしょうか。

孤立した要素を作らない

すべての要素は、ほかの要素と視覚的な関係を持たせます。

• コールアウトボックスが単独で浮いている場合は、線、整列、近接などでつなげます。
• ほかの要素との関係がないと、間違いのように見えます。
• 「独立した」項目でも、何かに整列させます。

アイコンに絵文字を使わない

絵文字やUnicode記号をビジュアル要素として使うことは避けてください。プラットフォーム、ブラウザー、エクスポート形式によって表示が一貫しません。✅ではなくチェックマークのパスを持つ適切なSVG図形を使います。⚠️ではなく、感嘆符を入れた三角形を使います。

キー／凡例の配置

優先順位は次のとおりです。

1. 最適： キーが不要。ビジュアルだけで意味が分かる
2. 許容範囲： キーパネルにまとめる。すべてのメタ情報を1か所に集約する
3. 最も避けるべき： メタ情報を散在させる。異なる隅に情報が分かれている

キーが必要なら、1か所にまとめます。色の意味を説明するラベルを加える必要がある場合は、色の使い方自体に問題がある可能性があります。

主要仕様

要素	サイズ	備考
タイトル	36-40px	最も大きく、最上位の階層
強調テキスト	24-28px	2番目の階層
ラベル	20-24px	円や領域のラベル
コンテンツテキスト	18-20px	領域内
線幅	3-4px	円の輪郭、コネクター

ブランドスキルを使った作成

ブランドスキルがある場合：

1. 色、フォント、仕様を確認するために、その brand-guide.md を読みます
2. その仕様を SVG に適用します
3. ブランドスキルでキャンバスサイズが異なる場合があります

例：ITV ブランドのチャートでは、itv-styling スキルも呼び出します。

アンチパターン

パターン	問題	対処
自己批評を省略する	品質上の問題が残る	ユーザーに見せる前に必ずレンダリングして確認します
コントラストの低いテキスト	プロジェクターで読みにくい	暗い背景には白またはそれに近い色を使い、WCAG 4.5:1 以上を確保し、50% ズームでテストします
レイアウトが混み合っている	視覚的に過剰になる	ビジュアル1つにつき主要な要素を3〜4個にし、縮小するのではなく分割します
サイズの差が小さい	階層が見えない	階層間で最低2倍の差をつけます（タイトル36px／本文18px）
テキストが図形の端に接している	窮屈に見える	すべての辺に10-15pxの余白を設けます
1回だけ修正し、再確認しない	新たな問題が生じる	最低2回の批評サイクルを実施します
毎回同じ暗い背景を使う	単調になり、雰囲気が合わない	コンテンツに合わせて配色を変えます
アイコンとして絵文字を使う	レンダリングが一貫しない	SVG の図形を使います
ブランド確認を省略する	スタイリングに一貫性がなくなる	ブランドが適用される場合は、まずブランドスキルを読み込みます

参考資料

• references/design-principles.md — SVG 固有の対応策を含む CRAP フレームワークの全容
• references/slide-design-principles.md — スライド固有の基準（間隔、密度、レイアウトの用語）。出力がプレゼンテーション用の場合に読み込みます。ユニバーサルルール（U のマークが付いたもの）はすべての図に適用されます。
• references/svg-interop.md — SVG エディターの互換性に関する注意事項
• references/svg-recipes.md — 一般的な要素のコードスニペット