第2回：次世代Web制作フロー：AIエージェントとMCPで「設計ドリブンな制作チーム」をつくる

AIや周辺技術の進化によって、Web制作の現場は大きく変わりつつあります。

一方で、「ツールは増えたけれど、現場の忙しさはあまり変わっていない」と感じている方も多いのではないでしょうか。

本記事では、MCP（Model Context Protocol）とAIエージェントを前提にした「次世代Web制作フロー」をテーマに、人は設計と判断に集中し、AIは実行と更新を担うチームづくりについて考えていきます。

目次

• 1. なぜ今「次世代Web制作フロー」が必要なのか
• 2. 目指すゴール：人は「設計と判断」、AIは「実行と更新」
• 3. 従来フロー vs 次世代フローの比較
• 4. 次世代フローを支える3つのキーコンセプト
• 5. 実装における課題と向き合い方
• 6. まとめ：AIとともに「設計ドリブンな制作チーム」へ

1. なぜ今「次世代Web制作フロー」が必要なのか

まずは、なぜいま制作フローを見直す必要があるのかを整理します。

AIの台頭によるWeb制作の民主化

ChatGPTやGeminiなどの生成AI、FigmaやWix Studioのようなノーコード／ローコードツールの進化により、Webサイト制作は以前よりも身近なものになりました。

簡単なランディングページやブログであれば、「テンプレート＋AI」で形にできてしまう時代です。

しかし、だからといってすべてをAIに丸投げしてよいわけではありません。

ブランド体験やビジネスゴールを踏まえた設計は、まだまだ人間の判断が重要だなと感じています。

AIはあくまで「強力なアシスタント」。設計や判断を助けてくれる存在として捉えることが現実的だと個人的に考えています。

業界一般で指摘されている課題

多くのWeb制作プロジェクトは、いまも次のような流れを踏んでいます。

設計 → デザイン → 実装 → テスト → 修正 → 公開。

規模によっては、この一連のサイクルに数カ月～数年かかることも珍しくありません。

特に時間と工数が集中しやすいのが、デザイン・構築・テストの中盤のフェーズです。

ページ数やバリエーションが増えるほど、人的リソースに負荷がかかります。

多くの制作現場で見られる状況

その結果として、次のような状況に心当たりがある方も多いはずです。

• 情報設計やUXなど、上流の設計に十分な時間を割けない
• 「まずは作る」ことが優先され、体験全体の整合性が曖昧になりがち
• メンバーごとのスキル差・情報格差によって、成果物の品質にバラつきが出る

本来もっと時間をかけたいのは、戦略や設計の部分。

そこにリソースを寄せるためにも、構築以降のフローを見直す必要があります。

2. 目指すゴール：人は「設計と判断」、AIは「実行と更新」

次世代フローで目指したいのは、とてもシンプルな役割分担です。

人間が担う部分

• 要件定義（ビジネスゴール、KPI、ターゲットの整理）
• 情報設計（サイトマップ、導線設計、コンテンツ構成）
• 体験設計（UX、ブランド体験の全体像）
• 最終レビュー・意思決定（品質と方向性の判断）

つまり、人は「何を」「なぜ」「どのように届けるか」を決める役割に集中します。

AIエージェントが担う部分

• 設計の枠組みに沿ったコンテンツ草案の生成
• テキストや画像など、量産が必要なパーツの作成
• ルール化しやすいデータ加工やフォーマット変換
• 既存ドキュメントの更新や整理

再現性が高く、ルールで縛りやすい部分をAIエージェントに任せるイメージです。

理想の状態

「決める作業」は人間、「実行する作業」はAIというワークフローが理想形です。

設計フェーズでも、AIにレビューさせることで「抜け漏れチェック」や「アイデアの壁打ち」ができます。

また、設計書やガイドラインの更新をエージェントが補佐することで、常に最新のナレッジをチームで共有しやすくなります。

人は判断とコミュニケーションに集中。AIは実行と更新を支える。

その組み合わせで、チーム全体のパフォーマンスを底上げしていくイメージです！

3. 従来フロー vs 次世代フローの比較

従来のWeb制作フロー

