MCPを活用したフロントエンド開発の効率化とは｜AI駆動開発の課題と実践アプローチ

はじめに

AIを活用したシステム開発は急速に進化していますが、現場では「AIでコード生成はできても、実務全体の効率化にはつながらない」といった課題も見られます。

そこで、本記事では、MCP（Model Context Protocol）を活用し、UI実装・テスト・バックエンド連携までのフロントエンド開発全体を一気通貫で効率化する手法について解説します。具体的なツール紹介や実装例を交えながら、AI駆動開発を実務で活かすためのポイントを整理していきます。

AI駆動フロントエンド開発の限界とは

AIエージェント（GitHub Copilot、Cursor、Claude Codeなど）を活用すると、コードの生成を中心に一部の作業は大幅な効率化を図ることができます。しかし、開発者が行っている作業は「コードを書く」だけではないため、AIエージェントが人の作業を代替できる範囲には限界があります。

特に課題になりやすいのは、外部ツールへのアクセスです。たとえば、Figmaからデザインデータを取得したり、ブラウザを開いて動作確認したりする作業が該当します。

AIエージェントでUI実装を進める場合、開発者はFigmaなどの外部ツールから画像を出力し、それを添付してAIにコード生成を依頼する必要があります。手作業のみでコードも書くことと比べれば手間は減りますが、毎回画像を出力して添付する負担は残ります。また、この方法には生成コードの品質が不十分な結果になりやすい問題点もあります。

MCP（Model Context Protocol）による開発スタイルの変化

開発用のAIエージェントが人の手を介さず自らデザインデータを取得できれば、手間を削減してフロントエンド実装をより効率的に進められます。そこで注目されているのがMCPという技術で、MCPが普及することで開発スタイルの変化が期待されています。

MCPとは

MCPは、主にLLM（大規模言語モデル）などのAIモデルと外部ツールを統一的に接続するための標準規格です。標準規格とは、「異なるメーカーや製品の間でも、同じルールでつながるように決めた約束事」であり、例えばPCとキーボード、マウスのメーカーが異なっていても容易に接続でるのはUSB Type-Cという共通の規格のおかげです。

MCPを導入すると、AIエージェントが外部ツールと直接連携できるため、たとえば、AIがSlackへの投稿やNotionのページ作成といった操作を直接実行できるようになります。Figmaのデータを開発用のAIが直接取得してくることも可能になります。

MCPの仕組み

実際にMCPを活用するためには概要を理解しておく必要があるため、フロントエンド開発での導入方法の紹介の前に、簡単にMCPの仕組みをご紹介します。
MCPは、主に次の3つのコンポーネントで構成されます。

下図のように各コンポーネントが連携し、LLMと外部ツールの接続を実現します。

MCP導入で変わるUI実装の手順

いよいよ本題に入ります。MCPを導入することで、フロントエンド開発のあり方はどう変わるでしょうか。核心となるのは、外部ツールとの連携をAIエージェント内で完結できる点にあります。これにより、開発プロセスが効率化されます。

UI実装を例に取ります。

Figmaを利用している場合、公式から提供されているFigma MCPを活用することで、以下のようなフローで開発を進められるようになります。

1. 指示の入力: 開発者は実装対象のFigma URLを添えて、「このデザインをもとにUI実装を進めてください」とAIに依頼します。
2. ツール(AIエージェントが呼び出す関数)の選択: LLMが「デザインデータの取得が必要」と判断し、Figma MCPの関数を呼び出します。
3. データの自動取得: AIエージェントがバックグラウンドでFigmaから詳細なデザインスペックを直接取得します。
4. コンテキストの集約: 取得されたデータがLLMに渡されます。
5. コード生成: LLMはそのデータに基づき、コードを生成します。

この流れでは、開発者の操作は最初に行う「指示の入力」が中心で、その後はAIエージェントが自律的にコード生成まで進めます。
連携する外部ツールが増えるほど、この「AIエージェント内での自己完結」がもたらす恩恵は大きくなり、開発効率は加速度的に向上していくでしょう。

フロントエンド開発を効率化する主要MCPサーバー

まずUI実装の例をご紹介しましたが、MCP導入でバックエンド連携やテストの効率化も期待できます。
続いて、フロントエンド開発で有用なMCPサーバーをいくつか紹介します。

Figma MCP：UI実装への変換

まず、Figma MCP（https://developers.figma.com/docs/figma-mcp-server）です。
Figmaは、ブラウザ上で動作するデザイン・プロトタイピングツールです。

Figma MCPを利用すると、特定のFigmaファイルのデザインURLを起点に、テキスト・色・コンポーネント構造のデータやスクリーンショットをLLMに渡せます。カラーコードや余白の情報も取得できるため、スクリーンショットのみを添付する場合よりAIが細かいデザインを再現しやすくなります。これにより、開発者は従来より効率的にUI実装を進められます。

ただし、Figma MCPは取得できるデータ量（レスポンス）が多いです。その分、LLM側のコンテキストの消費も大きくなるため、大規模なデザインファイルを扱う際は注意が必要です。

