[{"data":1,"prerenderedAt":1537},["ShallowReactive",2],{"content-/svg-diagram-skill-upgrade":3,"related-/svg-diagram-skill-upgrade":1484,"all-pages-for-dir":1535,"og-image-/svg-diagram-skill-upgrade":1536},{"id":4,"title":5,"body":6,"category":1465,"description":1466,"extension":1467,"meta":1468,"navigation":147,"path":1469,"project_name":1470,"published":1471,"publishedAt":1472,"seo":1473,"stem":1474,"tags":1475,"todo":1482,"unpublished":1471,"updatedAt":1482,"__hash__":1483},"pages/2026-06/2026-06-14/svg-diagram-skill-upgrade.md","D2を試したら結局SVGダイアグラム・スキルを書き直すことになった話 — 同じページの6枚を全部Grid版で出し直す",{"type":7,"value":8,"toc":1440},"minimark",[9,14,58,61,65,85,96,99,101,105,108,113,120,125,428,433,439,444,450,454,488,491,493,497,504,510,513,552,555,560,567,570,600,607,609,613,624,630,633,701,706,709,711,714,724,730,746,751,912,919,921,925,931,935,966,969,973,978,983,988,993,996,1029,1033,1038,1043,1047,1052,1054,1073,1077,1081,1086,1090,1095,1097,1124,1128,1132,1137,1141,1146,1148,1172,1176,1180,1185,1189,1194,1196,1215,1217,1220,1224,1231,1281,1285,1292,1299,1303,1312,1319,1323,1330,1333,1359,1362,1364,1367,1372,1402,1407,1429,1436],[10,11,13],"h2",{"id":12},"tldr","TL;DR",[15,16,17,21,29,40,52],"ul",{},[18,19,20],"li",{},"D2（テキスト→図のDSL）をsvg-diagramスキルに組み込めるか試した → 元の手書きSVGに完敗",[18,22,23,24,28],{},"次に「",[25,26,27],"strong",{},"装飾を厚くする方向","」（影・丸バッジ・ピル・両端装飾線）でV2を作った → これも実はアンチパターンだった",[18,30,31,32,35,36,39],{},"最終的に ",[25,33,34],{},"Müller-Brockmannグリッドに乗せる方向"," に着地。",[25,37,38],{},"装飾を削って整列とサブタイトルで仕上げる","のが正解",[18,41,42,43,47,48,51],{},"svg-diagramスキルに新しい",[44,45,46],"code",{},"grid-alignment.md","を追加して規律を明文化、同じページの",[25,49,50],{},"6枚のSVG全部をGrid版に書き直し","た",[18,53,54,55],{},"結論: スキルに足すべきは ",[25,56,57],{},"D2でも装飾でもなく「グリッド規律と1図1メッセージの徹底」",[59,60],"hr",{},[10,62,64],{"id":63},"きっかけ-d2をsvg-diagramスキルに入れるべきか","きっかけ: D2をsvg-diagramスキルに入れるべきか",[66,67,68,69,72,73,76,77,80,81,84],"p",{},"このサイトには ",[44,70,71],{},"svg-diagram"," という、書籍画像や指示からSVG図解を作るためのスキルがある。最近X（旧Twitter）で ",[25,74,75],{},"D2"," （",[44,78,79],{},"d2lang.com","）というテキスト→図の作図DSLが盛り上がっていた。",[44,82,83],{},"A -> B"," のように関係を書くと自動レイアウトでSVGが出てくる。",[15,86,87,90,93],{},[18,88,89],{},"Mermaidと同じ系統だが、レイアウトエンジン（Dagre / ELK / TALA）を切り替えられ、見た目が綺麗",[18,91,92],{},"採用例: Elastic / Sourcegraph / Temporal / JetBrains",[18,94,95],{},"ライセンス: MPL-2.0（商用可）",[66,97,98],{},"これをsvg-diagramスキルに組み込めば、作図の手間が一段減るのではと思った。",[59,100],{},[10,102,104],{"id":103},"試作1-d2で同じ図を再現してみた-完敗","試作1: D2で同じ図を再現してみた → 完敗",[66,106,107],{},"検証材料は、不動産投資ガイドの第2章にある「投資の型4分類」の図。",[66,109,110],{},[25,111,112],{},"元のSVG（手書き、座標固定）:",[66,114,115],{},[116,117],"img",{"alt":118,"src":119},"元のSVG: 投資の型4分類","/2026-06/2026-06-14/1-toshi-no-kata-before.svg",[66,121,122],{},[25,123,124],{},"D2で書いたソース（座標ゼロ、構造のみ）:",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-d2 shiki shiki-themes vitesse-light vitesse-light","direction: down\n\ntitle: 物件より先に型を決める — 個人に合うのはコアプラス型 { shape: text }\n\ntypes: 低リスク・低利回り ────► 高リスク・高利回り {\n  grid-columns: 4\n  grid-gap: 16\n\n  core: |md\n    **① コア型**\n\n    一等地を保有し\n    賃貸収入を重視\n  | { style.fill: \"#F2F2F2\" }\n\n  coreplus: |md\n    **② コアプラス型**\n\n    都心の二等地で\n    賃貸収入と値上がり\n    のバランスを取る\n\n    **玉川氏の投資もここ**\n  | { style.fill: \"#fce4ec\"; style.stroke: \"#ed1e79\" }\n\n  valueadded: |md\n    **③ バリューアデッド型**\n\n    割安物件に付加価値\n    企画力勝負\n  | { style.fill: \"#F2F2F2\" }\n\n  opportunistic: |md\n    **④ オポチュニスティック型**\n\n    競売・立ち退き等の\n    訳あり案件\n    資金力と専業性が必要\n  | { style.fill: \"#F2F2F2\" }\n}\n\nreasoning: |md\n  ### コアプラス型が個人の武器と噛み合う3つの理由\n\n  - レバレッジで税引後IRRは十数%\n  - 追証もロスカットもない\n  - 出口を強制されない\n| { style.fill: \"#F2F2F2\" }\n\ntitle -> types: { style.opacity: 0 }\ntypes -> reasoning: { style.stroke: \"#BFBFBF\" }\n","d2","",[44,133,134,142,149,155,160,166,172,178,183,189,195,200,206,212,218,223,229,235,240,246,252,258,263,269,275,280,286,292,297,303,309,314,319,325,331,336,342,348,354,359,365,370,376,382,387,393,399,405,411,416,422],{"__ignoreMap":131},[135,136,139],"span",{"class":137,"line":138},"line",1,[135,140,141],{},"direction: down\n",[135,143,145],{"class":137,"line":144},2,[135,146,148],{"emptyLinePlaceholder":147},true,"\n",[135,150,152],{"class":137,"line":151},3,[135,153,154],{},"title: 物件より先に型を決める — 個人に合うのはコアプラス型 { shape: text }\n",[135,156,158],{"class":137,"line":157},4,[135,159,148],{"emptyLinePlaceholder":147},[135,161,163],{"class":137,"line":162},5,[135,164,165],{},"types: 低リスク・低利回り ────► 高リスク・高利回り {\n",[135,167,169],{"class":137,"line":168},6,[135,170,171],{},"  grid-columns: 4\n",[135,173,175],{"class":137,"line":174},7,[135,176,177],{},"  grid-gap: 16\n",[135,179,181],{"class":137,"line":180},8,[135,182,148],{"emptyLinePlaceholder":147},[135,184,186],{"class":137,"line":185},9,[135,187,188],{},"  core: |md\n",[135,190,192],{"class":137,"line":191},10,[135,193,194],{},"    **① コア型**\n",[135,196,198],{"class":137,"line":197},11,[135,199,148],{"emptyLinePlaceholder":147},[135,201,203],{"class":137,"line":202},12,[135,204,205],{},"    一等地を保有し\n",[135,207,209],{"class":137,"line":208},13,[135,210,211],{},"    賃貸収入を重視\n",[135,213,215],{"class":137,"line":214},14,[135,216,217],{},"  | { style.fill: \"#F2F2F2\" }\n",[135,219,221],{"class":137,"line":220},15,[135,222,148],{"emptyLinePlaceholder":147},[135,224,226],{"class":137,"line":225},16,[135,227,228],{},"  coreplus: |md\n",[135,230,232],{"class":137,"line":231},17,[135,233,234],{},"    **② コアプラス型**\n",[135,236,238],{"class":137,"line":237},18,[135,239,148],{"emptyLinePlaceholder":147},[135,241,243],{"class":137,"line":242},19,[135,244,245],{},"    都心の二等地で\n",[135,247,249],{"class":137,"line":248},20,[135,250,251],{},"    賃貸収入と値上がり\n",[135,253,255],{"class":137,"line":254},21,[135,256,257],{},"    のバランスを取る\n",[135,259,261],{"class":137,"line":260},22,[135,262,148],{"emptyLinePlaceholder":147},[135,264,266],{"class":137,"line":265},23,[135,267,268],{},"    **玉川氏の投資もここ**\n",[135,270,272],{"class":137,"line":271},24,[135,273,274],{},"  | { style.fill: \"#fce4ec\"; style.stroke: \"#ed1e79\" }\n",[135,276,278],{"class":137,"line":277},25,[135,279,148],{"emptyLinePlaceholder":147},[135,281,283],{"class":137,"line":282},26,[135,284,285],{},"  valueadded: |md\n",[135,287,289],{"class":137,"line":288},27,[135,290,291],{},"    **③ バリューアデッド型**\n",[135,293,295],{"class":137,"line":294},28,[135,296,148],{"emptyLinePlaceholder":147},[135,298,300],{"class":137,"line":299},29,[135,301,302],{},"    割安物件に付加価値\n",[135,304,306],{"class":137,"line":305},30,[135,307,308],{},"    企画力勝負\n",[135,310,312],{"class":137,"line":311},31,[135,313,217],{},[135,315,317],{"class":137,"line":316},32,[135,318,148],{"emptyLinePlaceholder":147},[135,320,322],{"class":137,"line":321},33,[135,323,324],{},"  opportunistic: |md\n",[135,326,328],{"class":137,"line":327},34,[135,329,330],{},"    **④ オポチュニスティック型**\n",[135,332,334],{"class":137,"line":333},35,[135,335,148],{"emptyLinePlaceholder":147},[135,337,339],{"class":137,"line":338},36,[135,340,341],{},"    競売・立ち退き等の\n",[135,343,345],{"class":137,"line":344},37,[135,346,347],{},"    訳あり案件\n",[135,349,351],{"class":137,"line":350},38,[135,352,353],{},"    資金力と専業性が必要\n",[135,355,357],{"class":137,"line":356},39,[135,358,217],{},[135,360,362],{"class":137,"line":361},40,[135,363,364],{},"}\n",[135,366,368],{"class":137,"line":367},41,[135,369,148],{"emptyLinePlaceholder":147},[135,371,373],{"class":137,"line":372},42,[135,374,375],{},"reasoning: |md\n",[135,377,379],{"class":137,"line":378},43,[135,380,381],{},"  ### コアプラス型が個人の武器と噛み合う3つの理由\n",[135,383,385],{"class":137,"line":384},44,[135,386,148],{"emptyLinePlaceholder":147},[135,388,390],{"class":137,"line":389},45,[135,391,392],{},"  - レバレッジで税引後IRRは十数%\n",[135,394,396],{"class":137,"line":395},46,[135,397,398],{},"  - 追証もロスカットもない\n",[135,400,402],{"class":137,"line":401},47,[135,403,404],{},"  - 出口を強制されない\n",[135,406,408],{"class":137,"line":407},48,[135,409,410],{},"| { style.fill: \"#F2F2F2\" }\n",[135,412,414],{"class":137,"line":413},49,[135,415,148],{"emptyLinePlaceholder":147},[135,417,419],{"class":137,"line":418},50,[135,420,421],{},"title -> types: { style.opacity: 0 }\n",[135,423,425],{"class":137,"line":424},51,[135,426,427],{},"types -> reasoning: { style.stroke: \"#BFBFBF\" }\n",[66,429,430],{},[25,431,432],{},"D2 + Dagreエンジンの出力:",[66,434,435],{},[116,436],{"alt":437,"src":438},"D2 + Dagre","/2026-06/2026-06-14/d2-attempt-dagre.svg",[66,440,441],{},[25,442,443],{},"D2 + ELKエンジンの出力:",[66,445,446],{},[116,447],{"alt":448,"src":449},"D2 + ELK","/2026-06/2026-06-14/d2-attempt-elk.svg",[451,452,453],"h3",{"id":453},"苦戦したポイント",[15,455,456,466,472,482],{},[18,457,458,461,462,465],{},[25,459,460],{},"カード幅が揃わない",": D2はコンテンツ量で自動サイズ。「4枚同じ幅」を強制するには各カードに ",[44,463,464],{},"width:"," を明示する必要がある",[18,467,468,471],{},[25,469,470],{},"矢印の発生点",": コアプラスの真下から伸ばしたかったが、コンテナ全体の中央下から伸びる",[18,473,474,477,478,481],{},[25,475,476],{},"リスク軸の独立配置",": 元のSVGでは横一本の補助線だったが、D2では",[44,479,480],{},"types","コンテナのラベルにせざるを得ず位置の自由度がない",[18,483,484,487],{},[25,485,486],{},"全体のコンパクトさ",": D2のデフォルト余白は広く、間延びする",[66,489,490],{},"完敗。元のSVGと並べると、装飾の意図が消えてラフな構成図になっている。",[59,492],{},[10,494,496],{"id":495},"試作2-svgに装飾を厚くした-これも実はアンチパターンだった","試作2: SVGに装飾を厚くした → これも実はアンチパターンだった",[66,498,499,500,503],{},"D2が苦戦したことで、逆に元のSVGが何を効かせていたかが見えた。そこで方針を「",[25,501,502],{},"SVGに装飾を厚くする","」に切り替えた。これがV2。",[66,505,506],{},[116,507],{"alt":508,"src":509},"試作V2: ドロップシャドウ・丸バッジ・ピル・両端装飾線を厚塗り","/2026-06/2026-06-14/1-toshi-no-kata-after-v2.svg",[66,511,512],{},"V2でやったこと:",[15,514,515,518,525,528,535,542,549],{},[18,516,517],{},"カードを白 + ドロップシャドウで「浮かせ」",[18,519,520,521,524],{},"連番①〜④を ",[25,522,523],{},"丸バッジ"," に変換、コアプラスだけピンク塗りに",[18,526,527],{},"コアプラスカードを4px上に突出 + 影を濃く",[18,529,530,531,534],{},"「玉川氏の投資もここ」を ",[25,532,533],{},"★ピンクピル形バッジ"," に",[18,536,537,538,541],{},"理由パネル左に ",[25,539,540],{},"アクセントバー"," + 各行にチェック付き丸バッジ",[18,543,544,545,548],{},"キーメッセージの両側に ",[25,546,547],{},"短い装飾線"," を入れて章末感",[18,550,551],{},"リスク軸を破線に",[66,553,554],{},"「Beforeより明らかに良くなった」気がした。実際、Beforeより読みやすい。",[66,556,557],{},[25,558,559],{},"でも、これは違った。",[66,561,562,563,566],{},"別セッションでMüller-Brockmannグリッドシステムの規律を当て直して気づいたのは、V2は",[25,564,565],{},"装飾を増やす方向に振りすぎていて、グリッドの秩序を壊している","ということ。",[66,568,569],{},"具体的にV2のどこが反グリッドだったか:",[15,571,572,578,584,594],{},[18,573,574,577],{},[25,575,576],{},"ドロップシャドウ",": 「浮かせる」のは強い表現で、ノイズになる。グリッドが効いていれば塗りの違いだけで階層は十分つく",[18,579,580,583],{},[25,581,582],{},"丸バッジ + ★ピンクピル + アクセントバー + チェック丸バッジ",": 装飾要素が増えるほど、「どこが情報でどこが装飾か」の判別コストが上がる",[18,585,586,589,590,593],{},[25,587,588],{},"両端装飾線で囲んだキーメッセージ",": そもそも ",[25,591,592],{},"1図に2つのメッセージを置くのが間違い","。タイトル＋サブタイトルで言い切るべきで、図下に結論文を別途置くと「1図1メッセージ」原則に違反する",[18,595,596,599],{},[25,597,598],{},"コアプラスカードの4px突出",": グリッドのベースラインから外れる。整列が崩れて「Müller-Brockmannでもなければ手書きでもない」中途半端な状態",[66,601,602,603,606],{},"つまりV2は「Beforeを改善しているように見えるが、",[25,604,605],{},"スキルが追求すべき方向とは反対側","」だった。",[59,608],{},[10,610,612],{"id":611},"試作3-müller-brockmannグリッドに乗せた-これが正解","試作3: Müller-Brockmannグリッドに乗せた → これが正解",[66,614,615,616,619,620,623],{},"方針を",[25,617,618],{},"完全に逆転","させて、装飾を",[25,621,622],{},"減らす","方向で作り直したのがV3。",[66,625,626],{},[116,627],{"alt":628,"src":629},"最終V3: Müller-Brockmann 12カラム + 8pxベースライン準拠","/2026-06/2026-06-14/1-toshi-no-kata-after-v3.svg",[66,631,632],{},"V3の規律:",[15,634,635,641,647,650,675,681,687,698],{},[18,636,637,640],{},[25,638,639],{},"12カラム + 8pxベースライン","（左右margin 24px、gutter 12px、カラム幅45px）",[18,642,643,644],{},"すべての要素はカラム線とベースラインに",[25,645,646],{},"スナップ",[18,648,649],{},"カード = 3カラム分（159px）× 4枚で12カラム完全分割",[18,651,652,666,667,670,671,674],{},[25,653,654,657,658,661,662,665],{},[44,655,656],{},"\u003Crect>","に ",[44,659,660],{},"stroke"," も ",[44,663,664],{},"rx"," も使わない","。塗り（",[44,668,669],{},"#f1f1f2"," 通常 / ",[44,672,673],{},"#fce4ec"," 強調）の違いだけで階層を作る",[18,676,677,678],{},"ドロップシャドウ・丸バッジ・ピル・装飾線・章末キーメッセージ — V2で足したものは",[25,679,680],{},"全部削除",[18,682,683,686],{},[25,684,685],{},"タイトル + サブタイトル（黒文字 15px）"," で1メッセージを完結。図下にキーメッセージを置かない",[18,688,689,690,693,694,697],{},"連番だけは情報の階層として残し、Space Monoで大きく（",[44,691,692],{},"01","〜",[44,695,696],{},"04","）",[18,699,700],{},"玉川氏マーカーは細いラベルに（V2のピル形バッジは過剰だった）",[66,702,703],{},[25,704,705],{},"情報量はBeforeと同じ。装飾は減った。なのにBeforeよりもクリーンに読める。",[66,707,708],{},"これが「磨き上げ」の正解だった。",[59,710],{},[10,712,713],{"id":713},"svg-diagramスキルを書き直した",[66,715,716,717,719,720,723],{},"ここが今回の最大の収穫。V1→V2→V3の試行錯誤から、",[44,718,71],{}," スキルに新しいリファレンス ",[44,721,722],{},"references/grid-alignment.md"," を追加した。",[66,725,726,729],{},[44,727,728],{},"SKILL.md"," 冒頭にも次の文を入れて、新規SVG作成でも既存リファクタでも同じ規律を強制する。",[731,732,733],"blockquote",{},[66,734,735,741,742,745],{},[25,736,737,738,740],{},"新しく SVG 図解を作るときは、まず ",[44,739,722],{}," を読むこと。"," ユーザーから文章（メッセージ・本文の抜粋・説明）を渡されて「これを図にして」と頼まれた場合も、既存記事内の SVG 図解を整列し直す場合も、",[25,743,744],{},"どちらも同じグリッド規律で作る","。",[66,747,748,750],{},[44,749,46],{}," の主要ルール（抜粋）:",[752,753,754,767],"table",{},[755,756,757],"thead",{},[758,759,760,764],"tr",{},[761,762,763],"th",{},"観点",[761,765,766],{},"ルール",[768,769,770,783,803,811,831,849,866,881,892,904],"tbody",{},[758,771,772,776],{},[773,774,775],"td",{},"グリッド",[773,777,778,779,782],{},"viewBox ",[44,780,781],{},"720 × N","、12カラム、margin 24px、gutter 12px、カラム幅 45px、baseline 8px",[758,784,785,788],{},[773,786,787],{},"配置",[773,789,790,792,793,792,796,799,800],{},[44,791,656],{}," ",[44,794,795],{},"\u003Cline>",[44,797,798],{},"\u003Ctext>"," の ",[25,801,802],{},"x はカラム線にスナップ、y は 8 の倍数",[758,804,805,808],{},[773,806,807],{},"装飾の追加禁止",[773,809,810],{},"英語kicker（\"REAL ESTATE — INVESTMENT TYPOLOGY\" 等）・\"LOW RISK / HIGH RISK\" など独自のローマ字ラベルを足さない。元が日本語なら日本語のまま",[758,812,813,816],{},[773,814,815],{},"例外",[773,817,818,819,693,821,823,824,693,827,830],{},"大きな数字 ",[44,820,692],{},[44,822,696],{}," と ",[44,825,826],{},"R1",[44,828,829],{},"R3"," ラベルだけは情報の階層として残してよい",[758,832,833,836],{},[773,834,835],{},"枠線禁止",[773,837,838,799,840,842,843,845,846],{},[44,839,656],{},[44,841,660],{}," は使わない、",[44,844,664],{}," も使わない。",[25,847,848],{},"塗りの違いだけで分離・強調",[758,850,851,854],{},[773,852,853],{},"サブタイトル",[773,855,856,745,862,865],{},[25,857,858,859],{},"font-size 15 + 黒文字 ",[44,860,861],{},"#111315",[44,863,864],{},"font-size 12 + グレー"," は弱すぎ",[758,867,868,871],{},[773,869,870],{},"グルーピング",[773,872,873,874,876,877,880],{},"セパレーター線（",[44,875,795],{},"）でグループを区切らない。",[25,878,879],{},"近接の法則","（近接させる＋余白で離す）を使う",[758,882,883,886],{},[773,884,885],{},"1図1メッセージ",[773,887,888,889],{},"タイトル + サブタイトルで完結。",[25,890,891],{},"図の最下部にキーメッセージ／結論文を別途置かない",[758,893,894,897],{},[773,895,896],{},"拡大表示",[773,898,899,900,903],{},"クリックで拡大モーダル（",[44,901,902],{},"useZoomableSvg"," composable）を統一仕様で組み込む",[758,905,906,909],{},[773,907,908],{},"グリッド可視化",[773,910,911],{},"dev用に G キー or ボタンで12カラム+ベースラインを可視化できるようにする",[66,913,914,915,918],{},"これらのルールは、私のV2が踏んだアンチパターンを",[25,916,917],{},"ひとつずつ明示的に禁止","している。スキルを呼んだ次回からは、V2方向に間違って走らない構造になった。",[59,920],{},[10,922,924],{"id":923},"同じページの残り5枚も全部grid版に書き直した","同じページの残り5枚も全部Grid版に書き直した",[66,926,927,928,930],{},"スキル更新と並行して、同じ第2章ページにあるSVG6枚全部をGrid版に書き直した。",[25,929,38],{},"規律を、全6枚に統一適用。",[451,932,934],{"id":933},"投資の型4分類既出再掲","① 投資の型4分類（既出、再掲）",[752,936,937,950],{},[755,938,939],{},[758,940,941,944,947],{},[761,942,943],{},"Before",[761,945,946],{},"V2（アンチパターン）",[761,948,949],{},"After（Grid版・正解）",[768,951,952],{},[758,953,954,958,962],{},[773,955,956],{},[116,957],{"alt":131,"src":119},[773,959,960],{},[116,961],{"alt":131,"src":509},[773,963,964],{},[116,965],{"alt":131,"src":629},[66,967,968],{},"V2は装飾過多。V3=Grid版が最終形。",[451,970,972],{"id":971},"三大vs-都心-vs-地方区分-vs-一棟木造-vs-rc","② 三大VS — 都心 vs 地方・区分 vs 一棟・木造 vs RC",[66,974,975],{},[25,976,977],{},"Before（元の手書き版）:",[66,979,980],{},[116,981],{"alt":131,"src":982},"/2026-06/2026-06-14/2-sandai-vs-before.svg",[66,984,985],{},[25,986,987],{},"After（Grid版）:",[66,989,990],{},[116,991],{"alt":131,"src":992},"/2026-06/2026-06-14/2-sandai-vs-after.svg",[66,994,995],{},"変更点:",[15,997,998,1015,1018,1021],{},[18,999,1000,1001,1004,1005,1007,1008,1010,1011,1014],{},"グレーの行ラベル帯（",[44,1002,1003],{},"#e3e4e6","）・通常カード（",[44,1006,669],{},"）・強調カード（",[44,1009,673],{},"）の",[25,1012,1013],{},"3階調の塗り分けだけ","で構造を作った",[18,1016,1017],{},"元のサブタイトル「現地と書類で見つけた問題は…」（小さなグレー文字）を**「答えを支えるのは利回りではなく、融資と出口の構造」（黒文字15px）に昇格**。タイトル直下のサブタイトルが結論文を担う形に",[18,1019,1020],{},"図下の「答えを支えるのは…」を削除（タイトル+サブタイトルに統合済み）",[18,1022,1023,1025,1026,1028],{},[44,1024,664],{}," や ",[44,1027,660],{}," を全部消した。塗りだけで分離",[451,1030,1032],{"id":1031},"場所の線引き-電車30分","③ 場所の線引き — 電車30分",[66,1034,1035],{},[25,1036,1037],{},"Before:",[66,1039,1040],{},[116,1041],{"alt":131,"src":1042},"/2026-06/2026-06-14/3-basho-senbiki-before.svg",[66,1044,1045],{},[25,1046,987],{},[66,1048,1049],{},[116,1050],{"alt":131,"src":1051},"/2026-06/2026-06-14/3-basho-senbiki-after.svg",[66,1053,995],{},[15,1055,1056,1059,1067,1070],{},[18,1057,1058],{},"5セグメントの帯をすべてカラム線・ベースラインに乗せた",[18,1060,1061,1062,1064,1065],{},"強調ゾーン（二等地 + 30分圏）を ",[44,1063,673],{}," で塗り、それ以外を ",[44,1066,669],{},[18,1068,1069],{},"サブタイトルを「30分を超えると通勤率が急落 — 需要の母体が東京の雇用から地域経済に変わる」に統合",[18,1071,1072],{},"図下のキーメッセージを削除",[451,1074,1076],{"id":1075},"お金で解決できる問題-vs-できない問題","④ お金で解決できる問題 vs できない問題",[66,1078,1079],{},[25,1080,1037],{},[66,1082,1083],{},[116,1084],{"alt":131,"src":1085},"/2026-06/2026-06-14/4-mondai-kiriwake-before.svg",[66,1087,1088],{},[25,1089,987],{},[66,1091,1092],{},[116,1093],{"alt":131,"src":1094},"/2026-06/2026-06-14/4-mondai-kiriwake-after.svg",[66,1096,995],{},[15,1098,1099,1111,1118,1121],{},[18,1100,1101,1102,1104,1105,1108,1109],{},"左パネル（解決できる）= グレー塗り ",[44,1103,669],{},"、右パネル（解決できない）= マゼンタヘッダー帯 ",[44,1106,1107],{},"#ed1e79"," + ピンク塗り ",[44,1110,673],{},[18,1112,1113,1114,661,1116,665],{},"強弱のメリハリは塗りだけで作り、",[44,1115,660],{},[44,1117,664],{},[18,1119,1120],{},"各項目の横並びがすべて8pxベースラインにスナップ、左右対称",[18,1122,1123],{},"結果バー（最下段）でメッセージを締めくくる",[451,1125,1127],{"id":1126},"業者の論理-3つの疑問と答え","⑤ 業者の論理 — 3つの疑問と答え",[66,1129,1130],{},[25,1131,1037],{},[66,1133,1134],{},[116,1135],{"alt":131,"src":1136},"/2026-06/2026-06-14/5-gyosha-ronri-before.svg",[66,1138,1139],{},[25,1140,987],{},[66,1142,1143],{},[116,1144],{"alt":131,"src":1145},"/2026-06/2026-06-14/5-gyosha-ronri-after.svg",[66,1147,995],{},[15,1149,1150,1157,1166,1169],{},[18,1151,1152,1153,1156],{},"Q&Aを ",[25,1154,1155],{},"4 + 8カラム"," の2列構成で揃えた（質問列 col 1-4、回答列 col 5-12）",[18,1158,1159,1160,1162,1163,1165],{},"質問ラベル帯（",[44,1161,1003],{},"）と回答カード（",[44,1164,669],{},"）の2階調で読み取りが整理",[18,1167,1168],{},"質問→回答の連結矢印を削除（同じ行に並んでいれば矢印なしで読める）",[18,1170,1171],{},"V2で入れていた「Q1/Q2/Q3 のピンク丸バッジ」「破線矢印」「左ピンクボーダー」を全部削除",[451,1173,1175],{"id":1174},"安く買う4つの入口","⑥ 安く買う4つの入口",[66,1177,1178],{},[25,1179,1037],{},[66,1181,1182],{},[116,1183],{"alt":131,"src":1184},"/2026-06/2026-06-14/6-yasuku-kau-before.svg",[66,1186,1187],{},[25,1188,987],{},[66,1190,1191],{},[116,1192],{"alt":131,"src":1193},"/2026-06/2026-06-14/6-yasuku-kau-after.svg",[66,1195,995],{},[15,1197,1198,1201,1209,1212],{},[18,1199,1200],{},"4カードを3カラムずつ×4で12カラム完全分割",[18,1202,1203,1204,1206,1207],{},"任意売却カードはピンク塗り ",[44,1205,673],{}," で強調、他はグレー ",[44,1208,669],{},[18,1210,1211],{},"V2で入れた「4px上に突出」「強い影」「◎/△/△/○の評価ピル」を全削除",[18,1213,1214],{},"評価記号（◎/△/△/○）はテキストだけに戻し、強調色（マゼンタ vs ニュートラル）で十分機能している",[59,1216],{},[10,1218,1219],{"id":1219},"学び",[451,1221,1223],{"id":1222},"ツール乗り換えよりまず原則を直す","ツール乗り換えより、まず原則を直す",[66,1225,1226,1227,1230],{},"D2を試した最初の動機は「乗り換えれば良くなる」。でも実際の改善要因は",[25,1228,1229],{},"ツールの差ではなくスキルの規律不足","だった。",[752,1232,1233,1246],{},[755,1234,1235],{},[758,1236,1237,1240,1243],{},[761,1238,1239],{},"試したこと",[761,1241,1242],{},"改善された？",[761,1244,1245],{},"真の原因",[768,1247,1248,1259,1270],{},[758,1249,1250,1253,1256],{},[773,1251,1252],{},"D2導入",[773,1254,1255],{},"❌ 完敗",[773,1257,1258],{},"道具を変えても規律がなければ同じ",[758,1260,1261,1264,1267],{},[773,1262,1263],{},"装飾を厚くする（V2）",[773,1265,1266],{},"△ 見かけ良くなる",[773,1268,1269],{},"本質的にはアンチパターン",[758,1271,1272,1275,1278],{},[773,1273,1274],{},"グリッド規律 + 1図1メッセージ（V3）",[773,1276,1277],{},"✅ 明確に改善",[773,1279,1280],{},"これが本物",[451,1282,1284],{"id":1283},"装飾を増やすと整列で整えるは別方向","「装飾を増やす」と「整列で整える」は別方向",[66,1286,1287,1288,1291],{},"「Beforeを改善する」と言われると、つい装飾を足したくなる。だが",[25,1289,1290],{},"装飾を増やす方向はノイズも増やす","。グリッドに乗せて余白を整えれば、装飾なしでも読める。",[66,1293,1294,1295,1298],{},"V2の失敗は、デザインの典型的な迷路だった。",[25,1296,1297],{},"ノイズを足して改善した気になる","罠を、自分の手で実演してから抜け出すまで30分かかった。",[451,1300,1302],{"id":1301},"スキルに禁止事項を書く価値","スキルに「禁止事項」を書く価値",[66,1304,1305,1307,1308,1311],{},[44,1306,46],{}," の §2「装飾の禁止事項」§3「四角は塗りで区切る（枠線禁止）」§5「セパレーター線で区切らない」は、",[25,1309,1310],{},"全部V2でやってしまったこと","。これらを「やってはいけない」とスキルに明記しておけば、次回呼ばれたAIは同じアンチパターンを踏まない。",[66,1313,1314,1315,1318],{},"「やるべきこと」より「",[25,1316,1317],{},"やらないこと","」を書くほうが、スキルの安定品質には効くと分かった。",[451,1320,1322],{"id":1321},"d2はいつ使うのか","D2はいつ使うのか？",[66,1324,1325,1326,1329],{},"このスキル更新を経て、",[25,1327,1328],{},"D2はsvg-diagramスキルには組み込まない","ことが確定した。理由は記事冒頭の通り（書籍由来のグリッド+情報密度の高い図には弱い）。",[66,1331,1332],{},"D2が活きるのは別の領域:",[15,1334,1335,1341,1347,1353],{},[18,1336,1337,1340],{},[25,1338,1339],{},"フローチャート","（ノードと矢印が中心）",[18,1342,1343,1346],{},[25,1344,1345],{},"システム構成図","（接続関係が情報の主体）",[18,1348,1349,1352],{},[25,1350,1351],{},"シーケンス図","（時系列の対話）",[18,1354,1355,1358],{},[25,1356,1357],{},"組織図","（階層が中心）",[66,1360,1361],{},"これらは別途専用スキル（または既存のDrawioスキル）で扱うのが自然。",[59,1363],{},[10,1365,1366],{"id":1366},"まとめ",[66,1368,1369],{},[25,1370,1371],{},"やったこと:",[1373,1374,1375,1378,1381,1384,1395],"ol",{},[18,1376,1377],{},"D2をsvg-diagramスキルに組み込むかを検証 → 失敗",[18,1379,1380],{},"「装飾を厚くする」V2方向 → これも実はアンチパターンだった",[18,1382,1383],{},"Müller-Brockmannグリッド規律でV3を作る → 正解",[18,1385,1386,1388,1389,1391,1392,1394],{},[44,1387,71],{}," スキルに ",[44,1390,722],{}," を新規追加、",[44,1393,728],{}," 冒頭で常に読む指示を追加",[18,1396,1397,1398,1401],{},"同じページの6枚のSVG図解を全部Grid版で書き直し（実装は ",[44,1399,1400],{},"*Grid.vue"," コンポーネントとして）",[66,1403,1404],{},[25,1405,1406],{},"この記事の最大の主張:",[15,1408,1409,1416,1423],{},[18,1410,1411,1412,1415],{},"ツール乗り換え（D2導入）より、",[25,1413,1414],{},"スキルの規律明文化","の方が遥かに効く",[18,1417,1418,1419,1422],{},"「装飾を増やす」のは典型的なアンチパターン。",[25,1420,1421],{},"整列と余白で整える","のが正攻法",[18,1424,1425,1426,1428],{},"スキルには「やるべきこと」より「",[25,1427,1317],{},"」を書くほうが安定する",[66,1430,1431,1432,1435],{},"道具より先に、",[25,1433,1434],{},"やらないことを決める","。今回の試行錯誤で身に染みた教訓だった。",[1437,1438,1439],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":131,"searchDepth":144,"depth":144,"links":1441},[1442,1443,1444,1447,1448,1449,1450,1458,1464],{"id":12,"depth":144,"text":13},{"id":63,"depth":144,"text":64},{"id":103,"depth":144,"text":104,"children":1445},[1446],{"id":453,"depth":151,"text":453},{"id":495,"depth":144,"text":496},{"id":611,"depth":144,"text":612},{"id":713,"depth":144,"text":713},{"id":923,"depth":144,"text":924,"children":1451},[1452,1453,1454,1455,1456,1457],{"id":933,"depth":151,"text":934},{"id":971,"depth":151,"text":972},{"id":1031,"depth":151,"text":1032},{"id":1075,"depth":151,"text":1076},{"id":1126,"depth":151,"text":1127},{"id":1174,"depth":151,"text":1175},{"id":1219,"depth":144,"text":1219,"children":1459},[1460,1461,1462,1463],{"id":1222,"depth":151,"text":1223},{"id":1283,"depth":151,"text":1284},{"id":1301,"depth":151,"text":1302},{"id":1321,"depth":151,"text":1322},{"id":1366,"depth":144,"text":1366},"dev","テキストで図を書ける作図DSL「D2」をsvg-diagramスキルに組み込めるか検証した。D2は手書きSVGに完敗し、次に「装飾を厚くする」V2方向も実はアンチパターンだったと気づき、最終的にMüller-Brockmannグリッドに乗せる方向に着地。svg-diagramスキルに新しい grid-alignment.md ルールを追加し、同じページの6枚のSVG全部をGrid版で書き直した記録。","md",{},"/svg-diagram-skill-upgrade","mdx-playground",false,"2026-06-14T00:00:00.000Z",{"title":5,"description":1466},"2026-06/2026-06-14/svg-diagram-skill-upgrade",[75,1476,1477,1478,1479,1480,1481,775],"SVG","Diagram","Vue","スキル設計","Müller-Brockmann","デザインシステム",null,"IF4NQ6y-HxXno0nLVHvTJJwd_jeloBh8F_2O67WuB-o",[1485,1494,1503,1513,1526],{"title":1486,"description":1487,"path":1488,"tags":1489,"publishedAt":1493,"updatedAt":1482},"Claude CodeとClaude Webを組み合わせてSVG状態遷移図を作った話","UIの色ルールを説明する状態遷移図をSVGで作成。Claude Codeだけでは難しかった部分をClaude Webの図解能力で補完し、最終的にインタラクティブなVueコンポーネントに仕上げた過程を記録","/svg-state-diagram-with-claude",[1490,1491,1476,1478,1492,1481],"Claude Code","Claude Web","状態遷移図","2026-01-23T00:00:00.000Z",{"title":1495,"description":1496,"path":1497,"tags":1498,"publishedAt":1502,"updatedAt":1482},"アナレンマ・シミュレーターをダークテーマ＆ドラッグ操作に全面刷新し、視点切替シミュレーションを追加した","「もっとインタラクティブでかっこよく」の一言から始まったアナレンマ・シミュレーターの刷新記録。プラネタリウム風ダークテーマ、ドラッグ操作、北極/南極の視点切替ページ追加までの試行錯誤をまとめた。","/analemma-simulator-redesign",[1499,1500,1501,1478,1476],"アナレンマ","シミュレーター","インタラクティブ","2026-06-10T00:00:00.000Z",{"title":1504,"description":1505,"path":1506,"tags":1507,"publishedAt":1512,"updatedAt":1482},"Micron個別ページを作った（工場マップ＋月間キャパシティ詳細）","/memory-makers/micron を新規作成。USA / Japan / Taiwan の工場地図をSVGで描き、Fab別の月間キャパシティ推移を5マイルストーンで可視化した。3カラムから上下レイアウトへ作り直し、会計四半期に暦月併記を足すまでの過程をまとめる。","/micron-fab-page-with-capacity-map",[1508,1509,1510,1478,1476,1511],"Micron","DRAM","memory-makers","Nuxt","2026-06-07T00:00:00.000Z",{"title":1514,"description":1515,"path":1516,"tags":1517,"publishedAt":1525,"updatedAt":1482},"米国式投資クイズPart 2を1日で実装した記録 — 書籍本文ベースに方針転換し、サブエージェント3並列で74問を起こす","広瀬隆雄『Market Hack流 世界一わかりやすい米国式投資の技法』を題材に、Codexレビュー2回・方針転換1回・サブエージェント3並列で74問のクイズと18枚のSVG図解を実装した1日の記録。","/investment-quiz-part2-implementation",[1518,1519,1520,1521,1522,1523,1524],"quiz","codex-review","subagent-parallel","book-knowledge-base","vue","svg","investment","2026-05-14T00:00:00.000Z",{"title":1527,"description":1528,"path":1529,"tags":1530,"publishedAt":1534,"updatedAt":1482},"統計データブックから都道府県農作物クイズを作った日","統計年鑑の主産地データをTurso DBから取り出し、左にSVGチャート・右に4択クイズの2ペインクイズページを実装。IntersectionObserverのバンド調整とsuppressObserverUntilで詰まった。","/prefecture-agriculture-quiz",[1531,1478,1532,1476,1533],"クイズ","IntersectionObserver","都道府県","2026-05-13T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/svg-diagram-skill-upgrade.png?v=2026-06-14T00%3A00%3A00.000Z&title=D2%E3%82%92%E8%A9%A6%E3%81%97%E3%81%9F%E3%82%89%E7%B5%90%E5%B1%80SVG%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0%E3%83%BB%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E6%9B%B8%E3%81%8D%E7%9B%B4%E3%81%99%E3%81%93%E3%81%A8%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E8%A9%B1%20%E2%80%94%20%E5%90%8C%E3%81%98%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE6%E6%9E%9A%E3%82%92%E5%85%A8%E9%83%A8Grid%E7%89%88%E3%81%A7%E5%87%BA%E3%81%97%E7%9B%B4%E3%81%99&author=Kei%20Komatsu&sig=8dd1a7b6d764aafb",1781423423406]