グリッド整列の記録 — 図解60型の Before / After

A-1 ツリー図 tree

階層構造を一目で示せて、複雑な要素も「グループ化」して整理できる。

意味グリッド親ブロック 192px ピッチ（葉80×2＋空き16＝176、ブロック間16）／葉はブロック中心±48 × 階層行 104px ピッチ（合流バスは行間の正中）

• 単位を「親ブロック192px」と決めた。1ブロック＝葉80×2＋空き16＝176、ブロック間16。第2層6枚をこの中に乗せると重なり(-10px×2)と密着(0px)が消える
• 親はブロックの中心（128 / 320 / 512）＝葉2枚の中央。親の位置は子から決まる従属変数なので、ブロック中心がそのまま親の位置になる
• 階層行を104pxピッチに統一（Beforeは90/80）。合流バスは行間の正中（160 / 264）
• コネクタを斜め9本 → 直交17本（親から降ろす→水平バス→子へ降ろす）
• カード高さ 第1層32→40・第2層26→32（上下パディングが左右より狭かった）

contentOffset 82 → 64

A-2 ピラミッド図 pyramid

項目をピラミッド状に積み上げた図。下が土台、上が上位概念という関係が直感的に伝わる。

意味グリッド段の高さ 72px 等分（頂点92→底380。境界は5本・段は4つ）× 半幅は1段ごとに +40px。外形の斜辺が一定の傾きになる

• 頂点 y=90→92 にして4段を厳密に72px等分（Beforeは73/72/73/72）

A-3 階層・レイヤー layer

立体的にレイヤー構造を表現した図解。どんな基盤の上に成り立っているのかを示しやすい。

意味グリッド層の帯 72px ピッチ（高さ72・隙間0）× 全幅522（x=88..610）。左レール x=60 が抽象度の方向軸。幅は全層共通で、幅の差に意味を持たせない

• ⚠️ 座標修正ではなく型の描き方の差し替え。/diagram-design/a/4 の骨格（隙間なく積んだ全幅の帯＋左の方向軸）を流用した
• 立体の台形（奥行きベクトル 40,30）をやめた。奥行きは「積み重なっている」以上の情報を持たないのに、帯ごとに幅が50px刻みで変わるため、幅の差が意味のある差に見えてしまう
• 帯を全幅522（x=88..610）・高さ72・隙間0で積んだ。層の境界が塗りの変わり目そのものになる（枠線を引かない svg-diagram の規律どおり）
• 左に抽象度の方向軸を立てた。立体の奥行きが担っていた「上ほど上位・下ほど基盤」を、矢印という直接の表現に置き換えている
• ⚠️ テキストを6件追加している（層番号 L4〜L1・軸ラベル「上位」「基盤」）。文言を増やす変更なので、不要なら外す
• 配色（#1a2b50 / #4b6584 / #8395a7 / #e8ecf1）と層名の文言は Before のまま。濃い側が上（アプリケーション）という強調の向きも変えていない
• ⚠️ この型だけ「座標のみ」の枠を意図的に外している。Codex は「テキスト4→10件・フォント13→14の全面再設計なので採用不可」と指摘したが、これはユーザーが /diagram-design/a/4 の骨格へ差し替えるよう明示的に指示し、結果も承認済みのもの。既定の不変条件より指示が優先する
• なお Codex の「新色 #8daec0 / #c8d6e5 を持ち込んでいる」は誤り。どちらも DiagramIllustration.vue 内で既に使われている色（#8daec0 が12箇所・#c8d6e5 が5箇所）

contentOffset 65 → 28

A-4 トライアングル triangle

3つの要素が互いに影響し合い、中心にある1つの目的を形作る三位一体の図解。

意味グリッド重心 (320,287) を中心とする共通半径 187 の円周を 120° 等分した3点。3要素が対等なら、中心からの距離もコネクタの長さも角度間隔も等しくなる（Before は 186.7 / 220.4 / 220.4 と不揃いで、品質だけが中心に近かった）

• 三角形を正三角形に（下2頂点 x=120/520 → 158/482）。Before は中心からの距離が 186.7 / 220.4 / 220.4 でばらつき、「品質だけが成功に近い」という誰も意図していない意味が出ていた。この型の説明文は「3つの要素が互いに影響し合い、中心にある1つの目的を形作る三位一体」なので、3頂点は中心から等距離・角度も120°等分でなければならない
• 中心円を三角形の重心へ（cy 270 → 287。ずれ17px）。正三角形にしたので重心＝外接円の中心でもある
• コネクタの端点を各円の周上に取り直した（Beforeは円の内外にずれていた）。3本の長さは 113 / 113 / 113 と揃う
• ⚠️ 上下の y=100..380 は Before のまま。この高さを保ったまま正三角形にすると、共通半径は186.7・中心は (320, 286.7) に決まる

A-5 フレームワーク図 framework

左にピラミッド型の価値軸、右にカテゴリ別の施策を配置する複合構造図。コンサル資料で頻出。

意味グリッド施策の列 180px ピッチ（幅162・ガター18、中心 169/349/529）× インフラのバー行 30px ピッチ（高さ22・空き8）。上下段とも同じフィールド 88..610 に乗り、左レール x=46 が企業価値へ向かう方向軸

