こんにちは、Webflow専門家からAI最先端を常に追っているマサトです。
Web春のサイトをリニューアルしました。サイト全てAIでリニューアルです。構築だけなら3日、企画を含めて7日。今回はその制作過程を、実際のログごと全部公開します。
何をやったのか
- 26ページの静的ページを新規構築（トップの桜のアニメーション込み）
- 旧サイト（Webflow）から記事62本・実績24件を移行
- お問い合わせ・資料請求など4フォームの接続
- GA4・Search Console・構造化データ・sitemap・llms.txtの整備
人間は僕ひとり。手を動かしたのはAI（Claude Code）です。
僕は今までの経験からターゲットを絞り、それに合わせたサイトへとリニューアルしています。
大体1週間で完成しました。そのうち大半は企画部分です。
7日間の内訳｜AIでのリニューアル工程
Day 1｜企画とゴール設定
企画戦略から。流入経路はどこなのかターゲットは誰なのか今までどういった顧客が多かったかなど情報を棚卸してリニューアルで達成するゴールを設定しました。
Day 2｜移行とデザインの方向性定義
旧サイトの記事と実績をスクレイピングで抽出して移行。現在公開されている情報とターゲットが合っているかを確認し、各素材などをローカルへ落とし込みました。この際、一緒にデザインの根幹となる部分を定義し、色味やボタンの配置、表現したい方向性を明確に定義しました。
Day 3｜デザインを50パターン作る
新しいデザインをHTMLベースで作成。デザインはおそらく50パターンほど作成しました。トップページに重きを置き、気に入らない場所のどこが気に入らないかをAIに伝えつつ、3パターン作成を繰り返し進めていきました。
Day 4｜サイトマップと下層ページ
トップページ完成後、明確にサイトマップを作成。最初にサイトマップを作成しなかったのは、AIに変な制約をつけたくなかったからです。一般的に言えば、サイトマップは最初に作るものなので、今回は少しイレギュラーなステップだったといえます。このサイトマップをもとに下層ページを一気に作成しました。
トップページでデザインが決まっていれば、それを参考に下層ページを作成していくだけなので、デザインの作業は大幅に短縮できます。
Day 5｜SEO最適化とAstro構築
全ページのSEO最適化、AI最適化を行い、CMSの記事ページや実績ページなど現状のサイトから移行し、詳細ページはまずHTMLで1ページだけデザインを作成しました。その後、Astroでの構築に移行しました。Next.jsではなく、Astroを選んだ理由はCloudflareとの互換性が良いことや読み込み、スピード等からSEO媒体として最も高いパフォーマンスを出せると確認しているからです。
Day 6｜連携とテキスト精査
Googleタグやフォーム、Cloudflareなどの連携を行い本番更新手前まで持っていきました。なんとここからサイト全体のテキスト精査と企画との照らし合わせ、GA4などから導き出した数字でのサイトの方向性を再定義。AIで作ったページには自分が想定していない文言や数値がたくさん入っていたため、それらを一気にまとめて精査しました。
Day 7｜全ページ目視チェック→公開
全ページ目視でチェックします。実際にサイトを訪れているのは、日本の会社で働いている方やサイト制作を依頼したいと思っている企業の代表の方だったりするので、企業の情報を間違えて掲載するわけにはいきません。そのため、全編チェックし間違いがないかをチェックしました。チェック後、公開しました。
以上のような流れで、明確にAIサイトを作成していきましたが、正直言うとデザインがうまく生成できるようになるまで、約1ヵ月ほど、AIでゴミを大量に作成してしまいました。プロンプトや言葉の表現を調整するのが非常に難しく、また途中まで作ったサイトを一度切り捨てて0から作り直すと言う判断やバックエンドが必要になる項目が生まれてきた際になかなかうまく生成できないことなどもありました。すべてサーバー費も無料で運用する方法にたどり着くまで、それだけの時間がかかりました。
とはいえAIは日々進化しています。今回はClaude CodeのOpusとFableを使用して作成を進めましたが、AIがサイトを作成するということにおいては、もうすでに頂点レベルに達しているんじゃないかと考えています。作りたいものを明確に指示すればほぼ何でも作成可能です。ただどんな情報を掲載し、どんなデザインが信頼性を与えるかと言うことについては、まだまだ人間が考える必要がある領域です。
特に、ウェブサイト制作にあたっては、ノーコードツールがある時代から作成は素人にでもでき、とても簡単でした。しかしどういったデザインを作り、どういった見せ方をするか、どういったターゲットに情報を届けるのかに関しては、まだまだ専門職の仕事があるように感じています。
その一方で、無料ではありませんが、月額約30,000円ほどのAIを課金すれば、約1ヵ月の努力できれいなサイトを作成できるまで成長できると考えています。もちろん僕の場合は、もともとデザインの知識も構築の知識もSEOの知識も全てあったため、そこの基礎学習は必要ありませんでした。
そういった基礎学習を行い、将来長い間、自らサイト運用していくというのはこれから費用を抑えて広報活動を行っていきたい会社さんにはうってつけの手法になることでしょう。しかし、その一方で、常に流行を追い続け、最先端の技術を常に導入し続けるのは人によっては大変なはず。
その点、僕は流行を常に追いかけることを趣味のように行っています。そして当社で運用しているサイトは常に最新の情報が出たらそれを適用するサイトにしています。
上記のように、サイト制作には、ヒアリングを含めて、約1ヵ月の時間を要します。実際の作業時間は7日程度であるかもしれませんが、それは前提が全て固まっている状態を意味しています。
僕（人間）は何をしていたのか
繰り返しになりますが考えて実行する事は全て人間が担当します。AIは言われたことをやることしかできません。
- コンセプトと構成の決定（何を伝えるサイトか）
- デザインの審美判断
- 文章の事実確認と、営業判断（価格・見せ方）
- 各工程のレビューとGOサイン
つまり、手を動かすのがAI、判断するのが人。この分担が品質を決めます。
ある意味、わがままな社長は自分でサイトを作るべきだと思います。
脳内にある美しいイメージと、それを実際に形に落としてみた時、それが美しいかどうかと言ったのは、全く別の話で、脳内キラキラのまま何でもかんでも詰め込もうとする。結局見た目は綺麗だけど、ぐちゃぐちゃなサイトが出来上がるでしょう。僕はそれを整頓する役目。
それを整頓してくれるのもAIなんですが、なんとも人間は非効率なもので、AIの提案を却下してどんどんごちゃごちゃにしちゃいます。僕も最初はそうだった。だから方針を決めるのが重要です。
最初は大手案件向けにカスタムしようと思っていました。
しかしPV数や顧客の流入経路から、ターゲットはやはりスタートアップや中小企業が良いと言う判断をしました。事業自体は、2020年から行っているし、JTBや日本テレビの案件を受けたこともありますが、これらは再現性が低いものだと判断しました。全体の10%程度にしかならず、残りの90%はスタートアップやこれから事業を始める方またはリニューアルしたい方が多かったこともあり、また大手の与信審査に受かるほどの保険に入るなどする気になれなかったからです。
やってみて分かったこと
先に結論を3つ。
- 細かい微調整は、ノーコードで力技をやっていた頃より遅い
- 知らない言語・技術の壁は、ほぼ消えた（App Storeアプリも出せた）
- AI任せ100%で公開すると、どのサイトも同じ顔になりブランド価値を下げる
正直言って時間が短縮できたかと言えば、まだよくわかりません。
見た場所をそのまま修正できるわけじゃないので、例えばアバウトとブログのセクションの間を少し広げたいなと思った時、今までであればそこの箇所をクリックしてマージンを広げるだけでした。しかしAIになるとそこだけを広げてといってもあまりうまくいかないし、デザインがきれいに見えなくなってくる。つまり少しの調整=全体調整へと発展していくわけです。
もちろんそれは綺麗なデザインが出来上がるし、良いことだと思うんですが、実際力業で無理矢理調整していたときの方がいろいろ早く終わっていたんじゃないかなとぶっちゃけ思います。そんな余白を少し広げる位ただの小さな僕のこだわりでしかなく来たお客さんたちがそれを見て変に思う事はほとんどないでしょう。
そういった無駄な作業が積み上がり、それをなくそうとしてもなかなかなくすことができない。それがAIを使って構築する罠となるかなと思っています。もちろんそれらを全て無視してAIが作ったものだけを修正せずに公開していくのも充分に可能です。ただそういった時AIっぽさが強くなったり、大体すべて同じサイトになって行ってしまうので、そうすると結局ブランド価値を下げノーコードで作っていたほうがよかったんじゃないかと言う結果になってしまいます。
その一方で、知らないコードでも全て扱えるようになった気分です。例えば今私はApp Storeにアプリを複数個リリースしています。App Storeにアプリを登録するためには、Swiftという言語を使わなければいけませんでしたが、企画と戦略、デザインを考えることができれば、どのコードを使おうとなんでも作ることができるようになりました。
まだ対応していない言語やUnityのような3D系のゲームはまだ多少難しいだろうと思いますが、これも時間の問題でしょう。
よくある質問
Q. AIだけでWebサイトは作れる？
実装だけなら作れます。ただし企画・デザインの審美判断・事実確認は人間の仕事です。そこを放棄すると「AIっぽい、どこかで見たサイト」になります。
Q. 期間はどれくらい？
このサイトは構築3日＋企画4日の計7日でした。お客様の案件ではヒアリングを含めて約1ヶ月をみてください。
Q. 費用は？
AIサイト制作は ¥500,000〜（モニター先着5社は ¥350,000）、公開後の運用プランは月額 ¥15,000〜です。
Q. 何のAIを使った？
Claude Code（OpusとFable）です。使い方の解説はAIバイブコーディングの記事に書いています。
この進め方は、商品にしています
AIサイト制作とは、企画・判断・品質チェックを人間が行い、コーディングとページ生成をAIが担うWebサイト制作手法です。このサイトと同じ進め方で作るAIサイト制作を、この記事の公開と同時に募集開始します。
- AIサイト制作: ¥500,000〜（モニター先着5社 ¥350,000）
- 公開後の運用プラン: 月額¥15,000〜（毎月、最新のAI・SEO情報を追いかけて適用します）
