[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"content-/visual-design-essentials-and-ssot-explainer":3,"related-/visual-design-essentials-and-ssot-explainer":204,"all-pages-for-dir":254,"og-image-/visual-design-essentials-and-ssot-explainer":255},{"id":4,"title":5,"body":6,"category":185,"description":186,"extension":187,"meta":188,"navigation":189,"ogImage":190,"path":191,"project_name":192,"published":193,"publishedAt":194,"seo":195,"stem":196,"tags":197,"todo":190,"unpublished":193,"updatedAt":190,"__hash__":203},"pages/2026-06/2026-06-15/visual-design-essentials-and-ssot-explainer.md","Visual Design Essentials スキルと SSOT 解説記事をまとめた",{"type":7,"value":8,"toc":175},"minimark",[9,13,29,32,35,39,42,45,55,58,62,65,68,79,82,93,100,103,110,121,124,131,134,137,149,155,158],[10,11,12],"h2",{"id":12},"なぜメタスキルを足したくなったか",[14,15,16,17,21,22,21,25,28],"p",{},"これまでに UI デザインの原則、資料作成の原則、図解の種類という3つのコンテンツを別々に積み上げてきた。サイト上では ",[18,19,20],"code",{},"/design-principles","、",[18,23,24],{},"/presentation-principles",[18,26,27],{},"/diagram-types"," という別ディレクトリで動いていて、Claude Code 側のスキルもそれぞれ独立している。",[14,30,31],{},"ところが、いざ「SVG を1枚描こう」「資料を1ページ作ろう」と着手するときに、自分のなかで「どのスキルを先に開けば判断ミスを減らせるか」を毎回考え直していた。原則は60件、24件、29件と粒度がバラバラで、3つの入口を順に開いて記憶を呼び起こすのに毎回時間を溶かす。",[14,33,34],{},"「これ読んどきゃ大丈夫」レベルのメタスキルを1冊だけ用意して、そこから既存3コンテンツに枝分かれさせれば、判断の入口が1か所に揃う。そう思って Claude Code に統合計画書から書かせることにした。",[10,36,38],{"id":37},"計画書を書かせて-codex-に殴ってもらう","計画書を書かせて Codex に殴ってもらう",[14,40,41],{},"最初に「3コンテンツを束ねる入口スキルを作りたい。イメージは Claude Code のスキルにしてほしい」とだけ指示して、プランモードで計画書を吐かせた。",[14,43,44],{},"計画書ができた段階で、いつものルール通り Codex に殴らせる。瑣末な指摘はいらない、致命的だけ出してくれ、と頼んだ。Codex から戻ってきた指摘は2点で、どちらも痛いところを突かれた。",[46,47,48,52],"ul",{},[49,50,51],"li",{},"SSOT が二重で持たれていて、片方を直し忘れたら原則の番号や本文が初日からずれる",[49,53,54],{},"トップ導線を新しく足すのに E2E テストをスキップする計画になっている",[14,56,57],{},"修正してから再度 Codex に出したら「致命的指摘なし」で返ってきた。この時点でようやく ExitPlanMode に進めた。Codex に1往復させると、計画書のまま実装に入ったら確実に踏んでいた地雷を、実装前に潰せる。",[10,59,61],{"id":60},"ssotって何初日からずれるってどういう意味","「SSOTって何？初日からずれるってどういう意味？」",[14,63,64],{},"実装を始めたところで、自分から会話を止めた。Codex の指摘文に「SSOT が崩れる」「初日からずれる」と書かれていたが、自分のなかで言葉の解像度が足りていなかった。ここを曖昧にしたまま実装が走ると、たぶん3か月後に「なんでこの構成にしたんだっけ」と自分で迷子になる。",[14,66,67],{},"Claude Code に「SSOTってそもそも何かをちょっと記事にして教えてくれませんか。今回の経緯も含めて公開記事にしてほしい」と頼んだ。返ってきた解説で自分なりに噛み砕いたのが以下。",[46,69,70,73,76],{},[49,71,72],{},"SSOT = Single Source of Truth = 同じ事実を表すデータは、システムのなかで1か所だけが「真実」を持つ",[49,74,75],{},"同じ情報を別々の場所に置くと、どちらか片方を直し忘れた瞬間にズレが始まる",[49,77,78],{},"「初日からずれる」とは、運用が始まる前に原因が仕込まれている、という意味。実装した日にはまだ気づかないが、次に片方を更新したときに別の場所が古いまま残り、そこからズレが累積していく",[14,80,81],{},"自分のケースに引き付けると、こうなる。",[46,83,84,87,90],{},[49,85,86],{},"メタスキル側に「15原則」をテキストで持ち、Vue ページ側にも同じ15原則をベタ書きしたら、原則の番号や見出しを直すたびに2か所を直す必要がある",[49,88,89],{},"直し忘れたら、サイト上では原則4だが、スキル側では原則5、というズレが生まれる",[49,91,92],{},"いまの自分は、片方を直す気で実装を始める。明日の自分は、もう片方の存在を忘れている。これが「初日からずれる」",[14,94,95,96,99],{},"結論として、計画書とコードのどちらが真実かを最初に決める。今回は「TypeScript の SSOT ファイルが真実」で、スキルの markdown は SSOT から生成、Vue ページも SSOT から型として読み込む構成に倒した。SSOT 解説記事のほうも ",[18,97,98],{},"/what-is-ssot-and-day-one-divergence"," として公開記事に残した。",[10,101,102],{"id":102},"メタスキル本体の作り",[14,104,105,106,109],{},"統合スキル名は ",[18,107,108],{},"visual-design-essentials","。デザイン・資料・図解の3領域を15原則 + 6行の図解語彙にまで圧縮して、各原則から既存の詳細ページに渡せるようにした。",[14,111,112,113,116,117,120],{},"サイト側の公開ページも ",[18,114,115],{},"/visual-design-essentials"," として用意した。最初は単純な縦スクロールの読み物にしたが、見せたところで「Miller Column Layout にしてほしかった」と差し戻されたので作り直した。既存3コンテンツと同じ Miller Columns に揃え、共通コンポーネント ",[18,118,119],{},"MillerView.vue"," を切り出して二重メンテを避けた。",[14,122,123],{},"途中で「グッドとバッドの比較を、左右で並べる形にしてほしい。バッドを左右に置いて、グッドはデザインで採用しているものを当てる」と注文が入った。最初は「Good を左、Bad を右」というレイアウトで作っていたので、Bad を比較対象として左右に並べ、もう一方には既存のデザイン原則ページから採用済みの SVG を埋め込む形に組み替えた。",[14,125,126,127,130],{},"E2E は最初から書かせた。Miller Columns 化したあとに Playwright のクリックが Hydration 前に走って 5/5 が落ちる事故も踏んだが、",[18,128,129],{},"waitForLoadState('networkidle')"," を挟んだら通った。",[10,132,133],{"id":133},"画面の右側がもったいない問題",[14,135,136],{},"最後にユーザーから細かい注文が入って詰めた。",[46,138,139,142],{},[49,140,141],{},"「↓ そのまま埋め込み」という見出しを削除して、出典リンク1本にする",[49,143,144,145,148],{},"1080 縦置きの画面で右側に大きな空白ができているので、右カラムの ",[18,146,147],{},"max-width"," 制限を外して横いっぱいに広げる",[14,150,151,152,154],{},"埋め込んだコンポーネント自身が原則番号と出典バッジを持っているので、見出しを増やすほど読者が読む順番に迷う、というのが削除の理由。CSS の ",[18,153,147],{}," をひとつ外すだけで、横の空白が消えてコンテンツが画面を埋めた。Chrome DevTools で 1080 幅にリサイズして目視で確認した。",[10,156,157],{"id":157},"今日の学び",[46,159,160,163,166,169,172],{},[49,161,162],{},"メタスキル＝既存スキルの「入口」を1冊だけ用意するパターンは効く。判断の入口が1か所に揃うので、毎回どのスキルから開くか悩む時間が消える",[49,164,165],{},"計画書を書かせたら、必ず Codex に殴らせる。今回は「SSOT が初日からずれる」を実装前に拾えた",[49,167,168],{},"用語の解像度が低いと感じた瞬間に手を止めて、解説記事を書かせる。書いてもらった解説を読み返すことで、自分が次に同じ構造に出会ったときに迷わない",[49,170,171],{},"SSOT は「真実を持つ場所を1か所にする」だけのルールだが、これを最初に決めずに走ると、3か月後に同じデータが2か所にあって片方が古い、という事故を踏む",[49,173,174],{},"既存ページとの統合は「左右並び」「Miller Column」「埋め込み」など、見せ方を後で詰めることになる。最初から既存の作りに揃えにいくほうが、書き直しのコストが軽い",{"title":176,"searchDepth":177,"depth":177,"links":178},"",2,[179,180,181,182,183,184],{"id":12,"depth":177,"text":12},{"id":37,"depth":177,"text":38},{"id":60,"depth":177,"text":61},{"id":102,"depth":177,"text":102},{"id":133,"depth":177,"text":133},{"id":157,"depth":177,"text":157},"dev","デザイン・資料・図解の3スキルを束ねる入口スキル visual-design-essentials を作り、Miller Column Layout で公開記事化した。途中で「SSOTって何？」と詰めた過程をそのまま残す。","md",{},true,null,"/visual-design-essentials-and-ssot-explainer","misc-dev",false,"2026-06-15T00:00:00.000Z",{"title":5,"description":186},"2026-06/2026-06-15/visual-design-essentials-and-ssot-explainer",[198,199,200,201,202],"スキル設計","デザイン原則","SSOT","Miller Column","メタスキル","jyfMCud14WgyFn_pK12vULy0uKZWUTUoIWUeOIZa2b0",[205,214,224,237,247],{"title":206,"description":207,"path":208,"tags":209,"publishedAt":194,"updatedAt":190},"2026年6月15日の開発日記 - 宅建Phase3完成 / メモリーメーカーズ分割 / Visual Design Essentials","宅建教科書 Phase 3 をクローズし、/memory-makers をハブ＋4サブページに分割。テンバガー論文からFCF散布図トグルを起動、Visual Design Essentials スキルと SSOT 解説を公開記事化した一日。","/2026-06-15-diary",[210,211,212,213,199],"日記","takken","memory-makers","beat-monitoring",{"title":215,"description":216,"path":98,"tags":217,"publishedAt":194,"updatedAt":190},"SSOT（Single Source of Truth）とは — Codex に『初日からずれる』と指摘された統合コンテンツ計画","3つのデザインコンテンツを統合する計画で、Codex（GPT-5.5）に『これは SSOT になっていない。同じ内容を Web と Skill の2か所に書く設計は、運用努力では追いつかず初日からずれる』と指摘された。SSOT という概念と、なぜ初日からずれるのか、Codex の指摘でどう設計を直したかを記録する。",[200,218,219,220,221,222,223],"Single Source of Truth","Codex","Claude Code","Skill","設計","ドキュメント",{"title":225,"description":226,"path":227,"tags":228,"publishedAt":236,"updatedAt":190},"D2を試したら結局SVGダイアグラム・スキルを書き直すことになった話 — 同じページの6枚を全部Grid版で出し直す","テキストで図を書ける作図DSL「D2」をsvg-diagramスキルに組み込めるか検証した。D2は手書きSVGに完敗し、次に「装飾を厚くする」V2方向も実はアンチパターンだったと気づき、最終的にMüller-Brockmannグリッドに乗せる方向に着地。svg-diagramスキルに新しい grid-alignment.md ルールを追加し、同じページの6枚のSVG全部をGrid版で書き直した記録。","/svg-diagram-skill-upgrade",[229,230,231,232,198,233,234,235],"D2","SVG","Diagram","Vue","Müller-Brockmann","デザインシステム","グリッド","2026-06-14T00:00:00.000Z",{"title":238,"description":239,"path":240,"tags":241,"publishedAt":246,"updatedAt":190},"台湾・韓国の輸出統計をSSOT化して専用ページに分離した日","台湾の5月輸出784億ドルのニュースを機に、台湾・韓国の月次輸出統計をexportStats.tsに一本化。直接埋め込み→カード化→専用ページ分離と設計を変遷させた記録。","/export-stats-taiwan-korea-pages",[242,243,244,245,200],"輸出統計","台湾","韓国","データ可視化","2026-06-10T00:00:00.000Z",{"title":248,"description":249,"path":250,"tags":251,"publishedAt":253,"updatedAt":190},"決算ビートスキャンに「発表日ゲート」を新設した話 — 0件こそ正しい結果","毎朝の決算ビート抽出スキルに、休場日なのにPLTR（5/4決算）が混入した。x-searchは過去の言及を拾うので発表日を窓内で検証するゲートが要る。Step 1.5を新設して24時間外を全部弾いた記録。","/earnings-beat-scan-announce-date-gate",[220,198,252],"決算","2026-05-25T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/visual-design-essentials-and-ssot-explainer.png?v=2026-06-15T00%3A00%3A00.000Z&title=Visual%20Design%20Essentials%20%E3%82%B9%E3%82%AD%E3%83%AB%E3%81%A8%20SSOT%20%E8%A7%A3%E8%AA%AC%E8%A8%98%E4%BA%8B%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%9F&author=Kei%20Komatsu&sig=778e2ee419daa598",1781580076949]