4〜5年前から長らくお世話になっていた、ノーコードWebデザインプラットフォーム「STUDIO」から、ついに卒業する日がやってきました。
現在は、言わずと知れた「SEO対策から、AEO（AI検索最適化）/ LLMO（LLM最適化）」への大転換期です。正直なところ、従来のノーコードツールでは構造的な最適化に対処できない部分が多く、それらが自社ビジネスにとって致命的なハンディキャップになりつつありました。
1年以上前からずっと課題でありながら、にっちもさっちもいかなかった公式サイトのお引越し。
それは言わば、営業を続けながら行う「自社ビルの大型建て替え」のようなものです。やりたい気持ちは山々でも、かかる時間とコスト、そして何よりエンジニアリングの壁が重く、なかなか踏み切れませんでした。
結果として、穴だらけのビルをツギハギで改修するような日々——。できうる限りのAI対策を施してみても、ノーコードという枠組みの中では限界がありました。
しかし、来たる2025年、暗雲を切り裂くように光が差します。
そんな重たい課題を、尋常じゃないパワーで吹き飛ばしてくれる革新的な存在が登場したのです。
それが、『Claude Code』でした。
これさえあれば、超短期間で、AI時代の最適解となる「最先端の新設ビル（Webサイト）」を自力で構築できる。そう確信した私は、完全移行のプロジェクトを決断しました。以下に、その一部始終を記録します。
開発の布陣：最新の「ヘッドレス構成」をAIと組む
今回の移行にあたり、採用したツールとそれぞれの役割（布陣）は下記の通りです。
| サービス | 役割 | 仕事内容 |
|---|---|---|
| Claude Chat | 全体設計・PM | 依頼主の要望を聞き、戦略・計画を立て、Claude Codeへのプロンプトを作成する |
| Claude Code | 司令塔・エンジニア | 実際にコードを書き、PC上でシステムを組み上げるメインスタッフ |
| GitHub | 設計図の保管庫 | Astroのコードや設定ファイルを安全に保存・管理する |
| Notion | コンテンツ管理 (CMS) | 記事やニュースなど、中身のデータをストックする原稿用紙兼データベース |
この組み合わせは、エンジニア界隈で「ヘッドレス構成」と呼ばれる、非常に洗練された最先端のサイト制作アプローチです。
本来、制作会社に依頼すれば数百万円以上の予算と3〜6ヶ月の制作スケジュールが組まれる規模の内容ですが、Claude Codeをバディとして駆使することで、非エンジニアの私でもわずか数ヶ月で完成させることができました。
いままでのサイト制作の常識が、文字通りひっくり返ってしまったのです。
私がやったこと、かかったコスト
「非エンジニアがサイトをつくった」と言っても、私がやったことといえば、驚くほどシンプルです。
- Claude Chatに、旧サイト（STUDIO）のURLやスクショを見せる
- 「AI時代に最適なサイトにアップデートしたい」という意思を伝える
- 数分で上がってくるコンサルレベルの改善案に目を通し、フィードバックを返す
- Claude Chatが生成してくれたプロンプトを、Claude Codeにそのままコピペする
- 各種アカウントを連携・セットアップし、あとは「ああしてほしい、こうしてほしい」をすべて日本語のテキストで伝える
これだけです。
実際に発生するコストはこんなかんじです。
| 項目 | プラン | 日本円換算 |
|---|---|---|
| Claude Code（Chat含む） | Max $100/月 | 約16,000円（月額） |
| GitHub Pro（Team） | Personal $4/月 | 約640円（月額） |
コードは1行も書いていません。行ったのは、自然言語（日本語）での対話と、旧サイトからの記事移植にともなうコピペ作業だけです。
プロンプトの指示が多少曖昧であっても、Claude Codeは文脈を汲み取り、柔軟に対応してくれます。なぜなら、彼は単に指示されたコードを出力するだけのツールではなく、自律的に思考してタスクを完遂する「AIエージェント」だからです。
これまでノーコードツールのエディタ画面で、挙動に悩みながらガリガリとテキスト・数値をいじっていた苦労とは、もうさようなら。
これからの時代に求められるのは、コードを書く技術ではありません。「自分は一体、なにを成し遂げたいのか」を純粋な言葉にするスキルであり、いかに「上質な願い」を持てるかという、情熱の時代が到来したのだと確信しています。
激動の「バイブコーディング」を経て、次なるパラダイムへ
……と、ここまで素晴らしい未来の話をしてきましたが、もちろんすべてが平坦な道のりだったわけではありません。
今回、初めてAIと対話しながらサイトを構築する「バイブコーディング（Vibe Coding）」に挑んだため、正直に言えばかなり回り道もしました。
「全体の文脈を読み解き、よかれと思ってよしなに対応してくれる」というAIエージェントの素晴らしい性質は、裏を返せば、デザインのトンマナのばらつきや、予期せぬソースコードの複雑化（肥大化）を招く原因にもなります。
LP（ランディングページ）のような独立した1枚もののサイトであれば、勢いで乗り切っても問題ありません。しかし、コーポレートサイトのようにページ数が多く、階層が複雑なサイトを破綻させずに運用していくためには、人間側、とりわけデザイナーによる「発想の大転換」が必須であることにも気づかされました。
次回の記事では、私が数ヶ月間、毎日のようにPC（Claude Code）にかじりつき、泥臭く対話を重ねる中で見えてきた「具体的なノウハウ」と「リアルな苦労」を記録してみたいと思います。
そこには、これまでのデザインの常識を覆す、コペルニクス的転回とも言える「パラダイムシフト」が隠されていました。
なかなか興味深い内容になる予感がしています。
To be continued…