このサイトを Claude Code と一緒に作り直した話

以前のサイトはずっと手書きの HTML と CSS でつくっていましたが、直したい所を後回しにしていたら細部が古びていました。全部書き直すのは面倒なので、AI と一緒に進めてみることにしました。使った相棒は Claude Code です。

結論から言うと、書き直しは思ったより楽しかったです。1人でやるより明らかに長く手が動きましたし、後回しにしがちな細かい直しまで手が届きました。素朴に組む縛りをちゃんと守ってくれるかが最初の心配でしたが、CLAUDE.md にルールを書いておくとかなりうまく合わせてくれます。

Claude Code の何が助かったか

一番大きかったのは、ターミナルの中で差分の提案までしてくれることでした。エディタとチャットを行き来しなくていいので思考が途切れません。「ここ直したい」と言えば、その場でファイルを開いて patch を作ってくれます。

次に、「なんとなく気持ち悪い」を言語化して整理してくれるのも助かりました。名前がしっくり来ない、責務が別ファイルに漏れている、コメントが実態と合っていない ── 自分では気になるけどうまく言えない箇所を、はっきり指摘してくれます。

迷ったときに複数案を並べてくれるのも良かったです。「A案 / B案 / どちらも採らずに寝かせる」の3択が並ぶと、選ぶ側にまわれます。決めるのは自分ですが、選択肢が並ぶだけで判断が速くなります。

文字サイズや色、余白のバランスは、最終的に自分で微調整しました。ここは説明しづらい感覚の話で、「もう少し詰めて」「もう少し軽く」を往復させるより、自分で数字を触るほうが早いです。

コミットの単位やファイル配置の好みも、都度伝える必要がありました。「1コミット1目的」に揃えたい、この関数は private/ 側に置きたい ── そういう感覚は明文化していないと、遠慮なく AI 流の配置に寄せられます。

「フレームワークなし・build step なし・依存最小」という原則は CLAUDE.md に書いておきました。これがあるおかげで、React を勧められたり npm パッケージを追加されたりすることはありません。逆に、書いていないルールは平気で破られます。

依存を増やす提案には、毎回「本当に必要?」と聞き返すようにしています。だいたいは「なくても足ります」で戻せます。外部 CDN を読み込む提案も同じで、代替のセルフホスト方式に置き換えられることが多いです。

変更がある程度たまったら、自分の書いた分もひっくるめてレビューを頼みます。「セキュリティ観点で」「stale なコメントや dead code を拾って」と観点を絞ると結果が読みやすいです。

特に助かるのが、古い定数や書き換え漏れの検出でした。人間の目だと見落としがちな残骸を、パターンで拾ってくれます。作り直しは差分が大きくなりがちなので、この機械的なチェックが効きました。

コードに体力があると、細かいところを直す気になります。「1画面のスライドパネル」みたいな構図実験も、崩したら戻せる自信があるので思い切って試せました。読み手 (自分含む) が迷わない配置に整うと、時間を空けて開いても続きが書けます。

何より、飽きずに手が動いたのが一番の収穫でした。1人だとリファクタリング途中で放置しがちな作業も、レビューを受ける前提だと最後まで整えたくなります。AI と組む価値は、コードそのものより「続けられること」にあるのかもしれません。