図解カタログをBefore付きで移した日。プロセスフロー11型と時間軸4型、横に伸びた判断ノード

開発mdx-playground

スライドデザインの積み残しに何が残っているかを聞いた。 返ってきたのは49型という数字だった。 図解カタログは60型あって、1024×576 の統一キャンバスへ移し終えているのはカテゴリA(階層と構造)の11型しかない。 この数字は計画書のチェックボックスからではなく、slideTokens.tsUNIFIED_TYPESUNIFIED_DESIGN_TYPES を集計して出させた。 移行済みかどうかの正本はソースのほうにある。 今日はここから、プロセスフローの11型と時間軸の4型を移した。

Before はいつ撮るか

カテゴリBに入る前に、条件を1つ付けた。 移行後の図を今の表示領域に置き、移行前の図をその下に並べる。 前後を1画面で見比べられないと、良くなったのか壊したのかを自分で判断できない。

ここには順番の制約がある。 型を移すと元の描画はソースから消えるので、Before は移す前にしか撮れない。 カテゴリAの11型は、この仕組みを作る前に移してしまった。 だから今も Before がない。

そこで、残り49型ぶんの Before を先回りで全部凍結させた。 撮る対象を「これから触るカテゴリ」に絞ると、また同じ取りこぼし方をする。

node scripts/snapshot-diagram-before.mjs --cat c   # 移行の前に必ず

出力は静的なSVGで、詳細ページの下段に貼る。 Before と After を同じ画面に置くと矢頭が化けるので、スナップショット側の id には型ごとの接頭辞が付く。

はみ出しは目視では取りこぼす

カテゴリB 11型は、33系の5型から先に書き換えさせた。 途中で2種類のはみ出しが出た。

1つはリード文で、版面の右端を突き抜けた。 フレーム側で2行に折り返す処理を入れさせた。 もう1つはフライホイールの矢頭で、ボディの境界を2px超えていた。 半径を詰めさせて収めた。

2px は、スクリーンショットを眺めていても気づかない。 DOM を測って初めて出てくる。 毎回手で測るのが面倒だったので、境界チェックをスクリプトにさせた。

node scripts/check-slide-bounds.mjs --cat b

版面(24..1000)とボディ(160..488)の内側に収まっているかを DOM で測る。 許容は1pxにしてある。 これより厳しくすると、グリフのサイドベアリングで1px弱食い出す文字を直すために、文字だけグリッドから外す羽目になる。

一覧ページも直させた。 統一済みの27系だけ、枠のないボディがそのままサムネイルに出ていた。

判断ノードのひし形が横に伸びた

/diagram-catalog/b/6 を開いたら、フローチャートの27系だけ形が変わっているのが目に入った。 判断ノードが、Before のひし形ではなく横長のダイヤになっている。 横幅を広げる意味がある図には見えなかったので、そう伝えた。

原因は、ひし形だけ本線列(146)から左右へ83pxずつ張り出させて、4カラムぶんの312幅にしていたことだった。 原典は200幅で、中に入る文字は「プロジェクト横断で」の99pxしかない。 312まで広げる根拠はどこにもない。 本線列にガター1本ぶんを足した幅へ詰めさせた。

版面が余っていると、埋めたくなる。 ただし図形の幅は中に入る文字から決まるもので、余白から決まるものではない。 ひし形が平たくなった時点で「判断」に見えなくなるのだから、広げた側が間違っている。

同じ理由で、階段状のステップ図の間隔も詰めさせた。 あわせて、間隔のルールを svg-diagram スキルに書き足させた。 すき間の既定はガター1本、例外は矢印のように意味のあるものが入るすき間だけ、と決めた。

どこで切るか

カテゴリBが終わったところで、そのままカテゴリC(時間と計画)の4型へ進もうとしていたので止めた。 別セッションに分けて、引き継ぎのプロンプトを出してもらった。

