web制作におすすめのMCPサーバー厳選5選｜工程別の選び方と接続手順【2026】

Q: MCPサーバーはClaude CodeとCursorのどちらでも使えますか？

多くの主要サーバーは両方に対応しています。Playwright・context7・Chrome DevTools・Figma Dev ModeはいずれもClaude CodeとCursorの双方から利用できます。設定ファイルの書き方はクライアントごとに少し異なります。

Q: web制作で最初に入れるMCPサーバーのおすすめは？

手戻りが多い工程から選びます。実装の正確さで悩むならcontext7、動作確認の往復が多いならPlaywright MCPが入り口に向きます。まず1つ繋いで効果を確かめてください。

Q: MCPサーバーの導入は無料でできますか？

サーバーによります。Playwright・context7・Chrome DevTools MCPは基本無料で始められます。Figma Dev Mode MCPは有料プランのDevシート、Firecrawl MCPはAPIキー（無料枠あり）が必要です。

Q: MCPサーバーが接続できないときは？

まず /mcp で接続状態を確認します。Node.jsのバージョン、コマンドのタイプミス、Figmaならデスクトップアプリ側の有効化を順に見直します。@latest 指定で取り直すのも有効です。

Q: MCPサーバーを入れすぎるとよくない？

必要以上に入れると管理と権限のリスクが増えます。使っていないサーバーは接続を外し、権限は最小限に保ちます。工程に対して1つずつ増やすのがおすすめです。

Claude CodeやCursorでweb制作を進めていると、「Figmaのデザインを目で見ながら手で写経する」「実装したページをブラウザに切り替えて動作確認する」「表示が重い原因をDevToolsで探す」——コードを書く以外の工程で、AIとブラウザやツールの間を人が往復する場面が残ります。ここをつなぐのがMCP（Model Context Protocol）サーバーです。本記事では、web制作の現場で実際に役立つMCPサーバーを、デザイン実装・コーディング・動作確認・表示速度・調査という工程別に厳選5つ紹介します。汎用の「おすすめ一覧」ではなく、web制作のどの工程で何ができ、どのコマンドで繋ぐのかまで具体で示します。読み終えたら、まず自分の制作フローで一番手戻りが多い工程に、対応するサーバーを1つ繋いでみてください。

この記事の要点

web制作で役立つMCPサーバーは工程ごとに違います。デザイン実装はFigma Dev Mode MCP、正確な実装はcontext7、動作確認はPlaywright MCP、表示速度はChrome DevTools MCP、参考サイト調査はFirecrawl MCPが軸になります
多くは claude mcp add か .mcp.json への数行で繋がります。例：claude mcp add playwright npx @playwright/mcp@latest。導入後は /mcp で接続状態を確認します
選ぶ基準は「担当する工程」「提供元の信頼性」「認証キーの要否」「権限の広さ」の4点。APIキーや広い権限を渡すサーバーは、秘匿情報の扱いまで含めて確認してから入れます

01web制作で使うMCPサーバーとは？何ができるのか

MCPサーバーは、Claudeなどのai（AIアシスタント）と、外部のツールやデータを安全につなぐ共通の窓口です。web制作の文脈では、AIが「コードを書く」だけでなく、「Figmaのデザインを読む」「ブラウザを操作して動作を確かめる」「表示速度を計測する」といった作業まで、同じ会話の中でこなせるようになります。つまり、制作の各工程に散らばっていた道具を、AIの手元に集める仕組みです。MCPそのものの仕組みはMCPとは？仕組みと使い方を図解で解説しています。

web制作でMCPが役立つ理由は、往復の手戻りが減るからです。たとえばデザインを実装するとき、これまでは人がFigmaを見て寸法や色を写し取っていました。Figma Dev Mode MCPを繋ぐと、AIがデザインの変数やレイアウトを直接読み、それを踏まえてコードを出します。人が仲介する工程が1つ消える、というのがMCPのわかりやすい価値です。

02web制作向けMCPサーバーの選び方【4つの基準】

