TL;DR

• D2（テキスト→図のDSL）をsvg-diagramスキルに組み込めるか試した → 元の手書きSVGに完敗
• 次に「装飾を厚くする方向」（影・丸バッジ・ピル・両端装飾線）でV2を作った → これも実はアンチパターンだった
• 最終的に Müller-Brockmannグリッドに乗せる方向 に着地。装飾を削って整列とサブタイトルで仕上げるのが正解
• svg-diagramスキルに新しいgrid-alignment.mdを追加して規律を明文化、同じページの6枚のSVG全部をGrid版に書き直した
• 結論: スキルに足すべきは D2でも装飾でもなく「グリッド規律と1図1メッセージの徹底」

きっかけ: D2をsvg-diagramスキルに入れるべきか

このサイトには svg-diagram という、書籍画像や指示からSVG図解を作るためのスキルがある。最近X（旧Twitter）で D2 （d2lang.com）というテキスト→図の作図DSLが盛り上がっていた。A -> B のように関係を書くと自動レイアウトでSVGが出てくる。

• Mermaidと同じ系統だが、レイアウトエンジン（Dagre / ELK / TALA）を切り替えられ、見た目が綺麗
• 採用例: Elastic / Sourcegraph / Temporal / JetBrains
• ライセンス: MPL-2.0（商用可）

これをsvg-diagramスキルに組み込めば、作図の手間が一段減るのではと思った。

試作1: D2で同じ図を再現してみた → 完敗

検証材料は、不動産投資ガイドの第2章にある「投資の型4分類」の図。

元のSVG（手書き、座標固定）:

D2で書いたソース（座標ゼロ、構造のみ）:

direction: down

title: 物件より先に型を決める — 個人に合うのはコアプラス型 { shape: text }

types: 低リスク・低利回り ────► 高リスク・高利回り {
  grid-columns: 4
  grid-gap: 16

  core: |md
    **① コア型**

    一等地を保有し
    賃貸収入を重視
  | { style.fill: "#F2F2F2" }

  coreplus: |md
    **② コアプラス型**

    都心の二等地で
    賃貸収入と値上がり
    のバランスを取る

    **玉川氏の投資もここ**
  | { style.fill: "#fce4ec"; style.stroke: "#ed1e79" }

  valueadded: |md
    **③ バリューアデッド型**

    割安物件に付加価値
    企画力勝負
  | { style.fill: "#F2F2F2" }

  opportunistic: |md
    **④ オポチュニスティック型**

    競売・立ち退き等の
    訳あり案件
    資金力と専業性が必要
  | { style.fill: "#F2F2F2" }
}

reasoning: |md
  ### コアプラス型が個人の武器と噛み合う3つの理由

  - レバレッジで税引後IRRは十数%
  - 追証もロスカットもない
  - 出口を強制されない
| { style.fill: "#F2F2F2" }

title -> types: { style.opacity: 0 }
types -> reasoning: { style.stroke: "#BFBFBF" }

D2 + Dagreエンジンの出力:

D2 + ELKエンジンの出力:

苦戦したポイント

• カード幅が揃わない: D2はコンテンツ量で自動サイズ。「4枚同じ幅」を強制するには各カードに width: を明示する必要がある
• 矢印の発生点: コアプラスの真下から伸ばしたかったが、コンテナ全体の中央下から伸びる
• リスク軸の独立配置: 元のSVGでは横一本の補助線だったが、D2ではtypesコンテナのラベルにせざるを得ず位置の自由度がない
• 全体のコンパクトさ: D2のデフォルト余白は広く、間延びする

完敗。元のSVGと並べると、装飾の意図が消えてラフな構成図になっている。

試作2: SVGに装飾を厚くした → これも実はアンチパターンだった

D2が苦戦したことで、逆に元のSVGが何を効かせていたかが見えた。そこで方針を「SVGに装飾を厚くする」に切り替えた。これがV2。

V2でやったこと:

• カードを白 + ドロップシャドウで「浮かせ」
• 連番①〜④を 丸バッジ に変換、コアプラスだけピンク塗りに
• コアプラスカードを4px上に突出 + 影を濃く
• 「玉川氏の投資もここ」を ★ピンクピル形バッジ に
• 理由パネル左に アクセントバー + 各行にチェック付き丸バッジ
• キーメッセージの両側に 短い装飾線 を入れて章末感
• リスク軸を破線に

