何年かで最大のサイトリデザインを、朝食中に終わらせた。

土曜日の朝8時47分。ベトナム風豚バーニーミー（Banh Mi Heo Quay）を食べながら、2021年以来最も包括的なリデザインの最後のピースをデプロイしたところです。

5年間。 それが私のウェブサイトに何か実質的なことをしてから経った時間でした。確かに、ここのコピーを微調整したり、そこにブログ投稿を追加したりはしていました。でも、デザイン？アーキテクチャ？全体的な体験？パンデミックが本当に終わった頃から手つかずのまま。

今朝、TRANSMISSIONデザインシステム——新しいタイポグラフィ・カラーパレット・アニメーション・プレミアムなプロダクトページを含む完全なビジュアルオーバーホール——を完成させました。でも、これは3日間のスプリントで全てを変えたフィナーレに過ぎません。

数字で言うと：

- 3日間で40コミット

- 追加されたコード28,129行

- 新しいCSS 4,950行

- 11のCSSファイル（1から増加）

- 完全なダークモードシステム

- モバイルファーストのレスポンシブデザイン全般

- 実際のスクリーンショット付きのカスタムプロダクトページ

リデザイン全体の総所要時間：3日間で数時間。Day 1だけで36コミット。今日の最終プッシュ：朝食を食べながら30分。

デザインエージェンシーなし。Figmaモックアップなし。数ヶ月のタイムラインなし。私とClaude Codeだけ。:D

はっきり言っておきたいことがあります： CSSを一行も書いていません。PHPも書いていません。デプロイコマンドを手動で実行していません。Claude Codeが実装の100%をやりました——デザイン・コード・gitコミット・デプロイまで。私はただ決断をしただけです。「もっとグロー。」「そのフォントは違う感じがする。」「カードをプレミアムに見せて。」

これが2026年のAI支援開発の実際の姿です。

---

出発点：2021年から放置されていた

正直に言いましょう。

2026年1月1日時点の私のサイト：

- CSSファイル1つ、700行のスパゲッティ

- Poppinsフォントがどこにも（「タイポグラフィについてあまり考えなかった」という選択）

- デザインシステムなし——あちこちにハードコードされた色

- 基本的なダークモード、半分のページで壊れていた

- プロダクトページ：プロダクトページなし、サイト全体がただのブログ

- モバイル体験、安いスーツが「フィットする」のと同じ意味で「レスポンシブ」

本業・生成AIの学習・STRAŦUMとDIALØGUE——私の2つのAIアプリケーション——の構築に集中しすぎて、個人サイトはコブラー（靴職人）の裸足の子どもたちになっていました。

潜在的なクライアントやコラボレーターが訪れるたびに、「2021年が電話してきた、WordPressのテーマを返せって言ってる」と叫ぶサイトが見えていました。

---

なぜ今？そしてなぜこの方法で？

2025年末に2つのことが起きました：

まず、STRATUMとDIALØGUEを出荷しました。本業でグローバル広告エージェンシーのVPをしながら、ソロで構築した2つのプロダクションAIアプリケーション。実際のユーザー・実際の収益の議論・実際の信頼性が問われていました。

私の個人サイトは今や実際のプロダクトへの玄関口。それに合う必要がありました。

次に、Claude Codeを真剣に使い始めました。チャットボットとしてではなく。開発環境として。そして、すべてを変えたものを発見しました：[frontend-design](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design)プラグインです。

このプラグインはCSSを書くだけではありません。デザインを考えるのです。タイポグラフィのペアリング。色彩理論。空間構成。AI生成コードが「AIスロップ」のように見えないようにするものです。

こう思いました：すべてを再構築したらどうだろう？週末のハックではなく、ちゃんとしたデザインシステムで。Claude Codeが重労働をして、私が決断をしながら。

---

3日間のスプリント：実際に起きたこと

Day 1：ビッグバン——36コミット

1日に36コミットするつもりはありませんでした。でも始めたら止まれなかった。

初期セットアップ、既存テーマのバックアップ、CSSモジュール化のスタート。

CSSアーキテクチャ全体を再構築しました。700行の単一ファイルが：

```
css/
├── style.css          # デザイントークンのみ
├── components.css     # ボタン・カード・ナビゲーション
├── homepage.css       # ヒーロー・プロダクト・投稿セクション
├── about.css          # アバウトページ固有
├── blog.css           # ブログアーカイブ
├── dark-mode.css      # 完全なダークモードシステム
├── mobile-nav.css     # ボトムナビゲーションバー
├── search.css         # 検索オーバーレイ
├── single-post.css    # ブログ投稿タイポグラフィ
└── products.css       # プレミアムプロダクトページ
```

