AIをWebサイト制作にどう活かすか？運用の流れと、工程ごとの工夫

AIは、Webサイトの文章やデザイン案の作成、コードの記述、ページの実装など、制作の各工程をサポートしてくれます。一方、実際の制作・運用では、調査、情報設計、デザイン、実装、検証といった工程ごとに、AIへの指示や渡す情報、確かめる点が変わります。

普段の打ち合わせや確認の裏側で、AIと人はどのように役割を分け、次の工程へつないでいるのか。この記事では、制作を一緒に進めている皆さまに向けて、その流れを一般的な活用例でご紹介します。

AIの使いどころは、一つのサイトの中にもいくつもある

最近の変化は、AIに文章やコードの案を出してもらう段階から、作業そのものを任せる段階へ進んでいることです。OpenAIのCodexやAnthropicのClaude Codeは、既存のコードを読み、複数のファイルを修正し、コマンドを実行するなど、開発の工程に入り込んでいます。

ただ、Web制作で使うAIは、コードを書く場面だけに登場するわけではありません。調査の論点を洗い出す、ヒアリングの記録を整理する、ページ構成を比較する、テスト項目を考えるなど、工程の中に細かな使いどころがあります。その都度、目的に合う道具と情報を選び、出てきた結果を確認して使います。

例えば「問い合わせボタンを大きくする」という依頼でも、先に確かめたいのは、問い合わせが少ない理由です。そもそも見つけてもらえていないのか、価格や実績が伝わっていないのか。AIに案を出してもらう前に問いを整理し、案が課題に合っているかを人が判断します。

工程を細かくしたり、使うツールを増やしたりすること自体が目的ではありません。必要な専門判断を積み重ね、前の工程で分かったことを次へ渡すことで、手戻りを減らし、品質や成果につなげる。そのためにAIを組み込む、という考え方です。

調べる、聞く、組み立てる。設計はここから始まる

最初に、事業の目的と成果の指標をそろえます。相談件数を増やしたいのか、採用応募の質を上げたいのか。顧客がどう情報を集め、比較し、意思決定するかを整理し、以降の判断の基準にします。ここからは、各工程での一般的なAI活用例を見ていきます。

① 調査

AIには、競合サイトの比較軸や、顧客が持ちそうな疑問の候補を整理してもらえます。人は元の情報と更新日を確認し、推測と事実を分け、自社に関係する論点を選びます。次のヒアリングへ渡すのは、調査結果の羅列ではなく、確かめたい仮説と質問です。

② ヒアリングの整理

共有の了承を得た記録を、利用するAIのデータの扱いに合わせて入力し、要点や未確認事項の整理を補助してもらいます。人は発言の意図や背景を確かめ、決定事項と検討中の話を分けます。クライアントの皆さまには、顧客像、商品の正しい仕様・価格、現場でよく聞く質問などを確認いただき、それを設計の前提として残します。

③ 情報設計

AIでページ構成や導線の複数案をつくり、比較のたたき台にします。人は、検索や広告から来た人が必要な説明、実績、料金の目安を確認し、納得して行動できる順序かを判断します。次のデザインへは、ページ構成に加え、各ページの役割、優先する情報、承認済みの文章と未確定箇所を渡します。

確認した内容は、共通の要件資料にまとめ、更新日や判断の理由も残します。同じことを工程ごとに最初から伺うのではなく、この資料を引き継ぎ、新しく分かったことや変更点を確認していく。AIにも毎回必要な前提を渡すことで、工程ごとの認識のずれを減らします。

見た目から動作まで。案をつくるたび、確かめる

④ デザイン

AIには、レイアウトや配色、画像の方向性を比較するための案づくりを補助してもらいます。人はブランドらしさ、伝えたい内容との一致、表現や素材の利用条件を確認します。次へ渡すのは見本画像だけでなく、文字や余白、色のルールと、そのデザインを選んだ理由です。

⑤ UI・UX

AIで、画面の遷移や入力エラー、送信完了など、見落としがちな利用場面を洗い出します。人はスマートフォンでの操作や読みやすさ、必要な情報へのたどり着きやすさを確かめます。例えばフォームの項目追加では、営業に必要な情報と、入力する方の負担、保存・管理する情報の増加を一緒に考えます。ここで決めた画面の状態や動作条件を、実装の仕様として渡します。

⑥ コーディング

