今話題のMCPとは？APIとの違いや使い方まで徹底解説！FigmaやCursorも提供

公開：2025年4月10日更新：2025年4月10日

だーだい

フリーランスWebライター兼Web製作者。Webライターとしてガジェットメディアやプログラミングに関する記事を執筆する傍ら、LP制作とWordPressの改修案件もこなしつつ、活動しています。 profile

MCPとは

MCP（Model Context Protocol）とは生成AI「Claude」の開発元であるAnthropic社が発表した、AIと外部サービスをつなげるオープンソースプロトコルです。

プロトコルとは、コンピューター同士が通信するときに守るルールのことです。

ファイルの送信やメールをやり取り、Webページを表示するときには、それぞれの目的に合わせた決められた手順＝プロトコルが使われています。

この考え方はAIと外部サービスをつなぐ場面でも同じです。たとえばAIがユーザーのカレンダーを確認したり天気情報を取得したりするには、それぞれのサービスと情報をやり取りする必要があります。従来はサービスごとに異なる仕様に合わせて、個別にコードを書く必要がありました。

しかし一度MCPに対応すれば、同じ形式でさまざまなサービスと連携できます。開発者は個別のAPIごとに細かく対応する必要がなくなり、よりシンプルかつ速く、多くのサービスとAIをつなげることが可能になります。

MCPとAPIの違い

MCPとAPIはどちらもシステム同士をつなぐための技術ですが、それぞれの目的や使い方には違いがあります。

MCPとは

AIとさまざまなサービスとの連携を共通の形式でまとめるしくみです。一度対応すれば、MCPに準拠したサービスと共通の方法でやりとりできます。

APIとは

各サービスが外部に提供している機能やデータへのアクセス手段です。サービスごとに仕様が異なり、連携には個別の実装が必要です。

つまり、APIはそれぞれのサービス専用のやりとり方法であるのに対して、MCPはAIとさまざまなサービスをひとつの仕組みでつなぐための共通ルールです。これによりMCPを使えばAIとの連携が効率化され、開発のスピードも上がります。

開発者が感じる「毎回違うAPIに合わせるのが面倒」という負担を減らしてくれるのが、MCPの大きな特徴です。

Claude DesktopでMCPサーバーを使う方法

Claude DesktopをMCPクライアントとして、他サービスのMCPサーバーを利用する主な手順は下記の通りです。

STEP
1

MCPサーバーのインストール

使用したいMCP対応サーバー（例：Filesystemなど）をインストールします。インストール後、対象フォルダ内に必要なファイル（index.jsなど）があるか確認しておきましょう。

STEP
2

Claude Desktopのセットアップ

Claude公式サイトからデスクトップ版をダウンロードし、インストールします。起動後、Googleアカウントまたはメールアドレスでログインしてください。

STEP
3

MCPサーバーの設定

Claude Desktopの右上メニューから「File > Settings」を開き、「Developer」タブの「Edit Config」を選択します。表示された設定ファイルに、MCPサーバーの実行パスや引数を追記します。パスやユーザー名は自身の環境に合わせて書き換えてください。

STEP
4

Claude Desktopを再起動

設定を保存したら、Claude Desktopを一度終了し、再度起動します。画面右下にハンマーアイコンが表示されていれば、MCPサーバーとの接続が成功しています。

STEP
5

MCPツールの利用

ハンマーアイコンをクリックすると、利用可能なMCP機能が一覧で表示されます。チャット欄に自然言語で指示を入力することで、PC上の操作を実行できます。操作ごとに確認画面が表示されるため、内容に応じて許可方法を選択してください。

Claude MCPの具体的な使い方は以下の記事で詳しく解説しています。

【無料】Claude MCPの使い方！料金プランや活用事例も併せて解説

今注目のMCP一覧

Anthropicが発表したMCPを皮切りに、MCPサーバーを公開するサービスがどんどん増えています。今回はその中でも注目を浴びている以下のMCPをピックアップしました。

Figma MCP
Cursor MCP
Playwright MCP