• ⚠️ この型は「座標だけ」の枠を意図的に外している。Before は情報の並び自体に手を入れないと直らないと判断し、意味の単位を取り直すようユーザーから指示を受けて組み直した（layer と同じ扱い）
• 座標の微修正ではなく組み直し。左の飾りピラミッドを「企業価値へ向かう方向軸」に置き換えた。ピラミッドは段にも面積にも意味が無い装飾で、この図の主張である「インフラ → 企業価値」の向きをどこも担っていなかった。矢印にすると向きが1本で通る
• 上段の3列と下段の4バーを同じフィールド（x=88..610）に乗せた。Before はバーだけが x=160 で、上段の左端 130 より30px内側に入っていた
• ⚠️ 当初ここに「区切り線 y=248 がピラミッドの胴を横切っている」「同じ図の中に左端が2つある」と書いていたが、どちらも事実誤りだったので取り下げた（Codex 指摘・実測で確認）。ピラミッドは x=28..108、区切り線は x=130..612 で22px離れている。下段もローマ数字が x=130 にあるのでモジュールとしての左端は上段と揃っている。置き換えの根拠は上の2点であって、重なりでも左端の不一致でもない
• 3列を等幅162・ガター18に（列中心 169 / 349 / 529）。Before は列の区切り線が 290/450 なのに列中心が 210/370/530 で、列の幅が 160/160/162 とわずかに不揃いだった
• ローマ数字をバーの外（x=130）から中（x=104）へ入れ、バーを全幅522に。番号とバーが1つのモジュールになる
• ⚠️ 縦書き「企業価値」と「インフラ」の文言はそのまま残している。ピラミッドの形だけを矢印に置き換えた

contentOffset 28 → 24

A-6 組織図 org-chart

役職と指揮命令系統（レポートライン）を直角の線でつなぐ図。誰が誰に報告するかが一目で分かる。

意味グリッド本部ブロック 200px ピッチ（課72×2＋群内16＝160、群間40）× 階層行 104px ピッチ。ブロック中心が本部の位置

• 単位を「本部ブロック200px」と決めた。1ブロック＝課72×2＋群内16＝160、群間40。組織図の意味は「どの課がどの本部の配下か」なので、課を等間隔に並べるのではなくブロックで括る
• Before は課6枚が全て10px間隔で、6枚が1列に見えていた（ツリー図とは違い、ここでは括りの表示が型の本体）
• 本部はブロックの中心（120 / 320 / 520）＝課2枚の中央
• 階層行を104pxピッチに統一（Beforeは92/80）。本部カード高さ 32→40、課カード高さ 26→32

contentOffset 90 → 72

B-1 フロー図（横型） flow-horizontal

横型のフローチャート。左から右への自然な視線誘導で流れを追いやすい。

意味グリッド工程列 144px ピッチ（カード112・矢印帯32）× 4工程。左右マージンは 48 で対称

• 工程の列ピッチを144px（カード112・矢印帯32）と決め、4工程をそこから配置（x=48/192/336/480）
• 左右マージンが 40/35 → 48/48 の対称に。ピッチを先に決めるとマージンは従属して決まる

B-2 フロー図（縦型） flow-vertical

縦型のフローチャート。各ステップの詳細を書き込みたいときや、他の情報と併せて載せたいときに便利。

意味グリッド工程行 64px ピッチ（カード44・矢印帯20）× 5工程。中心軸 x=320 は全カード共通

• 矢頭マーカーを refX=5 refY=8 → refX=8 refY=5 に。三角形の形は横型と同じ（M 0 0 L 10 5 L 0 10 z）で orient="auto" が向きを回すので、縦だからといって値を入れ替える必要はなかった
• Before は refY=8 が三角形の中心線（y=5）から3ずれていたため、矢頭が線の右へ約2.7pxずれ、先端が次のカードへ2.7px余分に食い込んでいた
• 座標は1つも動かしていない（カード位置・行ピッチ64・中心軸320は元から正しい）

B-3 サイクル図 cycle

PDCAや改善・運用など「繰り返し」を表現するのに最適。

意味グリッド角度 90° 等分 × 半径 120 の同一円周。4ノードの中心はこの円の上に乗る（直交格子は引かない）

• 4ノードを半径120の同一円周へ（Beforeは横120・縦125で円がわずかに縦長だった）
• 破線アークの半径120と実際のノード位置を一致させた
• 回転方向の矢頭を弧の中点（45°位置）へ置き直した
• 上端を10px下げたぶん図の中心が y=235→240 に動くので、offset を 35→30 にして表示中心を元の位置に戻した（これを忘れると上下の余白が 44/34 と非対称になる）

contentOffset 35 → 30

B-4 階段・ステップ図 stairs

各ステップを階段状に段差をつけてレイアウトする図解。

意味グリッドステップ列 130px ピッチ（幅120・空き10）× 段差 70px 等分（上端 100/170/240/310）。底辺 y=410 が4枚の共通基線

• STEP 4 の幅を140→120にして4枚を等幅に（1枚だけ広いと「STEP 4 が大きい」という意味に読める）
• 左右マージンを 50/60 → 65/65 の対称に

B-5 ガントチャート gantt

プロジェクトの計画と進捗を可視化する工程管理表。

意味グリッド1月 = 80px / 1週 = 20px / 半週 = 10px（起点 x=190）× タスク行 40px ピッチ（6行で y=117..357）。バーの「始点」は半週の格子に乗るが、「幅」は期間そのものなので格子に丸めない（リリースの1.25週はそのまま）

