第1回：MCP Serverとは？Web制作を変える“つなぐ”技術

新しいAI技術がWeb制作の現場に大きな変革をもたらしています。

今回は前編と後編にわけて、MCP（Model Context Protocol）をはじめとする最新技術を、どのようにWeb制作のワークフローに落とし込めるか考えていきます！

本記事では最新技術について整理していきましょう！

目次

• MCPとは？
• MCPで何ができる？
• AI Agentとは？
• 最近試していること

MCPとは？

MCP（Model Context Protocol）は、AIアプリケーションと別サービス間でコンテキスト情報を標準化して共有するためのプロトコルです。

異なるAIツールやサービスが統一された方法でデータをやり取りできるようにします。

例えると、MCPはUSB-Cに近い役割を担っています。

ノートパソコンとモニターを繋いでくれますよね？MCPも同じ考え方です。

MCPで何ができる？

私たちがよくやっていた作業を、サービスを横断してAIアプリケーションが代わりにやってくれるようになります（このAIアプリケーションが後述するAI Agentです）。

これまでは、ChatGPTやClaude、GeminiなどのAIに指示を出してアウトプットしてもらったら、チャットから離れて別サービスで作業する必要がありました。

加工作業は私たちがやることが大半でした（最近は画像や動画などチャット内で完結できるようになりましたが）。

ただ、仕事でいつも使っているツールは複数あると思うので、ツールへの移動はよく発生しますよね。

MCPを使うと自動化できます。

最近は、NotionやFigmaなど続々とMCPの提供を開始しています。

個人的には上記2つが非常に便利です。

FigmaがMCPについて分かりやすく説明しているので、興味がありましたら是非見てみてください。

AI Agentとは？

AI Agentは、特定の目標を達成するために自発的に考えアウトプットができるAIシステムです。

チャットボットとは異なり、複数のステップを計画し、ツールを使用し、結果を評価して次のアクションを決めてくれます。

このAgentが私たちの代わりの作業者となります。

情報を収集するためにMCPを経由して、外部サービスにアクセスしてくれます。

Web開発関連のサービスでは、CursorやChatGPT Codex、Claude Code、Google Antigravityなど。非常に多いです。

ちなみにFigmaとNotionにもAgent機能があります。

最近試していること

直近のアップデートでNotionとFigmaがつながりました（Figma AI AgentのFigma MakeがNotion MCPに対応）。

Notionでまとめた情報をFigma Makeが読み取り、設計図やデザインモックアップを作成してくれます。

Notion情報と指示内容を工夫すれば、アウトプットの質は段違いに変わるので、いま研究中です！

これを使いこなせれば、デザイン作業の時間を大幅にカット（一番時間がかかる最初のバージョン）して、Notionに書く大元の設計や要件に集中できるので、個人的には有用性を感じています！

まとめ

• MCPは、AIアプリと外部サービス間でコンテキストを標準化して受け渡すためのプロトコル。
• 例えるならUSB-Cのように、異なるツール同士を「同じ規格でつなぐ」役割。
• MCPがあると、これまで人がやっていたツール間の移動や加工を、AIアプリが横断して代行しやすくなる。
• AI Agentは、目標達成のために計画し、ツールを使い、結果を見て次の行動まで決める”作業者”のようなAI。
• 例として、Notionの情報をFigma側のエージェントが読み取り、設計図やモック作成まで進められるようになってきている。
• これにより、特に時間がかかる初期デザイン作業を短縮し、設計・要件定義に集中できる可能性が高い。

MCPとAI Agentをおさえたところで、次回はWebサイト制作フローをどう変えられるか考えていきます！

What is the Model Context Protocol (MCP)?（12/12/2025 閲覧）

Guide to the Figma MCP server （12/12/2025 閲覧）