切る場所としては良かった。 カテゴリCは原典のファイルを読んだだけで、編集は1文字も入っていない。 書きかけのコードを引き継ぐと、次のセッションは「どこまで終わっているか」の確認から始まってしまう。

Before のフォントをそのまま持っていく

別セッションでカテゴリC 4型が上がってきたので、/diagram-catalog/c/3 を見た。 2軸タイムラインが Before とかなり違うものになっている。 年ラベルの位置が動き、縦書きの帯名が横書きになり、折り返しが割り直され、枝の描き方まで変わっていた。

Before のフォントとサイズをそのまま持っていけば済む話で、余計なことをする必要はない。 そう伝えた。

作り替えの根っこは、横の単位の取り方だった。 1年を83pxまで詰めたせいで原典の2行組みが入らなくなり、入らないから折り返しを変え、変えたついでに他も触る、という連鎖になっていた。 Before と同じ比率(1年=120px)に広げたら、原典の組み方がそのまま収まった。

引出線も同じで、27系のタイムラインは80まで伸ばされてラベルが宙に浮いていた。 原典どおり56へ戻させた。 時間軸の図はもともと縦に薄いので、余白は余白のまま残しておいてよい。

統一の対象はキャンバスと骨格だけで、図の中の配色、文字サイズ、行間は型ごとの選択として原典のまま残す。 この線引きを計画書に書かせた。

「27系に統合する予定」はどこに書いてあるか

ガントチャートは33系と27系の両方にある。 中身は同じものなので、片方に寄せて片方は残す、という扱いにしたい。 33系のガントには27系と同じ組み立て(フェーズ帯、週目盛り、タスク名列)を当てさせた。

問題は、その方針をどこに書くかだった。 /diagram-catalog/c/1 を開いても、統合予定はどこにも出ていない。 どこに書いてあるのかを聞くと、計画書だという答えだった。 計画書に書いた方針は、計画書を読む人にしか届かない。 ページの上のほうに出すよう頼んだ。

カタログのデータ側に統合予定のメモを持たせて、詳細ページの見出し直下、図より前に帯として出させた。 図を見る前に「これは選別待ちの型だ」と分かる位置に置いた。

27系と33系のどちらに寄せるか

同じ型が2つの系にある以上、どちらへ寄せるかを毎回決めることになる。 ここは2つの話が混ざりやすいので、分けて書いておく。

デザインは27系から33系へ持っていく。 27系のほうが組み立てが良いので、33系側にそれを当てて揃える。逆ではない。 最終的に残すのは27系のほうで、33系はそこへ統合する。 カタログの正本にも「27系(#24)へ統合する予定」と書かせた。 揃えるのは、選別のときに中身だけを比べられるようにするためで、揃えた先に消えるのは33系のエントリになる。

とはいえ、33系にいいところがない型も結構ある。 今回の2軸タイムラインがまさにそれだった。 方針の正本を確認させたところ、デザインの向きは「33系に27系のものを当てる」で合っていて、いまは c/3 だけが例外になっているという整理が返ってきた。 Before の配色と文字組みをそのまま残せ、と今日指示したぶんがそこに当たる。

残り34型

カテゴリCまでで統一済みは26型になった。 DOM実測ではみ出し0件、テストは232ファイルの19,827件がパスしている。 残りはD〜Iの34型で、Before も全部凍結済みなので、あとはどの順で移すかだけになる。

今日決めたことを並べておく。

  • 図形の幅は中に入る文字から決める。版面が余っているから広げる、はやらない
  • 原典の組み立てはそのまま持ち上げ、寸法だけキャンバスに合わせる。情報量を削り始めたら単位の取り方が間違っている
  • 統一の対象はキャンバスと骨格だけ。配色と文字サイズは型ごとの選択として残す
  • 選別の方針は、ページを開いた人に見える場所へ書く

移す作業そのものより、そのあとの選別のほうが重い。 同じ図が両系に二重にある型を、どちらへ寄せてどちらを残すかは、上下に並べて見比べられる状態になって初めて決められる。 Before を先に凍結させたのは、そのための土台だった。