• 要件定義の始点を x=195→190 に（5px）。単位は「1月=80px（190起点）・1週=20px・バーの端は半週=10px刻み」。格子から外れていたのは6本中この1本だけで、幅110 は半週11個ぶんちょうどだから外れの原因は始点の5pxのみ。始点を190へ動かすと幅を変えずに両端（190と300）が格子に乗る
• ⚠️ 単位は「週」ではなく「半週」。設計の始点280 も テストの始点460 も、週（20px）の格子には乗らず半週（10px）の格子にだけ乗る。ここを週だと思い込んだのが、幅を整数週へ丸めた当初案の出発点だった
• ⚠️ 幅（＝期間）は6本とも Before のまま1pxも変えていない。5.5週・4週・6.5週・6週・3.5週・1.25週。端数を「崩れ」と見て整数週に丸めると、工程の期間そのものを書き換えることになる
• リリースだけは 1.25週なので、始点を格子に乗せても終点は半週の格子から外れる。これは崩れではなく期間データなので放置している
• 縦のグリッド線の下端を 400→357 に。6行（ピッチ40）は y=117..357 で終わるのに、線が最後のバーの52px下まで伸びて空の7行目を作っていた
• グリッドを詰めたぶん図が上に寄るので offset を 30→52 にしてスライド中央へ置き直した

contentOffset 30 → 52

B-6 2軸タイムライン timeline-dual

時系列の流れを上下2つのテーマに分けて表現する図解。技術と市場など対になる変化を同時に見せられる。

意味グリッド1年 = 75px（2012年 = x115）× 上下2レーン（上=技術面 / 下=民主化）。イベントの x は年から従属して決まる

• 下段3件を「2012年=x115・1年=75px」の目盛りへ乗せ直した（2013→190・2015→340・2018→565。Beforeは185・345・570）
• AlphaGo（2016年）を自動運転搭載と同じ x=415 の目盛りへ。Before の x=520 は年に直すと2017.4で、時間軸の図なのにドットが違う年に立っていた（＝この型でいちばん重い崩れ）
• 札が重なる問題は x を動かして逃げるのではなく、直交リーダー（x=415で分岐 → 右へ → 上へ）で札だけを x=520 へ逃がして解いた。時間上の位置は目盛り側（ドットと2016の札）が持ち、ラベルの置き場は別の変数として切り離す
• 2016年のドットは1つに統合した（Before は 415 と 520 の2箇所にあり、同じ年が2つの目盛りに見えていた）

B-7 ループ／フライホイール flywheel

各要素が次の要素を強化し、一周するごとに勢いが増す好循環を表す図。サイクル図と違い「回るほど加速する」自己強化が主役。

意味グリッド角度 90° 等分を 45° オフセットした位置 × 半径 115 のリング。中心の「成長」は同心

変更なし — 4要素はリング（中心320,240・半径115）上の45度位置に正確に乗っている。回転方向の矢頭2つも先端がリング上（中心から115.2）にある

C-1 放射図 radial

中心からの広がりや影響の伝播を視覚化できる図解。

意味グリッド角度 45° 等分（8枠のうち真下1枠は空き）× 半径 150 の同一円周。7つの衛星はこの円の上に並ぶ

• 7つの衛星を同一半径150の円周・45度等分の位置へ（Beforeは半径140/177/185の3種類でばらついていた）
• コネクタの端点をコア円と衛星円の周上に取り直した（Beforeは円の中や外で切れていた）
• 半径を170ではなく150にしたのは、170だと最上部の衛星が説明文の帯に掛かるため

contentOffset 41 → 52

C-2 相関図 correlation

要素同士の細かなつながりまで描ける図解で、ビジネスモデルの整理にも最適。

意味グリッド層行 130px ピッチ（カード高44）× 中心軸 x=320 の左右対称（サービスA↔B・DB↔API）

変更なし — 左右対称（サービスA↔B・DB↔API）で行ピッチ130も一定。斜めのコネクタは相関図の性質そのものなので直交化しない

C-3 ベン図 venn

重なりを直感的に示せる図解。重なり部分を色分けしたり、意味を持たせて強調すると効果的。

意味グリッド共通半径110 × 中心が一辺120の正三角形。3集合に大小が与えられていないので、中心間距離も等しいのが単位（重なりが3組とも同面積になるのはその結果）。重なりの量自体に意味を持たせる図では、この単位は使えない

• 3円の中心を正三角形（一辺120）に置き直した（Beforeは上の2円だけ120離れ、下の円との距離は108.17）
• ⚠️ 判断が要る修正。中心間距離は重なりの面積を決めるので、面積に意味があるなら動かしてはいけない。ただしこの図の3集合（デザイン／技術／ビジネス）には大小も強弱も与えられておらず、重なりの3領域（UX／ブランド／データ）にも数値がない。差を裏づけるものが無い以上、距離の不揃いは意図ではなく端数とみなした
• 逆に言うと、Before の配置は「デザイン∩技術だけ他の2組より狭い」と読めてしまう。数値の裏づけが無いのに座標が主張を持っている状態で、それを消すのがこの修正
• ⚠️ もし原図に「この2つはあまり重ならない」という意図があるなら、この修正は取り消すこと
• 「価値」の円は3円の重心（=320,240）のまま

