財務デューデリジェンス `/zaimu-dd` 全章のSVG図解をMüller-Brockmannグリッドに乗せ替える

開発mdx-playground

財務デューデリジェンス /zaimu-dd 全章のSVG図解をMüller-Brockmannグリッドに乗せ替える

svg-diagram スキルを Müller-Brockmann のモジュラーグリッドに沿った方式に刷新した翌日、/zaimu-dd の各ガイドページを開いて図解を眺めたら、旧スタイルの罫線囲みがちらほら残っていた。新スキルに合わせて全章のSVGを書き直し、ついでに章ごとのSVG密度を揃えるところまで一気にやった。

背景

新しい svg-diagram スキルは、罫線で要素を区切る代わりに塗りの濃淡だけで分離する方式に振り切った。Müller-Brockmann が雑誌レイアウトでやっていた「グリッドに乗せて余白で語る」発想を、図解単位に落とし込んだものだ。

旧スキルで作ったSVGはどれも黒い罫線で要素を囲っていて、新スキルの方針と並べると古い印鑑のように浮いて見える。/zaimu-dd 配下は財務DDのガイドコンテンツとしてヘッダー要素も多く、図解の総数が10数本ある。順番に書き換えていくしかない。

着手手順

1. ベーシック章だけ先に書き直す

最初は欲張らず、/zaimu-dd/guide/basics の2図解（DiagramMaProcess、DiagramDdImpact）だけ新スキルで書き直した。ここで方針が固まれば、残りはコピー＆置換で展開できる。

書き換えのポイントを2つに絞った。

  • 罫線の <rect> を全部消して、塗りの矩形だけで区切る
  • viewBox の寸法はそのままに、グリッドの列数・行数を Müller-Brockmann 方式で再計算する

ブラウザでリロードすると、白地に灰色の塗りで階段状に並ぶ図に化けていた。ユーザーから「いいですね。他の章も全部同じようにしてください。」と返ってきたので、横展開に進む。

2. 残り4章を並列で書き換える

guide/ 配下の4ファイル（report、pl-items、bs-items、special）が、それぞれ別の図解コンポーネントを使っている。4ファイルを並列でReadして、6本の図解を新スキルで書き直した。

ここまでで zaimu-dd 全章の図解6本が新スタイルで揃った。

3. bs-items 章だけ図解の密度が薄い

並べてみると、bs-items 章だけ図解が末尾に1本（DiagramNetAssets）あるだけで、他の章に比べて文字が続く時間が長い。ユーザーから「ヘッダー2の要素には最低1個ぐらいは入れてほしい」と指示が入る。

<h2> を数えると7個あった。末尾1個を引いて、残り6個のh2に新規図解を1本ずつ追加する。

  • 流動資産の中身を整理する図
  • 固定資産の3区分を並べる図
  • 棚卸資産の評価方法を視覚化する図
  • 売掛金の年齢分析を示す図
  • 有利子負債の階層を見せる図
  • 引当金の発生メカニズムを示す図

6本のSVGコンポーネントを新規作成して、GuideBsItems.vue に挿入した。これで章全体でh2 × 7に対して図解7本という密度になった。

4. サムネの「グリッド版」表記が冗長だった

新スキルの figcaption テンプレートをそのまま使ったため、全12図解のキャプションが「図: ◯◯（グリッド版）（閉じ）」のような形になっていた。「グリッド版」は全SVGに共通する話で、わざわざ図ごとに書く必要がない。

ユーザーから「グリッド版って要りますかね。全部削除してもらえませんか」と指示が入ったので、12図解の (グリッド版) を一括で削除した。削除の際に「図:」直後のスペースが消えてしまい、再度スペースを足し直してキャプションを整えた。

5. 横長すぎて文字が枠と被る図を縦長に直す

basics章の DiagramSkill3Layer（必要なスキル3層を示す図）を確認したら、横一列に8分野を並べたせいで各セルの幅が足りず、テキストが矩形の枠線を突き抜けていた。

ユーザーから「縦に長くなって構わないので、横に無理に広げなくていいですよ」と指示。viewBox を 720×352 から 720×528 に伸ばし、レイアウトを組み直した。

  • 8分野: 横1列 × 8列 → 2列 × 4行
  • 4スキル: 横1列 × 4列 → 2列 × 2行

縦に伸びた分、各セルの幅が倍近くになり、テキストが枠内に収まった。Müller-Brockmann 方式は「縦に伸ばすのを恐れるな」が暗黙の前提にあるので、無理な横詰めを諦めるのは方針的にも筋が通る。

学び

  • 新スキルの横展開は2章目以降が速い: basics章で罫線を消して塗り分けに置換するパターンが固まったあと、残り4章は並列で処理できた。最初の1章で「変換ルール」を確定させると後が軽い。
  • テンプレ流用の副作用はキャプションに出やすい: 図解コンポーネントを量産するときに figcaption をテンプレートから貼り付けると、全SVGに同じ「(グリッド版)」が付く。グローバルに共通する情報は figcaption から外し、章のヘッダーや凡例に1回だけ書けば足りる。
  • 横並びを我慢して縦に伸ばす: 横幅を固定して全要素を1列に詰めると、テキストが枠を突き抜ける。Müller-Brockmann のグリッドは縦方向の余裕で読みやすさを稼ぐ方式なので、viewBox の高さを増やすのが正解だった。

やったことの整理

  • basics章の2図解を新 svg-diagram スキルで書き直した
  • report / pl-items / bs-items / special の4章の図解6本を並列で書き換えた
  • bs-items 章の <h2> × 7に対して6本のSVGを新規作成して密度を揃えた
  • 全12図解の figcaption から「(グリッド版)」表記を削除した
  • DiagramSkill3Layer の viewBox を 720×352 → 720×528 に伸ばし、2列レイアウトに組み直した

関連リンク

#svg#muller-brockmann#zaimu-dd #svg-diagram #design-system