[{"data":1,"prerenderedAt":206},["ShallowReactive",2],{"content-/visual-design-essentials-and-ssot-explainer":3,"all-pages-for-dir":204,"og-image-/visual-design-essentials-and-ssot-explainer":205},{"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",[],"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",1782528854443]