上記の各MCPの特徴を詳しく解説します。

Figma MCP

Figma MCP（Model Context Protocol）とは、デザインツールのFigmaとAIをスムーズに連携させるための仕組み（プロトコル）です。^[1]

具体的には、AIがFigma内のデザインデータ（レイアウトやスタイルなど）に直接アクセスできるようになり、それを理解・活用してコード生成やデザイン改善のアドバイスを行えるようになります。

Figma MCPを使うことで、デザイナーとエンジニア間のコミュニケーションが円滑になり、デザインをコードへと変換する作業が効率化されます。特にAIを搭載したコードエディタと組み合わせれば、より精度の高いUI実装を迅速に行えるというメリットがあります。

Cursor MCP

Cursor MCPはCursorエディタが外部ツールやデータソースと連携するためのオープンなプロトコルです。Cursorにとっての「プラグインシステム」として機能し、AI（エージェント）がさまざまな外部リソースにアクセスして開発者を支援できるように設計されています。^[2]

MCPを利用することで、Cursorはコードファイルの外にある情報（データベースのスキーマやGitHubの情報など）を直接取得・操作できるようになり、より文脈に沿った支援が可能です。これによりユーザーは自分でデータ構造を説明する必要がなくなり、既存のインフラと自然に統合できるのがメリットです。

さらにCursorのエージェントは、設定済みのMCPツールの中から必要なものを自動的に選択して使用します。ユーザーがツールの呼び出しを手動で指示することも可能。Yoloモードを有効にすれば、ツール実行の都度承認を求められることなくスムーズに連携できます。

Playwright MCP

Playwright MCPはLLMがブラウザ操作を行うための接続手段として、Playwrightのアクセシビリティ情報を活用する構成になっています。視覚情報に依存せずページの構造をもとに動作するため、軽量で安定性が高くAIにとって扱いやすいのが特徴です。^[3]

主な用途としてはWebページのナビゲーションやフォーム入力、構造化されたデータの抽出、AIによる自動テスト、エージェントによるブラウザ操作全般が挙げられます。

Playwright MCPはCLIやVS Code経由で簡単に導入でき、ローカル・リモートどちらの環境にも柔軟に対応します。クリックや文字入力、ファイルアップロード、タブ管理、ページ遷移など幅広い操作に対応しており、ブラウザを介した自動処理をAIに担わせる場面で有効です。

MCP利用時の注意点

MCPは便利である反面、悪用される可能性もあるので利用する際に以下のような注意が必要です。

チームメンバーへの共有ルールを明確にする
MCP設定ファイルの漏洩対策と緊急対応の備え
依存している外部サービスの確認

各注意点について詳しく解説します。

チームメンバーへの共有ルールを明確にする

MCPをチームで利用する場合、誤って機密ファイルを共有してしまうリスクがあります。

Gitに含めるべきファイルとローカルにとどめるべきファイルを明確にし、共有NGファイルやその代替となるテンプレートを用意しておくと情報漏洩のリスクを下げられます。

MCP設定ファイルの漏洩対策と緊急対応の備え

「.cursor/mcp.json」のような機密性の高い設定ファイルは、誤ってGitにコミット・Pushしてしまうことがあります。さらに開発環境やエディタによっては「.json~」や「.bak」といったバックアップファイルも自動生成されるため、これらもあわせて注意が必要です。

.cursor/mcp.jsonはgithubにpushしないように注意!!
流出するとMCP経由でハッキングされます。
.gitignoreファイルを適切に設定しましょう！ pic.twitter.com/3R2NW36r2z
— りくお | DreamCore開発者 (@riku720720) April 10, 2025

あらかじめ「.gitignore」に「*~」「*.bak」などの除外パターンを設定しておくことで、意図しない漏洩を防止できます。また、万が一コミットしてしまった場合に備え、Gitの履歴からの削除方法やAPIキーの再発行手順、社内への通知体制などを事前に準備しておくことで迅速かつ安全に対応することが可能です。