AIでホームページ制作は可能か?Webデザイナーが5日間で試した結果

にリースはお応えします!
AIでホームページは本当に早く作れるのか。そして、実際に使える品質になるのか。
結論から言うと、AIを使って5日間で公開までたどり着けました。
ただし、デザインの方向性と公開前の確認は人の目で判断する必要があるというのが率直な感想です。
この記事では、5日間の制作の流れと実際に感じたAI活用のポイントをご紹介します。
目 次
AIでホームページ制作に挑戦した背景
最近は「AIでホームページが作れる」という話をよく聞くようになりました。
AIを使うとホームページ制作はどこまで早くなるのか。
そして、仕事で使える品質に仕上がるのか。
真相を確かめるべく、今回自社サイトの制作工程で挑戦させていただきました。
ちなみに目標は5日間で公開まで行うことです。
(正直に言えば、どこまでできるか不安もありました…。)
今回制作した自社サイト

制作したのは、リースエンタープライズの関連会社であるAIOマーケティング株式会社のコーポレートサイトです。AIOマーケティングは、AI検索への対策(AIO対策)やChatGPT広告の運用を行っている会社です。
約10ページで、トップページ、サービスページ、ブログ、お問い合わせフォームなどを作りました。
サイトマップとページ構成は、制作の前に社内で決めてありました。
トップページでは、スマホの画面の中でAIが質問に答えていく様子を動きで見せています。
「AIに会社の名前を挙げてもらえるようにする」というサービスの内容をひと目で伝えたかったからです。
こだわったポイント

ファーストビューは、「何の会社か」が一目で分かることを最優先にしました。
スマホの中でAIが質問に答える動きを主役に置き、文字だけで説明するより、見た瞬間に「AIに会社名を挙げてもらうサービスだ」と伝わるように考えました。
配色や見せ方、お問い合わせの導線、スマホでの操作性など、デザイナーとして5日間でできる限りこだわりました。
5日間の制作スケジュール
制作には何日かかったのか
今回は約10ページのコーポレートサイトを5日間で公開しました。
複数のAIやデザインツールを使って試行錯誤しながらの挑戦となりました。
ページ数や内容によって期間は変わるはずです。ここからは、日ごとの流れを紹介します。
1日目:トップページの方向性とファーストビューを作成
まずはサイト全体の雰囲気と、トップページを開いて最初に目に入る部分(ファーストビュー)を決めました。
AIに何パターンも作ってもらいましたが、どれもあと一歩しっくりきません。
何度か作り直してもらったところで一旦ギブアップ!

結局自分でデザインを作り、それを元にAIで実装しました。
形が見えてきたところで、AIの1日の使用上限に達して終了です。
2日目:トップページの仕上げとイラスト制作

トップページを調整しながら、サイト内で使うイラストを探したり、一部作成をしました。
AIでのイラスト生成は想像以上に時間がかかり、とにかく容量を使います…。この日も上限に達して終了です。
3日目:サービスページの制作

サービス紹介のページは、納得がいくまで調整を繰り返しながら作りました。
中身が決まっていたので、見せ方に集中できた日です。
4日目:残りのページとフォームの制作

ブログやお問い合わせフォームなどを制作し、テスト用のサーバーで動作を確認しました。
5日目:最終チェックと公開
フォームの調整や最終チェック、検索対策などを行った後、無事に公開となりました。
ここまでかかった時間はちょうど5日間!
有料版を使用しているとはいえ、毎日容量との戦いでした…。
ギリギリでしたが、何とか期限内に公開までたどり着けてよかったです。
AIでサイトを作ってわかったこと
ここからは、実際にAIに対して感じたことを書きます。
今回の1件に限った感想ですが、これからAIでの制作を考えている方の参考になれば嬉しいです。
デザインの方向性は人が決めたほうがいい
サイトの構成やデザインのルールをAIだけで100%作るのは難しいと感じました。
言語化や指示の仕方が上手くなれば良いのかもしれませんが、具体的なイメージがあるなら作った方が早いな、と感じる場面もありました。
今回は土台となるサイトマップとページ構成を社内で事前に話し合って決めてあったため、制作はとてもスムーズに進みました。このベースがなければ、もっと時間がかかっていたと思います。
色や文字の雰囲気、情報の見せ方、スマホで押しやすいかどうかは、自分で考えてから形にしてもらいました。
AIは頼んだことにはすぐに応えてくれますが、目指すゴールが決まっていないとなかなかしっくりくる形にならないと感じました。
AIは「この会社らしさはどこにあるのか」「見る人はどこで迷うか」までは考えてくれません。
ここは人が考える部分だと感じました。
コード・サーバーの知識はあったほうがいい
コード・サーバーの知識がある人が使う方が上手く活用できる上に時短になると感じました。
AIが最初に作ったファイルは、ぱっと見では完成しているように見えます。ところが中身を見ると、「こうはならんやろ」と思うファイルが多かったり、下層ページの内容がサイトマップと合っていなかったりしました。
サイトは公開後も更新していくものです。直しておきたい箇所はかなりの数がありました。
知識があると、AIへの依頼を具体的にできるので話が早く進みます。
作業中に「あれ?」と思ったときも、すぐに指摘できます。ちなみに指摘するとAIは「そうですね」とあっさり認めてきます。
中身を見ておかしな点に気づけるかどうかで、仕上がりは大きく変わると思います。
公開前のチェックは人の目で行う
AIが作ったものは、ぱっと見がきれいでも細かいところに問題が残っていることがあります。
そこで公開前には、お問い合わせのメールがきちんと届くか、スマホやタブレットで表示が崩れていないか、不自然な文章が残っていないかを一つずつ確認しました。
GoogleとAI検索の両方に伝わるサイトに

AIOマーケティングはAI検索への対策を行う会社です。そのため、サイトそのものもGoogleとAI検索の両方に内容が伝わるように作りました。
ページごとにタイトルと説明文を見直し、会社やサービスの情報を検索エンジンに伝える仕組みも入れています。
AIを使ったホームページ制作のメリット
AIをうまく使うと、制作期間を短くできると感じました。
今回短くなったのは、コーディングの部分です。特に、3Dを動かすのは自分一人の力では難しかったと思います。
公開までが早くなれば、その分費用も抑えやすくなります。
浮いた時間を、デザインや使いやすさの見直しに回せるのも大きな利点だと思いました。
一方で、AIに任せきりにすると、見えないところに問題が残ったまま公開してしまう恐れがあります。
早く作れるところはAIに手伝ってもらい、大事なところは自分で判断して確認する。
今回はこの進め方でうまくいきました!
ホームページのご相談は、リースエンタープライズへ
「なるべく早くホームページを公開したい」
「AIで作れると聞いたけど、自分たちでやるのは不安」
「いかにも“AI感”が強いサイトは嫌だ」
そんなときは、お気軽にリースエンタープライズにご相談ください!

リースエンタープライズはお客様と寄り添い、
お客様と共に一つの問題解決に取り組みます。
あなたのやりたい、叶えたいを、なんでもお聞かせください。
- 著者.
- Webデザイナー 藤原
- 役職.
- WEBデザイナー
入社3年目、ヒアリングからデザイン、コーディングまでオールインワン型でWeb制作を行う。グラフィックデザインも担当し、業種やデザインテイストを問わないデザインとユーザーが希望する機能の提案・実装まで担当できる本社勤務のエースWEBデザイナー。