各ファイルは一つの役割を持ちます。各ファイルはルートのCSS変数を使います。ボタンが間違った色になっている理由を700行から探し回ることはもうありません。:P

ダークモードのオーバーホール。古いダークモードは恥ずかしいレベルでした——消えるテキスト・コントラストのないボタン。ゼロから再構築しました：

- 658行の専用ダークモードCSS

- 適切なコントラスト比（WCAG準拠）

- 89個の!important宣言をすべて削除（そう、89個）

- 自動的に切り替わるセマンティックカラートークン

その日の終わりに：ホームページのリデザイン・アバウトページの再構築・モバイルボトムナビの追加・ニュースレター統合完了。36コミット。

Day 2：アーキテクチャ＆インフラ——9コミット

Day 2は維持可能なものにすることについてでした。

大きなリファクタ： functions.phpが724行のカオスから25行のクリーンなインクルードへ：

```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```

また、ローカル開発用のDockerセットアップ・GCPセキュリティ監査・ドキュメントの作成も行いました。

Day 3：TRANSMISSIONのフィナーレ——朝食スプリント

ここでfrontend-designプラグインがその存在価値を証明しました。

求めるものを説明しました：「レトロフューチャリスト。アナログな過去がデジタルな未来と出会う。コーポレートではないプレミアム。技術的だけど温かみがある。」それから朝食を取りに行きました。

バインミーを持って戻ってきたとき、Claude Codeが完全なTRANSMISSIONデザインシステムを生成していました：

タイポグラフィ：

- Playfair Display——ヘッドライン（エレガント・編集的）

- DM Sans——ボディテキスト（クリーン・読みやすい）

- JetBrains Mono——コードとデータ（技術的信頼性）

カラー：

```css
--color-cream: #fffbeb;    /* 暖かい背景 */
--color-navy: #0f172a;     /* 深いプライマリ */
--color-cyan: #22d3ee;     /* エネルギーアクセント */
--color-amber: #f59e0b;    /* 暖かいアクセント */
```

フルードタイポグラフィ：

```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```

ヘッドラインはモバイルからデスクトップへ自動的にスケールします。メディアクエリは不要。

そして、プロダクトページに取り組みました。ただのテキストだったページが：

ヒーローセクション：

- ターミナルスタイルのアイブロウテキスト

- Playfairヘッドライン：「What I'm Building」

- スタッツバー：2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction

- 微妙なアニメーション付きの浮かぶ幾何学的形状

プロダクトカード：

- プレミアムなネイビーグラデーション背景

- プロダクションサイトからの実際のスクリーンショット（モックアップではない）

- ウィンドウコントロールドット付きのブラウザフレームコンテナ

- シアン/アンバーグローのホバーステート

- 矢印マーカー付きの機能リスト

- フルワイドのCTA

スクリーンショット自体が旅でした。Claude Codeがプロダクションサイトに移動し、ページをキャプチャし、1.8MBから229KB（86%削減）に最適化し、スタイルされたコンテナに包みました。

---

スタック：驚くほどシンプル

使ったもの：

Claude Code — コードを書き・コマンドを実行し・コンテキストを保持するAI。これはファイルシステムへのアクセス・gitコマンドの実行・昨日作ったものを覚えているAIです。

frontend-designプラグイン — 「AI生成CSS」と「設計されたように見えるCSS」の違い。組み込みのタイポグラフィ理論・色の関係・空間構成。

Docker — ローカルWordPress開発。docker-compose up一つでプロダクションミラーが手に入ります。

Chrome DevTools MCP — Claude Codeがブラウザをコントロールできます。「モバイルダークモードを確認して」→ レンダリングされたページの実際のスクリーンショット。タブの切り替えなし。

gcloud CLI：Claude Codeがコントロールする

---

正直な部分

これは魔法ではありませんでした。うまくいかないことがありました：

ネストしたフォルダの混乱： DockerのコピーががDOCKER gambit-child/gambit-child/という構造を作っていた。デバッグに10分かかりました。

ダークモードのテキストが消える： 一部のヘッドラインが間違った色を継承していました。セレクターをより具体的にすることで修正。

画像の最適化： 生のスクリーンショットは巨大でした。macOSでsips -Z 800を使えば外部ツールなしで画像をリサイズできることを学ぶ必要がありました。

WordPressのテンプレート割り当て： 新しいプロダクトページをWP管理者で割り当てる必要があることを忘れていました。古典的。

