こんにちは、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｜全ページ目視チェック→公開
全ページ目視でチェックします。実際にサイトを訪れているのは、日本の会社で働いている方やサイト制作を依頼したいと思っている企業の代表の方だったりするので、企業の情報を間違えて掲載するわけにはいきません。そのため、全編チェックし間違いがないかをチェックしました。チェック後、公開しました。
以上が7日間の流れです。
ただ、正直に言います。デザインがうまく生成できるようになるまで約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（6〜20ページ一律のフルパック）、公開後の運用管理プランは月額 ¥15,000〜です。
Q. 何のAIを使った？
Claude Code（OpusとFable）です。使い方の解説はAIバイブコーディングの記事に書いています。
この進め方は、商品にしています
AIサイト制作とは、企画・判断・品質チェックを人間が行い、コーディングとページ生成をAIが担うWebサイト制作手法です。このサイトと同じ進め方で作るAIサイト制作を、この記事の公開と同時に募集開始します。
- AIサイト制作: ¥500,000（6〜20ページ一律のフルパック）
- 公開後の運用管理プラン: 月額¥15,000〜（毎月、最新のAI・SEO情報を追いかけて適用します）
制作過程の詳しい記録はAI制作の全記録に。興味があったら、ぜひお問い合わせください。
よくある質問
AIだけでWebサイトは作れますか？
実装だけなら作れます。ただし企画・デザインの審美判断・事実確認は人間の仕事です。そこを放棄すると「AIっぽい、どこかで見たサイト」になります。
AIサイト制作の期間はどれくらいですか？
このサイトは構築3日＋企画4日の計7日で完成しました。お客様の案件ではヒアリングを含めて約1ヶ月が目安です。
AIサイト制作の費用はいくらですか？
AIサイト制作は¥500,000（6〜20ページ一律のフルパック）、公開後の運用管理プランは月額¥15,000〜です。
何のAIを使って作りましたか？
Claude Code（OpusとFable）を使用しました。手を動かすのはAI、コンセプト決定・審美判断・事実確認・公開のGOサインは人間という分担です。
