Claude に設計させ、Claude に作らせ、Claude にテストさせた

2週間ほど、このブログを作っていた。技術スタックは Next.js + Supabase + Vercel。

珍しかったのは、作り方の方だ。

まず draw.io と Figma でドキュメントを作った

最初にやったのは、コードを書くことではなくドキュメントの作成だった。

Claude に指示を出しながら、システム構成図とデータモデル図を draw.io で作成した。次にサイト構成図と画面フロー図も draw.io に起こし、設計の全体像を言語化した。

その後、Figma に移り17画面分のワイヤーフレームを作成。さらにデザインシステム（Variables とコンポーネントライブラリ）も Figma 上で整備した。

これだけで「何を作るか」が完全に言語化された状態になった。コードを書き始める前に、仕様と設計が紙（データ）の上で出来上がっているというのは、思いのほか気持ちのいい状態だった。

実装フェーズは Claude に仕様書を生成させ、Sprint 0〜9 を順番に実装させた。認証・CRUD・画像アップロード・ダークモード・デザイントークン、全部。

Playwright でブラウザを動かしながら受け入れ基準を検証し、問題があればフィードバックを返して修正させる、というサイクルで進めた。

詰まった場面もあった。ダークモードのハイドレーションエラー、E2Eテスト用 DB のコンテナ分離、ミドルウェアの競合。そのどれも、最終的には Claude が直した。

自分がいちばん手を動かしたのは「Docker Desktop が起動しているか確認する」作業と、Vercel による本番公開の設定くらいだ。

このブログの名前は「Still On The Wall」。まだ壁についてる、という意味だ。コードを書く腕が衰えても、指示を言語化する頭と、何を作るかを考える意志があれば、ものづくりはできる。

AI に全部作らせた、という気恥ずかしさは正直あった。でも考え直した。設計の意図を言語化したのは自分だし、ユーザー体験を考えたのも自分だ。コードは「出力」に過ぎない。

このブログ自体が、その考えの最初の証明だ。