ホームページ制作の現場が、この1,2年でかなり変わってきました。
以前は、ヒアリングをして、要件を整理し、サイトマップを作り、ワイヤーフレームを作成し、デザインを固め、コーディングし、CMSに組み込み、テストして公開する、という流れが一般的でした。もちろん今でもこの流れ自体は消えていません。ただし、各工程の進め方が大きく変わっています。
今は、構成案、キャッチコピー、ページ見出し、デザイン初稿、HTML/CSSのたたき台、FAQ、画像案、改善案まで、AIがかなりのスピードで下支えするようになりました。つまり、Web制作は「人が順番に全部作る仕事」から、「人が方向を決め、AIで試作・生成・改善を高速に回す仕事」へと変化しています。
FigmaはFigma Makeで、自然言語から機能するプロトタイプやサイト表現を高速に作れる。
WebflowはAI site builderで、プロンプトから本番につながるサイトの土台を生成できる。
WordPress.comもAI website builderで、会話しながらサイトを作り、内容やレイアウトの調整まで進められる。
AnthropicのClaude Codeは、コードベースを読み、複数ファイルをまたいで編集し、実装ができる。etc…
様々なAIツールが台頭し、どれを使っていけば良いのかさえ、わからなくなりそうなくらい、多くのサービスが登場しています。
ただ、ここで誤解してはいけないのは、AIが普及したからといって、誰でも同じ品質のサイトが作れるようになったわけではないことです。むしろ、AIでたたき台が速く出せるようになった分、何を作るべきかを決める力、どこを直すべきかを見抜く力、事業成果につながる設計をする力の差が、以前よりはっきり出るようになりました。
この記事では、従来のWeb制作フローとAI時代のWeb制作フローを比較しながら、どこが変わったのか、どんなツールが使われるようになったのか、そして各工程にかかる時間の違いまで含めて詳しく解説します。
従来のWeb制作フローとは
まず、従来のWeb制作フローを整理すると、一般的には次のようになります。
- ヒアリング
- 要件定義
- サイトマップ設計
- ワイヤーフレーム作成
- デザイン制作
- コーディング
- CMS実装
- テスト・修正
- 公開
- 更新・保守
この流れ自体は今でも有効です。ただし、従来型は人が順番に積み上げていく直線型の制作になりやすく、途中修正に時間がかかりやすいという特徴がありました。
従来のWeb制作フローと所要時間の目安
1. ヒアリング・要件定義
所要時間の目安：3日〜1週間
クライアントへのヒアリングを行い、目的、ターゲット、必要ページ、機能、予算、納期などを整理します。ここが曖昧だと、以降の工程がすべてぶれます。
2. サイトマップ設計
所要時間の目安：2日〜5日
必要ページを洗い出し、全体構造を組み立てます。会社案内型サイトか、集客型サイトか、採用型サイトかで構成は大きく変わります。
3. ワイヤーフレーム作成
所要時間の目安：3日〜1週間
各ページに何を載せるかを整理し、ページ構成を可視化します。トップページだけでなく主要下層ページも作ると時間がかかります。
4. デザイン制作
所要時間の目安：1週間〜3週間
トップページと下層ページのデザインを作ります。初稿、修正、再提案が入るため、最も時間がかかりやすい工程の一つです。
5. コーディング
所要時間の目安：1週間〜3週間
HTML、CSS、JavaScriptでデザインを実装します。レスポンシブ対応、アニメーション、フォーム調整などもここに含まれます。
6. CMS実装
所要時間の目安：3日〜2週間
WordPressなどに組み込み、更新可能な仕組みにします。カスタム投稿や一覧表示が増えると工数が伸びます。
7. テスト・修正
所要時間の目安：3日〜1週間
ブラウザ確認、スマホ確認、フォーム送信確認、細かい表示調整などを行います。
8. 公開準備・公開
所要時間の目安：1日〜3日
ドメイン、サーバー、SSL、リダイレクト、解析タグ設置などを整理して公開します。
従来フロー全体の所要時間
全体目安：1.5か月〜3か月前後
撮影や原稿作成、確認待ちを含めると、さらに伸びることもあります。特に「最初の初稿を出すまで」に時間がかかるのが従来型の特徴です。
従来のWeb制作でよく使われていたツール
- ドキュメント作成：Word、Excel、PowerPoint、Googleドキュメント、スプレッドシート
- 情報設計：XMind、PowerPoint、Figma、Adobe XD
- デザイン：Photoshop、Illustrator、Figma、Adobe XD
- コーディング：VS Code、Sublime Text、Dreamweaver
- バージョン管理：GitHub、GitLab
- CMS：WordPress
- 公開環境：各種レンタルサーバー、VPSなど
- 解析：Google Analytics、Search Console
この時代の特徴は、ツールごとに役割がかなり分かれていたことです。設計は設計、デザインはデザイン、実装は実装で、それぞれの工程を人間がつないでいました。
AI時代のWeb制作フローは何が変わったのか
AI時代に入って変わったのは、Web制作フローそのものが完全に別物になったというより、各工程の速度と試行回数です。
今のAI時代の制作フローは、ざっくり言うと次のようになります。
- ヒアリング・戦略整理
- AIで要件・構成・コピーのたたき台を生成
- AIでワイヤー・デザイン・UI案を高速試作
- AIでコードやページ構成を生成
- 人が編集・調整・品質管理
- CMSやノーコード基盤に組み込み
- 公開後もAIで改善提案・更新支援
ポイントは、従来のような直線型ではなく、反復型・試作型になっていることです。先にたたき台を作って見せ、それを見ながら構成やデザインを詰めるやり方がしやすくなりました。
AI時代のWeb制作フローと所要時間の目安
1. ヒアリング・戦略整理
所要時間の目安：1日〜5日
ここは大きくは減りません。むしろAI時代ほど、人間側の目的整理が重要です。ただし、議事録整理や論点の要約、競合観点の整理をAIが補助できるため、少し短縮しやすくなります。
2. 要件・構成・コピーのたたき台生成
所要時間の目安：半日〜2日
以前なら数日かかっていたサイト構成案、ページ見出し案、キャッチコピー案、FAQ案などをAIで高速に作れます。複数案を同時に比較しやすいのも大きいです。
3. ワイヤー・デザイン初稿の高速試作
所要時間の目安：半日〜3日
ここが最も変わった部分の一つです。以前はトップページ初稿だけでもかなり時間がかかりましたが、今はAIで構造やUIの土台を一気に試作し、そこから絞り込めます。
4. コードやページ構成の生成
所要時間の目安：1日〜5日
コーディングAIや生成系ツールを使えば、基本レイアウト、コンポーネント、セクション単位のHTML/CSS/JSの土台をかなり速く作れます。
5. 人による編集・調整・品質管理
所要時間の目安：3日〜2週間
AI時代でもここは重要です。むしろ、AIで出たものを見て「何を残し、何を直すか」を判断する工程の比重は増えています。ブランド調整、情報精度、導線設計、使いやすさの調整は人の仕事です。
6. CMS・ノーコード基盤への組み込み
所要時間の目安：2日〜1週間
WordPressやノーコードツール、ホスティング環境へ組み込んで公開準備を進めます。生成ツールが増えても、この工程は一定必要です。
7. 公開後の改善・更新支援
所要時間の目安：継続運用型
ここがAI時代らしい部分です。FAQ追加、文言改善、LP案、ブログ構成、ABテスト仮説などをAIで日常的に回しやすくなりました。
AI時代フロー全体の所要時間
全体目安：2週間〜1.5か月前後
もちろん本格案件ではさらにかかることもありますが、少なくとも「最初のたたき台を見せるまで」の速度はかなり上がっています。これがAI時代最大の変化です。
AI時代のWeb制作で使われる代表的なツール
1. 企画・文章・要件整理AI
ChatGPT や Claude のような生成AIが、構成案、見出し案、コピー、FAQ、提案書たたき台の補助に使われます。
2. デザイン・UI試作AI
Figma Make は、AIで機能するプロトタイプをすばやく作り、Figma Designで編集を行うことができるようになっています。
3. サイト生成AI
Webflow の AI site builder は、プロンプトから fully customized, production-ready website を生成できると案内しています。つまり、単なるモックではなく、本番につながる土台づくりまで入っています。
4. CMS内AI・運用支援AI
WordPress.com の AI website builder は、会話形式でサイトを作り、AIがレイアウトや文章生成を担い、ユーザーがそこから調整できると案内しています。さらに、数分で機能するサイトを作れるとしています。
5. 実装・コーディングAI
Claude Code は、コードベースを読み、ファイルを編集し、コマンド実行まで行える agentic coding tool として提供されています。複数ファイルをまたいだ実装・修正補助ができるのは従来との大きな違いです。
従来フローとAI時代フローの比較まとめ
従来のWeb制作
- 要件整理は人中心
- 構成案はゼロから作る
- デザイン初稿に時間がかかる
- コーディングも手作業中心
- 修正の戻り工数が大きい
- 公開後の更新が止まりやすい
- 全体所要時間は1.5か月〜3か月前後
AI時代のWebサイト制作
- 要件整理のたたき台をAIで高速化
- 構成・見出し・コピーを短時間で複数生成
- デザイン初稿を即座に試作しやすい
- コード生成や修正補助が使える
- 仮説検証の回数を増やしやすい
- 公開後の改善や更新にもAIを使いやすい
- 全体所要時間は2週間〜1.5か月前後
つまり、単に「早くなった」だけではありません。試行回数が増え、途中修正に強くなったことが大きな違いです。
AI時代になって、ディレクターや制作会社の役割はどう変わったか
AIが普及すると、「制作会社はいらなくなるのでは」と思われがちですが、実際には逆です。AI時代ほど、方向性を決める人の価値が上がります。
1. 何を作るべきかを決める力が重要になった
AIはたたき台を大量に出せますが、そもそも誰に向けて何を作るべきかは、人が決める必要があります。
2. 出力の良し悪しを見抜く目が必要になった
AIのアウトプットは一見それっぽいですが、成果につながるか、ブランドに合っているかは別問題です。
3. 進行管理より意思決定支援の比重が上がった
昔のディレクターは進行管理の比重が大きかったですが、今は「何を捨て、何を残すか」を判断する力がより重要です。
つまり、AI時代のディレクターは、作業管理者というより、設計責任者・編集責任者に近づいています。
AI時代になっても変わらないもの
- 目的が曖昧だと良いサイトはできない
- ターゲット理解は人間の仕事
- 情報設計が弱いと成果は出ない
- 公開後に育てる視点が必要
AIで速く作れても、目的がズレていればズレたサイトが速くできるだけです。だからこそ、企画と設計の重要性はむしろ増しています。
AI時代のホームページ制作で本当に重要なこと
これからのホームページ制作で本当に大事なのは、AIを使うこと自体ではありません。
- AIでどこを速くするか
- 人がどこを判断するか
- 公開後にどう改善を回すか
を整理することです。
AI時代の制作会社やWebディレクターに求められるのは、単にツールに詳しいことではなく、AIを使っても品質と成果を落とさず、むしろ改善回数を増やせることです。
まとめ
AI時代のホームページ制作は、従来のフローを完全に壊したわけではありません。ただし、各工程のスピードと往復回数を大きく変えました。
従来のWeb制作は、人が順番に積み上げて作るモデルでした。AI時代のWeb制作は、人が方向を決め、AIで試作・生成・修正を高速に回すモデルです。
所要時間の目安で見ても、従来型は1.5か月〜3か月前後、AI時代型は2週間〜1.5か月前後まで短縮しやすくなっています。特に、初稿を出すまでの速度と、そこからの試行回数は大きく変わりました。
ただし、本質はスピードそのものではありません。
AIで作れることが増えたからこそ、何を作るべきかを決める力がより重要になった。
これが、AI時代のホームページ制作で一番大きく変わったポイントです。
