田舎の学習塾のWebサイトをAI 3強（Claude/Gemini/Codex）でフルリニューアルを試みた！

はじめに

地方で学習塾を経営している両親のために、長年放置されていたWebサイトのフルリニューアル試みました！

本職はクラウドインフラエンジニアですが、今回は「AIをメイン開発パートナーに据えたら、どこまで爆速でモダンなサイトが作れるか」に挑戦。

結果として、Claude 3.5 Sonnet / Gemini / Codex を適材適所で使い分ける「AIドリームチーム」による開発記が爆誕したので共有します。

AIドリームチームの役割分担

今回のプロジェクトでは、以下の3つのモデルにそれぞれ「専門職」を割り当てました。

• Gemini: 「戦略コンサルタント」

  • サイト構成のブレスト、情報の整理、リニューアル計画の策定を担当。

• Claude: 「リードエンジニア」

  • コーディング全般。生成速度とコードの正確性が圧倒的。

• Codex: 「UI/UXデザイナー」

  • ターゲット層（地方の若いお母さん世代）に刺さるデザイン案の作成を担当。

開発プロセスと直面した「壁」

1. 爆速のワンページ作成

最初はClaudeに依頼し、数秒で高品質なシングルページが完成しました。しかし、塾の情報を網羅するには1ページでは足りませんでした。デザインもあんまり好みではなかったです。

2. ターゲットを意識したデザインのブラッシュアップ

ここでCodexを投入。Claudeの作ったロジックに、Codexによる「親しみやすさや（地方の若いお母さん世代）に刺さるデザイン案」を盛り込んだUIを重ねていきました。

3. 最大の難所：マルチページ化の壁

全7ページのHTMLへの分割とリンク構造の構築。ここが一番苦労しました　Codexに任せて7時間格闘し、処理中に仮眠を取るほど粘りましたが、リンクの整合性が取れず完走できませんでした

4. ブレイクスルー

結局、ClaudeとGeminiのコンビに戻したところ、Claudeのコーディング効率が爆発。複雑なマルチページロジックを、汗一つかかずに（？）完璧に書き上げました

技術的な教訓： 現時点でのコーディング速度と論理的な正確さにおいて、Claudeは「王」であると実感しました。

「顧客（両親）」からの手厳しいフィードバックと対策

完成したサイトを両親に見せたところ、エンジニアとして避けては通れない「現場のリアルな声」をもらいました。

• 「今のサイトが変わるのが怖い」

  • 対策: ブルーグリーンデプロイメント的な発想で、旧サイトを並行稼働させつつ移行する提案をしました。また、ランニングコストを抑えるため、AWS (S3+CloudFront) や Google Cloud を活用した静的サイトホスティングを検討中です。ここは自分のクラウドエンジニア知識が使えそう

• 「デザインが少し『AIっぽすぎる』」

  • 対策: VS Codeを立ち上げ、フォントやCSSを微調整します。AIっぽさは自分でも感じていたからここは課題

• 「自分たちで更新できない！」
  • 対策: Headless CMS（microCMSなど）を導入し、GitHubを触らなくても管理画面からお知らせなどを更新できる仕組みを構築検討、、でも難しい、、

おわりに

今回のプロジェクトを通じて、AIは強力な武器になりますが、複雑なアーキテクチャの調整や、最後の「人間らしさ」を吹き込む作業には、やはりHuman in the loop人間の介在が不可欠だと再認識しました。

皆さんも、家族や身近な人のためにAIを駆使して何かを作った経験はありますか？
ぜひコメント欄で教えてください！