図解カタログ27型をグリッドで整列させ、手順をスキルへ戻すまで
図解カタログ27型をグリッドで整列させ、手順をスキルへ戻すまで
朝いちばんに積み残しを洗わせたら、先頭に並んだのは自分の判断待ち2件だった。 決裁フォームのサーバーが落ちていたので立て直させると、片方はその直後に回答が届き、もう片方は今朝の時点ですでに回答済みだった。 止まっていたのは実装ではなく、こちらの把握のほうだった。
そのまま実装へ入る前に、追記先が別セッションで移行中のリポジトリと重なることを実測で確認させておいた。 ファイルの編集は競合しないが、git の操作をすると相手のステージ領域を壊す。 その一点だけを避ける形で並行して進めた。
色とフォントの検査を advisory で足す
まず、SVGのスタイル検査を lint に足させた。 見るのはパレット外の色、純黒、許可外のフォントの3視点である。 落とさずに警告だけ出す advisory として入れさせ、テストは33件すべて通った。
続けて、索引に足りていなかった4型（組織図、フライホイール、散布図、レーダー図）を補って29型から33型にした。
索引の各型は /diagram-types/{カテゴリ}/{番号} のページとセットで、右側にサンプル図が並ぶ。
そのため4型ぶんのサンプルSVGも、本サイトのトンマナに合わせてネイビー系で描かせた。
参照元のデザインのほうが好みだった
出てきたサンプルを見て、そのまま進める気になれなかった。 悪くはないのだが、参照元として見ていた図のほうが好みだった。 トンマナに寄せた時点で、元のデザイン言語が落ちている。
そこで、いったん寄せなかった場合にどう見えるかを確かめたくなった。
27型を原典のデザインのまま並べる検討用のページを別に作らせた。
これが /diagram-design になっている。
黒塗りの作例
できたページの b/6 を開いたら、作例の一部が黒く塗りつぶされていた。 指摘した1ページだけ直して終わりにされると困るので、27ページ全部を1枚ずつ見て確認するよう頼んだ。
原因は、原典が class でスタイルを当てていた7作例にあった。 その定義が複製先で復元されていなかった。 修正後、27ページ全数のスクリーンショットで表示を確認させた。
日本語化とトップページの導線
このトンマナで進めると決めて、作例27枚とページ見出しを日本語表記に変えさせた。
そのあとトップページを見たら、/diagram-design への入口が無い。
デザインのセクションにある図解の種類カードの直後にカードを1枚足させた。
順番が逆になっていた
次は、グリッドで整えるスキルを当てて27作例を揃える番だった。 設計案をHTMLでドラフトさせ、Codexのレビューを2巡かけ、決裁フォームまで立てさせた。 ところが出てきた計画書は、スキルへの接続が27作例の整列より先に置かれていた。 理由を聞くと、Codexの「骨格は原典からそのまま読めるので、接続は整列を待たなくてよい」という指摘を採った結果だという。
その前提はこちらの基準では崩れている。 手元のツリー図を写真で渡して説明した。 第2層の「磨き込み」と「批評」だけが密着していて、兄弟どうしのマージンが揃っていない。 これを揃えるとき、第0層から置いていってはいけない。 まず末端の兄弟を等間隔で確定させ、その親を子群の中央に置き、子を1つしか持たない親は子の真上に置く。 ルートを全体の中央へ持ってくるのは最後である。
整列作業そのものが、グリッドのスキルが指示なしでどこまで整えられるかの試験になっている。 そこで見つかる抜けを書き戻すのが目的の本体なので、接続を先に済ませてしまうと試験にならない。 順序を整列先行に戻させた。
27枚の整列とセッション上限
26枚を7グループに分けて並列で走らせたら、セッション上限に当たって7つとも止まった。 手元に残ったのは5枚だった。 再開のときは、各エージェントに見本SVGを読ませるのをやめ、仕様書だけを渡す構成に変えた。 そこからは最後まで走り切って、27枚が揃った。
途中で原典のバグが2件出てきた。 状態遷移図では、開始の丸から「下書き」へ向かう矢印だけラベルが無いように見えていた。 実際にはラベルは存在していて、中心 x=196 が「下書き」カード（120〜280）の内側にあり、後から描かれるカードの下に完全に隠れていた。 整列版では x=150 へ移して、他の遷移と同じ規則に揃えている。 ガントでも原典のバグが1件見つかり、期間比が保たれていることを検証させた。 棒グラフは値の再現性を独立に検証させたところ、原典より正確になっていた。
Afterが見えない
BeforeとAfterを並べた比較ドキュメントを見たが、Afterの何が良くなったのか分からない。 背景にグリッドを敷いてほしい、と差し戻した。 表示のON/OFFトグルと全画面幅もついでに入れさせた。
一律12カラムではなかった
グリッドが入ってから、作例を1件ずつ見た。 A-1は良い。A-2の入れ子も良い。A-3の組織図は縦も横も揃った。 A-4とA-5のピラミッドは、そもそもそこまで揃える話ではない。 シーケンス図は横が揃って見違えた。
ただ、背景のほうに引っかかった。 敷かれていたのは一律の12カラムで、その図が何を成立させたかとは関係がない。 見たかったのは、カードの列とその間の空きのほうだった。
実測させると、プロセス図は工程の列が8本、幅が100、空きが12だった。 タイムラインは60px/月、ガントは64px/週で刻まれていた。 グリッドは描画結果から引くものではなく、軸の単位とデータ、つまり図の意味から逆算しないと引けない。 3型で試作させて、狙いが合っていることを確認した。
二重のカタログをどう扱うか
ここで、原典トンマナの /diagram-design（27型）と、本サイトトンマナの /diagram-types（33型）が並んで存在する状態になった。
無理に片方へ寄せる必要はないと考えた。
ツリー図が2つあってもいい。
そのうえで、/diagram-types 側のツリー図のほうが崩れていたので、そちらを直させることにした。
第2層のカードが2箇所で10px重なり、コネクタが斜めに走り、親が子群の中央からずれている。
1型だけBefore/Afterで見てから、33型へ展開させた。
そして同じ穴にまた落ちた。 汎用の12カラムを33型すべてに当てていて、スキル自身が「やるな」と書いている手順をそのままなぞっていた。 型ごとに意味グリッドを定義し直させた。
細部でも1つ見つけた。
縦型のフロー図で、矢印の三角形がずれている。
矢頭マーカーの refX と refY が、縦型だけ入れ替わっていた。
線が三角形の軸から外れて入り、先端が次のカードへ突き抜けていた。
orient="auto" が向きを回してくれるので、縦横で値を入れ替える必要はなかった。
階層レイヤー図は作り替えた
/diagram-types 側の階層レイヤー図は、整列してもBeforeが物足りないままだった。
/diagram-design/a/4 のパターンへ思い切って差し替えることにした。
立体をやめ、隙間なく積んだ全幅の帯と左に置いた方向軸で構成する骨格である。
同じ問題を抱えていたフレームワーク図と導入効果図も、グリッドに乗せるだけでなく情報の構造から組み直させた。
これで27型を修正、6型は変更なしになった。
Codexレビューでいちばん重かった指摘
33型すべてにCodexのレビューを走らせた。 結果は16型がOK、17型に指摘あり。 いちばん重かったのは、フレームワーク図を組み直した根拠が事実として間違っているという指摘だった。 実装を回させる前の診断のほうが外れていたことになる。
別セッションへの指示を間違えた
作例のページ側にもグリッド表示のトグルを付けたくなって、別セッションへ依頼を投げさせた。 そのとき「整列版には踏み込まないで」と書かせていたせいで、原典のほうにグリッドが載る実装が進んでいた。 更新されているのがBefore側に見えたので履歴を確認させ、訂正を送らせた。 最終的に、作例の表示は整列版のSVGに切り替わり、ヘッダーにグリッドのトグルが入っている。 同じタイミングで、実態に追いついていないテストの期待値が1件引っかかったので、そこだけ直させて全件パスに戻した。
スキルへ書き戻したもの
最後に、今回スキルへ反映すべき事項を洗い出させた。
- 葉を先に等間隔で確定しないと、親をどこへ置くかが決まらない。上から置くと親の位置が先に固定され、子が中央からずれる
- グリッドは描画結果ではなく図の意味から逆算する、という原則と、27型それぞれの意味グリッド定義
- 27型カタログを visual-design-essentials の索引へ接続した。参照用の型カタログを新設し、既存33型と重複しない13型だけを足して46型8グループにした
- 33型の構造規律のBefore/After修正案を memo に保存
WebとスキルのMarkdownの両方で未定義の型が出ないことを機械検証させ、テストは214ファイル、19,554件が通った。
今日の学び
- 整える順序は上からではなく下から。末端の兄弟を等間隔で確定してから親を置く
- グリッドは図の描画結果からは引けない。軸の単位（月、週、工程）を先に決める
- Before/Afterは並べるだけでは伝わらない。背景に基準線を敷いて初めて差が見える
- 二重に存在するカタログは、無理に統合しなくてよい場面がある
- 順序を決めた根拠が崩れたら、レビューで採った順序でも戻していい