【実物公開】AIで作ったホームページのクオリティは？架空の会社HPで精度を検証してみた
AIが色々騒がれていますが、企業サイトでどこまでできるのか？試してみました。 思ったより良いサイトが作れたので実例で紹介します。
「AIでホームページが作れる」と言われるけれど、実際ビジネスで使えるレベルなのか？
Web制作の現場や、自社サイトの構築を検討している企業担当者の方に向けて、エンジニア・ディレクターのリアルな視点から、その実用性を検証します。
1. 【実物公開】AIだけで作ったデモサイト
結果からお見せすると、今回作成したデモサイトはこちらです。
デモサイト（架空の技術系人材会社HP） https://front.aihp.jp/
まずは一度、デザインや構成、テキストのクオリティを実際のブラウザでご覧ください。
2. 今回の制作環境（使用したAIツール）
今回は、生成AIをどのように活用してこのサイトを構築したのか、その舞台裏を公開します。
何を使ったか？ 今回は、Claude Codeを使いました。
デザインには、あまりこだわらなかったので、最新のClaude 3.5 Sonnet（New）のDesign機能などは使わずに、会話（チャットベース）でコードを生成していく方式を取りました。
もちろん、有料版のClaude Codeですが、他のプロジェクトも回している関係で、最上位のOpusではなくSonnetで作成しました。 「まあ、WebサイトぐらいSonnetで大丈夫かな」という試みもありました。もしどうにもならなかったら、Opusに切り替えてやればいいやという感覚でしたが、結果としてはSonnetで十分なクオリティが出せました。
3. AIに与えた指示（プロンプト）
作ったサイトは、ある程度会社の情報を与えて作ったものです。AIに投げた大まかな指示は以下の通りです。
- 企業サイトを作ってください。
- ページは最低限の数ページ構成でお願いします。
- 技術系の人材を扱う会社です。
- なるべく「人感（温かみや信頼感）」があるようなサイトにしてください。
- 画像は、あとで差し替えるので仮のものでOKです。
これくらいのざっくりとした要件定義からスタートしました。
4. 実際に作ってみて「時間がかかったこと」
AIはコードを爆速で書いてくれますが、「人間の判断」や「実務に合わせた調整」のフェーズでいくつか時間がかかるポイントがありました。
① 架空の会社名・ロゴの選定
実は、最初に時間がかかったのは「会社名」でした。 本来の案件ならクライアントがいるので会社名やロゴは決まっているのですが、今回はデモサイトです。AIが提案してきた会社名はすでに実在する近しい会社があったため、商標やバッティングを避けるために、かぶらない会社名に変更・調整する手戻りが発生しました。
② コーポレートサイトとしてのコンテンツ拡張（社員インタビュー）
当初は1人だけでトップページのみの掲載でしたが、サイトに「人感」を出すために、3人に増やして名前も一般的な名前に変更してもらいました。 それぞれ、その人の特徴（職種やキャラクター）をAIに与えて、インタビュー文章を作ってもらう形に作り変えています。もし実際のクライアントワークであれば、これは「入稿データの精査」にあたる、デモサイトゆえの作業でした。
③ 採用特設LP（ランディングページ）の追加と紐付け
元の構成にLPはなかったのですが、デモとして使いたいと思ったので、「採用特設LPへ」というボタンを作り、リンクを貼っています。AIへの指示は以下のように行いました。
- LPを作ってください。
- ペルソナ（ターゲット層）を与えて、文章を作成してください。
- ヘッダー、フッターは本サイト（コーポレート）とは別のものにしてください。
- デモサイトなので、本体サイトに戻れるように導線を作ってください。
④ 画像の作成と入れ替え
画像は、現在ピカイチの**ChatGPT（DALL-E 3）**で行いました。商用利用（公開サイト）でも使えます。 私はCodex（プログラミング支援）のために有料契約していますが、無料版でも画像生成は可能です。当然ですが、商標や類似性、キャラクター、実在の人物の権利などには注意が必要です。
※なお、今回のデモサイト内の人物写真に関しては、より自然なクオリティを担保するため、フォトサイトからお借りしたものを使用しています。
5. 検証結果：かかった時間と完成度
| 項目 | 内容 |
|---|---|
| 実制作時間 | 約3時間 |
| テキスト・構成 | AIにお任せ（大枠の指示のみ） |
| デザイン・コード | Claude Code（Sonnet）による自動生成 |
文章は全く詰めていないので、じっくり読むとおや？と感じる（AIっぽさが残る）ところが多いのですが、「あまり情報を与えなくてもここまでのものが作れる」というのは、本当にいい時代になったと感じます。
6. プロの視点（エンジニア・ディレクター）から見た感想と現実
やはり「3時間で全てが終わったか」というと、そうでもありません。 コードを作る自体は3時間かもしれませんが、「公開して本当に問題ないか？」というリーガル・クオリティのチェックや、実際のサーバー公開作業など、諸々で最終的には時間がかかってしまいました。
実際のクライアント案件（商業制作）と比較して、各ポジションの視点から思ったことは以下の通りです。
職種別のリアルな所感
- ディレクター視点 📋 AIは作ってくれるスピードは早いですが、指示の出し方や細かい修正のハンドリングを考えると、デザイナーやコーダーのプロにお任せするのと比べて**「ディレクター側の脳内負荷」が非常に高い**です。実案件なら、やはり信頼できるデザイナー・コーダーに任せたほうがクオリティコントロールがしやすいと感じました。
- デザイナー視点 🎨 確かに早いですが、出てくるアウトプットはまだ「新人デザイナーレベル」のデザインです。ユーザー体験やコンバージョンを緻密に「考え抜かれたデザイン」ではないため、物足りなさは残ります。
- コーダー視点 💻 スピードは圧倒的ですが、既存のカッチリ決まったデザインカンプ（Figmaなど）を元に正確に作ってもらっているわけではないため、クライアントワークの細かな修正指示に対応しようとすると、逆にコードが複雑化して面倒になるリスクを感じました。
7. 結論：AIサイト制作との正しい付き合い方
今回の検証を通して、以下のような結論に至りました。
自分でサイト作成するなら最高のツール
街の商店や個人事業主、あるいは「予算が全くないが、自分でなんとか立ち上げたい」といったビジネスにおいて、AIは間違いなく現時点で最高のツールになります。このスピード感と手軽さは圧倒的です。
クライアントワークで使うには、まだデザイナーやコーダーの手間を増やす
一方で、商業用の受託案件（クライアントワーク）において、上流からAIに丸投げする形で組み込むのはまだ現実的ではありません。かえってデザイナーやコーダーの手間を増やしてしまうため、**「デザイナーやコーダーが、それぞれの実務の中で部分的に（独自のノウハウで）AIをツールとして使う」**という形が良いように感じます。
最後に
AIの進化によって「ここまでできる」ということは十分に肌で感じられました。しかし、結局のところ、本当に良いサイトを生み出すために重要なのは、クライアントとの丁寧なコミュニケーション、集まった情報の精査、そして各役割（ディレクター・デザイナー・コーダー）との密な意思疎通にこそ時間をかけることなのだと、改めて痛感させられる検証となりました。