AIには、決まった仕様に沿う実装や、既存コードの修正案づくりを任せられます。人は既存の仕組みとの整合性、CMSでの更新のしやすさ、外部サービスとの連携、情報を扱う権限などを確認します。変更履歴を残し、実装した内容、影響する範囲、確認すべき条件をテストへ引き継ぎます。

⑦ テスト

AIには、テスト項目や自動テストの案、エラーの原因候補を整理してもらいます。人はその項目が仕様を十分に確かめられるかを確認し、実際の画面や端末で、表示、入力エラー、通知先への到達、表示速度、検索向けの設定などを検証します。「AIが問題ないと言った」だけでは完了にせず、結果を記録して修正・再確認します。公開・運用へ渡すのは、確認結果、残る課題、公開前の承認事項です。

こうした工程をつなぐのが、プロジェクトマネジメントです。目的・予算・納期に照らして優先順位をそろえ、変更が他の工程へ与える影響を整理します。クライアントの皆さまとも、誰が何を承認するか、どこまでを今回対応するかを共有して進めます。

公開は通過点。安全も、日々の運用で支える

2026年10月16日、Web制作プラットフォームのStudioは、クラウド環境への不正アクセスと情報流出の可能性を公表しました。10月17日更新の公式発表では、脆弱性の修正と経路の遮断を済ませた一方、第三者による実際のデータ取得は確認できておらず、取得されたものとみなして対応すると説明しています。対象範囲などの調査は継続中です。

この事例だけから、AIやノーコードが原因だと結論づけることはできません。考えたいのは、利用するサービスや外部連携も含めて、問題が起きたときに対応できる運用になっているかという点です。

サイトが表示されていても、問い合わせ情報や認証情報に問題が生じる可能性はあります。どのサービスに何を保存しているか、誰が管理権限を持つか、重要なお知らせを誰が確認するかを把握しておく必要があります。更新の担当、バックアップと復旧方法、事故発生時の連絡先も、利用環境に合わせて決めておきます。

AIに実装を任せる際も、顧客情報や秘密情報の入力範囲、作業に与える権限、公開前に人が確認する箇所を整理します。速く変更できるからこそ、変更履歴を残し、問題があれば戻せる状態にしておくことが重要です。

専門家に依頼しても、安全を完全に保証できるわけではありません。そのため、制作会社、利用サービス、自社それぞれの担当範囲を明確にし、異常に気づいた後の判断や対応まで決めておくことに意味があります。

⑧ 運用

AIには、必要な情報だけに絞った作業記録の要約や、更新手順のたたき台づくりを補助してもらえます。人は記録や公式のお知らせを確かめ、対応の要否と優先順位を判断します。利用サービス、権限、バックアップ、連絡先を整理し、変更した内容と確認結果を次の担当者や改善の工程へ渡します。対応が必要なお知らせを受け取った際に、誰が判断し、誰に連絡するかまで決めておくと、制作側とクライアント側が協力して動きやすくなります。

数字と現場の声を、次の改善へつなぐ

⑨ マーケティング分析

AIには、個人を特定する情報などを除いた集計データから、流入経路やページごとの反応を整理し、変化の候補を探す作業を補助してもらいます。人は計測が正しいか、広告や季節など別の影響はないかを確認します。閲覧数だけでなく、問い合わせの内容や成約につながったかも見ながら、次に確かめる仮説と改善案を設計へ戻します。

ここで役立つのが、クライアントの皆さまが日々感じている現場の反応です。「この説明を見たお客さまは話が早い」「この質問が増えた」といった声は、数字だけでは分からない手がかりになります。すでに共有した顧客像や商品情報を土台に、変わった点を持ち寄り、何を改善するか、どの反応で成果を確かめるかを一緒に決めていきます。

制作から運用までの流れは、調査して、設計して、形にして、確かめて、反応を次へ返す循環です。AIはその中のさまざまな作業を進めやすくし、人は情報の正しさや事業とのつながりを確かめ、全体の判断をそろえます。

ギビングでも大切にしたいのは、皆さまと共有した目的や判断を、次の工程までつなぐことです。制作側からは、なぜその案にしたのか、何を確認しているのかを分かりやすく伝える。皆さまからは、商品や顧客についての知識、現場の変化を共有いただく。AIを活用するほど、このやりとりを丁寧につなぎ、公開後も改善を重ねていきたいと考えています。