08. MCP入門

この章では、MCPの基本的な考え方を学びます。

MCPは、AIと外部ツールやデータをつなぐための仕組みです。

Web制作では、デザインツール、ファイル、ドキュメント、ブラウザ、データベースなどをAIから扱いやすくする考え方として理解しておくと役立ちます。

MCPとは

MCPは、AIが外部の情報やツールを扱うための共通的な接続の仕組みです。

AIは、会話だけでは手元のファイルや外部サービスの情報を直接扱えません。

そこで、外部ツールとAIの間をつなぐ仕組みが必要になります。

MCPを使うと、AIが次のような情報にアクセスしやすくなります。

ただし、MCPは魔法の機能ではありません。

AIに何を見せるか、何を操作させるかを設計するための仕組みです。

MCPでは、ざっくり言うと、AIを使う側と、外部ツールを提供する側があります。

用語	役割
MCPクライアント	AIを使うアプリ側
MCPサーバー	AIに外部機能や情報を渡す側

たとえば、AIエディタがMCPクライアントになり、ファイル操作やデザインツール連携を行うMCPサーバーにつながる、というイメージです。

初心者のうちは、細かい実装よりも「AIと外部ツールをつなぐ仕組み」と理解できれば十分です。

AIに外部情報を渡せると、会話だけではできなかったことがしやすくなります。

たとえば、Web制作では次のような場面があります。

AIに文脈を渡せるほど、出力は具体的になります。

MCPは、その文脈を渡す手段の1つです。

Web制作でMCPが役立つ場面は、今後さらに増えていくと考えられます。

代表的な場面は次の通りです。

特に、デザインと実装をつなぐ場面では便利です。

ただし、AIがデザインを完全に理解してくれるわけではありません。余白、視線誘導、ブランドらしさ、操作感は人間が確認します。

Figma MCPのような連携では、AIがFigma上のデザイン情報を参照しやすくなります。

これにより、次のような相談がしやすくなります。

デザインからコードを完全自動生成するというより、実装の前提資料としてAIに読み取らせるイメージです。

MCPは便利ですが、扱う情報が増えるため注意も必要です。

AIが外部ツールを操作できるようになるほど、便利さとリスクは両方増えます。

初心者のうちは、MCPサーバーを自作するところまで理解する必要はありません。

まずは、次の3つがわかれば十分です。

使う場面が出てきたら、具体的なツールごとに設定方法を確認すれば問題ありません。