企画から公開まで工程別に整理｜AIに任せること・人がやるべきこと
Webサイト制作の7つの工程（企画・構成・原稿・デザイン・コーディング・テスト・公開）ごとに、生成AIに任せやすい作業と、人が必ず担うべき判断を整理しました。分担表とプロンプト例つきです。
「AIでサイトを作る」と言っても、実際の制作は企画から公開まで複数の工程に分かれています。どの工程でAIを使えば効果が大きく、どこは人がしっかり見るべきなのかが分からないまま進めると、手戻りが増えたり、品質の低いページが公開されたりする原因になります。
この記事では、Webサイト制作を「企画・構成・原稿・デザイン・コーディング・テスト・公開」の7工程に分け、それぞれでAIに任せやすいこと、人がやるべきことを具体的に整理します。発注する場合も内製する場合も、役割分担を考える土台として使ってください。
工程別の分担を一覧で確認する
まずは全体像です。AIは「たたき台を出す」「量をこなす」「抜け漏れを指摘する」作業が得意で、人は「決める」「確かめる」「責任を持つ」役割を担う、というのが基本の考え方です。
| 工程 | AIに任せやすいこと | 人がやるべきこと |
|---|---|---|
| 企画 | 競合サイトの論点整理の補助、ターゲット像の仮説出し | 目的・ゴール・予算・優先順位の決定 |
| 構成 | サイトマップ案、ページごとの見出し案 | 必要なページの取捨選択、導線の決定 |
| 原稿 | 下書き、言い換え、要約、誤字チェック | 一次情報の提供、事実確認、トーンの調整 |
| デザイン | 配色やレイアウトの案出し、イメージ画像の試作 | ブランドとの整合、採用案の決定 |
| コーディング | HTML/CSSの下書き、修正案、エラー原因の推測 | 動作確認、セキュリティ面の確認 |
| テスト | チェック項目の作成、文章の表記ゆれ検出 | 実機での確認、問い合わせ動作の確認 |
| 公開 | 公開前チェックリストの作成、告知文の下書き | 公開判断、公開後の監視と修正 |
企画・構成：AIは「考える相手」として使う
企画の段階では、AIに答えを出してもらうのではなく、考えを広げる壁打ち相手として使うのが効果的です。例えば、自社の事業内容とターゲットを伝えたうえで「この顧客がサイトで知りたいことを10個挙げてください」と聞くと、自分では思いつかなかった視点が得られます。
構成では、サイトマップ（サイト全体のページ一覧と階層）の案を複数出してもらい、比較するのが便利です。ただし、どのページを作るかは、予算・更新体制・営業の流れによって変わります。AIが提案したページをすべて作る必要はありません。
- プロンプト例：「当社は〇〇を扱う従業員30名の会社です。主な顧客は△△です。問い合わせを増やすためのサイト構成を、最小構成と充実構成の2パターンで提案し、各ページの役割を一言で添えてください」
人がやるべきことは、目的の優先順位を決めることです。「問い合わせ」と「採用」の両方を狙う場合でも、どちらを主にするかでトップページの設計は変わります。
原稿・デザイン：AIの下書きに自社の事実を足す
原稿
原稿はAIの効果を実感しやすい工程です。見出しごとの下書き、長い文章の要約、硬い表現をやわらかくする言い換えなどは、短時間でこなせます。
ただし、AIは自社の実績、価格、対応エリア、社員の想いといった固有の情報を知りません。一般論だけで書かれた原稿は、どの会社のサイトにも当てはまる「誰でも言える文章」になりがちです。人が一次情報を渡し、出てきた原稿の事実関係を必ず確認することが欠かせません。
- プロンプト例：「以下は当社の営業担当が商談でよく話す内容のメモです。これをもとに、サービス紹介ページの本文を400字程度で下書きしてください。メモにない事実は書かず、不足している情報があれば最後に質問として挙げてください」
このように「材料にないことは書かない」「不足は質問で返す」と指示しておくと、AIが推測で事実を補ってしまうリスクを減らせます。
デザイン
デザインでは、配色の組み合わせやレイアウトのパターンをAIに提案してもらったり、画像生成AIでイメージ画像を試作したりできます。方向性を社内で話し合うときの材料として役立ちます。
一方で、ロゴや既存の会社案内との一貫性、見やすさ、誰にでも使いやすいかといった観点は人が判断します。画像生成AIで作った画像を使う場合は、利用規約や権利面の確認も必要です。
コーディング・テスト・公開：最後は人が確かめる
コーディングとは、デザインをブラウザで表示できる形（HTML・CSS・JavaScriptなど）に組み立てる作業です。AIはコードの下書きや、エラーの原因の推測が得意で、簡単なページであれば短時間で形にできます。ノーコードツールを使う場合も、設定方法をAIに質問しながら進められます。
ただし、AIが書いたコードが正しく動くか、スマートフォンで崩れないか、問い合わせフォームが確実に届くかは、実際に動かして確認しなければ分かりません。テストと公開の工程では、次の手順で人が確認します。
- パソコンとスマートフォンの両方で全ページを表示し、レイアウト崩れがないか確認する
- すべてのリンクとボタンを押し、正しいページに移動するか確認する
- 問い合わせフォームから実際に送信し、通知メールと自動返信が届くか確認する
- 会社名、住所、電話番号、価格などの事実情報を原本と照らし合わせる
- 公開する人と、公開後に不具合を見つけたときの連絡先を決めておく
チェック項目の洗い出しはAIに手伝ってもらえますが、チェックそのものは人が行います。公開後も、最初の数週間は問い合わせの届き方や表示の不具合に気を配り、気づいた点をすぐ直せる体制にしておくと安心です。
分担を決めるときの3つの判断軸
自社の場合にどこまでAIに任せるかは、次の3つの軸で考えると整理しやすくなります。
- 間違えたときの影響の大きさ：価格、法的な表記、会社情報など、誤りが信用に直結する部分ほど人の確認を厚くします。
- 自社固有の情報の多さ：実績や強みなど固有情報が中心の部分は、AIより人が書いた材料が主役になります。
- 繰り返しの多さ：似たページを複数作る、表記をそろえるといった反復作業は、AIに任せる効果が大きい部分です。
まとめ
Webサイト制作の7つの工程すべてでAIは役に立ちますが、その役割は「たたき台を出す」「作業を速くする」ことに留まります。目的を決める、一次情報を用意する、事実を確かめる、公開を判断するのは、どの工程でも人の仕事です。
次の一歩として、この記事の分担表を自社用に書き換え、各工程の「人がやるべきこと」に担当者の名前を入れてみてください。制作会社に依頼する場合も、内製する場合も、それがそのまま進行表の土台になります。