[{"data":1,"prerenderedAt":72},["ShallowReactive",2],{"tag-articles-デザインシステム":3},[4,10,15,19,24,29,34,39,44,49,53,58,62,67],{"title":5,"description":6,"path":7,"publishedAt":8,"updatedAt":9},"Claude CodeとClaude Webを組み合わせてSVG状態遷移図を作った話","UIの色ルールを説明する状態遷移図をSVGで作成。Claude Codeだけでは難しかった部分をClaude Webの図解能力で補完し、最終的にインタラクティブなVueコンポーネントに仕上げた過程を記録","/svg-state-diagram-with-claude","2026-01-23T00:00:00.000Z",null,{"title":11,"description":12,"path":13,"publishedAt":14,"updatedAt":9},"2026年1月26日の開発日記 - 月シミュレーター完成と税務アシスタントUI大改修","PR#55の月シミュレーター対応、日食・月食機能追加、tax-assistantのデザインシステム分割・勘定科目マスターDB化実装、3つの計画書策定を完了した充実の1日","/2026-01-26-diary","2026-01-26T00:00:00.000Z",{"title":16,"description":17,"path":18,"publishedAt":14,"updatedAt":9},"税務アシスタントUIデザインシステム構築 - Miller Columnsレイアウトとソートコンポーネントの共通化","税務アシスタントアプリのUIデザインシステム構築記録。27000トークン超えのファイル分割、Miller Columnsレイアウトの共通化、Piniaストアによるナビゲーション状態管理、SortableTableのマルチカラムソート（AND条件、Excel方式）対応、アイコンコンポーネントの作成、Mermaidクライアントサイドレンダリング対応など","/tax-assistant-design-system",{"title":20,"description":21,"path":22,"publishedAt":23,"updatedAt":9},"帳票設定UIの大幅改善 - ナビゲーション・検索・編集モードの実装","tax-assistantプロジェクトの帳票設定画面を大幅改善。中カテゴリ列の削除、NavigationBarによるグローバルナビゲーション、SearchableSelectコンポーネント、IconPicker、編集/閲覧モード切り替え、未保存変更確認ダイアログ、入出金タイプのセクション分離、デザインシステム統一まで詳細に解説","/voucher-settings-ui-improvements","2026-01-27T00:00:00.000Z",{"title":25,"description":26,"path":27,"publishedAt":28,"updatedAt":9},"2026年1月31日の開発日記 - クレカ明細UIの大規模リファクタリング","tax-assistantのクレカ明細画面を集中的に改善。確定処理のカクつき解消、ステータス命名統一、デザインシステム整理、Prettier導入まで一気に実施した1日","/diary-2026-01-31","2026-01-31T00:00:00.000Z",{"title":30,"description":31,"path":32,"publishedAt":33,"updatedAt":9},"LP UI/UX最終調整 - 日本語化・favicon・デザインシステム整備","全LPの英語テキスト日本語化、favicon修正、CLAUDE.md作成、記事ページ改善など運用品質を高めた最終調整の記録","/tax-lp-ui-ux-polish-2026-02-08","2026-02-08T00:00:00.000Z",{"title":35,"description":36,"path":37,"publishedAt":38,"updatedAt":9},"Chrome拡張の会計サービス連携UIをタブからミラーカラムズに書き直した記録","会計サービス連携Chrome拡張のUIを、タブ切替からミラーカラムズ（左ナビ+右コンテンツの2カラム構成）にリファクタリング。デザインシステム準拠、機能統合、レスポンシブ対応、URL自動保存まで","/mf-miller-columns-ui","2026-03-23T00:00:00.000Z",{"title":40,"description":41,"path":42,"publishedAt":43,"updatedAt":9},"テーブルとpreブロックをSVG図解に一括変換した記録","ch0.vueの全テーブルとpreブロックをSVG化し、グレー8段階のトンマナルールを確立。6サブエージェント並列で59件のSVGを生成した実装ログ","/svg-diagram-conversion","2026-04-20T00:00:00.000Z",{"title":45,"description":46,"path":47,"publishedAt":48,"updatedAt":9},"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","2026-06-14T00:00:00.000Z",{"title":50,"description":51,"path":52,"publishedAt":48,"updatedAt":9},"社内 AI デモページ3本に Müller-Brockmann グリッドを当てる — 写真の高さがガタついたのは subgrid と box-sizing と translateY のせい","社内 AI ワークショップで作った3つのデモページ（お菓子店・美容室・飲食店）を、Müller-Brockmann グリッドシステムのスキルで12列モジュラーグリッドに乗せ替えた。最初は subgrid 継承ミスでカードが縦に並び、写真の高さも揃わず画面がガタついた。検証ハーネスを最初から回さず目視で済ませたのが直接の敗因。verify を走らせて 0px 一致まで詰めたあと、ナビ追加・サイドバー削除まで一気通貫で整えた記録。","/tsukumi-demo-grid-layout",{"title":54,"description":55,"path":56,"publishedAt":57,"updatedAt":9},"デザインシステム基礎講座にHTML/CSS実例を追加した記録","自作のデザインシステム基礎講座にページ構成・レイアウト・ビジュアルスタイル26種のHTML/CSS実例を追加した一日の記録。Workflow並列生成と表示確認のループ、バンドルサイズ確認、学習ゲート運用までを振り返る。","/design-system-basics-live-examples","2026-07-08T00:00:00.000Z",{"title":59,"description":60,"path":61,"publishedAt":57,"updatedAt":9},"2026年7月8日の開発日記 - 旅行出発前日、デザインシステム講座と学習ゲートの穴を塞いだ一日","旅行出発前日。デザインシステム基礎講座にHTML/CSS実例を追加し、学習ゲートの全リポジトリ展開の穴を発見・修正し、旅のしおりをGoogleマイマップに変換した一日の記録。","/2026-07-08-diary",{"title":63,"description":64,"path":65,"publishedAt":66,"updatedAt":9},"デザインシステム基礎講座を磨き込んだ一日——ターゲット別モックアップ・9ステップ実践LP・ハンバーガーメニュー実装","自作のデザインシステム基礎講座を丸一日改善した記録。同じ健康管理アプリをターゲット別に組み分けた比較モックアップ、良い情報設計の9ステップを実践したLPとスクロールスパイ、章扉画像15枚、ハンバーガーメニュー実装、JSON再生成の罠まで。","/design-system-course-refinement","2026-07-14T00:00:00.000Z",{"title":68,"description":69,"path":70,"publishedAt":66,"updatedAt":71},"2026年7月14日の開発日記 - MCPハンズオン講座の実装とAIベンダー戦略記事5本","自作APIをMCP化するハンズオン講座を計画から実装・検証まで一気に作った日。朝のXの話題からAIベンダー戦略を掘って記事5本を公開し、デザインシステム講座の磨き込みとLive2D計画の確定・保留判断まで並走した。","/2026-07-14-diary","2026-07-16T00:00:00.000Z",1785654924756]