「Beforeより明らかに良くなった」気がした。実際、Beforeより読みやすい。

でも、これは違った。

別セッションでMüller-Brockmannグリッドシステムの規律を当て直して気づいたのは、V2は装飾を増やす方向に振りすぎていて、グリッドの秩序を壊しているということ。

具体的にV2のどこが反グリッドだったか:

• ドロップシャドウ: 「浮かせる」のは強い表現で、ノイズになる。グリッドが効いていれば塗りの違いだけで階層は十分つく
• 丸バッジ + ★ピンクピル + アクセントバー + チェック丸バッジ: 装飾要素が増えるほど、「どこが情報でどこが装飾か」の判別コストが上がる
• 両端装飾線で囲んだキーメッセージ: そもそも 1図に2つのメッセージを置くのが間違い。タイトル＋サブタイトルで言い切るべきで、図下に結論文を別途置くと「1図1メッセージ」原則に違反する
• コアプラスカードの4px突出: グリッドのベースラインから外れる。整列が崩れて「Müller-Brockmannでもなければ手書きでもない」中途半端な状態

つまりV2は「Beforeを改善しているように見えるが、スキルが追求すべき方向とは反対側」だった。

試作3: Müller-Brockmannグリッドに乗せた → これが正解

方針を完全に逆転させて、装飾を減らす方向で作り直したのがV3。

V3の規律:

• 12カラム + 8pxベースライン（左右margin 24px、gutter 12px、カラム幅45px）
• すべての要素はカラム線とベースラインにスナップ
• カード = 3カラム分（159px）× 4枚で12カラム完全分割
• <rect>に stroke も rx も使わない。塗り（#f1f1f2 通常 / #fce4ec 強調）の違いだけで階層を作る
• ドロップシャドウ・丸バッジ・ピル・装飾線・章末キーメッセージ — V2で足したものは全部削除
• タイトル + サブタイトル（黒文字 15px） で1メッセージを完結。図下にキーメッセージを置かない
• 連番だけは情報の階層として残し、Space Monoで大きく（01〜04）
• 玉川氏マーカーは細いラベルに（V2のピル形バッジは過剰だった）

情報量はBeforeと同じ。装飾は減った。なのにBeforeよりもクリーンに読める。

これが「磨き上げ」の正解だった。

svg-diagramスキルを書き直した

ここが今回の最大の収穫。V1→V2→V3の試行錯誤から、svg-diagram スキルに新しいリファレンス references/grid-alignment.md を追加した。

SKILL.md 冒頭にも次の文を入れて、新規SVG作成でも既存リファクタでも同じ規律を強制する。

新しく SVG 図解を作るときは、まず references/grid-alignment.md を読むこと。 ユーザーから文章（メッセージ・本文の抜粋・説明）を渡されて「これを図にして」と頼まれた場合も、既存記事内の SVG 図解を整列し直す場合も、どちらも同じグリッド規律で作る。

grid-alignment.md の主要ルール（抜粋）:

これらのルールは、私のV2が踏んだアンチパターンをひとつずつ明示的に禁止している。スキルを呼んだ次回からは、V2方向に間違って走らない構造になった。

同じページの残り5枚も全部Grid版に書き直した

スキル更新と並行して、同じ第2章ページにあるSVG6枚全部をGrid版に書き直した。装飾を削って整列とサブタイトルで仕上げる規律を、全6枚に統一適用。

① 投資の型4分類（既出、再掲）

Before	V2（アンチパターン）	After（Grid版・正解）

V2は装飾過多。V3=Grid版が最終形。

② 三大VS — 都心 vs 地方・区分 vs 一棟・木造 vs RC

Before（元の手書き版）:

After（Grid版）:

変更点:

• グレーの行ラベル帯（#e3e4e6）・通常カード（#f1f1f2）・強調カード（#fce4ec）の3階調の塗り分けだけで構造を作った
• 元のサブタイトル「現地と書類で見つけた問題は…」（小さなグレー文字）を**「答えを支えるのは利回りではなく、融資と出口の構造」（黒文字15px）に昇格**。タイトル直下のサブタイトルが結論文を担う形に
• 図下の「答えを支えるのは…」を削除（タイトル+サブタイトルに統合済み）
• rx や stroke を全部消した。塗りだけで分離

③ 場所の線引き — 電車30分

Before:

After（Grid版）:

