4〜5年前から長らくお世話になっていたノーコードWebデザインプラットフォーム「STUDIO」から、ついに卒業する日がやってきた。
現在は言わずと知れた、「SEO対策→AEO / LLMO」への大転換期。
正直、STUDIOでは対処できないことが多すぎて、それらが致命的になっていた。
1年以上前からずっと課題だったHPのお引越し。
いわば、自社ビルの大型建て替え。
やりたいけどずっとできなかった。かかる時間もコストも重いから。
穴だらけのビルを、ツギハギで改修する日々。。
できうる限りのAI対策をしてみても、ハンディキャップが大きすぎる。
けど、来たる2025年に光が差す———
そんな重たい課題を、尋常じゃないパワーで吹き飛ばしてくれる存在が登場した。
『Claude Code』
これさえあれば、超短期間で、AI時代の最適解となる『最先端の新設ビル（HP）』をつくれることがわかったからだ。
以下に、その一部始終を記録する。
使用したツールやサービスは下記の通り。
| サービス | 役割 | 仕事内容 |
|---|---|---|
| Claude Chat | 全体設計・PM | 依頼主の要望を聞き、戦略・計画を立て、Claude Codeへのプロンプトを作成する |
| Claude Code | 司令塔・エンジニア | 実際にコードを書き、PC上でシステムを組み上げるメインスタッフ |
| GitHub | 設計図の保管庫 | Astroのコードや設定ファイルを安全に保存・管理する |
| Notion | コンテンツ管理 (CMS) | 記事やニュースなど、中身のデータをストックする原稿用紙兼データベース |
このような布陣は、最新の**「ヘッドレス構成」**と呼ばれる非常に洗練されたサイト制作の組み合わせらしい。
本来の制作会社ならば、数百万円以上の予算と3〜6ヶ月の制作スケジュールが組まれる内容だが、Claude Codeをうまく駆使すれば数ヶ月程度で完成してしまう。
もう、いままでのサイト制作の常識がひっくり返った。
やったことといえば、
- Claude Chatに、旧サイト（STUDIO）を見せる
- AI時代に最適なサイトにアップデートしたい旨を伝える
- コンサルレベルのサイト改善案を数分でつくってくれるので、それに目を通して気になることがあればフィードバック
- Claude Chatがつくってくれたプロンプトを、Claude Codeにそのままコピペする
- 上記のサービスアカウントを作成し、セットアップする
- 「ああしてほしい、こうしてほしい」をテキストで伝える
といったくらい。
実際に発生するコストはこんなかんじ。
| 項目 | プラン | 日本円換算 |
|---|---|---|
| Claude Code（Chat含む） | Max $100/月 | 約16,000円（月額） |
| GitHub Pro（Team） | Personal $4/月 | 約640円（月額） |
コードは1行も書いてない。
自然言語での会話とコピペ作業。
（コピペ作業は、主に旧サイトからの記事移植など）
プロンプトが多少曖昧でも、Claude Codeは柔軟に対応してくれる。
なぜなら、Claude Codeはただのコード作成サービスではなく、「AIエージェント」だからだ。
いままでノーコードでガリガリいじっていた苦労とは、さようなら。
これからの時代に求められるのは、
「なにを成し遂げたいか」をただ言葉にするスキル。
いかに「上質な願い」を持てるかの時代の到来だ。
︎〰︎〰︎〰︎〰︎
ただ、今回が初めてのバイブコーディングでのサイト開発だったので、正直かなり回り道をしたとおもう。
「よかれとおもって、よしなに対応してくれる」というAIエージェントの性質が故の、トンマナのばらつきや複雑性がある。
LPのような1枚独立サイトならばそこまで意識しなくてもよいのだが、コーポレートサイトのようなページ数や階層が多いサイトには、一定のルールメイクが必須だ。
次回の記事では、僕が数ヶ月間PC（Claude Code）にかじり付き、気づいたノウハウや苦労を記録してみたいとおもう。
中には、コペルニクス的転回ともいえるデザインのパラダイムシフトがある。
かなり興味深い内容になりそうな予感がする。。
to be continued…