MCPサーバーは種類が増え続けており、汎用の「おすすめ100選」から選ぶと自分の工程に合わないものまで抱え込みます。web制作で選ぶときは、次の4点で絞ると外しません。

FIG. 01web制作でMCPを選ぶ4つの基準

担当する工程

デザイン実装／コーディング／動作確認／速度計測／調査のどこを埋めたいかを先に決める。全部入れない。

提供元の信頼性

MicrosoftやGoogle、Figmaなどの公式・準公式を優先する。素性の不明なサーバーに権限を渡さない。

認証キーの要否

APIキーが要るものは、無料枠の範囲と鍵の保管方法まで確認してから入れる。

権限の広さ

ファイル書き込みや外部送信の権限が広いほど便利だがリスクも増える。最小限から始める。

この4点のうち、初期に見落としやすいのが3番目と4番目です。スクレイピング系のサーバーは外部にリクエストを送り、ファイル系のサーバーはローカルを読み書きします。便利さと引き換えに何を渡すのかを把握してから繋ぐのが、安全に使い続けるコツといえます。

03web制作におすすめのMCPサーバー厳選5選

ここからは、編集部がweb制作の工程ごとに実際に使って選んだ5つを、できることと繋ぎ方のセットで紹介します。件数を先に決めて埋めるのではなく、web制作の主要工程を素直に並べた結果が5つです。まず全体像を表で示します。

FIG. 02工程別・web制作向けMCPサーバー5選

工程	サーバー	提供元	繋ぎ方（例）
デザイン→実装	Figma Dev Mode MCP	Figma 公式	デスクトップ版で有効化＋`127.0.0.1:3845`
コーディング	context7	Upstash	`claude mcp add` でnpx実行
動作確認・E2E	Playwright MCP	Microsoft	`claude mcp add playwright`
表示速度・計測	Chrome DevTools MCP	Google（Chrome）	`.mcp.json` にnpx定義
調査・移行	Firecrawl MCP	Firecrawl	APIキー＋npx実行

Figma Dev Mode MCP｜デザインを実装コードに変換する

Figma公式のDev Mode MCPサーバーは、Figmaのデザインを、変数・コンポーネント・レイアウトの情報ごとAIに渡せるサーバーです。フレームを指定すると、そこからHTML/CSSやコンポーネントの雛形を生成でき、色やスペーシングを目視で写し取る手間が減ります。使うにはFigmaデスクトップアプリで「基本設定」から「ローカルMCPサーバーを有効化」にチェックを入れ、クライアント側で http://127.0.0.1:3845/sse を指定します。利用にはDev/フルシートを含む有料プランが必要です。

context7｜最新ドキュメントで実装ミスをどう防ぐ？

context7（Upstash提供）は、ライブラリの最新ドキュメントとコード例を、その場でAIに渡すサーバーです。学習データが古くて古い書き方を出す、という失敗を減らせます。web制作では、フレームワークやCSSライブラリのバージョン差でつまずく場面で役立ちます。繋ぎ方は次の1行です。

claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp

使うときは、プロンプトに「use context7」と添えるか、対象ライブラリ名を伝えると、resolve-library-idで該当ライブラリを特定し、最新の仕様を引いて実装します。無料枠でも動き、上限を上げたい場合は公式ダッシュボードでAPIキーを取得します。

Playwright MCP｜画面の動作確認とスクショはどう自動化する？

Playwright MCP（Microsoft提供）は、AIが実際にブラウザを操作して、ページ遷移・クリック・フォーム入力・スクリーンショット取得までを行えるサーバーです。実装したページを人がブラウザに切り替えて確認する工程を、会話の中に取り込めます。導入はNode.js 18以上が前提で、次のコマンドで繋がります。

claude mcp add playwright npx @playwright/mcp@latest

繋いだあとは /mcp を実行し、playwrightがconnectedになっていること、browser_navigateなどのツールが登録されていることを確認します。編集部では、コーディング直後に「トップページを開いてスクショを撮って」と指示し、崩れを目視でなく画像で確認する使い方をしています。