C-4 マトリクス matrix

2つの軸で要素を分類でき、状況判断に便利な図解。

意味グリッド2軸の四象限。横は 240px ずつ・縦は 168px ずつの等分割で、4セルの内側余白はいずれも20px

• 縦軸を y=85→84 に、上段セルを y=105→104 に。これで軸の上下半分がどちらも168px、4セルの内側余白が全て20pxで揃う

C-5 散布図 scatter

2つの変数の関係を点の分布で示すチャート。相関の有無・強さ・外れ値が一目で分かる。

意味グリッド目盛りは表示範囲の4等分（1目盛り=範囲の25%）で、広告費・売上の絶対単位は原図に無い。点の座標は値の写像なので触らない。検証の対象は目盛りではなく近似直線で、緑の線が14点の最小二乗回帰 y = 428.59 − 0.41809x（Before の直線は右端で59.5pxずれていた）

• 近似直線を14点の最小二乗回帰から引き直した（130,368→548,140 を 130,374→548,199 へ）。Before の直線は右端で回帰線から59.5pxずれ、実際より急な相関を示していた
• 外れ値（200,150）は回帰から除いた。図の中で「外れ値」と名指ししている点を傾向線に含めると、そのラベルと矛盾する
• 「正の相関」のラベルを直線の右端に追従（y=126→185）
• ⚠️ データ点14個と外れ値の座標は1つも動かしていない。動かしたのは点から導かれる線だけ

D-1 ビフォーアフター before-after

導入前と導入後を並べて見せる定番図解。サービス紹介で頻出。

意味グリッドパネル幅260の左右対称＋中央に矢印帯60。パネル内の内側余白は左右とも30px

• BEFORE パネル内の2枚のギャップを 12→20 にして、パネル内の左右余白を 30 / 38 → 30 / 30 の対称に
• 中央の矢印をキャンバス中央（320）へ（Beforeは320.5）

D-2 項目比較図 item-comparison

他の選択肢と比較して、自社サービスの強みを打ち出すための図解。

意味グリッド項目名列140（行ラベルなので別単位）＋ 選択肢3列を等幅120・ピッチ130（中心 265/395/525）× 比較行 48px ピッチ（y=134..326）。自社列の強調帯もこの4行ぶんで終わる

• 自社列の幅を 140→120 にして、比較される3列（他社A・他社B・自社）を等幅120・ピッチ130に揃えた。Before は自社だけ20px広く、比較値と関係のない強調が座標に入っていた（自社の強調は濃い見出し・網掛け・太字の◎で足りている）
• 項目名列（機能）は行ラベルであって比較対象ではないので、140のまま別単位で扱う
• 自社列の強調帯を y=136..416（高さ280）→ y=134..326（高さ192）に。Before は4行ぶん（134..326）しか中身が無いのに帯が90px長く、表の下に空の網掛けが伸びていた
• 表全体を右へ寄せて左右マージンを 30 / 60 → 55 / 55 の対称に（全幅 140+120+120+120＋列間10×3 = 530）

D-3 規模比較図 scale-comparison

規模の大きさを円のサイズで比較する図解。直感的に差が伝わりやすい。

意味グリッド半径 = 5.814 × √(金額)。500億→130 / 120億→64 / 30億→32。下端 y=390 が3円の共通基線

• 半径を金額の平方根に比例させた（500億 r=130 / 120億 r=64 / 30億 r=32）。Before は 130 / 80 / 45 で、面積比が 1 : 0.38 : 0.12 と、金額比 1 : 0.24 : 0.06 の1.6〜2倍に膨らんでいた
• 3円を下端 y=390 で揃えた。大きさの比較は基準線がそろっていないと読み取れない
• ⚠️ この修正は「見た目を整える」ではなく数値の写像を直すもの。規模比較図でいちばん効く修正

contentOffset 23 → 10

D-4 規模分析図（TAM-SAM-SOM） tam-sam-som

市場のポテンシャルと、狙う範囲を示す図解。

意味グリッド半径 = 5.06 × √(金額)。1,000億→160 / 300億→88 / 50億→36。下端 y=420 で内接させ包含関係を形にする

• 半径を金額の平方根に比例させた（1,000億 r=160 / 300億 r=88 / 50億 r=36）。Before は 160 / 100 / 50 で、SAM が実際の1.3倍・SOM が2倍の面積に見えていた
• 3円を下端 y=420 で内接させ、包含関係（SOM ⊂ SAM ⊂ TAM）が形からも読めるようにした
• ラベルは各リングの内側（他の円が重ならない帯）へ移した

D-5 導入効果図 roi-case

導入前後の数値比較と定性効果、リソース情報をまとめた事例紹介スライド。SaaS・DX案件で定番。

意味グリッド「結論 → 根拠 → コスト」の3バンド。①結論=1行 ②根拠=定量380 : 定性180（バーは 100時間=60px）③コスト=4列 149px ピッチ（幅133）。バンドごとに縦の割り方が変わるのが、この型の構造そのもの

