2026年6月14日の開発日記

土曜日。前日にD2を試して結局SVGに戻ってきたところから始まり、svg-diagram スキルにグリッド整列ルールを書き足したらそのまま全プロジェクトに横展開する流れになった。/fudosan-toshi の9章を5STEPに組み替えてイントロを足し、ハブにパンクズを通し、/zaimu-dd・/tokibo・/tsukumi-ai-workshop・/diagram-types・/presentation-principles のSVGを連鎖で刷新。並行して宅建オリジナル教科書の Phase 1.5（金型 5_1「宅地建物取引業・免許」+ SVG 17 枚）に着手、/memory-makers に台湾AIサーバー半導体 6 社を追加、Yahoo!ニュース配信の「単身世帯3人に1人が貯蓄ゼロ」報道を原典 J-FLEC Excel まで遡って読み直した。書籍取り込みも10冊単位で4バッチ。

今日のタイムライン

タイムライン

今日やったこと

1. svg-diagram スキルにグリッド整列ルールを追加し、`/fudosan-toshi/guide/bukken` の6枚を全部書き直した

朝、Twitter で D2 のポストを見て、svg-diagram スキルに組み込めないか検証した。/fudosan-toshi/guide/bukken の SVG をD2で書き直してみたら、手書きSVGに完敗。装飾を厚くするV2方向も実はアンチパターンだと気づき、最終的に Müller-Brockmann グリッドに乗せる方向で着地。viewBox 720×N、12カラム、8pxベースライン、塗りだけで分離、サブタイトル拡大、クリックでモーダル拡大の統一仕様を references/grid-alignment.md としてスキルに固定した。

詳細: D2を試したら結局SVGダイアグラム・スキルを書き直すことになった話

2. `/fudosan-toshi` に5STEP構成のイントロを入れ、9章すべてにパンクズを通した

ハブから章に飛んだあと戻れない違和感を、パンクズリストの追加で解消。13ページに貼って回らずに layouts/fudosan-toshi.vue に集約して1ヶ所で済ませた。さらに「9章の地図がない」違和感を、9章を5STEP（序章 / 収益と物件 / 仕組み / 運営と出口 / 拡大とリスク）に組み替えたイントロページで埋めた。Codex に3回レビューさせ、章URLの /guide/ 中間パス、TOC id プレフィックス、ハブの DOM 構造差分の指摘を反映してから実装に進んだ。副産物として9章128枚のSVGをサブエージェント並列でグリッド移行した。

詳細: /fudosan-toshi に5STEP構成のイントロを追加し、9章にパンクズを通した

3. `/zaimu-dd` 全章のSVG図解を新スタイルに乗せ替えた

svg-diagram スキルの新版を受けて、ベーシック章を先頭に4章を並列で書き直し。bs-items 章はSVGが1枚しかなかったのでヘッダー2要素ごとに最低1枚追加し、横長で文字が枠と被るものは縦長レイアウトに変えた。サムネに「グリッド版／閉じ」の表記が冗長だったので全削除。

詳細: 財務デューデリジェンス /zaimu-dd 全章のSVG図解をMüller-Brockmannグリッドに乗せ替える

4. `/tokibo` に第1〜8章を俯瞰するイントロダクション章を入れた

ハブに1枚地図を貼るだけでは導入が薄いと指摘されて、独立ページ + カードコンポーネント化に切り替えた。1枚のSVG地図で全体構成を見せたうえで、各章のサマリーカードに2〜3枚ずつSVGを差し込んだ。SVGに章ページへのリンクを埋め込み、画像クリックでモーダル拡大・ESC で閉じる挙動を他ページと統一した。

詳細: ガイド /tokibo に第1〜8章を俯瞰する『イントロダクション』を入れて、各章へのSVG地図リンクを埋め込んだ

5. 社内 AI デモページ3本にグリッドを当てた（写真高さ揃え地獄）

/tsukumi-ai-workshop/koutoku（お菓子店）と他2本（美容室・飲食店）のレイアウトを Müller-Brockmann グリッドで整えた。最初は写真の高さが揃わずカードがガタついていた。Puppeteer 検証ハーネスで 0.03px まで詰めたつもりが、translateY 残骸・1fr 拡張・box-sizing: content-box の3つが重なっていて、写真だけ縦に伸びていた。

詳細: 社内 AI デモページ3本に Müller-Brockmann グリッドを当てる — 写真の高さ揃え

6. カメラ露出シミュレーターを Nuxt のページに移植した

朝、logcamera.com の露出シミュレーターを眺めていて、SS / F値 / ISO の三角関係をブラウザで触れるページが欲しくなり、Nuxt のページとして移植。最初の実装は「シャッタースピードだけで明るさが変わる」物理的におかしいバグ。EV計算式を整理して、「効果を学ぶ」「露出を学ぶ」の2モードに切り替える形で解決。トップページのコンテンツリストの一番後ろにカードを追加した。

詳細: カメラの露出シミュレーターを Nuxt のページに移植して、SS/F/ISO の三角関係を体感する

7. 宅建オリジナル教科書プロジェクト Phase 1.5 着手 — 金型 5_1 + SVG 17 枚

承認済みの計画ファイル keen-crafting-penguin.md に従って、Phase 0（設計確定）→ Phase 1.5（金型 5_1「宅地建物取引業・免許」の本文 + SVG 17枚）に着手。「ガンガン進めて」でサブエージェント並列起動 → 本文がまだできていない指摘 → 進捗計画書にまとめ直しで明日続行に切替。並行して /takken/ 配下のページ表示を /fudosan-toshi 風に整え、5_1 を Hub からクリック遷移可能にした（コミット 24f6947e, d9d8d362）。