Chrome DevTools MCP｜表示速度とパフォーマンスを計測する

Chrome DevTools MCP（Google公式）は、実際に動くChromeを操作し、パフォーマンストレースの記録や分析まで行えるサーバーです。表示が重いページの原因を、AIに計測させて特定できます。クライアントのMCP設定に次の定義を追加すると使えます。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

performance_start_traceでトレースを開始し、performance_analyze_insightで改善のヒントを受け取れます。パフォーマンスの一部機能はGoogleのCrUX APIへトレースURLを送る場合があり、送りたくないときは --no-performance-crux を付けて起動します。対応ブラウザはGoogle ChromeとChrome for Testingです。

Firecrawl MCP｜参考サイト調査とコンテンツ移行に使う

Firecrawl MCPは、Webサイトの内容をAIが読める形で取得するサーバーです。複数ページのクロール、本文抽出、検索ができ、参考サイトの構成調査や、旧サイトから新サイトへのコンテンツ移行の下ごしらえに向きます。利用にはFirecrawlのAPIキーが必要で、環境変数に鍵を渡してnpxで起動します。外部へリクエストを送るサーバーのため、権限と対象URLを絞って使うのが安全です。

04MCPを繋ぐ前と後で、web制作はどう変わるのか？

MCPの価値は、機能の多さよりも「人が仲介していた工程が減る」ことにあります。導入前と後で何が変わるのかを、工程ごとに整理しました。

FIG. 03MCP導入前と導入後の違い

工程	これまで（MCPなし）	MCP接続後	実務での意味
デザイン実装	Figmaを目視して寸法・色を手写し	AIが変数・レイアウトを直接読んで実装	写し間違いと確認の往復が減る
実装の正確さ	古い書き方をAIが出し、後で修正	最新ドキュメントを引いて実装	バージョン差の手戻りが減る
動作確認	ブラウザに切り替えて手で確認	AIが操作しスクショで報告	崩れの発見が会話内で完結する
速度改善	DevToolsを人が開いて原因調査	AIがトレースを取り論点を提示	計測から仮説までが速くなる

アウトプットにどんな差が出るかという観点では、これらの工程短縮から、制作のリズムがこう変わると想定されます。人の作業が「手を動かす」から「AIの出力を確認して判断する」へ寄り、1ページあたりの確認の往復が減ることで、同じ時間で見られる画面数が増えると考えられます。ただし各サーバーの精度には差があり、Figmaからの生成コードはそのまま本番に出さず、レスポンシブや命名の調整を前提に受け取るのが現実的です。ここは実測でなく仕様からの想定として捉えてください。

05【実践】Figma→実装→QAをMCPでつなぐ手順

単体で繋ぐだけでなく、工程をまたいで使うと効果が出ます。ここでは、デザインから動作確認までを1つの会話でつなぐ最小の流れを示します。前提はNode.js 18以上とClaude Codeが入っていることです。

# 1. コーディング用にcontext7、動作確認用にPlaywrightを繋ぐ
claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp
claude mcp add playwright npx @playwright/mcp@latest

# 2. 接続確認（両方がconnectedになっていること）
/mcp

Figma Dev Mode MCPはデスクトップアプリ側で有効化し、クライアントに http://127.0.0.1:3845/sse を登録します。ここまで繋いだら、会話の中で工程を順に指示します。

デザイン読取：「このFigmaフレームのレイアウトと変数を読んで、セクションのHTMLとCSSを作って」
実装の精度上げ：「use context7。使うCSSフレームワークの最新の書き方に合わせて」
動作確認：「ローカルのトップページを開いて、PCとスマホ幅でスクショを撮って崩れを教えて」

この流れの利点は、デザインの読取から崩れの確認までを、エディタとブラウザを行き来せずに回せることです。編集部が制作用の社内ツールを組むときも、まずcontext7とPlaywrightの2つを既定で繋ぎ、案件に応じてFigmaやChrome DevToolsを足す、という順で構成しています。全部を最初から入れず、手戻りの多い工程から1つずつ繋ぐのが失敗しない進め方です。