• ⚠️ この型は「座標だけ」の枠を意図的に外している。グリッドに乗せ直すだけでは足りず、意味の単位を先に取り直すようユーザーから指示を受けて組み直した（framework・layer と同じ扱い）
• 情報の並び自体を「結論 → 根拠 → コスト」の3バンドに組み替えた
• 結論バンド（上）: 171時間/月 と -38% を1行にまとめた。Before は -38% がバーの脇にあり、結論の一部だと分からなかった
• 根拠バンド（中）: 左=定量（バー）／右=定性（証言2件）。「数字」と「声」が同じ根拠の並びだと形で分かる
• コストバンド（下）: 4項目を 2×2 → 横1列に。数字を font34→22 に落とした。⚠️ Before はリソースの数字が結論の数字より大きく、重みが逆転していた。これがこの図でいちばん効く修正
• バーの単位は「100時間 = 60px」（450→270px / 279→167px）。Before は 0.5244 と 0.5269 で2本の縮尺が違っていた
• ⚠️ 「社内でプログラミングができる人材」を2行に折り返している（列幅133に収めるため）。文言は変えていない

contentOffset 5 → 21

D-6 レーダー図 radar

複数の評価軸を放射状に配置し、多角形の形で強み・弱みのバランスを示すチャート。2系列を重ねると比較になる。

意味グリッド5軸を 72° 等分 × 10点尺度で 1点 = 13px（等値リングは 2/4/6/8/10点 ＝ r=26/52/78/104/130）。頂点は値の写像なので触らない。触るのは「値が読めない位置に引かれたリング」のほう

• 等値リングを 43/87/130（3.31 / 6.69 / 10点）から 26/52/78/104/130（2 / 4 / 6 / 8 / 10点）へ。Before は最外周を機械的に3等分しただけで、リングを数えても値が読めなかった
• 尺度の裏取り: 頂点の中心からの距離を13で割ると自社が 8.46 / 8.98 / 7.99 / 7.00 / 5.98、競合が 6.00 / 7.03 / 5.51 / 8.48 / 8.00 になる。10点尺度・1点=13px で描かれていることが確定するので、リングは2点刻みで引ける
• ⚠️ リングが3本→5本に増える。座標だけの変更ではないが、リングは値を読むための目盛りであって内容ではないので、本数は単位から従属して決まるものとして扱った
• ⚠️ データ多角形の頂点は1つも動かしていない。8点のサポートが r=104 のリングにちょうど乗るなど、値がリング上に乗ることが結果として見えるようになる

E-1 パズル・ハニカム構造 honeycomb

ハチの巣のように正六角形が隙間なく詰まった図解。

意味グリッドフラットトップ六角形の格子（半径42・半高36）。隣接の中心間距離は 縦72 = 2×36 / 斜め(63,36) で、この2つが同じ単位から出ていないと辺を共有できない

• N（戦略）の中心を cy=147→148、S（運用）を cy=293→292 に。縦の中心ピッチが 73 → 72 になり、斜めの (63,36) と同じ六角格子の単位に乗る
• これで中央の上辺 (299,184)-(341,184) と N の下辺、中央の下辺 (299,256)-(341,256) と S の上辺が完全に一致する。Before は1pxの隙間があった
• 外周どうし（N–NE、N–NW、S–SE、S–SW）の中心差も (63,37) → (63,36) に揃い、7枚が同一の格子単位で噛み合う
• ⚠️ 動かしたのは2枚の1pxだけ。図の全体の高さは 111..329 → 112..328 となり、中心 y=220 は変わらない

E-2 グループ図（少） group-few

要素数が少ないときに使いやすいグループ図解。円形に並べることが多い。

意味グリッド角度 60° 等分 × 半径 130 の同一円周。6つの衛星がこの円の上で正六角形をつくる

• 6つの衛星を同一半径130の円周・60度等分の位置へ（Beforeは上下が130、斜め4つが139で、六角形が横に潰れていた）
• コネクタの端点を中心円と衛星円の周上に取り直した

E-3 グループ図（多） group-many

多数の要素をグルーピングして整理する図解。

意味グリッドパネル 200px ピッチ（幅180・空き20）× パネル内はカード 75px ピッチ（幅65・空き10）で2列2行。内側余白は20px

• 6パネルとも内側の2列を +5px 右へ。パネル内の左右余白が 15 / 25 → 20 / 20 の対称になる（パネル同士の20px間隔とも揃う）

E-4 数式 formula

デザイン要素を使って数式の形で表した図解。

意味グリッド項ピッチ 200px（箱140・演算子帯60）× 3項。左右マージンは 50 で対称、演算子は帯の中心に立つ

• 「解決策」の箱を150→140にして3枚を等幅に（強調は濃い塗りで足りていて、幅を変える必要がない）
• 左右マージンが 50 / 40 → 50 / 50 の対称に
• 「+」「=」を隙間の中心（220 / 420）へ（Beforeは218 / 418）

E-5 地図・マップ map

拠点やエリアを示すときに使う、地図ベースの図解。

意味グリッド左右のラベルレール（右 x=450 / 左 x=190。キャンバス中心320から±130で対称）だけが単位。ラベルの y はマーカーの位置（東京140 / 名古屋185 / 大阪235 / 福岡300）から従属して決まるので、共通の等間隔 y 行は引かない。緑の横線が各マーカーの高さ＝引き出し線の通り道

