[{"data":1,"prerenderedAt":290},["ShallowReactive",2],{"content-/diagram-catalog-process-and-time-migration":3,"all-pages-for-dir":268,"related-/diagram-catalog-process-and-time-migration":269,"og-image-/diagram-catalog-process-and-time-migration":289},{"id":4,"title":5,"body":6,"category":249,"concepts":250,"description":251,"extension":252,"meta":253,"navigation":254,"ogImage":250,"path":255,"project_name":256,"published":257,"publishedAt":258,"seo":259,"source":260,"stem":261,"tags":262,"todo":250,"unpublished":257,"updatedAt":250,"__hash__":267},"pages/2026-08/2026-08-14/diagram-catalog-process-and-time-migration.md","図解カタログをBefore付きで移した日。プロセスフロー11型と時間軸4型、横に伸びた判断ノード",{"type":7,"value":8,"toc":238},"minimark",[9,26,31,34,42,45,78,81,84,87,90,93,110,113,116,119,125,128,131,134,137,140,143,147,154,157,160,163,169,173,176,183,186,190,193,203,206,209,212,215,231,234],[10,11,12,13,17,18,21,22,25],"p",{},"スライドデザインの積み残しに何が残っているかを聞いた。\n返ってきたのは49型という数字だった。\n図解カタログは60型あって、1024×576 の統一キャンバスへ移し終えているのはカテゴリA（階層と構造）の11型しかない。\nこの数字は計画書のチェックボックスからではなく、",[14,15,16],"code",{},"slideTokens.ts"," の ",[14,19,20],{},"UNIFIED_TYPES"," と ",[14,23,24],{},"UNIFIED_DESIGN_TYPES"," を集計して出させた。\n移行済みかどうかの正本はソースのほうにある。\n今日はここから、プロセスフローの11型と時間軸の4型を移した。",[27,28,30],"h2",{"id":29},"before-はいつ撮るか","Before はいつ撮るか",[10,32,33],{},"カテゴリBに入る前に、条件を1つ付けた。\n移行後の図を今の表示領域に置き、移行前の図をその下に並べる。\n前後を1画面で見比べられないと、良くなったのか壊したのかを自分で判断できない。",[10,35,36,37,41],{},"ここには順番の制約がある。\n型を移すと元の描画はソースから消えるので、",[38,39,40],"strong",{},"Before は移す前にしか撮れない","。\nカテゴリAの11型は、この仕組みを作る前に移してしまった。\nだから今も Before がない。",[10,43,44],{},"そこで、残り49型ぶんの Before を先回りで全部凍結させた。\n撮る対象を「これから触るカテゴリ」に絞ると、また同じ取りこぼし方をする。",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"language-bash shiki shiki-themes vitesse-light vitesse-light","node scripts/snapshot-diagram-before.mjs --cat c   # 移行の前に必ず\n","bash","",[14,53,54],{"__ignoreMap":51},[55,56,59,63,67,71,74],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"senZ8","node",[55,64,66],{"class":65},"sdGka"," scripts/snapshot-diagram-before.mjs",[55,68,70],{"class":69},"snbK4"," --cat",[55,72,73],{"class":65}," c",[55,75,77],{"class":76},"sxvE3","   # 移行の前に必ず\n",[10,79,80],{},"出力は静的なSVGで、詳細ページの下段に貼る。\nBefore と After を同じ画面に置くと矢頭が化けるので、スナップショット側の id には型ごとの接頭辞が付く。",[27,82,83],{"id":83},"はみ出しは目視では取りこぼす",[10,85,86],{},"カテゴリB 11型は、33系の5型から先に書き換えさせた。\n途中で2種類のはみ出しが出た。",[10,88,89],{},"1つはリード文で、版面の右端を突き抜けた。\nフレーム側で2行に折り返す処理を入れさせた。\nもう1つはフライホイールの矢頭で、ボディの境界を2px超えていた。\n半径を詰めさせて収めた。",[10,91,92],{},"2px は、スクリーンショットを眺めていても気づかない。\nDOM を測って初めて出てくる。\n毎回手で測るのが面倒だったので、境界チェックをスクリプトにさせた。",[46,94,96],{"className":48,"code":95,"language":50,"meta":51,"style":51},"node scripts/check-slide-bounds.mjs --cat b\n",[14,97,98],{"__ignoreMap":51},[55,99,100,102,105,107],{"class":57,"line":58},[55,101,62],{"class":61},[55,103,104],{"class":65}," scripts/check-slide-bounds.mjs",[55,106,70],{"class":69},[55,108,109],{"class":65}," b\n",[10,111,112],{},"版面（24..1000）とボディ（160..488）の内側に収まっているかを DOM で測る。\n許容は1pxにしてある。\nこれより厳しくすると、グリフのサイドベアリングで1px弱食い出す文字を直すために、文字だけグリッドから外す羽目になる。",[10,114,115],{},"一覧ページも直させた。\n統一済みの27系だけ、枠のないボディがそのままサムネイルに出ていた。",[27,117,118],{"id":118},"判断ノードのひし形が横に伸びた",[10,120,121,124],{},[14,122,123],{},"/diagram-catalog/b/6"," を開いたら、フローチャートの27系だけ形が変わっているのが目に入った。\n判断ノードが、Before のひし形ではなく横長のダイヤになっている。\n横幅を広げる意味がある図には見えなかったので、そう伝えた。",[10,126,127],{},"原因は、ひし形だけ本線列（146）から左右へ83pxずつ張り出させて、4カラムぶんの312幅にしていたことだった。\n原典は200幅で、中に入る文字は「プロジェクト横断で」の99pxしかない。\n312まで広げる根拠はどこにもない。\n本線列にガター1本ぶんを足した幅へ詰めさせた。",[10,129,130],{},"版面が余っていると、埋めたくなる。\nただし図形の幅は中に入る文字から決まるもので、余白から決まるものではない。\nひし形が平たくなった時点で「判断」に見えなくなるのだから、広げた側が間違っている。",[10,132,133],{},"同じ理由で、階段状のステップ図の間隔も詰めさせた。\nあわせて、間隔のルールを svg-diagram スキルに書き足させた。\nすき間の既定はガター1本、例外は矢印のように意味のあるものが入るすき間だけ、と決めた。",[27,135,136],{"id":136},"どこで切るか",[10,138,139],{},"カテゴリBが終わったところで、そのままカテゴリC（時間と計画）の4型へ進もうとしていたので止めた。\n別セッションに分けて、引き継ぎのプロンプトを出してもらった。",[10,141,142],{},"切る場所としては良かった。\nカテゴリCは原典のファイルを読んだだけで、編集は1文字も入っていない。\n書きかけのコードを引き継ぐと、次のセッションは「どこまで終わっているか」の確認から始まってしまう。",[27,144,146],{"id":145},"before-のフォントをそのまま持っていく","Before のフォントをそのまま持っていく",[10,148,149,150,153],{},"別セッションでカテゴリC 4型が上がってきたので、",[14,151,152],{},"/diagram-catalog/c/3"," を見た。\n2軸タイムラインが Before とかなり違うものになっている。\n年ラベルの位置が動き、縦書きの帯名が横書きになり、折り返しが割り直され、枝の描き方まで変わっていた。",[10,155,156],{},"Before のフォントとサイズをそのまま持っていけば済む話で、余計なことをする必要はない。\nそう伝えた。",[10,158,159],{},"作り替えの根っこは、横の単位の取り方だった。\n1年を83pxまで詰めたせいで原典の2行組みが入らなくなり、入らないから折り返しを変え、変えたついでに他も触る、という連鎖になっていた。\nBefore と同じ比率（1年=120px）に広げたら、原典の組み方がそのまま収まった。",[10,161,162],{},"引出線も同じで、27系のタイムラインは80まで伸ばされてラベルが宙に浮いていた。\n原典どおり56へ戻させた。\n時間軸の図はもともと縦に薄いので、余白は余白のまま残しておいてよい。",[10,164,165,168],{},[38,166,167],{},"統一の対象はキャンバスと骨格だけ","で、図の中の配色、文字サイズ、行間は型ごとの選択として原典のまま残す。\nこの線引きを計画書に書かせた。",[27,170,172],{"id":171},"_27系に統合する予定はどこに書いてあるか","「27系に統合する予定」はどこに書いてあるか",[10,174,175],{},"ガントチャートは33系と27系の両方にある。\n中身は同じものなので、片方に寄せて片方は残す、という扱いにしたい。\n33系のガントには27系と同じ組み立て（フェーズ帯、週目盛り、タスク名列）を当てさせた。",[10,177,178,179,182],{},"問題は、その方針をどこに書くかだった。\n",[14,180,181],{},"/diagram-catalog/c/1"," を開いても、統合予定はどこにも出ていない。\nどこに書いてあるのかを聞くと、計画書だという答えだった。\n計画書に書いた方針は、計画書を読む人にしか届かない。\nページの上のほうに出すよう頼んだ。",[10,184,185],{},"カタログのデータ側に統合予定のメモを持たせて、詳細ページの見出し直下、図より前に帯として出させた。\n図を見る前に「これは選別待ちの型だ」と分かる位置に置いた。",[27,187,189],{"id":188},"_27系と33系のどちらに寄せるか","27系と33系のどちらに寄せるか",[10,191,192],{},"同じ型が2つの系にある以上、どちらへ寄せるかを毎回決めることになる。\nここは2つの話が混ざりやすいので、分けて書いておく。",[10,194,195,198,199,202],{},[38,196,197],{},"デザインは27系から33系へ持っていく。"," 27系のほうが組み立てが良いので、33系側にそれを当てて揃える。逆ではない。\n",[38,200,201],{},"最終的に残すのは27系のほうで、33系はそこへ統合する。"," カタログの正本にも「27系（#24）へ統合する予定」と書かせた。\n揃えるのは、選別のときに中身だけを比べられるようにするためで、揃えた先に消えるのは33系のエントリになる。",[10,204,205],{},"とはいえ、33系にいいところがない型も結構ある。\n今回の2軸タイムラインがまさにそれだった。\n方針の正本を確認させたところ、デザインの向きは「33系に27系のものを当てる」で合っていて、いまは c/3 だけが例外になっているという整理が返ってきた。\nBefore の配色と文字組みをそのまま残せ、と今日指示したぶんがそこに当たる。",[27,207,208],{"id":208},"残り34型",[10,210,211],{},"カテゴリCまでで統一済みは26型になった。\nDOM実測ではみ出し0件、テストは232ファイルの19,827件がパスしている。\n残りはD〜Iの34型で、Before も全部凍結済みなので、あとはどの順で移すかだけになる。",[10,213,214],{},"今日決めたことを並べておく。",[216,217,218,222,225,228],"ul",{},[219,220,221],"li",{},"図形の幅は中に入る文字から決める。版面が余っているから広げる、はやらない",[219,223,224],{},"原典の組み立てはそのまま持ち上げ、寸法だけキャンバスに合わせる。情報量を削り始めたら単位の取り方が間違っている",[219,226,227],{},"統一の対象はキャンバスと骨格だけ。配色と文字サイズは型ごとの選択として残す",[219,229,230],{},"選別の方針は、ページを開いた人に見える場所へ書く",[10,232,233],{},"移す作業そのものより、そのあとの選別のほうが重い。\n同じ図が両系に二重にある型を、どちらへ寄せてどちらを残すかは、上下に並べて見比べられる状態になって初めて決められる。\nBefore を先に凍結させたのは、そのための土台だった。",[235,236,237],"style",{},"html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":51,"searchDepth":239,"depth":239,"links":240},2,[241,242,243,244,245,246,247,248],{"id":29,"depth":239,"text":30},{"id":83,"depth":239,"text":83},{"id":118,"depth":239,"text":118},{"id":136,"depth":239,"text":136},{"id":145,"depth":239,"text":146},{"id":171,"depth":239,"text":172},{"id":188,"depth":239,"text":189},{"id":208,"depth":239,"text":208},"dev",null,"60型の図解カタログを1024×576の統一キャンバスへ移す作業の続き。移行前にBeforeを凍結し、横長になった判断ノードを差し戻し、ガントを27系に寄せる方針をページ上部に出させるまでの記録。","md",{},true,"/diagram-catalog-process-and-time-migration","mdx-playground",false,"2026-08-14T00:00:00.000Z",{"title":5,"description":251},"make-diary","2026-08/2026-08-14/diagram-catalog-process-and-time-migration",[263,264,265,266],"図解カタログ","SVG","svg-diagram","デザインシステム","JmgiHDRtl0f90xwx_Vclb4q-Am-_Vz0M_hUrgUctHUo",[],[270,274,278,281,285],{"title":271,"path":272,"publishedAt":273},"図解60型が1枚のキャンバスに乗った日。ここから27系と33系のどちらを残すかを選ぶ","/diagram-catalog-selection-start","2026-08-15T00:00:00.000Z",{"title":275,"path":276,"publishedAt":277},"図解カタログをB案でmasterへ統合した日。カテゴリA11型と、消えていた原典の顛末","/diagram-catalog-frame-separation","2026-08-13T00:00:00.000Z",{"title":279,"path":280,"publishedAt":273},"2026年8月15日の開発日記 - 60型を1枚に乗せ切り、父のMacをGitHubにつないだ","/2026-08-15-diary",{"title":282,"path":283,"publishedAt":284},"SVG-diagramスキルに ①②③ の中央寄せとカード下パディングのルールを追加","/svg-diagram-skill-numbering-padding","2026-07-01T00:00:00.000Z",{"title":286,"path":287,"publishedAt":288},"D2を試したら結局SVGダイアグラム・スキルを書き直すことになった話 — 同じページの6枚を全部Grid版で出し直す","/svg-diagram-skill-upgrade","2026-06-14T00:00:00.000Z","https://log.eurekapu.com/favicon.svg",1787053849191]