Supabase MCP：バックエンド連携の効率化

バックエンドと連携するためのMCPサーバーについても、各プラットフォームが提供を開始しています。
その1つであるSupabaseが提供するSupabase MCP（https://supabase.com/docs/guides/getting-started/mcp）を紹介します。

まずSupabaseとは、アプリケーション開発に必要なバックエンド機能（データベース、認証、ファイル保存など）を、自前でサーバーを用意せずクラウド上で利用できるBaaS（Backend as a Service）です。

Supabase MCPでは、Supabaseプロジェクトを直接操作できます。具体的には、プロジェクト内のテーブル一覧の取得、SQLクエリの実行、マイグレーションの管理などです。

Supabase MCPを利用すると、開発者はAIエージェントとの対話だけでバックエンド情報をLLMに渡したり、テーブルを追加したりできるため、開発者のコンテキストスイッチを抑えられます。一方で、SQLの実行やマイグレーションの適用も可能なため、運用時はセキュリティに関する推奨事項を確認し、慎重に扱うことが重要です。

https://supabase.com/docs/guides/getting-started/mcp#recommendations

Playwright MCP：テストの実行

続いてPlaywright MCP（https://github.com/microsoft/playwright-mcp）です。

システム開発ではテストが欠かせません。Playwrightは、Microsoftが開発したWebブラウザ操作を自動化できるテストフレームワークなのですが、Playwright MCPを活用すると、AIエージェントがブラウザを直接操作し、サイト閲覧、データ収集、テスト実行、スクリーンショット取得などが行えます。
たとえば「ログインし、カートに商品を入れた上で、決済ボタンが押せるか確認してください」といった自然言語の指示だけでAIエージェントがブラウザから動作確認を行うことができます。

これにより、テスト業務を効率的に進めることが出来るようになります。

Storybook MCP：UIコンポーネント管理の自動化

最後に、Storybook MCP（https://storybook.js.org/addons/@storybook/addon-mcp）をご紹介します。

Storybookは、UIコンポーネントを独立して管理・カタログ化するためのツールです。
Storybook MCPを活用することで、既存のUIコンポーネント定義をLLMにコンテキストとして渡したり、ストーリー（UIコンポーネントの特定の状態）を自動生成したりすることが可能になります。

AIエージェントでUI実装を進めるときの課題の一つに、LLMが既存コードを十分に活用しないことがあります。たとえば、汎用的のButtonコンポーネントがあるにもかかわらず、AIが別のButtonコンポーネントを新規に作ってしまうケースがありますが、Storybook MCPを利用することで、既存コードベースのUIコンポーネント情報をLLMに渡しやすくなり、このリスクを抑えることができます。

実装例（手順の概要）

Figma MCP、Supabase MCP、Playwright MCPを組み合わせてフロントエンド開発を進める例を紹介します（この例ではStorybook MCPは使いません）。

開発対象は、下図のCRMシステム（顧客情報管理システム）です。
Figmaで用意した画面デザインをもとにAIでUIを実装し、さらにログインやデータ取得・保存、動作確認まで行います。

注： ここではフロントエンド開発プロセスへの取り込み方に焦点を当てています。掲載の手順だけで、同一のシステムをリリースできるわけではありません。

前提

次の前提で進めます。

• 言語: TypeScript
• ライブラリ: React
• AIエージェント: Cursor

1. MCPサーバーのセットアップ

最初からすべてのMCPサーバーが使えるわけではありません。利用するMCPサーバーを決め、設定ファイルに記述します。設定ファイルの場所はAIエージェントごとに異なります。

今回の実装例における設定例は次のとおりです。

tokenは、実際のSupabaseのPersonal Access Tokenに置き換えてください。

設定後、各MCPサーバーが有効になっていることを確認します。

2. UI実装

MCPサーバーのセットアップが済んだら、まずUI実装から進めます。ここではFigma MCPを利用します。

Figmaで実装対象のデザインを選び、URLを取得します。そのURLをAIエージェントに渡し、実装を依頼します。以下はプロンプト例です。

コード生成が完了し、Reactのサーバーを起動してブラウザで見ると、おおむねFigmaのデザイン通りに実装されていることが分かります。

同様の手順で、残りの画面も実装します。

3. バックエンド構築

次にバックエンドを構築します。ここではSupabase MCPを利用します。ログイン機能、ダッシュボードの実データ表示、顧客登録処理が必要なため、それらを中心に進めます。

ダッシュボードの実データ表示と顧客登録には、顧客管理用テーブルが必要です。テーブル作成と顧客登録関連の実装をAIエージェントに依頼します。以下はプロンプト例です。

続けて、顧客登録処理とダッシュボードの実データ表示を進めます。以下はプロンプト例です。

最後にログイン機能です。以下はプロンプト例です。

これで、ログイン機能、ダッシュボードの実データ表示、顧客登録処理が一通り動作するようになりました。

4. テスト

最後にテストです。今回は、主要機能の正常系を検証します。以下はプロンプト例です。