• ラベルの縦位置を各マーカーの y に合わせた（東京140 / 名古屋185 / 大阪235 / 福岡300）。引き出し線は4本とも水平になり、迂回が消える。Before は 118/188/213/308 とマーカーから最大14pxずれていた
• ⚠️ 共通の等間隔 y 行は引かない。地図でラベルを等間隔に揃えると、拠点どうしの南北関係という「地図が持っている唯一の意味」が壊れる。この型の意味グリッドは左右のラベルレールだけ
• 4拠点を地図の中心から左右に振り分けた。東側（東京本社・名古屋）が右、西側（大阪支店・福岡営業所）が左。Before は右3・左1で重心が右に偏っていた
• 引き出し線のレールを左右対称に（右 x=450 / 左 x=190。キャンバス中心320から±130）
• 左のラベルは終端揃え（text-anchor="end"）にして、レールに向かって右端が揃うようにした

F-1 箇条書き（縦並び） bullet-vertical

リストマークの配色や大きさ、罫線の有無など意外と奥が深い。

意味グリッド項目行 72px ピッチ（番号円 cy=120+72k）で中身は y=108..362 × 区切り線は行間の正中。パネルはその中身に上下28px・左右28pxの余白を足した 80..390（Before は下だけ88px空いていた）。区切り線の左右余白はパネルに対し25px

• パネルの高さを 370→310 に。中身は y=108..362（番号円の上端から最後の帯の下端まで）なのに、パネルが y=80..450 で上余白28px・下余白88px。余白差は60pxで、中身の中心235はパネルの中心265より30px上にあった（この2つは別の数字。余白差は中心のずれの2倍になる）。310にすると上下とも28pxで揃い、中心も一致する
• 詰めたぶん図の中心が30px上がるので offset を 5→35 にしてスライド中央へ置き直した
• 区切り線の右端を 570→565 に。パネル(50..590)に対する左右余白が 25 / 20 → 25 / 25 の対称になる

contentOffset 5 → 35

F-2 箇条書き（横並び） bullet-horizontal

項目数が少ないときに使われることが多く、横長スライドにフィットしやすい。

意味グリッドパネル 195px ピッチ（幅170・空き25）× 3枚。パネル内の帯は全て中央揃えで、内側余白が 25/18/22/28 の対で揃う

変更なし — 3パネルが等間隔（25px）・左右マージン40で対称。パネル内の帯も全て中央揃えで、内側余白が18/22/28と対で揃っている

F-3 箇条書き（羅列） bullet-grid

縦でも横でもない、第三の選択肢「羅列型」。

意味グリッドチップ格子 130px × 50px ピッチ（幅120・空き10 / 高さ38・空き12）。パネルは格子に20pxの余白を足した大きさ

• チップ4列をパネル内で中央へ（内側余白 25 / 45 → 35 / 35）
• パネルの高さを370→228に詰めて、中身の下に162pxあった空白を解消（上下余白はどちらも20px）
• 詰めたぶん図が上に寄るので offset を 5→76 にしてスライド中央へ置き直した

contentOffset 5 → 76

F-4 チャート＋ポイント chart-bullets

1つのチャートと、右側にKey Insightsをまとめた定番レイアウト。

意味グリッド横は年カテゴリのスロット 60px（棒40はスロット中央、プロット領域 80..360 の中央に4本）× 縦は 1億円 = 5px・原点 y=370（緑の横線が10億円ごと）。4本は 14 / 22 / 30 / 39.6億円で、これで Key Insight の「前年比+32%」と一致する。右は Insight 行 30px ピッチ

• 2024年の棒を高さ210→198（y=160→172）に。原点は軸線 y=370 なので、Before の 150px→210px は前年比 +40% を表しており、右の Key Insight が言う「前年比+32%の成長」と一致していなかった。この図で本文が主張している数字が、棒の長さと違う
• 単位を「1億円 = 5px・原点 y=370」と決めた。4本は 14 / 22 / 30 / 39.6億円になり、+32% が成立する。もう1つの Insight「来期は50億円を目標」（=250px）も最新実績より上に来るので矛盾しない
• ⚠️ この修正は棒の長さ＝値を動かすもの。動かす根拠は同じ図の中にある本文（+32%）で、値の出どころが本文しかない以上、本文が正で棒が誤りと判断した
• 棒4本をプロット領域の中央へ（軸線 80..360・棒 x=110/170/230/290・年ラベル 130/190/250/310）。Before は左に20px・右に50pxで、棒の群れが左へ寄っていた
• 右パネルの幅を190→180にして左右マージンを 40 / 30 → 40 / 40 の対称に（パネル間の20pxはそのまま）

A-1 ツリー tree

親→子の関係 — 作例「Claude Code スキルの分類体系」

意味グリッドグリッド: 葉スロット 156px ピッチ（幅140・空き16／親は半ピッチ78の格子）× 階層の行 128px ピッチ

• y の8pxスナップ率 91% → 100%
• ノードのカラム線一致率 0% → 100%

A-2 入れ子（ネスト） nested

包含・スコープによる階層 — 作例「CLAUDE.md の階層構造」

意味グリッドグリッド: 入れ子の等インセット 横39px・縦40px（5層すべてが中心 500,248 の同心）

• y の8pxスナップ率 38% → 56%
• ノードのカラム線一致率 10% → 30%

A-3 組織図 org-chart

人・エージェント・チームの所掌とレポートライン — 作例「エージェントチームの責任マップ」

