[{"data":1,"prerenderedAt":524},["ShallowReactive",2],{"post-index":3,"post-design-harness-personal-product":453},{"posts":4,"categories":402,"tags":411},[5,17,35,43,60,74,87,105,122,144,156,167,179,193,208,223,239,250,264,275,285,296,308,319,331,343,356,367,377,387],{"slug":6,"title":7,"description":8,"publishedAt":9,"updatedAt":9,"category":10,"tags":13,"thumbnail":16},"ai-cognitive-debt-approval"," 認知負債は「承認」で生まれる ── コーディングエージェント時代の意図負債と、個人・チームの向き合い方","コーディングエージェントに実装を任せると、コードは速く書けるのに人の理解が追いつかない。認知負債・意図負債・理解負債の違いを「下り」と「上り」で整理し、負債が生まれる承認の瞬間と、個人とチームでできる対策、まだ答えのない問いを、自分の体験から考える。","2026-11-03T17:12:07.686Z",{"name":11,"slug":12},"AI","ai",[14],{"name":15,"slug":15},"organization",null,{"slug":18,"title":19,"description":20,"publishedAt":21,"updatedAt":21,"category":22,"tags":23,"thumbnail":16},"design-harness-personal-product","デザインハーネスを個人開発で組んだ — AI が作る画面のずれを止めるまで","デザイナーのいない個人開発で、AI が作る画面のずれを止めるまでの記録。Codex の Product Design で画像の案を出して画面を作り直し、デザインファイルとコードの食い違いを正本の分担で片付け、lint・見た目の比較・AI の評価役からなるデザインハーネスで外れたら止める仕組みを組んだ。","2026-11-03T15:39:02.665Z",{"name":11,"slug":12},[24,27,30,32],{"name":25,"slug":26},"claude code","claude-code",{"name":28,"slug":29},"design system","design-system",{"name":31,"slug":31},"codex",{"name":33,"slug":34},"design harnes","design-harnes",{"slug":36,"title":37,"description":38,"publishedAt":39,"updatedAt":39,"category":40,"tags":41,"thumbnail":16},"claude-code-mods-intro","Claude Codeの「Claude Mods」とは？ 入れてみた3つのmodと、安全に入れる手順","Claude Codeの新機能Claude Mods（v2.1.287〜）を紹介する。hooks・skills・MCPとの違い、入れてみたmod 3つ（prompt-rail・md-prompt・qa-guide）の使い方、claude plugin validateで中身を確かめて入れる手順をまとめた。","2026-11-03T15:30:44.678Z",{"name":11,"slug":12},[42],{"name":25,"slug":26},{"slug":44,"title":45,"description":46,"publishedAt":47,"updatedAt":47,"category":48,"tags":51,"thumbnail":16},"worktree-shared-reverse-proxy","AI 時代の並列開発の環境構築 — git worktree ごとにアプリを同時に動かす","git worktree の並列開発で、各 worktree のフロントとバックを同時に動かす Docker Compose 構成を紹介する。ポートはずらさず共有のリバースプロキシでホスト名に振り分け、DB は 1 つを共有ネットワークに置いて全 worktree から参照する。","2026-11-03T15:24:32.067Z",{"name":49,"slug":50},"Dev Env","dev-env",[52,54,57],{"name":53,"slug":53},"git",{"name":55,"slug":56},"Docker","docker",{"name":58,"slug":59},"開発環境","development-environment",{"slug":61,"title":62,"description":63,"publishedAt":64,"updatedAt":64,"category":65,"tags":66,"thumbnail":16},"ghostty-herdr-dev-env","Ghostty + herdr で組む開発環境（2026年9月版） — AI エージェントを並べてターミナルで開発する","WezTerm + tmux + 自作ツールから Ghostty + herdr に移した私の開発環境を紹介する。Claude Code・Codex・takt を並べて動かす 1 タスクの流れ、ターミナル内ブラウザで画面の要素を AI に渡す方法、Neovim・lazygit・hunk・Nix まで層ごとにまとめた。","2026-11-03T15:14:47.700Z",{"name":49,"slug":50},[67,68,70,72],{"name":58,"slug":59},{"name":69,"slug":69},"herdr",{"name":71,"slug":71},"ghostty",{"name":73,"slug":73},"terminal",{"slug":75,"title":76,"description":77,"publishedAt":78,"updatedAt":78,"category":79,"tags":80,"thumbnail":16},"dotfiles-operation-and-nix","設定ファイルを端末に置いたままにしない — dotfiles 運用のすすめと、その先の Nix","設定ファイルを Git リポジトリで管理する dotfiles 運用の始め方と、その先で効いてくる Nix の話。何を入れて何を入れないか、配線の 3 手法の比較、運用して見えてくる穴、3 端末を 1 つの設定で回すところまでを実例で書く。","2026-11-03T15:04:48.084Z",{"name":49,"slug":50},[81,82,85],{"name":58,"slug":59},{"name":83,"slug":84},"Nix","nix",{"name":86,"slug":86},"dotfiles",{"slug":88,"title":89,"description":90,"publishedAt":91,"updatedAt":91,"category":92,"tags":93,"thumbnail":102},"opencode-go-plan-evaluation","OpenCode Go プランを評価する — 月$10 で LLM オーケストレーションの中間層は作れるか","OpenCode が提供する月額固定の Go プラン（初月$5、翌月以降$10\u002F月）を、料金体系・想定ユースケース・3層 LLM 構成における中間モデル層としての適合性まで含めて評価する。","2026-05-07T12:12:31.936Z",{"name":11,"slug":12},[94,97,100],{"name":95,"slug":96},"Harness Engineering","harness-engineering",{"name":98,"slug":99},"LLM","llm",{"name":101,"slug":101},"opencode",{"url":103,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F6Nh8tVuSCuHunaVeqyegdU\u002F0fee3536b9ee406b986430ebc1b8ebfd\u002FOpenCode_Go_%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A8__%C3%A4__%C3%A3__%C3%A3__.png","",{"slug":106,"title":107,"description":108,"publishedAt":109,"updatedAt":109,"category":110,"tags":111,"thumbnail":120},"prompt-context-harness-engineering","ハーネスエンジニアリングとは何か：プロンプト→コンテキスト→ハーネスへ至るAIエージェント設計の変遷","「ハーネスエンジニアリング」とは何か。プロンプトエンジニアリング、コンテキストエンジニアリングから続く3段階の変遷を、論文引用（Lost in the Middle \u002F SWE-bench）とClaude Codeの実装例（フック・ルール・Skill）で階層構造として整理する。","2026-04-07T13:04:49.564Z",{"name":11,"slug":12},[112,115,116,119],{"name":113,"slug":114},"Prompt Engineering","prompt-engineering",{"name":95,"slug":96},{"name":117,"slug":118},"Context Engineering","context-engineering",{"name":98,"slug":99},{"url":121,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F74HnVGS2R8wphJ1nGHgLfb\u002Fb87d3d6e35ccc518e04d9959c7637a88\u002Fã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã_ªã__ã__ã__ã__ã__ä__ã__ï__ã__ã__ã__ã__ã__ã__ã__â__ã__ã__ã__ã__ã__ã__â__ã__ã__ã__ã__ã__è__ã__A.png",{"slug":123,"title":124,"description":125,"publishedAt":126,"updatedAt":126,"category":127,"tags":130,"thumbnail":142},"authjs-v5-jwt-dual-timeout-bff-django","Auth.js v5 でJWT二重タイムアウトを実装する：BFF + Django連携の設計パターン","Auth.js v5のjwt callbackで8時間の絶対有効期限と30分のアイドルタイムアウトを両立する実装方法を解説。Next.js MiddlewareによるBFF API保護とDjango REST Frameworkとの Token Exchange パターンも紹介する。","2026-04-06T12:45:28.328Z",{"name":128,"slug":129},"Programming","programming",[131,134,136,139],{"name":132,"slug":133},"auth.js","auth-js",{"name":135,"slug":135},"jwt",{"name":137,"slug":138},"Django REST Framework","django-rest-framework",{"name":140,"slug":141},"Next.js","next-js",{"url":143,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002FpqkFfHKpf2UqoNrB6KrKS\u002F672a78076f28d88b31509c230f9c3f64\u002FAuth.js_v5_ã__ã__JWTäº_é__ã__ã__ã__ã__ã__ã__ã__å__è__ã__ã__ï__BFF___Djangoé__æ_ºã__è__è__ã__ã__ã__ã__ã__.png",{"slug":145,"title":146,"description":147,"publishedAt":148,"updatedAt":148,"category":149,"tags":150,"thumbnail":154},"claude-code-spec-to-growing-claudemd","仕様書を「渡す」からCLAUDE.mdを「育てる」へ — Claude Codeの使い方が変わった話","Claude Codeに仕様書を丸ごと渡す運用から、CLAUDE.mdを継続的に育てる運用へ。「間違えたら追加」ルールの実践例と、20行→146行+31スキルに育てた記録。","2026-04-02T14:58:11.375Z",{"name":11,"slug":12},[151,152,153],{"name":25,"slug":26},{"name":113,"slug":114},{"name":117,"slug":118},{"url":155,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002FqybhQ2TQSYQhIvDhWxqvs\u002F9f8b888e11a76223c8a1b1da42df5ce1\u002Fä__æ__æ__ã__ã__æ__ã__ã__ã__ã__CLAUDE.mdã__ã__è__ã__ã__ã__ã___â___Claude_Codeã__ä__ã__æ__ã__ã__å__ã__ã__ã__è__.png",{"slug":157,"title":158,"description":159,"publishedAt":160,"updatedAt":160,"category":161,"tags":162,"thumbnail":165},"claude-code-harness-engineering","Claude Codeを覚醒させる「ハーネスエンジニアリング」 CLAUDE.md・Hooks・Rules設定の徹底解説","プロンプトを書く時代から、AIが最高に働く環境を設計する時代へ。Claude CodeのCLAUDE.md、Hooks、Rules、Settings、Agent Routingを体系的に解説し、自作のオーケストレーションシステム「ai-orchestra」による統合管理の実践例を紹介する。","2026-03-22T08:59:48.575Z",{"name":11,"slug":12},[163,164],{"name":25,"slug":26},{"name":95,"slug":96},{"url":166,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F3liirUgzBlFBuAMoytyN5E\u002F66ba6b07385791bcaae4ddf404f06ce1\u002FClaude_Codeã__è__é__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã_ªã__ã__ã__ã___CLAUDE.mdã__Hooksã__Rulesè__å__ã__å__åº_è__èª_.png",{"slug":168,"title":169,"description":170,"publishedAt":171,"updatedAt":172,"category":173,"tags":174,"thumbnail":177},"claude-code-dev-toolchain","Claude Code開発を支える私のツールチェイン — ターミナルからAIデザインまで","Claude Code CLIを中心とした開発環境を紹介する。WezTerm + Tmuxのターミナル構成、GTRやBatonによる並列開発、ステータスライン・通知フックのカスタマイズ、MCP\u002Fプラグイン活用、Aqua VoiceやPencilとの連携まで、実際に使っているツールチェインの全体像をまとめた。","2026-03-21T19:30:43.616Z","2026-11-03T15:18:14.982Z",{"name":49,"slug":50},[175,176],{"name":25,"slug":26},{"name":58,"slug":59},{"url":178,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F4wFUBAqC9yuIgeo3xWVHJM\u002F8843248b854fee93872b5ac519d16bc2\u002FClaude_Codeé__ç_ºã__æ__ã__ã__ç__ã__ã__ã__ã__ã__ã__ã__ã___â___ã__ã__ã__ã__ã__ã__ã__AIã__ã__ã_µã__ã__ã__ã__ã__ã__.png",{"slug":180,"title":181,"description":182,"publishedAt":183,"updatedAt":184,"category":185,"tags":186,"thumbnail":191},"lazygit-commit-message-auto-generate","【コピペで導入】lazygit × Claude Code でコミットメッセージ自動生成","lazygit の customCommands と Claude Code の --print モードを組み合わせ、Ctrl+G 一発で Conventional Commits 形式のコミットメッセージを自動生成する方法を解説。コピペ可能な完成形設定と、4段階の試行錯誤で得たハマりポイントを共有します。","2026-03-15T04:36:20.532Z","2026-11-03T15:18:53.496Z",{"name":49,"slug":50},[187,188,189],{"name":53,"slug":53},{"name":25,"slug":26},{"name":190,"slug":190},"lazygit",{"url":192,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F62ov1mzeLUjRm6cbzQ7R92\u002F3bc21a7fe7ec517ad3258b6264d4097e\u002Fã__ã__ã__ã__ã__ã__ã__ã__å__å__ã__lazygit_Ã__Claude_Code_ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__ã__è_ªå__ç__æ__.png",{"slug":194,"title":195,"description":196,"publishedAt":197,"updatedAt":198,"category":199,"tags":200,"thumbnail":206},"git-worktree-runner-guide","git-worktree-runner で worktree 管理が劇的にラクになった話","git-worktree-runner（GTR）は git worktree の操作を 1 コマンドに集約する CLI ラッパーです。Taskfile.yaml での運用から GTR に移行した体験を元に、インストール・設定・AI 並列開発での活用法を解説します。","2026-03-09T15:32:31.316Z","2026-11-03T15:18:33.924Z",{"name":49,"slug":50},[201,202,204],{"name":53,"slug":53},{"name":203,"slug":203},"git-worktree",{"name":205,"slug":205},"git-worktree-runner",{"url":207,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F7BRBfHFocF2ABOeOQmtIic\u002Fa63ce99493098bc42123e4315f43d768\u002Fgit-worktree-runner_ã__ã___worktree_ç__ç__ã__ã__å__ç__ã__ã__ã__ã__ã_ªã__ã__è__.png",{"slug":209,"title":210,"description":211,"publishedAt":212,"updatedAt":212,"category":213,"tags":214,"thumbnail":221},"rag-basic-knowledge","RAG入門 — 検索拡張生成の基礎知識を実験結果とともに学ぶ","RAG（検索拡張生成）の仕組みをVectorDB・Embedding・チャンク分割の3要素に分解して解説。Embeddingモデル変更で正答率0\u002F5→4\u002F5に改善した検証データも公開。","2026-03-01T11:29:25.841Z",{"name":11,"slug":12},[215,218,219],{"name":216,"slug":217},"RAG","rag",{"name":98,"slug":99},{"name":220,"slug":220},"ollama",{"url":222,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F1enfpUixTuvis0oX9x5Cfa\u002F934aed76ac994412ceb37dfdf5dc6f6c\u002FRAGå__é___â___æ__ç__æ__å_µç__æ__ã__å_ºç__ç__è__ã__å__é__çµ_æ__ã__ã__ã__ã__å__ã_µã__.png",{"slug":224,"title":225,"description":226,"publishedAt":227,"updatedAt":228,"category":229,"tags":230,"thumbnail":237},"engineer-ai-daily-workflow","1人のエンジニアがAIを日常にどう組み込んでいるか — 契約サービスから活用フローまで全公開","Claude Code、ChatGPT、Gemini、Aqua Voice、Adobe Fireflyの5サービスを使い分けるエンジニアが、開発・情報収集・ブレスト・音声入力・振り返りまで、AIを日常に組み込んだリアルな活用フローを全公開します。","2026-02-18T14:13:58.531Z","2026-02-18T14:14:12.514Z",{"name":11,"slug":12},[231,232,234],{"name":98,"slug":99},{"name":233,"slug":233},"openclaw",{"name":235,"slug":236},"マルチエージェント","multi-agent",{"url":238,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F5gBC06O8WX2GX8wmoOXQfy\u002F27a11e0f280f642a781e462dead9d3ae\u002F1人ã__ã__ã__ã__ã__ã__ã__ã__ã__AIã__æ__å__ã__ã__ã__ã__çµ_ã__è__ã__ã__ã__ã__ã__ã___â___å__ç__ã_µã__ã__ã__ã__ã__ã__æ__ç__ã__ã_.png",{"slug":240,"title":241,"description":242,"publishedAt":243,"updatedAt":243,"category":244,"tags":245,"thumbnail":248},"ai-orchestra-design-and-practice","Claude Codeマルチエージェント実践｜AI Orchestraで超えた2つの壁","Claude Code単体運用で生じるコンテキスト溢れ・役割混乱の課題を、25種の専門エージェントとClaude×Codex×Geminiのマルチモデル連携で解決するオーケストレーションシステム「AI Orchestra」。その設計思想、Hookによる自動ルーティング、並列レビューなどの実装を具体的に紹介します。","2026-02-08T08:01:16.212Z",{"name":11,"slug":12},[246,247],{"name":235,"slug":236},{"name":98,"slug":99},{"url":249,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F6j2KWOOo7wJfUobTCg3o2w\u002F126c8d413cd9a56e64fba107544ec4e1\u002FClaude_Codeã__ã__ã__ã__ã__ã__ã__ã__ã__ã__å__è_µï__AI_Orchestraã__ã__è__ã__ã__2ã__ã__å__.png",{"slug":251,"title":252,"description":253,"publishedAt":254,"updatedAt":255,"category":256,"tags":257,"thumbnail":262},"ai-benchmark-guide","AIベンチマーク読み方ガイド｜SWE-bench・GPQA・ARC-AGIの意味と活用法","SWE-bench、GPQA Diamond、ARC-AGI、Terminal-Benchなど主要AIベンチマークの読み方を解説。2026年2月最新のモデルスコア比較と、コーディングエージェントへのタスク振り分けに活かす実践的な指針を紹介します。","2026-02-07T16:10:19.131Z","2026-02-07T16:11:56.095Z",{"name":11,"slug":12},[258,259],{"name":98,"slug":99},{"name":260,"slug":261},"Benchmark","benchmark",{"url":263,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F3QlfPsXmLogdj9o4mdgFYQ\u002F73a69ca272ac4e4fdcf977f322c0218a\u002FAIã__ã__ã__ã__ã__ã__ã__èª_ã__æ__ã__ã__ã__ã__ã__ï__SWE-benchã__GPQAã__ARC-AGIã__æ__å__ã__æ__ç__æ__.png",{"slug":265,"title":266,"description":267,"publishedAt":268,"updatedAt":268,"category":269,"tags":270,"thumbnail":273},"multi-agent-building-guide","マルチエージェント構築入門｜構成の全体像と3つの実装アプローチ","マルチエージェントの構築方法を解説。オーケストレーター・サブエージェント・ツール連携の3要素から、自作・フレームワーク・既存ツール活用の選択肢まで。Claude Codeでの実装例付き。","2026-02-05T12:52:58.095Z",{"name":11,"slug":12},[271,272],{"name":98,"slug":99},{"name":235,"slug":236},{"url":274,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F68XZFvLA17pegNy0lHCrYN\u002Ff90202a483bf087f4fa4cbb80dae934e\u002Fã__ã__ã__ã__ã__ã__ã__ã__ã__ã__æ__ç__å__é__ï__æ__æ__ã__å__ä__å__ã__3ã__ã__å__è__ã__ã__ã__ã__ã__ã__.png",{"slug":276,"title":277,"description":278,"publishedAt":279,"updatedAt":279,"category":280,"tags":281,"thumbnail":283},"openclaw-security-and-features","OpenClaw徹底解説 ── セルフホスト型AIアシスタントの可能性とセキュリティリスク","「AIが自分の代わりにメッセージを返信してくれたら…」そんな願いを叶えるツールが、いま爆発的な人気を集めています。その名も「OpenClaw」。わずか2ヶ月でGitHub Stars 10万を突破し、週間200万人が訪れるほどの注目を浴びています。  しかし、その急成長の裏には商標問題、詐欺騒動、そして深刻なセキュリティ脆弱性の発覚と、波乱万丈なドラマがありました。","2026-02-03T15:20:26.415Z",{"name":11,"slug":12},[282],{"name":233,"slug":233},{"url":284,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F7aKouVOZSGnzVUGgLQfa22\u002F5688eb515dc5f0b2c301b9b8c267ec20\u002F00036.png",{"slug":286,"title":287,"description":104,"publishedAt":288,"updatedAt":289,"category":290,"tags":291,"thumbnail":294},"custom-instructions","ChatGPTやClaudeがもっと賢くなる！カスタム指示の書き方と実例集","2026-01-30T17:42:57.415Z","2026-02-03T15:03:06.461Z",{"name":11,"slug":12},[292,293],{"name":98,"slug":99},{"name":113,"slug":114},{"url":295,"description":287},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F4EojonTOebJGeiaXf98ol0\u002F9e391fc8bd6e548f8c96136c805b49d7\u002FChatGPTã__Claudeã__ã__ã__ã__ã__è__ã__ã_ªã__ï__ã__ã__ã__ã__æ__ç_ºã__æ__ã__æ__ã__å__ä__é__.png",{"slug":297,"title":298,"description":299,"publishedAt":300,"updatedAt":301,"category":302,"tags":303,"thumbnail":306},"ollama-local-llm-setup","ローカルLLMはまず小さめモデルから：Ollamaで始める導入〜疎通確認","acでOllamaを使い、ローカルLLMを最短で起動→1回応答まで確認する手順を解説。モデル選定の考え方、遅い\u002Fメモリ\u002Fディスクの切り分け、API疎通(curl)もまとめます。","2026-01-18T06:40:49.270Z","2026-01-21T13:05:14.924Z",{"name":11,"slug":12},[304,305],{"name":220,"slug":220},{"name":98,"slug":99},{"url":307,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F1NQmtspOD1S6LEb4SrCYIQ\u002F49c213de131a9a4ea139c32e805f3b01\u002Fã__ã__ã__ã__LLMã__ã__ã__ã__å__ã__ã__ã__ã__ã__ã__ã__ã__ï__Ollamaã__ã__å__ã__ã__å__å__ã__ç__é__ç_ºèª_.png",{"slug":309,"title":310,"description":104,"publishedAt":311,"updatedAt":312,"category":313,"tags":314,"thumbnail":317},"llm-leaderboard-score-guide","LLMリーダーボードの読み方：スコア指針とベンチマーク確認手順","2026-01-10T08:57:26.636Z","2026-01-18T06:55:58.990Z",{"name":11,"slug":12},[315,316],{"name":260,"slug":261},{"name":98,"slug":99},{"url":318,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F8u7GQ3mAlcvIHOc5bFJc6\u002Fa953bf74c33117efa393eaf8541f515a\u002FLLMã_ªã__ã__ã__ã__ã__ã__ã__ã__ã__ã__èª_ã__æ__.png",{"slug":320,"title":321,"description":104,"publishedAt":322,"updatedAt":322,"category":323,"tags":324,"thumbnail":329},"vite_docker_esbuild-error","Vite + Docker + ESBuild Errorの解決","2021-11-12T03:53:22.965Z",{"name":128,"slug":129},[325,326],{"name":55,"slug":56},{"name":327,"slug":328},"Vite","vite",{"url":330,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F5gqsl4ZChCI3uaSXQA86du\u002F3c94f9928ffaaab2d8911d32e742de1e\u002Fprogramming.jpg",{"slug":332,"title":333,"description":104,"publishedAt":334,"updatedAt":335,"category":336,"tags":337,"thumbnail":341},"nuxt-router-scroll-control","Nuxt.jsのページ遷移時のスクロール制御したい","2021-10-28T14:31:11.276Z","2021-10-28T14:35:33.155Z",{"name":128,"slug":129},[338],{"name":339,"slug":340},"Nuxt.js","nuxt-js",{"url":342,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F6dqpNPZsBJJ7x9XJj1Ld1z\u002Fcd1bb9323a8ffb0657ad79525403e1ff\u002Fnuxt.jpg",{"slug":344,"title":345,"description":104,"publishedAt":346,"updatedAt":347,"category":348,"tags":349,"thumbnail":354},"react-drf-img_uploader-backend","React × DRFで画像アップロード機能作成 (バックエンド実装編)","2021-10-26T02:56:58.215Z","2021-10-27T11:37:43.829Z",{"name":128,"slug":129},[350,353],{"name":351,"slug":352},"React","react",{"name":137,"slug":138},{"url":355,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F4jbVtK0nXsMKZplpBAwhri\u002Fb0ccef5153d92a7947eb0c682008255c\u002Fdjango-rest-framework.jpg",{"slug":357,"title":358,"description":104,"publishedAt":359,"updatedAt":360,"category":361,"tags":362,"thumbnail":365},"react-drf-img_uploader-frontend","React × DRFで画像アップロード機能作成 (フロント実装編)","2021-10-26T02:39:01.629Z","2021-10-27T11:37:24.670Z",{"name":128,"slug":129},[363,364],{"name":351,"slug":352},{"name":137,"slug":138},{"url":366,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F3uFOs5NyHOvRqYgE1lQ3p6\u002Fd79c8fabb7d4151c5773ffe1cdd2bce3\u002Freact.jpg",{"slug":368,"title":369,"description":104,"publishedAt":370,"updatedAt":371,"category":372,"tags":373,"thumbnail":376},"react-drf-img_uploader-environment","React × DRFで画像アップロード機能作成 (環境構築編)","2021-10-26T02:00:01.702Z","2021-10-27T11:47:28.398Z",{"name":128,"slug":129},[374,375],{"name":351,"slug":352},{"name":137,"slug":138},{"url":330,"description":104},{"slug":378,"title":379,"description":104,"publishedAt":380,"updatedAt":381,"category":382,"tags":383,"thumbnail":385},"docker-install-procedure","各OS毎のDockerインストール手順","2021-10-26T01:43:54.692Z","2022-02-07T14:32:07.791Z",{"name":128,"slug":129},[384],{"name":55,"slug":56},{"url":386,"description":104},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F3aVlE8NIfX12QvTafaC8xE\u002Fd00bf480e212538e1816fc10d2e7b77d\u002Fdocker.jpg",{"slug":388,"title":389,"description":104,"publishedAt":390,"updatedAt":391,"category":392,"tags":395,"thumbnail":399},"notion-clear-trash","Notionのゴミ箱を一括削除する","2021-09-12T13:04:59.853Z","2021-10-21T14:29:03.528Z",{"name":393,"slug":394},"Lifestyle","lifestyle",[396],{"name":397,"slug":398},"Notion","notion",{"url":400,"description":401},"https:\u002F\u002Fimages.ctfassets.net\u002Fd3b1looh8iwg\u002F5binM4YxsZdSXX9SKkGyNP\u002Fcf39353211db8b3e0c4ac18e03b55527\u002Fnotion.jpg","Notion記事用のサムネイル",[403,405,407,409],{"name":49,"slug":50,"count":404},6,{"name":11,"slug":12,"count":406},16,{"name":128,"slug":129,"count":408},7,{"name":393,"slug":394,"count":410},1,[412,414,415,417,418,420,421,422,423,424,425,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450],{"name":98,"slug":99,"count":413},10,{"name":25,"slug":26,"count":404},{"name":137,"slug":138,"count":416},4,{"name":58,"slug":59,"count":416},{"name":55,"slug":56,"count":419},3,{"name":53,"slug":53,"count":419},{"name":95,"slug":96,"count":419},{"name":113,"slug":114,"count":419},{"name":351,"slug":352,"count":419},{"name":235,"slug":236,"count":419},{"name":260,"slug":261,"count":426},2,{"name":117,"slug":118,"count":426},{"name":220,"slug":220,"count":426},{"name":233,"slug":233,"count":426},{"name":132,"slug":133,"count":410},{"name":31,"slug":31,"count":410},{"name":33,"slug":34,"count":410},{"name":28,"slug":29,"count":410},{"name":86,"slug":86,"count":410},{"name":71,"slug":71,"count":410},{"name":203,"slug":203,"count":410},{"name":205,"slug":205,"count":410},{"name":69,"slug":69,"count":410},{"name":135,"slug":135,"count":410},{"name":190,"slug":190,"count":410},{"name":140,"slug":141,"count":410},{"name":83,"slug":84,"count":410},{"name":397,"slug":398,"count":410},{"name":339,"slug":340,"count":410},{"name":101,"slug":101,"count":410},{"name":15,"slug":15,"count":410},{"name":216,"slug":217,"count":410},{"name":73,"slug":73,"count":410},{"name":327,"slug":328,"count":410},{"name":451,"slug":451,"count":452},"takt",0,{"slug":18,"title":19,"description":20,"publishedAt":21,"updatedAt":21,"category":454,"tags":455,"thumbnail":16,"html":460,"headings":461,"readingMinutes":499,"older":500,"newer":504,"related":508},{"name":11,"slug":12},[456,457,458,459],{"name":25,"slug":26},{"name":28,"slug":29},{"name":31,"slug":31},{"name":33,"slug":34},"\u003Cp>AI に画面を作らせると、1 画面ずつは悪くないのに、並べると少しずつ違う。余白が数 px ずれる。同じ青に別々の名前が付く。似たボタンがまた 1 つ増える。\u003C\u002Fp>\n\u003Cp>この記事は、デザイナーのいない個人開発で、この「ずれ」を止めるまでの記録だ。やったことは 3 つある。\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>作る\u003C\u002Fstrong>: AI に画像で案をいくつも出させ、自分で選んで画面を作り直した\u003C\u002Fli>\n\u003Cli>\u003Cstrong>見直す\u003C\u002Fstrong>: 作り直したら、デザインファイルとコードで色や文字サイズの決め方が食い違っていたので、どちらを正とするか決め直した\u003C\u002Fli>\n\u003Cli>\u003Cstrong>守る\u003C\u002Fstrong>: AI が作った画面がデザインから外れたら、自動で止まる仕組みを入れた\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>3 つ目の仕組みを、デザインハーネスと呼んでいる。AI に画面を作らせても、デザインから外れないようにする仕組み全体のことだ。作らせる前に守るべきデザインを渡し、作った後に外れていたら止め、同じ指摘が続いたら仕組みの方を直す。\u003C\u002Fp>\n\u003Cp>作っているのは学習アプリで、画面の実装の大半を Claude Code と Codex に任せている。技術スタックは Next.js、Tailwind CSS v4、shadcn\u002Fui だ。作り直しから検査の仕組みまでは、2026 年 9 月末から 10 月 8 日までの約 2 週間で組んだ。画面のスクリーンショットは載せない。ずれを止める方法だけ知りたい場合は、「見直す」の章から読んでも話は通じる。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fstatic.zenn.studio\u002Fuser-upload\u002F9c5a0fcd1f99-20261010.png\" alt=\"全体の流れ。左から「作る」（画像で方向を出して選び、デザインファイルに写す）、「見直す」（見た目・値・振る舞いの正本を分ける）、「守る」（機械の検査と評価役 3 票の 2 つの門を通し、採否は人が決める）の 3 段が並ぶ。「守る」から「見直す」へ、繰り返す指摘を lint に戻す矢印がある\" loading=\"lazy\">\u003C\u002Fp>\n\u003Ch2 id=\"作る:-画像で案を出し、選んで、作り直す\" tabindex=\"-1\">\u003Cspan class=\"h-no\" aria-hidden=\"true\">01\u003C\u002Fspan>作る: 画像で案を出し、選んで、作り直す\u003C\u002Fh2>\n\u003Cp>画面の方向は、AI に画像で何案も出させて自分で選ぶと早く決まった。ただ、画像は方向を決める材料で、寸法の仕様ではない。画像を仕様のように扱うと、できた画面が選んだ案から離れる。\u003C\u002Fp>\n\u003Ch3 id=\"継ぎ足しの見た目から出るために\" tabindex=\"-1\">継ぎ足しの見た目から出るために\u003C\u002Fh3>\n\u003Cp>作り直す前の画面は、機能を足すたびに継ぎ足してきた見た目だった。部品を少しずつ直しても、元の見た目の延長からは出られない。そこで今の画面をいったん忘れ、画面ごとに何を見せるかを書いた設計書から考え直した。\u003C\u002Fp>\n\u003Cp>方向を探すなら、コードより画像の方が速い。1 案を数分で出せて、並べて比べられる。使ったのは、OpenAI が 2026 年 6 月に出した Codex の Product Design プラグインだ[^openai]。画面の方向を画像で出し、人が選ぶまで実装に進まない作りになっている。既定では 3 案だが、もう少し案が欲しかったので 9 案まで出させた。\u003C\u002Fp>\n\u003Cp>使ってみて、1 画面だけで選ばない方がよいと分かった。ホームだけで選ぶと、ほかの画面に広げたときに崩れる案を拾ってしまう。候補ごとに主な画面を何枚か並べてから選んだ。別の AI に評価させるのも役に立った。Codex が出した案を Claude に見せて使い勝手の観点で比べさせると、「A を土台にして、B の現在地の見せ方を足す」のように、2 案を組み合わせる提案が返ってきた。1 案をそのまま選ぶより、こちらの方がしっくりきた。\u003C\u002Fp>\n\u003Cp>全画面で案を出す必要はなかった。画像で方向を探したのは、トップページやダッシュボードのような、新しい見せ方が要る画面だけだ。先に作り直した部品で組める画面は、画像を作らずにそのまま作った。\u003C\u002Fp>\n\u003Ch3 id=\"画像は測って、デザインファイルに写す\" tabindex=\"-1\">画像は測って、デザインファイルに写す\u003C\u002Fh3>\n\u003Cp>選んだ案は、そのまま実装させずにデザインファイルに写した。デザインツールは、Figma の代わりに Pencil を使っている。AI が MCP（AI が外部のツールを操作するための接続の規格）経由でファイルを読み書きできるツールで、ファイルの拡張子は \u003Ccode>.pen\u003C\u002Fcode> だ。\u003C\u002Fp>\n\u003Cp>写すときは、採用案の画像をデザインファイルの枠に重ね、左右の比率、部品の高さ、文字の大きさ、余白を測る。画像を見ながら「それっぽく」描かせると、少しずつ別物になる。測って写す方が、結局は早かった。写した後は、採用案とデザインファイル、デザインファイルと実際の画面の 2 段で比べ、ずれは 3px 以内に収める。\u003C\u002Fp>\n\u003Cp>画像から動く試作を作ることもでき、最初は作って触ってみた。ただ、試作は本番とは別のコードなので、育て始めると画像・試作・本番の 3 つを見比べ続けることになる。試作は確認に使ったら捨てた。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fstatic.zenn.studio\u002Fuser-upload\u002F4610077de23e-20261010.png\" alt=\"画像の案からデザインファイル、実装までの流れ。画像で案を出す、人が選ぶ、採用案を測ってデザインファイルに写す、実装する、の順に進み、比較は採用案とデザインファイル、デザインファイルと実画面（3px 以内）の 2 段で行う\" loading=\"lazy\">\u003C\u002Fp>\n\u003Ch2 id=\"見直す:-作り直したら、デザインファイルとコードが食い違っていた\" tabindex=\"-1\">\u003Cspan class=\"h-no\" aria-hidden=\"true\">02\u003C\u002Fspan>見直す: 作り直したら、デザインファイルとコードが食い違っていた\u003C\u002Fh2>\n\u003Cp>画像から作り直すと、色や文字サイズは画像から推し量るしかない。作り直しが終わってから見直すと、デザインファイルとコードと文書で、同じものの名前や値が食い違っていた。最終的に、見た目・値・振る舞いの置き場所を分け、値はコードを正にした。\u003C\u002Fp>\n\u003Ch3 id=\"見えた食い違い\" tabindex=\"-1\">見えた食い違い\u003C\u002Fh3>\n\u003Cp>たとえば次のようなものだ。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>デザインファイルで \u003Ccode>accent\u003C\u002Fcode> と呼んでいた色は、コードでいう主なボタンの色だった。ところが shadcn\u002Fui では、\u003Ccode>accent\u003C\u002Fcode> はホバーしたときの背景の色を指す。このままだと、AI に「accent の色で」と頼んだとき、どちらの色が出るか分からない\u003C\u002Fli>\n\u003Cli>本文の文字サイズが、デザインファイルとコードで違っていた\u003C\u002Fli>\n\u003Cli>色や文字サイズの一覧を写した文書があり、「変えたら一緒に直す」と決めていたのに、追いついていなかった\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Tailwind CSS にも落とし穴があった。存在しないクラス名を書いてもエラーにならず、そのクラスは無視される。AI はそれらしいクラス名を作るので、効いていない指定が画面に残っていても、書かせた本人には見えにくい。\u003C\u002Fp>\n\u003Ch3 id=\"何を正にするかを分ける\" tabindex=\"-1\">何を正にするかを分ける\u003C\u002Fh3>\n\u003Cp>そこで、正とするもの（正本）を 3 つに分けた。デザイナーがいないので、値の正はコードに置いている。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>見た目\u003C\u002Fstrong>（配置・余白・どの色を使うか）: デザインファイル（\u003Ccode>.pen\u003C\u002Fcode>）。見た目はここで先に決める\u003C\u002Fli>\n\u003Cli>\u003Cstrong>値\u003C\u002Fstrong>（色のコードや文字サイズの数値）: コード。Tailwind CSS v4 で値を定義する \u003Ccode>@theme\u003C\u002Fcode> という場所に置く。ここに書いた名前が、そのままクラス名として使える\u003C\u002Fli>\n\u003Cli>\u003Cstrong>振る舞い\u003C\u002Fstrong>（押したとき、無効のときなどの部品の動き）: Storybook。部品を 1 つずつ描いて確かめるカタログだ\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>値をコードに置いたのは、デザイナーがいないことのほかに、影の濃さやコンテナの幅のように、デザインファイルに無い値があったからでもある。デザイナーがデザインファイルを持つチームなら、デザインファイルを正にしてコードを生成する方が合うかもしれない。\u003C\u002Fp>\n\u003Cp>デザインファイルとコードで値が食い違ったら、コードに合わせてデザインファイルを直す。この 2 つは名前をそろえ、同期テストを置いた。同じ名前の値が両方で一致しているかを確かめるテストで、食い違うと CI（変更のたびに自動でテストを回す仕組み）が落ちる。値を写した文書はやめた。人もエージェントも追いつけなかったので、写しを持つこと自体をやめた方が早い。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fstatic.zenn.studio\u002Fuser-upload\u002Fe8db674d2dca-20261010.png\" alt=\"正本の分担。見た目はデザインファイル（.pen）、値はコードの @theme、振る舞いは Storybook が持つ。デザインファイルと @theme の間は同期テストでつながり、食い違うと CI が落ちる。入口の DESIGN.md は値を持たず、3 つの正本を指す\" loading=\"lazy\">\u003C\u002Fp>\n\u003Ch3 id=\"ai-が勝手な色を使えないようにする\" tabindex=\"-1\">AI が勝手な色を使えないようにする\u003C\u002Fh3>\n\u003Cp>Tailwind には、最初から青や赤などの色がたくさん入っている。AI はこれを気軽に使うので、決めていない青が増える。そこで標準の色を外し、「主なボタンの色」「本文の文字の色」のような、用途の名前が付いた色だけを使える状態にした。用途の名前の裏には具体的な色が付いているが、その具体的な色はクラス名としては書けない。\u003C\u002Fp>\n\u003Cp>ただ、これだけでは \u003Ccode>bg-[#2455cf]\u003C\u002Fcode> のように色を直接書く書き方（任意値）は防げない。そこは次の章の lint で止めている。\u003C\u002Fp>\n\u003Ch3 id=\"入口の文書には値を書かない\" tabindex=\"-1\">入口の文書には値を書かない\u003C\u002Fh3>\n\u003Cp>\u003Ccode>DESIGN.md\u003C\u002Fcode> は、人とエージェントの両方が最初に読む、デザインの説明書だ。書いているのは、どこが正本か、目指す印象（落ち着いていて、安っぽくない）、色の使い分け、やってよいこととよくないことで、値は書かない。書けばそれは写しになり、また追いつかなくなる。値や部品は、コードや Storybook を見に行かせる。\u003C\u002Fp>\n\u003Ch2 id=\"守る:-デザインハーネスで、外れたら止める\" tabindex=\"-1\">\u003Cspan class=\"h-no\" aria-hidden=\"true\">03\u003C\u002Fspan>守る: デザインハーネスで、外れたら止める\u003C\u002Fh2>\n\u003Cp>正本を決めて渡しても、AI はときどき外れる。だから、作った後に外れていたら止まる仕組みを入れた。止めるのはまず機械で、AI の評価は人の判断材料にとどめる。\u003C\u002Fp>\n\u003Ch3 id=\"言葉の出どころと、各社の事例\" tabindex=\"-1\">言葉の出どころと、各社の事例\u003C\u002Fh3>\n\u003Cp>デザインハーネスという言葉は、ハーネスエンジニアリングから来ている。AI エージェントの周りを設定や検査で固めて、外れにくくする考え方だ（\u003Ca href=\"\u002Fblog\u002Fprompt-context-harness-engineering\">以前まとめた記事\u003C\u002Fa>）。それをデザインに当てはめた。私が見つけた最も早い用例は、こぎそ氏の note（2026 年 5 月）だった[^kgsi]。\u003C\u002Fp>\n\u003Cp>組む前に各社の公開事例を調べると、多くは「作らせる前に渡す」側の話だった。「作った後に止める」側を中身まで出している例は少ない。私の環境も同じで、渡す側はあったが、止める側が手薄だった。この章では、止める側を中心に書く。\u003C\u002Fp>\n\u003Ch3 id=\"機械で止める\" tabindex=\"-1\">機械で止める\u003C\u002Fh3>\n\u003Cp>機械の検査は、図 1 にも書いた lint・a11y・見た目の比較だ。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>lint\u003C\u002Fstrong>（コードを機械的に調べ、決まりに反した書き方を落とす仕組み）: 用途の名前に無い色やクラス名、決めていない文字サイズ、任意値の色を書くと落ちる。ボタンや入力欄を、共通の部品を使わずに直接書いたときも落ちる\u003C\u002Fli>\n\u003Cli>\u003Cstrong>a11y\u003C\u002Fstrong>（アクセシビリティ）: 文字と背景のコントラストなどを、部品ごとに自動で検査する\u003C\u002Fli>\n\u003Cli>\u003Cstrong>見た目の比較\u003C\u002Fstrong>: 主な画面のスクリーンショットを撮って前回と比べ、変わっていたら知らせる。撮る環境は Docker で固定している。環境が変わるとフォントの描かれ方が変わり、それだけで差分が出るからだ\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>見た目の比較だけは性質が違う。差分を見つけるのは機械だが、それが意図した変更かどうかは、人が画像を見て決める。\u003C\u002Fp>\n\u003Ch3 id=\"ai-の評価役は、合否に使わない\" tabindex=\"-1\">AI の評価役は、合否に使わない\u003C\u002Fh3>\n\u003Cp>機械の検査では、「共通部品で済むのに新しく部品を作っていないか」「読み込み中の表示が抜けていないか」は分からない。そこで、AI に評価させるスキルを作った。変更前後の画面を撮り、3 体の評価役が互いの答えを見ずに、観点ごとに判定する。観点は、\u003Ccode>DESIGN.md\u003C\u002Fcode> の原則を 11 個の判定項目（DC-01〜11）に書き直したものだ。判定は 2 票以上そろったものを採り、割れたら「割れた（split）」と書く。\u003C\u002Fp>\n\u003Cp>この結果は、合否（変更を通すか止めるか）には使っていない。指摘を採るか採らないかは、人が決める。AI の評価には、まだ任せきれないところがあるからだ。30 の UI を AI に評価させた研究では、人の採点との相関は 0.7 前後で、著者は補助として使うべきだとしている[^uijudge]。それに 3 体とも同じモデルなので、1 回ごとの揺れは多数決で少し抑えられても、モデルの癖は 3 体そろって同じ方向に出る。\u003C\u002Fp>\n\u003Cp>観点は、本来ならデザイナーが決めて言葉にするものだと思う。デザイナーのいない私は自分で書いたが、変えるのは人に限っている。評価される変更と一緒に観点を書き換えると、スキルが止まるようにしてある。指摘を通すために観点を緩める、という抜け道を塞ぐためだ。\u003C\u002Fp>\n\u003Cp>これまで回したのは 2 回で、無効状態のボタンの見た目を直すきっかけにはなった。役に立つと言い切るには、まだ回数が足りない。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fstatic.zenn.studio\u002Fuser-upload\u002F6ce7e498da18-20261010.png\" alt=\"評価役のレビュー。変更前後の画面の画像を、互いの票を見ない 3 体の評価役が観点（DC-01〜11）ごとに判定する。2 票以上で多数決、割れたら split。結果のレポートを見て、指摘を採るかどうかは人が決める。合否には使わない\" loading=\"lazy\">\u003C\u002Fp>\n\u003Ch3 id=\"繰り返す指摘は、仕組みに上げる\" tabindex=\"-1\">繰り返す指摘は、仕組みに上げる\u003C\u002Fh3>\n\u003Cp>ハーネスは最初から完成させるものではないと考えている。同じ指摘が繰り返されたら、注意書きで終わらせずに lint やテストへ上げる。\u003C\u002Fp>\n\u003Cp>たとえば、ボタンや入力欄を直接書くと、共通部品とよく似た別物ができる。何度も指摘していたので、lint で止めるようにした。入れた時点で、刷新を終えた画面にも 15 か所残っていた。いきなり全部は直さず、理由を書いた例外にして入れ、少しずつ部品に置き換えて、いまは 8 か所まで減っている。\u003C\u002Fp>\n\u003Ch2 id=\"個人でやってみた限界\" tabindex=\"-1\">\u003Cspan class=\"h-no\" aria-hidden=\"true\">04\u003C\u002Fspan>個人でやってみた限界\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>試したのは個人の 1 プロダクトで、画面の数もそう多くない。ダークモードや複数のブランドは、まだ扱っていない\u003C\u002Fli>\n\u003Cli>「落ち着いているか」「安っぽくないか」のようなプロダクトらしさは、AI の評価役に見させているが、判定できているとは言えない\u003C\u002Fli>\n\u003Cli>見た目の比較と評価役は Docker に、デザインファイルの編集は macOS で動く Pencil に頼っている\u003C\u002Fli>\n\u003Cli>最後に決めるのは人なので、品質を自動で保証する仕組みではない。1 か月の計測を始めたところで、効果を示す数字もまだない\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>チームに持ち込むなら、評価の観点を誰が持ち、誰が変えられるかを先に決めたい。デザイナーがいるなら、観点やプロダクトらしさの定義はデザイナーが持ち、AI の評価役はその補助にするのが自然だと思う。観点の持ち主を決めておかないと、指摘を通すために観点を緩める変更が出てくる。\u003C\u002Fp>\n\u003Ch2 id=\"何から始めるか\" tabindex=\"-1\">\u003Cspan class=\"h-no\" aria-hidden=\"true\">05\u003C\u002Fspan>何から始めるか\u003C\u002Fh2>\n\u003Cp>これから始めるなら、次の順番を勧める。\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>値の正を 1 か所に決める\u003C\u002Fstrong>: Tailwind CSS v4 なら、\u003Ccode>@theme\u003C\u002Fcode> に用途の名前で色や文字サイズを書く。同じ \u003Ccode>@theme\u003C\u002Fcode> の中に \u003Ccode>--color-*: initial;\u003C\u002Fcode> と書くと、標準の色が外れる。決めていないクラス名は、ESLint のプラグイン \u003Ccode>eslint-plugin-tailwindcss\u003C\u002Fcode> で止められる。デザインファイルが無くてもできる\u003C\u002Fli>\n\u003Cli>\u003Cstrong>a11y の検査を CI で回す\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>主な画面を数枚、見た目の比較に入れる\u003C\u002Fstrong>。撮る環境は CI と同じにする\u003C\u002Fli>\n\u003Cli>\u003Cstrong>デザインの原則を観点にして、AI の評価役を足す\u003C\u002Fstrong>。合否には使わない\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>画像で方向を出すのは、新しい見せ方が要る画面だけで足りる。\u003C\u002Fp>\n\u003Ch2 id=\"まとめ\" tabindex=\"-1\">\u003Cspan class=\"h-no\" aria-hidden=\"true\">06\u003C\u002Fspan>まとめ\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>画像で何案も出して選ぶと、作り直しの方向は早く決まる。ただし画像は方向で、仕様ではない。採用案は測ってデザインファイルに写す\u003C\u002Fli>\n\u003Cli>作り直すと、デザインファイルとコードが食い違う。見た目・値・振る舞いの正本を分け、写しの文書をやめ、食い違いは同期テストで見つける\u003C\u002Fli>\n\u003Cli>外れたら、まず機械で止める。AI の評価役は人の判断材料にして、繰り返す指摘は lint に上げる\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>1 か月の計測が終わったら、数字と、チームに持ち込むかどうかを、また書くつもりだ。\u003C\u002Fp>\n",[462,465,467,469,472,474,476,479,481,484,486,488,491,493,495,497],{"level":426,"id":463,"text":464},"作る:-画像で案を出し、選んで、作り直す","作る: 画像で案を出し、選んで、作り直す",{"level":419,"id":466,"text":466},"継ぎ足しの見た目から出るために",{"level":419,"id":468,"text":468},"画像は測って、デザインファイルに写す",{"level":426,"id":470,"text":471},"見直す:-作り直したら、デザインファイルとコードが食い違っていた","見直す: 作り直したら、デザインファイルとコードが食い違っていた",{"level":419,"id":473,"text":473},"見えた食い違い",{"level":419,"id":475,"text":475},"何を正にするかを分ける",{"level":419,"id":477,"text":478},"ai-が勝手な色を使えないようにする","AI が勝手な色を使えないようにする",{"level":419,"id":480,"text":480},"入口の文書には値を書かない",{"level":426,"id":482,"text":483},"守る:-デザインハーネスで、外れたら止める","守る: デザインハーネスで、外れたら止める",{"level":419,"id":485,"text":485},"言葉の出どころと、各社の事例",{"level":419,"id":487,"text":487},"機械で止める",{"level":419,"id":489,"text":490},"ai-の評価役は、合否に使わない","AI の評価役は、合否に使わない",{"level":419,"id":492,"text":492},"繰り返す指摘は、仕組みに上げる",{"level":426,"id":494,"text":494},"個人でやってみた限界",{"level":426,"id":496,"text":496},"何から始めるか",{"level":426,"id":498,"text":498},"まとめ",13,{"slug":36,"title":37,"description":38,"publishedAt":39,"updatedAt":39,"category":501,"tags":502,"thumbnail":16},{"name":11,"slug":12},[503],{"name":25,"slug":26},{"slug":6,"title":7,"description":8,"publishedAt":9,"updatedAt":9,"category":505,"tags":506,"thumbnail":16},{"name":11,"slug":12},[507],{"name":15,"slug":15},[509,513,517],{"slug":6,"title":7,"description":8,"publishedAt":9,"updatedAt":9,"category":510,"tags":511,"thumbnail":16},{"name":11,"slug":12},[512],{"name":15,"slug":15},{"slug":36,"title":37,"description":38,"publishedAt":39,"updatedAt":39,"category":514,"tags":515,"thumbnail":16},{"name":11,"slug":12},[516],{"name":25,"slug":26},{"slug":88,"title":89,"description":90,"publishedAt":91,"updatedAt":91,"category":518,"tags":519,"thumbnail":523},{"name":11,"slug":12},[520,521,522],{"name":95,"slug":96},{"name":98,"slug":99},{"name":101,"slug":101},{"url":103,"description":104},1793725976641]