違いは、デバッグに時間がかかったのが数時間ではなく数分だったこと。Claude Codeはレンダリングされたページを見て・問題を特定し・同じ会話で修正を提案できました。

---

前と後：数字で

| 指標 | 2026年1月1日 | 2026年1月10日 |

|--------|-----------------|------------------|

| CSSファイル | 1 | 11 |

| CSSの行数 | 〜700 | 4,950 |

| PHPアーキテクチャ | モノリシック | モジュラー（6ファイル） |

| タイポグラフィ | 1フォント | 3フォントシステム |

| カラートークン | 〜5ハードコード | 15以上セマンティック |

| ダークモード | 壊れていた | 658行・WCAG準拠 |

| プロダクトページ | プレーンテキスト | スクリーンショット付きプレミアム |

| モバイルナビ | なし | 6アクション付きボトムバー |

| アニメーション | 0 | 7（fadeInUp・float・glow等） |

| 最後の主要アップデート | 2021 | 今日 |

変容の全体： 3日間で40コミット、123ファイルにわたって追加された28,129行。すべてClaude Codeが書きました。

---

かかったコスト

お金： デザインに$0。Claude Codeサブスクリプション。すでに持っていたGCPホスティング。

時間： 3日間経過。でも実際のアクティブ時間は？たぶん合計2〜3時間。何が欲しいかを説明して、Claude Codeが構築し、後で結果を確認するために戻るだけ。今朝は最後のリデザインを始め、朝食に行って、確認のために戻りました——実際の注意は30分。

私の実際の貢献： コードゼロ行。何が欲しいかを説明し、Claude Codeが構築したものをレビューし、「ホバーステートにもっとグローが必要」や「そのスペーシングがおかしい」と言っただけ。

比較： デザインエージェンシーなら、このスコープで8〜12週間と$10,000以上を見積もっていたでしょう。そして彼らのFigmaファイルを自分で実装しなければならなかった。

---

学んだこと

1. 私はもはや開発者ではない——クリエイティブディレクターだ。 Claude Codeがすべてのコード行を書きました。私はテイストの決断をしました。「そのアニメーションは遅すぎる。」「シアンはダークモードでもっとグローが必要。」「ヒーローのスタッツをもっと目立たせて。」これはコーディングとは根本的に異なるスキルです。

2. まずモジュール化する。 Claude Codeの最初の本能は、ビジュアルの変更を加える前にコードベースを論理的なファイルに分割することでした。この基盤のおかげで、その後のすべての変更が楽になりました。

3. デザインシステムは複利で効く。 TRANSMISSIONトークンができると、すべての新しいコンポーネントは既存の変数を組み合わせるだけでした。プロダクトページはシステムがすでにあったので45分で完成しました。

4. frontend-designプラグインが違いを生む。 通常のAI生成CSSは「AIスロップ」のように見えます——一般的で・安全で・記憶に残らない。frontend-designプラグインはタイポグラフィのペアリング・色彩理論・空間構成を考えます。これがAI生成に見えない理由です。

5. インクリメンタルに出荷する。 40コミット、1つではなく。各ピースは準備できたら公開しました。Claude Codeがgitワークフローを処理しました——ステージング・コミット・プッシュ・PRの作成まで。

---

自分で試す

2021年から「まあいいか」と思っている個人サイトがあるなら：

1. frontend-designプラグインと一緒にClaude Codeをインストール

2. 求めるバイブを説明する（私の場合：「レトロフューチャリスト、アナログとデジタルの出会い」）

3. アーキテクチャから始める——美化する前にモジュール化

4. デザインシステムを構築する——トークン・タイポグラフィ・カラー

5. ページを構築する——各ページはあなたが作ったシステムを使う

6. 頻繁にデプロイする——「完成」を待たない

一番難しい部分はテクノロジーではありません。サイトにどんな感覚を持たせたいかを決めることです。

それがわかれば、あとは会話です。

アップデート： テイストと実装についてのそのレッスンは、Swiftを知らずにネイティブiOSアプリを作り始めたときにさらに明確になりました。Claudeが一晩で7,568行のコードをスキャフォールドしました——でも「クリエイティブディレクター」としての作業、それを良い感じにすること？それはまだ完全に人間の仕事です。

何年も後回しにしてきたものを再構築したのはいつのことですか？何がついに始めるきっかけになりましたか——そして完成したときどんな気持ちでしたか？

よろしくお願いします、Chandler

---

まだ作り続けて、まだ出荷して、まだそのバインミーを楽しんでいます。

---