従来のフローは、工程ごとに役割が切り替わる「リレー型」が中心です。

1. 設計
2. デザイン
3. 実装
4. テスト
5. 修正
6. 公開

それぞれの工程は分かりやすい一方で、「前工程に戻る」たびに時間とコストがかかります。

また、担当者が変わるたびに文脈の引き継ぎが必要になり、情報のロスや認識ズレも発生しがちです。

次世代Web制作フローの全体像

次世代フローでは、MCPとAIエージェントを活用しながら、各工程をできるだけ並行・自動化し、人は少人数で全体を見渡すことを目指します。

※これから挙げるツールは、個人的に試しているものです。あくまで参考程度にご確認ください。

文脈データは「なるべく一箇所に」

ポイントは、AIが判断するための文脈データをできるだけ集約しておくことです。

たとえば、ChatGPTとGeminiを両方使う場合、それぞれに別々の情報を渡していると管理が大変になります。

毎回エージェントに「この案件はこういう背景で…」と説明し直すのも非効率です。

※GPTsやGems、Skillsとして事前に登録することもありですが、それらをアップデートしていく手間が増えるので使うときはルーティン化がされているものがいいかもしれません。

Notionなどに「案件のハブ」となるスペースを作り、最新情報をまとめておくと、MCPを経由して

• どのエージェントから見ても一貫したコンテキストが手に入る
• 開発・検証時のトークン消費も抑えられる

といったメリットがあります。

設計・要件定義（人間中心＋AIによる抜け漏れチェックと壁打ち）

まずは人間が、案件のゴールやターゲット、制約条件などを整理します。

このとき、Notion AI Agent や Google Gemini Agent に「抜け漏れチェック」や「アイデアの壁打ち」をお願いすると、

• 抜けている要件の洗い出し
• ユーザー目線の質問リスト
• 優先順位のたたき台

といった提案を出してくれます。

コンテンツ生成と更新（ライティングエージェント）

次に、ライティングまわりをエージェントに任せていきます。

• Notion AI Agent, Google Gemini Agent … 記事案・構成案・文言候補の作成
• Adobe Firefly, Google Gemini Nano-Banana, Figma … ドラフト画像の生成

たとえば、Notionで原稿のドラフトをまとめておき、

「この内容をもとに、画像生成用のプロンプトを作ってください」とAIエージェントに依頼すると、かなり精度の高いプロンプトが出てきます。

テキストと画像の準備を、ある程度まとめてエージェントに任せるイメージです。

デザイン・構造案の生成（人間＋デザインエージェント）

• Adobe Firefly, Google Gemini Nano-Banana … 画像生成とラフ案
• Figma … モックアップ・UI/UX設計

ここでも、ベースとなる設計やコンテンツは人間が主導します。

一方で、AIにバリエーションを出してもらい、良いところを組み合わせて最終案に近づけていく流れです。

特に、Notion MCP を利用して、Notionでまとめたドキュメントを Figma Make（Figma AI Agent）に読み込ませると、

• ページ構成に沿ったワイヤーフレーム案
• モックアップ

などを生成してくれるようになってきています。

実装・コーディング（開発エージェント）

実装フェーズでは、Cursor などのAI対応エディタや各種コード用エージェントを活用します。

Notion MCP と Figma MCP を組み合わせれば、設計情報とデザイン情報を参照しながら、コード生成を進めることも可能になります。

さらに、CursorではClaude や ChatGPT、Gemini など複数モデルを併用できるので、

• それぞれの得意分野を活かしたコード提案
• レビューと修正案の自動提示

といったフローも構築できます。

自動テスト・自動修正（QAエージェント＋開発エージェント）

• Cursor
• プロジェクトタスクツール（LinearやGitHub、Jira、Asana、Mondayなど）
• 各種QAテストツール

テストフェーズでは、Lighthouse や各種チェックツールの結果をエージェントに解析させ、

• 課題リストの自動作成
• 修正方針のドラフト
• 単純な修正の自動適用

といった流れを組むことができます。

最終レビューとデプロイ（人間）

最後の「これで公開してよいか」の判断は人間が行います。

判断・調整・決定以外の作業は、できる限りエージェントに任せていく。