詳細: 宅建オリジナル教科書プロジェクト Phase 1.5 着手 — 金型 5_1『宅地建物取引業・免許』の本文 + SVG 17枚

8. `/memory-makers` に台湾AIサーバー半導体6社を追加

台湾のAI需要記事から、Accton（智邦科技）/ Aspeed（信驊科技）/ Foxconn（鴻海）/ Richwave（立積電子）/ TSMC（台積電）/ Winbond（華邦電子）の6社が未登録だと気づき、月次売上・四半期売上・EPS を一気に追加。月次が画面に出てこないバグは registry.ts の MAKER_DATASETS 登録漏れだった。「AIサーバーの外観」では伝わらないので、Aspeed の BMC チップ・Richwave の RF FEM チップ自体の写真も4カラムサムネで併置。OpenAI API の billing limit に当たった画像生成は Codex CLI image_gen.imagegen 経由でフォールバックした。

詳細: /memory-makers に台湾AIサーバー半導体6社を追加 — Accton/Aspeed/Foxconn/Richwave/TSMC/Winbond

9. Yahoo!配信の「単身世帯3人に1人が貯蓄ゼロ・中央値100万円」を原典のExcelまで遡って検証

Yahoo!ニュース配信の単身世帯貯蓄記事に違和感があり、出典の J-FLEC（金融経済教育推進機構）「家計の金融行動に関する世論調査（単身世帯）2025年」の Excel まで遡った。「金融資産非保有 30.1%」と分類された人のうち半数は預貯金口座に残高あり（平均 235万円）、本当に決済手段ゼロは約11%。同じ単身世帯でも層別で景色が別物（持家500万円 vs 非持家61万円、年収750万円超の中央値2,000万円など）。SVG図解4点付きで記事化した（コミット 49108f58）。

詳細: 「単身世帯の3人に1人が貯蓄ゼロ・中央値100万円」を原典のExcelまで遡って読み直す

#	テーマ	試したこと	結果	気づき
1	作図DSL検証	D2 を `/fudosan-toshi/guide/bukken` のSVG置き換えに使ってみる	手書きSVGに完敗	レイアウト固定の小さい図向き。複雑な図は手書きSVG優位
2	SVGスキル拡張 V1	装飾を厚くする（影・丸バッジ・両端装飾線）	「四角の枠で囲うのは強い表現になりすぎる」と指摘	罫線を引かず、塗りだけで分離する原則を `svg-diagram` に固定
3	グリッド整列の根拠	hyperagent-public-skills の162ページPDFを参照	Müller-Brockmann グリッド・8pxベースラインを採用	装飾を削って整列とサブタイトルで仕上げるのが正解
4	カメラ露出シミュレーター	シャッタースピード変更だけで露出を変える初期実装	物理的におかしい	EV計算式に直し、「効果学習モード」と「露出学習モード」を分離
5	`/fudosan-toshi` パンクズ	13ページに `<Breadcrumb>` を貼って回る案	重複しすぎ	`layouts/fudosan-toshi.vue` に集約、メンテ1ヶ所
6	tokibo イントロ配置	ハブのSVG地図1枚で済ませる	章サマリーが薄い	独立ページ＋カードコンポーネント、地図の繰り返しを許容
7	tsukumi デモのカード高さ	grid-system.css に乗せるだけ	写真が縦に伸びて高さがガタつく	`translateY` 残骸 / `1fr` 拡張 / `box-sizing: content-box` の3要因が重なっていた
8	`/memory-makers` 月次売上	6社追加してチャートを出す	月次だけ画面に出ない	`registry.ts` の `MAKER_DATASETS` への登録漏れ
9	製品画像（Aspeed）	サーバー外観の写真を貼る	「サーバーの中身じゃなくBMCチップ自体が見たい」	チップ単体の写真と「AIサーバー1台に1個搭載される」役割説明を併置
10	画像生成（実写）	OpenAI API 直叩き	billing limit	Codex CLI `image_gen.imagegen` 経由でフォールバック成功
11	統計記事の検証	Yahoo配信の数字を一次まで戻る	「非保有」の定義が誤読を生む構造	平均/中央値の差は富裕層引き上げ、層別で景色が別物
12	宅建 Phase 1.5	サブエージェントに「ガンガン進めて」	本文がまだできていない	進捗計画書を先に書き直し、明日続行に切替
13	書籍取り込み	1セッションでOCR→リストラクチャー→DB投入を回す	重い	OCR担当セッションとリストラクチャー担当セッションを分けると早い

今日の学び

罫線を引かず塗りで分離するのが Müller-Brockmann グリッドの本質。四角で囲む表現は強すぎて、本来見せたいキーメッセージから視線を奪う
「物理的に正しい」≠「学習者に分かりやすい」。カメラ露出シミュレーターはモードを分けて、効果を見せる回路と露出を見せる回路を別にした
ハブから章への往復導線は一度設計し直すと13ページが楽になる。layouts/ への集約は早めに決める
統計記事は『何が非保有か』の定義まで降りないと数字の意味が逆になる。Yahoo の見出しと原典の定義のあいだに大きな段差がある
書籍取り込みはセッション分担で速くなる。OCR係とリストラクチャー係を別セッションで走らせると、並列度が上がってマシン時間も人間時間も短縮できる

明日やること

宅建教科書 Phase 1.5 の金型 5_1 本文を完成させる（SVG 17枚は反映済み）
投資・お金系10冊の /import-batch 取り込み（積み残し）
/memory-makers 追加6社のうち画像差し替えが残っているもの（Richwave のチップ単体写真）