06MCPサーバー導入時に気をつけることは？

気をつけるのは、権限と鍵の扱いです。MCPサーバーはAIに外部操作の力を渡す仕組みのため、入れるほど便利になる一方で、渡す権限も広がります。特にAPIキーを使うサーバーは、鍵をコードや共有リンクに含めないよう扱いに注意します。共有機能やスクレイピング結果を外に出すときは、秘匿情報が混ざらないかを確認してからにしてください。この観点はClaudeの共有リンクが検索に載った事案とも地続きで、詳しくはClaude共有チャットがGoogle検索に表示された問題と対策で整理しています。

もう1つは、対象や提供元を絞ることです。日本の業務に特化したサーバーを探すなら日本特化のMCPサーバー6選もあわせて確認できます。素性の分かる公式・準公式から始め、権限は最小限で運用するのが、事故を避ける基本です。

07よくある質問

MCPサーバーはClaude CodeとCursorのどちらでも使えますか？

多くの主要サーバーは両方に対応しています。本記事のPlaywright・context7・Chrome DevTools・Figma Dev ModeはいずれもClaude CodeとCursorの双方から利用できます。設定ファイルの書き方はクライアントごとに少し異なるため、各公式の手順に合わせてください。

web制作で最初に入れるならどれがおすすめですか？

手戻りが多い工程から選ぶのが基本です。実装の正確さで悩むならcontext7、動作確認の往復が多いならPlaywright MCPが入り口に向きます。まず1つ繋いで効果を確かめてから、次の工程のサーバーを足してください。

MCPサーバーの導入は無料でできますか？

サーバーによります。Playwright・context7・Chrome DevTools MCPは基本的に無料で始められます。Figma Dev Mode MCPは有料プランのDevシートが要り、Firecrawl MCPはAPIキー（無料枠あり）が必要です。無料枠の範囲を確認してから使うと安心です。

MCPサーバーが接続できないときはどうすればいいですか？

まず /mcp で接続状態を確認します。connectedにならない場合、Node.jsのバージョン（18以上か）、コマンドやパスのタイプミス、Figmaならデスクトップアプリ側の有効化を順に見直します。パッケージ名の @latest 指定で最新版を取り直すのも有効です。

MCPサーバーを入れすぎるとよくないですか？

はい、必要以上に入れると管理と権限のリスクが増えます。使っていないサーバーは接続を外し、権限は最小限に保つのが安全です。工程に対して1つずつ、効果を確かめながら増やすのがおすすめです。

08まとめ｜工程から逆算してMCPを選ぶ

web制作でMCPサーバーを選ぶコツは、機能一覧から選ぶのではなく、自分の制作フローで一番手戻りが多い工程から逆算することです。デザイン実装ならFigma Dev Mode、実装の正確さならcontext7、動作確認ならPlaywright、速度改善ならChrome DevTools、調査ならFirecrawlが軸になります。まずは1つ繋ぎ、/mcp で接続を確かめ、効果が出たら次の工程へ広げてください。MCPの基礎はMCPとは？仕組みと使い方を図解、日本業務向けは日本特化のMCPサーバー6選でまとめています。

09出典

Playwright 公式ドキュメント（@playwright/mcp）／Microsoft「playwright-mcp」GitHub／
Figma 公式ヘルプ「Guide to the Dev Mode MCP Server」／
Upstash「context7」公式・npm（@upstash/context7-mcp）／
Google「Chrome DevTools MCP」公式（ChromeDevTools/chrome-devtools-mcp、Chrome for Developers ブログ）／
Firecrawl 公式ドキュメント／Claude Code 公式ドキュメント「Connect to MCP servers」。
※接続コマンドは各公式の記載に基づく2026年7月時点の情報です。仕様は更新されるため、導入時は各公式の最新手順を確認してください。