長らく放置していた k2wanko.dev のリニューアルをしました。リニューアルはClaude Codeのみで行ったのでその時にやったことをまとめておきます。

きっかけ

最近、AITuber を趣味にしていることもあって初めましてな人に出会う機会が増え「何者」みたいな話をすることが増えたのと、昨今の Claude Code の流行りもあって、自分のブログサイトでもリニューアルするかなということで、Claude Code にいい感じにリニューアルしてもらうことにしました。

Claude Codeとは

Claude Codeは、Anthropicが提供するAIペアプログラミングツールです。ターミナルから直接使えて、ファイルの読み書きやコマンド実行まで自動でやってくれます。 ふわっとした雑な指示でも理解して、適切なコードを生成してくれるのが特徴です。

今回のリニューアルでは、以下のような作業をClaude Codeにお願いしました。

最初の依頼

まず「長らく放置していたので、サイトのリニューアルを考えています」と伝えて、現在の状態を確認してもらいました。

現状の確認は claude コマンドで起動したあとに /init を実行して現在の技術スタックを把握して CLAUDE.md を生成してもらいました。 要望を伝える際に、「必要な情報があれば、お知らせください」のように伝えると、必要な情報を聞いてきてくれます。

その後、以下のような要望を出して CLAUDE.md を更新するように指示しました。

• React と TypeScript と SSG にしたい
• 現在の機能だけ満たせればよい
• NetlifyCMSは古いのでMarkdownファイル直接編集にする
• Tailwind CSSでモダンに
• Firebase Hostingは継続
• パフォーマンスとSEOはよきに

Claude Codeは「Astro + React を利用する案」を提案をしてくれて、そのまま進めることにしました。

実際の作業

既存のプロジェクトは参考にしつつ修正するとのことで v2 ディレクトリに新しいAstroプロジェクトを作成して作業が始まりました。

ブログ記事の移行はClaude Codeが移行スクリプトを自動生成して、全てのMarkdownファイルを新しい形式に変換してくれました。画像アセットの移動と参照の更新も含めて、移行はしてくれましたが、指示しないと URL 変えたりするので、漏れていた考慮事項はできあがっているものを確認しながら修正指示をだしていきました。

機能的に問題なさそうなのを手動で確認したあと、デザインについては「かっこよくしてください」という雑な要望だったんですが、いい感じにしてくれました。

最後に、このブログ記事の作成もClaude Codeにお願いしました。過去の記事の文体を分析してもらって、同じトーンで新記事を執筆してもらいました。なぜか「爆速」みたいな過剰な表現を入れたがるので、抑える指示はしています。 でも、結局文章量が少ないのか文章は期待したものにならなかったので、ほぼ手動で書いてます。

まとめ

Web サイトを作ったはいいけど、放置しちゃってるなーという人はClaude Codeと一緒にリニューアルしてみるのもいいかもしれません。

なお、日々のことは X に呟いているし技術系のことは Zenn に書いてるしで、このブログサイトはどう活用すべきか悩んでます。