意味グリッドグリッド: 担当スロット 160px ピッチ（幅144・空き16／班と司令塔は半ピッチ80の格子）× 階層の行 152px ピッチ

• y の8pxスナップ率 11% → 100%
• ノードのカラム線一致率 0% → 92%

A-4 レイヤースタック layers

抽象度の積み重ね — 作例「AI アプリのスタック · 仕事が実際に起きる場所」

意味グリッドグリッド: 層の行 = 64px 等ピッチ（隙間なし・5層で y=80→400／縦線は全層共通の行内位置）

• y の8pxスナップ率 100% → 100%
• ノードのカラム線一致率 0% → 100%

A-5 ピラミッド／ファネル pyramid

序列階層またはコンバージョンの減衰 — 作例「コンテンツピラミッド · 複利で効くもの」

意味グリッドグリッド: コンテンツ層4段（境界 y=24/152/216/280/344・高さ128/64/64/64）／斜辺は45°で半幅=y-24

• y の8pxスナップ率 67% → 100%
• ノードのカラム線一致率 — → —

B-1 フローチャート flowchart

分岐のある判断ロジック — 作例「これはスキルにすべきか？」

意味グリッドグリッド: 工程の段5行（ノード高48/48/96/96/56・連結ギャップ一律32）× 本線列 x=430-570 と分岐列 x=742-882（幅140・中心500/812）

• y の8pxスナップ率 59% → 59%
• ノードのカラム線一致率 0% → 100%

B-2 シーケンス図 sequence

アクター間の時系列メッセージ — 作例「記事リクエスト、コールドキャッシュ」

意味グリッドグリッド: ライフライン4列（x=110/344/578/812・234pxピッチ）× メッセージ行56pxピッチ（y=176〜456の6行）

• y の8pxスナップ率 73% → 87%
• ノードのカラム線一致率 0% → 57%

B-3 状態遷移図 state

状態・遷移・ガード条件 — 作例「記事のライフサイクル」

意味グリッドグリッド: 状態列3列（幅140・ピッチ234・遷移ギャップ94）× 状態行2段（y=160-240 / 296-396、水平遷移軸はすべて y=200）

• y の8pxスナップ率 86% → 93%
• ノードのカラム線一致率 0% → 67%

B-4 スイムレーン swimlane

部門をまたぐ受け渡しプロセス — 作例「記事を公開するまで」

意味グリッドグリッド: 担当レーン4行（一律80px・境界 y=80/160/240/320/400）× 工程スロット5列（幅120・156pxピッチ・起点 x=196、x=40-180 はレーン名の見出し列）

• y の8pxスナップ率 70% → 86%
• ノードのカラム線一致率 0% → 78%

B-5 プロセス図 process

複数アクターの逐次プロセスとデータ受け渡し — 作例「4チームにまたがる受注処理」

意味グリッドグリッド: 工程8列（幅100・空き12）× 担当4レーン（高さ80）

• y の8pxスナップ率 16% → 68%
• ノードのカラム線一致率 0% → 11%

B-6 ループ／フライホイール loop

最後の工程が最初に戻り、中心のハブに勢いが蓄積する自己強化ループ — 作例「自己改善ループ」

意味グリッドグリッド: 中心(520,344)・半径240を60°等分（6ステップ）／その帰結として列 312/520/728（ピッチ208=R·cos30°）× 行 104/224/464/584（R と R/2）の直交格子

• y の8pxスナップ率 35% → 72%
• ノードのカラム線一致率 0% → 0%

C-1 タイムライン timeline

時間軸上のイベント — 作例「プロダクトローンチ · 14か月の歩み」

意味グリッドグリッド: 1か月 = 60px（濃い縦線 = 2026年の年境界 x=710）

• y の8pxスナップ率 100% → 100%
• ノードのカラム線一致率 — → —

C-2 ガントチャート gantt

タイムライン上のタスクとフェーズ — 作例「Q2 プロダクトローンチ · 12週間計画」

意味グリッドグリッド: 1週 = 64px（濃い縦線 = 月境界。4週 = 1か月／4月・5月・6月）

• y の8pxスナップ率 47% → 100%
• ノードのカラム線一致率 0% → 29%

D-1 棒グラフ bar

カテゴリ間の定量比較 — 作例「スプリントベロシティ · 8スプリントの推移」

意味グリッドグリッド: 横 = 8カテゴリ × 110pxピッチ（バー幅72＋左右余白19）、縦 = 3.2px/ストーリーポイント（0〜120を20刻み・基線 y=424）

• y の8pxスナップ率 42% → 72%
• ノードのカラム線一致率 0% → 0%

D-2 折れ線グラフ line

時間に伴う連続的な傾向 — 作例「週次登録数 · 成長を牽引するのはオーガニック」

意味グリッドグリッド: 横 = 1週120px（W1 が x=80、W8 が x=920。右40pxは余白）、縦 = 1.6px/登録数（0〜240を40刻み）

• y の8pxスナップ率 13% → 75%
• ノードのカラム線一致率 — → —

D-3 散布図 scatter

2変数の分布と相関 — 作例「デプロイ頻度×リードタイム · 12チーム」

意味グリッドグリッド: 横 = 44px/(デプロイ回数/週)（0〜20を4刻み・副目盛2回）、縦 = 16px/リードタイム日（0〜24を6刻み・副目盛3日）