変更点:

• 5セグメントの帯をすべてカラム線・ベースラインに乗せた
• 強調ゾーン（二等地 + 30分圏）を #fce4ec で塗り、それ以外を #f1f1f2
• サブタイトルを「30分を超えると通勤率が急落 — 需要の母体が東京の雇用から地域経済に変わる」に統合
• 図下のキーメッセージを削除

④ お金で解決できる問題 vs できない問題

Before:

After（Grid版）:

変更点:

• 左パネル（解決できる）= グレー塗り #f1f1f2、右パネル（解決できない）= マゼンタヘッダー帯 #ed1e79 + ピンク塗り #fce4ec
• 強弱のメリハリは塗りだけで作り、stroke も rx も使わない
• 各項目の横並びがすべて8pxベースラインにスナップ、左右対称
• 結果バー（最下段）でメッセージを締めくくる

⑤ 業者の論理 — 3つの疑問と答え

Before:

After（Grid版）:

変更点:

• Q&Aを 4 + 8カラム の2列構成で揃えた（質問列 col 1-4、回答列 col 5-12）
• 質問ラベル帯（#e3e4e6）と回答カード（#f1f1f2）の2階調で読み取りが整理
• 質問→回答の連結矢印を削除（同じ行に並んでいれば矢印なしで読める）
• V2で入れていた「Q1/Q2/Q3 のピンク丸バッジ」「破線矢印」「左ピンクボーダー」を全部削除

⑥ 安く買う4つの入口

Before:

After（Grid版）:

変更点:

• 4カードを3カラムずつ×4で12カラム完全分割
• 任意売却カードはピンク塗り #fce4ec で強調、他はグレー #f1f1f2
• V2で入れた「4px上に突出」「強い影」「◎/△/△/○の評価ピル」を全削除
• 評価記号（◎/△/△/○）はテキストだけに戻し、強調色（マゼンタ vs ニュートラル）で十分機能している

学び

ツール乗り換えより、まず原則を直す

D2を試した最初の動機は「乗り換えれば良くなる」。でも実際の改善要因はツールの差ではなくスキルの規律不足だった。

「装飾を増やす」と「整列で整える」は別方向

「Beforeを改善する」と言われると、つい装飾を足したくなる。だが装飾を増やす方向はノイズも増やす。グリッドに乗せて余白を整えれば、装飾なしでも読める。

V2の失敗は、デザインの典型的な迷路だった。ノイズを足して改善した気になる罠を、自分の手で実演してから抜け出すまで30分かかった。

スキルに「禁止事項」を書く価値

grid-alignment.md の §2「装飾の禁止事項」§3「四角は塗りで区切る（枠線禁止）」§5「セパレーター線で区切らない」は、全部V2でやってしまったこと。これらを「やってはいけない」とスキルに明記しておけば、次回呼ばれたAIは同じアンチパターンを踏まない。

「やるべきこと」より「やらないこと」を書くほうが、スキルの安定品質には効くと分かった。

D2はいつ使うのか？

このスキル更新を経て、D2はsvg-diagramスキルには組み込まないことが確定した。理由は記事冒頭の通り（書籍由来のグリッド+情報密度の高い図には弱い）。

D2が活きるのは別の領域:

• フローチャート（ノードと矢印が中心）
• システム構成図（接続関係が情報の主体）
• シーケンス図（時系列の対話）
• 組織図（階層が中心）

これらは別途専用スキル（または既存のDrawioスキル）で扱うのが自然。

まとめ

やったこと:

1. D2をsvg-diagramスキルに組み込むかを検証 → 失敗
2. 「装飾を厚くする」V2方向 → これも実はアンチパターンだった
3. Müller-Brockmannグリッド規律でV3を作る → 正解
4. svg-diagram スキルに references/grid-alignment.md を新規追加、SKILL.md 冒頭で常に読む指示を追加
5. 同じページの6枚のSVG図解を全部Grid版で書き直し（実装は *Grid.vue コンポーネントとして）

この記事の最大の主張:

• ツール乗り換え（D2導入）より、スキルの規律明文化の方が遥かに効く
• 「装飾を増やす」のは典型的なアンチパターン。整列と余白で整えるのが正攻法
• スキルには「やるべきこと」より「やらないこと」を書くほうが安定する

道具より先に、やらないことを決める。今回の試行錯誤で身に染みた教訓だった。