[{"data":1,"prerenderedAt":386},["ShallowReactive",2],{"content-/diagram-grid-alignment-catalog":3,"all-pages-for-dir":364,"related-/diagram-grid-alignment-catalog":365,"og-image-/diagram-grid-alignment-catalog":385},{"id":4,"title":5,"body":6,"category":346,"concepts":347,"description":348,"extension":349,"meta":350,"navigation":303,"ogImage":347,"path":351,"project_name":352,"published":353,"publishedAt":354,"seo":355,"source":356,"stem":357,"tags":358,"todo":347,"unpublished":353,"updatedAt":347,"__hash__":363},"pages/2026-08/2026-08-11/diagram-grid-alignment-catalog.md","図解60型のグリッド整列を記録に残し、統合カタログを新設した",{"type":7,"value":8,"toc":333},"minimark",[9,13,16,19,24,27,39,42,52,55,65,80,87,91,98,101,104,107,114,117,121,124,131,134,149,160,167,171,174,181,184,187,190,194,212,223,227,230,233,236,243,246,249,253,256,259,262,265,268,271,278,281,284,287,290,322,325,330],[10,11,12],"p",{},"前の日に直したはずの図が、直す前の姿で並んでいた。",[10,14,15],{},"図解60型のグリッド整列を1ページに記録する作業をしていて、出来上がった一覧をスクロールしている最中に気づいた。\nA の5番、フレームワーク図。\nAfter のはずのところに、前日「ここを直して」と頼んだ形が入っていない。",[10,17,18],{},"履歴が消えたとは思えなかった。\nコミットは残っているし、比較ページも生きている。\nだとすると、入れるべき SVG を取り違えているのだろうか。",[20,21,23],"h2",{"id":22},"_60型分の-before-after-を1ページに残す","60型分の Before / After を1ページに残す",[10,25,26],{},"朝いちばんの仕事は、前のセッションから引き継いだ「グリッド整列の記録ページ」の実装だった。",[10,28,29,30,34,35,38],{},"やりたかったのは単純で、60型ぶんの図について「整列前」「整列後」を縦に並べ、型ごとに1目盛りを何に取ったか、なぜ動かしたか、何 px どう動いたかを全部読めるようにすること。\n既存の27型カタログは Web フォントを効かせるために ",[31,32,33],"code",{},"v-html"," で SVG をインライン化しているが、今回作るページは ",[31,36,37],{},"\u003Cimg>"," で読む方針にしたので、環境フォントで描かれる。",[10,40,41],{},"生成器を書かせて回したら、カードは60枚、DOM 上の SVG は117枚で、計画どおりの数だった。\nブラウザで開いたら、Before の SVG が全滅していた。",[10,43,44,45,48,49,51],{},"原因はすぐに割れた。\nVue から抜き出した Before の末尾に、次の型のコメントと余分な ",[31,46,47],{},"\u003C/g>"," が残っていて、XML として壊れていた。\nHTML なら browser が黙って補正するので、比較ページ側では最後まで見えていなかった不具合だ。\n",[31,50,37],{}," にした瞬間に、パーサが厳しくなって表に出た。",[10,53,54],{},"末尾を削る正規表現が最初のコメントからマッチして、本体ごと削っていた。\n末尾から走査する形に直させて、ついでに well-formed 検査を生成器に組み込んだら、234枚すべてが通った。",[10,56,57,58,60,61,64],{},"検査が通ったあとは目で見る。\nグリッドなしの117枚を巡回し、トグルを ON にしてグリッド版117枚も巡回させた。\n第2部の27型でテキストが溢れているように見えたので、",[31,59,37],{}," と同じ条件にするため iframe の中で実測したら、軸ラベルの回転による誤検出だった（",[31,62,63],{},"getBBox"," は回転前の座標を返す）。",[10,66,67,68,71,72,75,76,79],{},"そのあとで一つ抜けが見つかった。\n「トップページのインデックスから、このページにたどり着けますか」と聞いたら、答えは No。\n",[31,69,70],{},"nav-card"," に ",[31,73,74],{},"/diagram-types"," と ",[31,77,78],{},"/diagram-design"," は並んでいるのに、新しいページが入っていない。\nカタログを経由する2ホップの導線しかなかったので、デザイン節にカードを1枚足させた。",[10,81,82,83,86],{},"ソースを直したのに配信 HTML に出てこない、という一幕もあった。\ndev サーバーが2つ動いていて、こちらの担当分は3001、3000 は別セッションが先に握っていた。\n同じ作業ツリーを見ているので中身は同じだが、",[31,84,85],{},"index.vue"," の変更だけが3000側に伝わらない。",[20,88,90],{"id":89},"直したはずの図が直る前に戻っていた","直したはずの図が、直る前に戻っていた",[10,92,93,94,97],{},"まず、生成物と前日の比較ページを突き合わせさせたら、座標が一致した。\nつまり取り違えではなく、",[31,95,96],{},"after-a.mjs"," の中身がそうなっているということになる。",[10,99,100],{},"履歴を追わせたら、原因が出てきた。\n別セッションが Codex の指摘を受けて、組み直し案を意図的に取り下げていた。\n削除でも履歴の消失でもない。\nただ、取り下げの根拠が正しいとは限らないので、Codex の指摘が事実かどうかを Before の実座標で検算させた。",[10,102,103],{},"こちらとしては、まず自分が見たものを確かめたかったので、「1個の図形だけ B案を戻して、本当に私が見たやつかどうか確認したい」と頼んだ。\n対象は A の5番のフレームワーク図と、D の5番の導入効果図の2つだ。\nどちらも前日に「グリッドで意味を先に取ってから直して」と頼んだものだった。",[10,105,106],{},"D の5番を見ると、現行版には「リソースの数字が結論より大きい問題は未適用」と書いてあり、旧版はそこを直していた。\n意味グリッドの定義まで一緒に巻き戻っていて、復元対象は3ファイルの4ブロックになった。",[10,108,109,110,113],{},"戻す前に、旧版の修正メモが事実として正しいかだけ確認させた。\n",[31,111,112],{},"-38%"," は x=341 / y=200 でバーの脇に置かれ、リソースの34に対して結論は30で、重みが逆を向いている。\n実測と一致したので、そのまま差し戻した。",[10,115,116],{},"戻したあと、フレームワーク図の修正メモには事実誤認が2つ残っていたので、正しい設計判断の文言に置き換えさせた。\n復元後のフレームワーク図は矢印軸になり、導入効果図は結論の数字がリソースより大きい向きになった。\nブラウザで両方見て、自分が前日に見たものと同じだと確認した。\nそのうえで、revert と記録ページの追加を2件に分けてコミットした。",[20,118,120],{"id":119},"消えた画像ディレクトリは消えていなかった","消えた画像ディレクトリは、消えていなかった",[10,122,123],{},"同じ午前中に、もう1件「消えた」ものがあった。\n画像ディレクトリがまるごと無い。",[10,125,126,127,130],{},"こちらとしては意図した削除ではないので、別セッションの Claude Code に事実確認を投げてもらうことにした。\nWindows からは ",[31,128,129],{},"SendMessage"," が使えないので、ブラウザ経由で相手のスレッドを開かせた。",[10,132,133],{},"送るまでもなかった。\n相手のスレッドに理由が全部書いてあった。",[10,135,136,137,140,141,144,145,148],{},"実体は削除ではなく移動で、08:47 から 09:04 のあいだに、",[31,138,139],{},"public/images/\u003Cslug>/"," から ",[31,142,143],{},"content/_local-unpublished/\u003C日付>/\u003Cslug>/"," へ移されていた。\n非公開記事の画像を公開ディレクトリから出す、という変更だ。\n",[31,146,147],{},"_local-unpublished/"," は gitignore の対象なので、移された分はバージョン管理の外に出ることになる。",[10,150,151,152,155,156,159],{},"こちらのページに実害があるかは別問題なので、234枚が 200 で返るかを一括で確かめさせたら、1枚も欠けていなかった。\n残るのは整合だけなので、マニフェストの ",[31,153,154],{},"/images/..."," 17件を ",[31,157,158],{},"/_local-unpublished/..."," に置き換えてコミットした。",[10,161,162,163,166],{},"push してデプロイまで走らせたら、プリレンダーは9,471ルートを704秒で完走し、",[31,164,165],{},"/diagram-grid-alignment"," が生成物に入っていることも確認できた。\nただ、その先のビルドが exit 1 で落ちてデプロイは実行されなかった。\n原因は別セッションとの競合で、本番は無傷のままだった。",[20,168,170],{"id":169},"_33型を整列版に差し替える","33型を整列版に差し替える",[10,172,173],{},"午後は、33型の After に対する Codex の指摘を潰す作業を別セッションに渡した。",[10,175,176,177,180],{},"セッションが長くなりすぎていたので、引き継ぎ先を1本に絞らず、分担も渡す側で決めて具体的に書く形にした。\nこのやり方は口頭で毎回言うものではないので、",[31,178,179],{},"cross-machine-message"," スキルに「まとまった作業を渡すときは、分担も指示側が決める」という恒久ルールを書き足させた。",[10,182,183],{},"指摘の反映は完了して、「変更なし」の判定は3型まで絞り込まれた。\nそのあと33型を整列版に差し替え、グリッドを重ねて表示するトグルを付けた。",[10,185,186],{},"渡した先の進捗を見ていたら、作業3の「Before / After の本番コンテンツ化」だけが未着手で止まっていた。\n置き場所を承認していないから着手していない、という報告だった。\n置き場所については、こちらの見立ても向こうの推奨も独立ページで一致した。\n33型と27型を1ページにするか分けるかも迷ったが、もう統合計画の一部なので1ページに寄せた。",[10,188,189],{},"このあたりで、渡した先の残量が49%まで落ちていた。\n作業3を完走できずに切れる可能性が高いので、実装させるのをやめて、計画書を書かせて止める方針に切り替えた。",[20,191,193],{"id":192},"_60型を1つのカタログにまとめる","60型を1つのカタログにまとめる",[10,195,196,197,200,201,204,205,207,208,211],{},"夕方、統合カタログを新設した。\n",[31,198,199],{},"/diagram-catalog"," に60型を1ページに並べ、詳細は ",[31,202,203],{},"/diagram-catalog/{a〜i}/{no}"," で開く。\n内訳は SVG が33枚、",[31,206,37],{}," が27枚だ。\n重複している7型は片方に寄せず両方残し、相互リンクで並べて比べられるようにした。\n一覧の冒頭に「両方にある型（7組）」のブロックを置き、見出しに id を振って ",[31,209,210],{},"#dup-heading"," で直接飛べるようにした。\n明日はここから選別を始めることになる。",[10,213,214,215,218,219,222],{},"最初はカテゴリを33型と27型で割っていたが、これをやめた。\nツリーもピラミッドも組織図も、どちらの系にもあるからだ。\n種類で混ぜて9カテゴリに畳み、出自は ",[31,216,217],{},"33系"," / ",[31,220,221],{},"27系"," のタグで示す形に組み直させた。\n重複する型は同じカテゴリの中で隣り合い、33系 → 27系 の順に並ぶ。",[20,224,226],{"id":225},"_27系に揃えるがそのまま通らない","「27系に揃える」が、そのまま通らない",[10,228,229],{},"60型を1ページに並べて初めて、比率とマージンが揃っていないことが目に見えるようになった。",[10,231,232],{},"こちらの認識では、スライドの比率は4対3ともう1種類の2つだった。\nPC の横幅で見るなら27系のほうが自然なので、33系をそちらへ寄せて、タイトルとメッセージ行のマージンもフォントも全部合わせたい、と伝えた。",[10,234,235],{},"実測させたら、前提が崩れた。\n27系だけで viewBox が13種類あり、「27系の比率」という単一の値が存在しない。\n最小が 728×356、最大が 1200×664、最頻値は幅1000が19本、高さは500が10本と480が5本だった。\nつまり「27系に合わせる」は、実際には「27系の最頻値を採って1つに決める」という意思決定になる。",[10,237,238,239,242],{},"外マージンのほうは迷わずに済んだ。\n27系の最頻は40で13本あり、",[31,240,241],{},"grid-alignment.md"," の導出式（幅1000ならカラム幅62、左右マージン40、gutter 16）と一致する。\n33系の左マージンは28で、根拠の記述がどこにもない。",[10,244,245],{},"測っているうちに実装へ入りかけていたので、そこで止めた。\nこれはもう統合フェーズそのものであって、計画書なしで走らせる規模ではない。\n計画書に書き加えてもらって、今日はそこで終わりにした。",[10,247,248],{},"書かせてみたら、統合カタログの計画書はそもそも存在していなかった。\n統合の構想は前日の口頭指示だけで走っていて、その結果「重複を許した統合」という意図が、成果物側では「重複が多いので統合しない」と逆に記録されていた。\n同じことを繰り返さないよう、計画書に書いた理由ごと残させた。\nCodex にレビューさせたら致命的な指摘が2件出て、うち1件は計測を推測のまま書いているという内容だったので、測り直した。",[20,250,252],{"id":251},"夕方に図を1枚メッセージラインを何度も言い直した","夕方に図を1枚、メッセージラインを何度も言い直した",[10,254,255],{},"同じ夕方、別の話として図を1枚作った。",[10,257,258],{},"作りたかったのは、AI 以前と以後を比べる図だ。\n以前は職種が分業化されて、専門性を深く掘るほど価値が出る世界だった。\n以後は月200ドルで知能が使い放題になり、推論コストも下がり続けているので、人間が深く掘っていた層を AI が引き受けられるようになった、という話だ。",[10,260,261],{},"最初に出てきた案は、横軸に業務分野を5列、縦軸に専門性の深さを取り、Before を縦に深く、After を横に広く描く、縦棒から横棒への反転だった。\n過去記事を検索させたら、2026-03-05 の「AI時代の生産性は『分業をやめる』ことで上がる」がまさにこの論点で、語彙をそこから拾い直した。",[10,263,264],{},"ここから、メッセージラインを何度も言い直すことになった。",[10,266,267],{},"1回目は注記に引っかかった。\n「月200ドルで使い放題の知能と推論コストの低下が、深さの値段を崩した」と書いてあったが、これは違う。\n調べさせたら、採用しなかった案Bの語彙が注記にだけ残っていた。\n案Bのタイトルが「深さの値段が落ち、広さの値段が上がる」で、採用したのは案Aの「分業の反転」だった。\n図の主張と注記の主張が別のことを言っている状態になっていた。",[10,269,270],{},"2回目は「反転」という語そのものに引っかかった。\n「分業の深化が、知能のコモディティ化で反転する」と言われても、何が何で反転しているのか分からない。\n概念語のまま置くと、絵のどこを指しているかを読み手に解読させることになるので、図に描いてあることをそのまま言う形に直させた。",[10,272,273,274,277],{},"3回目は面積の話になった。\n言いたいのは、1人の守備範囲が「深さを掘る」から「横に広げる」に変わるということだ。\nだったら Before と After でピンクの面積が同じでないと、話と絵が合わない。\n5列×5段の格子にして、Before は1列ぶんの縦5マス、After は1段ぶんの横5マスに揃えてもらった。\ngap は白なので塗り面積は ",[31,275,276],{},"112 × 40 × 5"," でぴったり一致し、縦一列が横一列に倒れた、という読み方になる。",[10,279,280],{},"ただ、マスに割ると帯が繋がって見えなくなったので、分割をやめて高さの比で面積を合わせる形に戻した（Before の縦帯は 112×216 で 24,192）。",[10,282,283],{},"縦軸の名前にも引っかかりが残った。\n縦軸を「専門性の深さ」にすると、After で人間が持つのは最上段、つまり一番浅いところになる。\nこれでは「人間は専門性の浅い仕事をする側になった」と読める。\n言いたいのはそうではなく、時間のかかる掘り下げを買えるようになったから、その分を横に使える、ということだ。\n軸の名前が価値の高低を含んでしまっているのが、引っかかりの正体だった。",[10,285,286],{},"図としては完成した。\nただ、以前にパレート図のような形で Before / After を比べたものを作った記憶があるのに、SVG ギャラリーにも載っていない。\n思い出せないまま時間切れになったので、進捗をメモに残して明日に回した。",[20,288,289],{"id":289},"明日に持ち越したこと",[291,292,295,310,316],"ul",{"className":293},[294],"contains-task-list",[296,297,300,305,306,309],"li",{"className":298},[299],"task-list-item",[301,302],"input",{"disabled":303,"type":304},true,"checkbox"," ",[31,307,308],{},"/diagram-catalog#dup-heading"," の重複7組を選別する（どちらを残すか）",[296,311,313,315],{"className":312},[299],[301,314],{"disabled":303,"type":304}," キャンバス比率、外マージン、フォントを統一する。まず計画書の判断3件（キャンバス／フォント基準／タイトルの置き場所）を決める",[296,317,319,321],{"className":318},[299],[301,320],{"disabled":303,"type":304}," 分業の反転図と、思い出せていない「パレート図みたいな以前の図」を突き合わせる",[20,323,324],{"id":324},"今日の学び",[10,326,327,329],{},[31,328,37],{}," に切り替えた瞬間に Before の SVG が全滅したのは、パーサが厳しくなっただけで、壊れていたのはずっと前からだった。\nbrowser が黙って補正してくれる間は、壊れていることに気づけない。\n表示方法を変えるのは、隠れていた不整合を一度に表に出す作業でもある。",[10,331,332],{},"そして「消えた」と見えたものが、今日は2件とも消えていなかった。\n片方は別セッションが意図的に取り下げたもの、もう片方は移動だった。\nどちらも履歴を追い、実測で検算するまでは判断がつかなかった。\n口頭指示だけで走らせた統合構想が成果物側で逆の意図として記録されていた件も含めて、根拠をどこかに書き残しておかないと、あとから追う側が必ず遠回りする。",{"title":334,"searchDepth":335,"depth":335,"links":336},"",2,[337,338,339,340,341,342,343,344,345],{"id":22,"depth":335,"text":23},{"id":89,"depth":335,"text":90},{"id":119,"depth":335,"text":120},{"id":169,"depth":335,"text":170},{"id":192,"depth":335,"text":193},{"id":225,"depth":335,"text":226},{"id":251,"depth":335,"text":252},{"id":289,"depth":335,"text":289},{"id":324,"depth":335,"text":324},"dev",null,"60型の Before / After を1ページに並べ、前日直したはずの図が戻っていた原因を追い、33系と27系を種類で混ぜた統合カタログを作るまでの記録。","md",{},"/diagram-grid-alignment-catalog","mdx-playground",false,"2026-08-11T00:00:00.000Z",{"title":5,"description":348},"make-diary","2026-08/2026-08-11/diagram-grid-alignment-catalog",[359,360,361,362],"図解","SVG","グリッドデザイン","Claude Code","QBVTISjSFebtpZMAtFuTS2DwcSm6nHGB6tha_PuQ_ok",[],[366,370,374,377,381],{"title":367,"path":368,"publishedAt":369},"図解60型カタログのフレームを統一する。スライドの領域を命名して意味グリッドで揃えた1日","/diagram-catalog-frame-grid","2026-08-12T00:00:00.000Z",{"title":371,"path":372,"publishedAt":373},"図解カタログ27型をグリッドで整列させ、手順をスキルへ戻すまで","/diagram-catalog-grid-alignment","2026-08-10T00:00:00.000Z",{"title":375,"path":376,"publishedAt":373},"2026年8月10日の開発日記 - 図解カタログ27型をグリッドに載せ直した","/2026-08-10-diary",{"title":378,"path":379,"publishedAt":380},"公開されているClaude Code用の図解スキルを、クローンせずにデューデリジェンスした","/svg-diagram-pattern-library-due-diligence","2026-08-09T00:00:00.000Z",{"title":382,"path":383,"publishedAt":384},"デロイトの351ページ資料は「7つの型」だけでできていた ─ note記事からSVG図解スキルに足りない要素を洗い出した","/svg-diagram-skill-deloitte-7-types-review","2026-07-16T00:00:00.000Z","https://log.eurekapu.com/og/blog/diagram-grid-alignment-catalog.png?v=2026-08-11T00%3A00%3A00.000Z&title=%E5%9B%B3%E8%A7%A360%E5%9E%8B%E3%81%AE%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E6%95%B4%E5%88%97%E3%82%92%E8%A8%98%E9%8C%B2%E3%81%AB%E6%AE%8B%E3%81%97%E3%80%81%E7%B5%B1%E5%90%88%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B0%E3%82%92%E6%96%B0%E8%A8%AD%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=4713f3136c4597ba",1786603503884]