AIを使えば、Webサイト制作はどこまで変わるのか。

デザイン案をつくる。コードを書く。別案を試す。修正する。少し前までならそれぞれに時間がかかっていた作業を、いまはAIと一緒にかなり速いペースで進められるようになりました。

では、AIを使えばそのまま公開できるWebサイトまで簡単につくれるのか。

それを確かめる意味も含めて、今回アウル株式会社では自社のコーポレートサイトを全面的につくり直しました。

デザイン、フロントエンド実装、スマートフォン対応、問い合わせフォーム、AI相談、アクセス解析、セキュリティ、公開環境まで。できるだけ制作工程そのものにAIを組み込んでいます。

そして、その方法で実際につくったものが、いまご覧いただいているこのWebサイトです。

AIで画面だけをつくったデモではありません。実際に公開し、問い合わせを受け、これから運用していくWebサイトとして組み上げています。

なお、今回のリニューアルでは、人間がデザインやコーディングを直接行った箇所はありません。

デザインとコーディングそのものはAIが担当しました。人間が行ったのは、方向性を決めること、複数の案を比較すること、採用するものを選ぶこと、そして実際の画面や動作を確認しながら判断することです。

だからといって、「AIに任せておけば勝手に完成した」というわけでもありませんでした。

むしろ今回やってみて分かったのは、何をAIに任せ、どこで人が判断するのか。その設計自体がWeb制作の重要な工程になってきているということでした。

デザインができることと、公開できることは別だった

今回の制作では、まずAIを使って複数のデザイン案をつくり、比較しながら方向性を決めていきました。

この段階だけを見ると、本当に速いです。

一つの案をつくるだけでなく、まったく違う方向を試したり、前の案へ戻ったり、気になる部分だけ変えたりできる。

以前よりはるかに多くの案を比較できるようになりました。

ただし、画面上で完成度の高いデザインができても、それがそのまま公開できるWebサイトになるわけではありませんでした。

画面幅が変わったときの挙動。HTMLの構造。読み込み速度。アクセシビリティ。検索エンジンが読める状態になっているか。問い合わせや外部サービスが本当に動くか。

デザインだけでは見えない部分がかなりあります。

今回も、AIがつくったデザインをそのまま本番へ置くのではなく、実際の運用を前提としたProductionコードへ改めて組み直しました。

見た目が完成していることと、Webサイトとして完成していることは別でした。

これは実際につくってみて、かなり強く感じたことの一つです。

一番変わったのは、制作時間より「試せる回数」

AIを使って特に大きく変わったと感じたのは、単純な制作時間よりも、試行回数を増やせることです。

「もう少し明るくしたい」

「このグラフは違う」

「スマートフォンでは別の見せ方の方がいい」

「やっぱり前の案と比較したい」

以前なら、こうした変更を繰り返すほど制作コストも増えていきます。

AIを使うと、その比較をかなり高い頻度で繰り返せます。

今回のサイトも、一つの案を最初から正解として進めたわけではありません。

複数の方向を試し、比較し、実装し、実際のブラウザで見て、また修正する。その繰り返しでした。

AIによって「一発で正解が出るようになった」というより、納得できるところまで何度でも試せるようになった。

この変化の方が、制作への影響は大きいのかもしれません。

AIも、全部同じ仕事をさせない方がよかった

制作を進めるうちに、AIの使い方も変わりました。

デザインを考えるAI。Productionコードを書くAI。大量のコードや設定を確認するAI。文章やサイト全体の方向性を一緒に考えるAI。

最初から最後まで一つのAIへ任せるより、工程ごとに役割を分けた方が結果は安定しました。

一方で、「どの案を採用するか」「この見せ方はOWLらしいか」「この文章は本当に読みやすいか」といった部分まで、自動的に正解が出るわけではありません。

むしろAIで選択肢が増えるほど、最後の判断は重要になります。

AIを増やせば勝手に品質が上がるのではなく、どのAIに何を任せ、どこを人間が判断するかまで含めて制作工程を設計する。

今回の制作では、この考え方がかなり重要でした。

Webページだけをつくっても、サイトは完成しない

今回、想像以上に比重が大きかったのが画面の外側でした。

たとえば、このサイトのCONTACTには通常のお問い合わせフォームに加えて、AIと相談内容を整理してから問い合わせへ進める機能があります。

AIにつなげれば終わりではありません。

botによる不正利用をどう防ぐか。APIを大量に使われて想定外の費用が発生しないようにするにはどうするか。入力された内容をどう扱うか。問い合わせメールをどう安全に届けるか。

実際に公開するなら、そこまで考える必要があります。

WebサイトはCloudflareで配信しながら、従来から利用しているメール環境はXserverに残す構成にしました。

アクセス解析、Cookieの扱い、Privacy Policyも、実際の仕組みに合わせて整えています。

画面だけなら、もっと早く完成していたと思います。

でも、実際に使えるWebサイトにするところまで含めると、裏側の設計が占める割合はかなり大きい。

これも今回あらためて分かったことでした。

AIを使ったら、人が暇になるわけでもなかった

AIによって減った作業はたくさんあります。

コードを一から書く時間。同じ修正を複数ページへ反映する作業。別案をつくる作業。確認項目を洗い出す作業。

以前より明らかに速くなっています。

ところが実際には、AIによってできることが増えた結果、以前ならやらなかったところまで試すようになりました。

3案つくれるなら、もう少し見たくなる。

実装が速いなら、別の方法も比較したくなる。

AI機能を追加できるなら、デモではなく実際に使えるところまでつくりたくなる。

よく「AIによって、10人必要だった仕事を2人でできるようになる」と言われます。

もちろん、そういう場面もあると思います。

ただ、今回の制作で感じたのは少し違いました。

2人で10人分をやるというより、今までなら手を出せなかった領域まで、同じ人数でつくれるようになる。

デザインだけではなく、開発、分析、インフラ、AI機能まで。扱える範囲そのものが広がっていく。

今回の自社サイト制作では、こちらの感覚の方が近いものでした。

AIでWeb制作はかなり変わる。それでも最後は実物を見る

AIを使ったWeb制作は、もう実験だけの話ではないと思います。

デザインも実装も、実務で使えるところまで来ています。

ただし、AIが出したものをそのまま公開することと、AIを制作工程に組み込むことは別です。

実際のブラウザで見る。

スマートフォンで触る。

文章を読む。

問い合わせを送ってみる。

メールが本当に届くか確認する。

公開後も壊れない構成になっているかを見る。

最後はやはり、実物で確認する工程が残ります。

いまご覧いただいているこのサイト自体が、今回の試行錯誤からできた実物です。

完成したからそこで終わりではなく、公開後も実際に使いながら改善していきます。

今後のINSIGHTSでは、今回の制作で実際に試したことを、もう少し具体的に分けて紹介していく予定です。

AIでつくったデザインを本番サイトへ移してみて起きたこと。Claude DesignとClaude Codeの連携を実際に試して分かったこと。仕様は合っているのに見た目が違ったVisual QA。AI APIを実装して実際にかかったコスト。公開したAI機能を不正利用や想定外の課金から守る方法。

一般論ではなく、自分たちで実際に試したものを材料にしていきます。