• y の8pxスナップ率 26% → 93%
• ノードのカラム線一致率 0% → 0%

D-4 レーダーチャート radar

3〜5個の定量基準による複数対象の採点 — 作例「ストレージバックエンド · 能力レーダー」

意味グリッドグリッド: 中心(500,240)・5軸72°等分／値1=16px、同心輪郭 r=32/64/96/128/160（値2/4/6/8/10）

• y の8pxスナップ率 50% → 75%
• ノードのカラム線一致率 — → —

D-5 四象限 quadrant

2軸のポジショニング・優先順位付け — 作例「コンテンツ案 · インパクト×労力」

意味グリッドグリッド: 中心 (500,248) が原点。横 = 労力（半幅382 が最大）、縦 = インパクト（半高168 が最大・上が正）。中割り線 191/84 は 0.5 の位置で、象限は単位ではなくカテゴリ

• y の8pxスナップ率 57% → 100%
• ノードのカラム線一致率 0% → 100%

D-6 ベン図 venn

集合の重なり — 作例「良いデザイン · 望ましさ×実現性×事業性」

意味グリッドグリッド: 半径140の3円、中心(500,172)(428,312)(572,312)＝底辺144・斜辺157.4の二等辺／三重の重なりの内接円は外心(500,260.5)・r=51.5

• y の8pxスナップ率 — → —
• ノードのカラム線一致率 — → —

E-1 アーキテクチャ図 architecture

システムの構成要素と接続 — 作例「本番環境のコンテンツサイト」

意味グリッドグリッド: コンポーネント列4本＝幅140・ピッチ234（12カラム幅62＋ガター16の「2カラム幅・3カラム送り」）× 層3行＝高さ64・ピッチ80（主フロー行は全幅、上下2行はコンテンツゾーン幅164の中だけ）

• y の8pxスナップ率 52% → 68%
• ノードのカラム線一致率 17% → 92%

E-2 全体構成図 high-level

コンテナクラスタ上のエンドツーエンドのデータスタック — 作例「全体構成 · エンドツーエンドのスタック」

意味グリッドグリッド: フェーズ5列×200（全ブリードのバナー）と、カード列4本＝幅140・ピッチ156（K8s枠の内側パディング78）の二重の刻み × 行はコンポーネント行80（保存列だけピッチ96で2段）・ソース列4段ピッチ80・ID管理帯40

• y の8pxスナップ率 33% → 36%
• ノードのカラム線一致率 9% → 64%

E-3 IT現状図 it-state

部門・段階ごとに整理したレガシーITの現状（モダナイズ提案の Before） — 作例「小売レポーティングのレガシー現状」

意味グリッドグリッド: ゾーン3枠＝幅280・ピッチ296（ギャップ16／内側パディング20でノード列幅240）× ノード3行＝高さ64・ピッチ128（ゾーン天地は24あけ、処理ゾーンの上2行のみ高さ72）

• y の8pxスナップ率 45% → 69%
• ノードのカラム線一致率 25% → 13%

F-1 ERデータモデル er

エンティティ・フィールド・リレーション — 作例「コンテンツ基盤 · データモデル」

意味グリッドグリッド: エンティティ表3ゾーン（x=40/352/742・間隙94）× 属性行 16px（ヘッダ40＋16n＋余白8）／中心線は左2表が y=240、右ゾーンは 176 と 320 の2段

• y の8pxスナップ率 66% → 100%
• ノードのカラム線一致率 0% → 100%

F-2 メダリオン medallion

品質レベルとアクセスポリシーを持つ多層データストレージ — 作例「5層の e コマース分析ストレージ」

意味グリッドグリッド: 5ステージ列＝幅176・ピッチ192（等ギャップ16・内側パディング16／列中心136-904がアークの発着点）× カード内は見出し帯50＋属性3行ピッチ40＋事例ブロック、下段の経路だけ同じ内容幅を2分割（幅464）

• y の8pxスナップ率 90% → 95%
• ノードのカラム線一致率 17% → 25%

F-3 データフロー data-flow

各パイプライン工程で誰が何をするかのデータフロー — 作例「ロール別の分析パイプライン」

意味グリッドグリッド: 工程5列（幅100・ピッチ108・見出し列140）× ロール3レーン（高さ80・ノードは上下8px内側の64）

• y の8pxスナップ率 13% → 64%
• ノードのカラム線一致率 0% → 71%

F-4 データ基盤統合図 dp-integration

データ基盤の統合トポロジー（ソース→コア→利用者） — 作例「汎用データ基盤の統合トポロジー」

意味グリッドグリッド: 処理の4段階列（ソース x=44 / 保存 x=326 / クエリ x=702 / 利用者 x=984・いずれも幅172）× 行ピッチ88（中心 124/212/300 を優先し8pxに載せない）

• y の8pxスナップ率 32% → 33%
• ノードのカラム線一致率 0% → 92%

F-5 権限マトリクス dp-security-matrix

ロール×コンポーネントのアクセス権限マトリクス — 作例「データ基盤のアクセス権限マトリクス」

意味グリッドグリッド: ロール5列（幅144・ピッチ160・ラベル列192）× コンポーネント5行（高さ36・ピッチ40）＝セル 144×36

• y の8pxスナップ率 26% → 100%
• ノードのカラム線一致率 0% → 17%