実行すると、AIエージェントはPlaywright MCPで一連のテストを進めます。結果のMarkdownドキュメントをPDFに変換した例が次のとおりです。フォーマットを指定すれば、テスト結果の報告書としても活用しやすくなります。

以上で、機能実装からテストまで一通り完了です。所要時間はおおむね30分程度でした。
Figma MCP、Supabase MCP、Playwright MCPを利用せずに外部連携なしのAIエージェントのみで進める場合と比べ、短時間で進められました。

MCPサーバーがない場合の対応

既存のMCPサーバーがない場合もあります。社内ツールや独自システムでは、MCPサーバーが用意されていないケースが多いでしょう。このような外部ツールとAIエージェントをつなぐには、MCPサーバーを自前で用意する必要があります。ツールやプラットフォームによっては、Agent Skillsなど別の接続手段が使える場合もあります。

Agent Skillsとは、AIエージェントに特定のタスクを実行させる「能力」を渡す仕組みです。詳しくはNCDCのコラムを参照してください。

AIエージェントの「スキル」とは？ RAG、MCPとの違いと組み合わせ方を解説

MCPサーバーを自前で用意するには、開発が必要です。ただし、TypeScriptやPython向けのSDK（アプリケーション開発に必要なツール、ライブラリ、ドキュメント、サンプルコードなどをパッケージ化した開発キット）が提供されており、ハードルは必ずしも高くありません。

SDKの利用を前提とすると、おおむね次の流れで構築できます。

1. ツールの定義
   LLMが解釈できる名前、説明（Description）、引数（Input）を定義します。説明の質は、LLMの呼び出し精度に大きく影響します。
2. ロジックの実装
   AIエージェントからツール実行のリクエストを受け取ったときに、社内APIの呼び出しやデータベース操作などを行う処理を記述します。
3. 通信方法の定義
   標準入出力やHTTP（SSE）など、AIエージェントとやり取りする経路を用意します。標準入出力を利用する方式が一般的です。

構築したMCPサーバーを利用するAIエージェントから接続できるよう設定すると、実運用に載せられます。

MCP導入におけるポイント

セキュリティリスクの軽減

MCPは標準規格のため、一定の知識があれば誰でもMCPサーバーを実装・公開できます。その結果、個人公開のMCPサーバーも利用対象になり得ます。一方で、信頼できないMCPサーバーを利用すると、APIキーの窃取やローカルファイルの漏洩など、セキュリティ上の問題につながるおそれがあります。

対策として、公式が提供するもの、または自組織で信頼できると判断したMCPサーバーに利用を絞ることをおすすめします。

信頼できるサーバーを探す手がかりの一つに、Anthropic公式が管理するmodelcontextprotocol/serversリポジトリがあります。Google Maps、Slack、GitHub、PostgreSQLなど、主要なサーバーが公開されています。

https://github.com/modelcontextprotocol/servers

コンテキストの最適化

有効化されているMCPサーバーのツール一覧とその説明は、システムプロンプトに自動的に挿入されます。

LLMはこれをもとに呼び出すツールを判断するため、不要なサーバーを有効にしたままにすると、無関係な情報がコンテキストを圧迫します。その結果、「今どのツールを使うべきか」という判断精度の低下から意図しないツールを呼び出したり、さらにはトークン消費によるコスト増加を招く恐れがあります。

これらのような課題を防ぐため、必要なMCPサーバーだけを有効化することが重要です。

Human-in-the-Loopの徹底

Human-in-the-Loopとは、AIや自動化の学習・運用に、人間の判断や監視を組み込む手法です。

AIエージェントはMCPサーバーの情報を読み、利用可否を自動で判断します。開発者が明示的に許可して実行する運用も、許可なしで自動実行する運用も選べます。許可なしの自動実行は手間は減りますが、リスクも伴います。たとえば、GitHub連携のMCPがLLMの判断だけで動き、リモートリポジトリに意図しない変更が入る、といった事象です。

このようなリスクを抑えるため、CursorやClaude Codeなどには、MCPサーバーの実行可否を開発者に委ねるHuman-in-the-Loopの仕組みが組み込まれています。設定を見直し、リスクと効率のバランスを取ることが大切です。

ただ、すべてのMCPサーバーの実行を都度人手で承認すると、確認負荷が増え開発効率が下がるおそれもあります。そのため、「参照系ツールは承認不要、書き込み系ツールは原則承認必須」といった、リスクに応じたチーム運用ルールを策定するのが効果的です。

AI駆動開発の導入・最適化はNCDCへ

本記事では、MCPを活用すると、フロントエンド開発をどのように効率化できるかを整理しました。

従来、AIエージェントが外部ツールにアクセスするときは、多くの場合、開発者の手作業が介在していました。MCPの利用によりその壁を破り、AIエージェントだけで判断・実行できる範囲が広がっています。

ただし、実務に落とし込むには、MCPサーバーなどのツール導入に加え、開発プロセス全体の再設計が欠かせません。

NCDCでは、貴社の開発体制や目的に応じた導入方針の検討から、実装・内製化支援まで一貫して伴走します。まずはお気軽にご相談ください。