この記事でわかること
- AIを使ってWebサイトを作るときの、企画から公開までの流れ
- 「いきなり見た目から作る」とつまずきやすい理由
- AIに任せられる作業と、人が判断するべき場面の分かれ目
AIを使えば、Webサイトの見た目を数時間で形にできる時代になりました。けれど最近は、「見た目はできたものの、その先で止まってしまった」という話も増えています。
原因は、サイトの目的や「誰に何を伝えるサイトなのか」を明確にし、情報設計をきちんと行わないまま、見た目から作りはじめてしまうことにあります。設計ができていないと、途中で構成が定まらず公開までたどり着けない、なんとか公開しても自社らしさが伝わらない、公開後の更新が続かない、といった問題があとから出てきます。
この記事では、AIを使ってWebサイトを作るときの全体像を、企画から公開後の運用の入口まで整理します。
AIでUIだけ先に作って、途中で詰まる流れが増えている
最近のWeb制作でよく見るのが、「数時間でサイトらしいものはできたが、そこから先で止まる」という流れです。
AIに指示すれば、色や配置が整ったWebサイトの見た目は短時間で作れます。けれど、自社の情報を入れようとすると、ページ構成が伝えたい内容に合っていない、文章を入れても会社の雰囲気が出ない、公開後にどう更新すればいいか分からない、といった壁にぶつかります。
その結果、「ここから先はプロにお任せしたい」と途中で相談するケースも出てきます。引き継ぐ側からすると、土台が定まらないまま外側だけ作られた状態を受け取ることになり、作り直しに近い手戻りが発生することもあります。
理由はシンプルで、見た目に入る前にやるべきことを飛ばしているからです。自社の独自性を言葉にしないまま進めると、AIが出してくる平均的で無難な表現を「きれいにまとまっている」と受け取ってしまい、自社が一番伝えたかったことから少しずつ離れていきます。
Webサイト制作の全体の流れ
Webサイト制作は、おおまかに次の10のフェーズに分けられます。
- 企画・要件定義
- 情報設計
- コンテンツ作成
- 素材準備
- トンマナ整理
- デザイン
- 技術選定
- 機能実装
- 公開準備
- 公開後の運用の入口
このうち最初の5つは、見た目に入る前の準備です。プロの制作現場では、ここに多くの時間をかけます。AIで作ろうとすると、つい6つ目のデザインから始めてしまいがちですが、前半の整理が不足していると、あとから構成や文章、運用方法で詰まりやすくなります。
見た目を作る前に時間をかける5つのフェーズ
企画・要件定義では、サイトの輪郭を決めます。誰に何を伝えるサイトなのか、どのような機能を採用するか、最終的に誰がどのように更新していくのかなどを整理します。
想定読者と、その人に何を伝え、どう動いてほしいかを言葉にし、自社の何が他社と違うのかも整理します。機能については、お知らせ、事例紹介、問い合わせフォーム、資料ダウンロード、採用情報、ブログなど、目的に必要なものを選びます。機能を増やすほど運用の負担も増えるためです。更新体制についても、誰がどのページをどのくらいの頻度で更新するのかを、作る前に決めておきます。Webサイトは作って終わりではなく、公開後に運用が始まる場所だからです。
AIは、この整理の壁打ち相手として使えます。事業内容を入力し、想定読者・必要な機能・更新体制について問いかけてもらうと、頭の中にある考えを見える形にしやすくなります。
情報設計では、ページ構成を決めます。単に項目を並べる作業ではなく、読者がどこから入り、どこで迷いやすく、問い合わせまでどう進むかを考えながら組み立てます。たとえば宮城県の製造業の会社でも、想定読者が協業先を探す調達担当者なのか、採用候補の若手技術者なのかで、トップページに置くべき情報は変わります。
コンテンツ作成では、文章を書きます。下書きや推敲にはAIを活用できますが、AIが書く文章はどこかで読んだことのある表現になりがちです。「お客様第一」「品質にこだわります」「地域に根ざして」といった言葉は頼めば自然に出てきますが、多くの会社に当てはまる言葉で、自社の独自性にはなりません。AIの下書きから、自社にしか書けない一行を見つけて残し、あとは削ります。これが自社の言葉に置き換えるということです。
素材準備では、画像や写真を集めます。現場、働く人、自社の建物、商品、設備などの写真は、生成画像では代わりになりません。一方で、トップページのキービジュアル、キャンペーンのバナー、コラム記事のタイトル画像といった、写真ではなくイメージで見せる素材はAIでも作れます。
トンマナ整理は、フォントや色だけの話ではありません。デザイン全体、文章の語り口、写真の選び方、余白の取り方も含めた、サイト全体の雰囲気の設計です。
ここで他社サイトのベンチマークが効いてきます。ただし、そのまま真似するわけではありません。どんな要素が良いと感じるのか、自社に取り入れたいのはどこか、逆に自社には合わないのはどこかを分析し、取捨選択していきます。目指すのは、他社の良いところを取り入れた上で、自社らしさが伝わるトンマナを作ることです。ChatGPTやClaudeのプロジェクト機能を使えば、整理した内容をマークダウンファイルにまとめ、日々のやり取りの中で育てていくこともできます。
見た目を作ってから公開までで詰まりやすいところ
デザインでは、一貫性に注意します。AIが提案するデザインは、どこかで見たことのあるきれいさにまとまりがちで、各ページだけを見ると整っていても、サイト全体で見ると雰囲気や余白、見出しの扱いがばらつくことがあります。前段で整理したトンマナをAIに読み込ませ、判断軸として使うと、ばらつきを抑えやすくなります。
技術選定では、自社で更新できる構造になっているかを軸に考えます。自社で進めるなら、STUDIO（スタジオ）のようなノーコードツールを使えば、自社でも形にしやすくなります。STUDIOは国産サービスで日本語のサポートがあり、無料プランから始められ、デザインの自由度も公開後の更新のしやすさも備えています。生成AIで一気にサイトを作るタイプのツールも増えていますが、できあがるのは雛形に近いことが多く、細かく磨く段階では結局、企画・情報設計・コンテンツ・素材・トンマナの判断が必要になります。
公開前の確認は、仕上がりに大きく差が出るところです。慣れていないと「ざっと見てOK」で済ませてしまいがちですが、プロの確認はもっと細かく行います。余白や文字の位置を1ピクセル単位で確認し、揃って見えるだけでなく実際に揃っているかを見ます。問い合わせフォームは実際に送信して、通知や自動返信が想定通り届くかを確かめます。表示は、PCだけでなくスマホの実機でも開き、複数の機種やブラウザで見え方を確認します。リンクも、ひとつずつクリックして遷移先を確かめます。公開前の確認は、作る作業と同じくらい大切です。
公開して終わりではなく、運用の入口を整える
Webサイトは、公開して終わりではありません。むしろ公開は、運用の出発点です。
公開直後にGoogle Search ConsoleとGA4の初期設定を済ませておくと、検索でどう見られているか、どのページが読まれているかを確認できるようになります。
作ったサイトをどう運用していくかは、AIでWebサイトを運営する完全ガイドで詳しく整理しています。
まとめ
Webサイト制作の重心は、見た目を作る前にあります。AIで作る時代になっても、それは変わりません。むしろ、見た目を作る速度が上がった分、事前の整理がより重要になっています。
まずは、「誰に何を伝えるサイトなのか」を1行で書いてみるところから始めてみてください。そこが、AIを使ったWebサイト制作の出発点になります。
Q&A
Q1. AIで作ったサイトと、制作会社が作ったサイトは、見た目で違いが分かりますか？
A. 見た目だけでは、差が分かりにくくなっています。差が出るのは、ブランドの一貫性、公開後の運用、数字を見ながら改善するときです。1ページだけ見ると整っていても、サイト全体で見ると雰囲気が揃っていなかったり、更新を続けるうちに最初の方針から離れていったりすることがあります。
Q2. 既存サイトをリニューアルする場合も、この記事の進め方でいいですか？
A. 基本の流れは同じです。ただし、リニューアルでは「現状の棚卸し」がより重要になります。今のサイトでどのページが見られているか、どこから問い合わせが来ているか、どの情報が古くなっているかを先に整理します。そのうえで、企画・要件定義に進みます。AIには、現在のページ内容を読み込ませて、強みや弱みの整理を手伝ってもらうこともできます。