図解カタログをBefore付きで移した日。プロセスフロー11型と時間軸4型、横に伸びた判断ノード
スライドデザインの積み残しに何が残っているかを聞いた。
返ってきたのは49型という数字だった。
図解カタログは60型あって、1024×576 の統一キャンバスへ移し終えているのはカテゴリA(階層と構造)の11型しかない。
この数字は計画書のチェックボックスからではなく、slideTokens.ts の UNIFIED_TYPES と UNIFIED_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 を先に凍結させたのは、そのための土台だった。