これが次世代フローの大きな方向性です。

4. 次世代フローを支える3つのキーコンセプト

ワークフローの自動化と高速化

次世代フローでは、AIエージェントが各工程を並行処理します。

• コンテンツ案の生成と、画像ドラフトの生成を同時に進める
• 実装とテストを短いサイクルで回す

といった形で、全体のリードタイムを短縮します。

人は、要所要所でレビューと意思決定に集中するだけで済むようになります。

専門性の民主化

MCPとAIエージェントを活用すると、「専門家でないと難しかった領域」にもアクセスしやすくなります。

• デザインの知識が浅くても、デザインエージェントがUI案を提案
• コーディング経験が少なくても、開発エージェントが実装修正をサポート

結果として、「できる人にだけ仕事が集中する」状態から、チーム全体でフローを回せる状態へと近づけます。

情報レベルの平準化と自動アップデート

AIエージェントにドキュメント更新を任せることで、

• 仕様変更時に、関連ドキュメントをまとめて更新
• 新しいルールやベストプラクティスをガイドラインへ自動反映

といった運用がしやすくなります。

属人化しがちなナレッジをエージェント経由で共有することで、各スタッフの情報レベルを均等に保つことができます。

5. 実装における課題と向き合い方

技術的な課題

もちろん、良いことばかりではありません。

まずは、技術面でのハードルがあります。

• MCPや各種エージェント機能の実装・統合がまだ発展途上であること
• 既存ツールとの連携に時間がかかること
• 仕様変更やアップデートの頻度が高く、追従コストが発生すること

そのため、いきなりすべてを新フローに置き換えるのではなく、まずは一部の工程からスモールスタートで検証するアプローチが現実的です。

チーム・組織側の課題

もう一つの大きなポイントが、チームや組織側の変化です。

役割の再定義

AIエージェントが作業を担うようになると、Web制作者の役割は少しずつ変わっていきます。

• 「作業者」としての手を動かす役割から
• 「設計者・ディレクター」として全体を設計・評価する役割へ

特に、複数エージェントのアウトプットを横断的に見て、

• ビジネスゴールに合っているか
• ブランド体験として一貫しているか

を判断できる人材の重要性が高まります。

品質管理プロセスの更新

AIが生成したコンテンツやデザインをどのようにレビューするかも課題です。

• どの段階で人間がチェックするのか
• どの基準でOK／NGを判断するのか
• AIエージェント用のルールやプロンプトを誰が管理するのか

といった点を、チームとして話し合っておく必要があります。

今後の技術展望：A2A（Agent to Agent）の登場

今後さらに注目されるのが、エージェント同士が自律的に連携する A2A（Agent to Agent）の仕組みです。

• デザインエージェントがUIを作成し、その結果をコーディングエージェントへ連携
• QAエージェントが問題を検出し、修正エージェントにタスクを自動依頼

といった流れが、人間の介入なしに進んでいく未来も想定されています。

もちろん、すぐにすべてを任せることは現実的ではありませんが、どこまでをAI同士に任せるか、どこで人が介入するかを考えることが今後ますます重要になっていきます。

6. まとめ：AIとともに「設計ドリブンな制作チーム」へ

AIエージェントとMCPを前提にした次世代Web制作フローは、

• 構築・テストフェーズの負担を減らし
• 上流の設計や体験デザインに人のリソースを振り向け
• 情報更新とナレッジ共有をエージェントが補佐する

そんなチームへのシフトを後押ししてくれます。

いきなり企業全体で標準フローを入れ替えるのは難しいかもしれません。

まずは、1プロジェクト、1工程から。

• 単純作業・量産・データ加工はAIエージェントへ
• 人は設計・体験・戦略・レビュー・意思決定に集中
• ナレッジ管理と情報更新は、エージェントと一緒に行う

このサイクルを小さく回しながら、自社に合った「次世代Web制作フロー」をチューニングしていくことが現実的な一歩だと感じています。

AIを脅威としてではなく、頼れるパートナーとしてチームに迎え入れること。

そのための「設計」と「フローづくり」こそ、これからのWeb制作に求められるテーマかもしれません。