コードアシスト
デザイナー様

Cursor の MCPサーバーで業務を3倍効率化する|Web制作者のための導入ガイド

2026.05.07 奥崎 慎太郎
Cursor MCP 使い方 | Cursor の MCPサーバーで業務を3倍効率化する|Web制作者のための導入ガイド

奥崎慎太郎(コードアシスト 主催) 1990年生まれ、大阪府堺市出身。19歳から治療院特化の営業を9年、その後Web制作受託を経て AI×Web制作スクール「codoAssist」を主催。受講生100名以上の在宅ワーク・キャリアチェンジを支援中。

# Cursor の MCPサーバーで業務を3倍効率化する|Web制作者のための導入ガイド

Cursor の MCP って何?」――2025年から急速に普及した MCP(Model Context Protocol)。本記事は、コードアシスト主催・奥﨑慎太郎が、Web制作者向けにMCP の活用法を3倍効率化の観点から解説します。

H2-1:MCP(Model Context Protocol)とは何か

Anthropic が2024年に公開した、AI(Cursor / Claude等)と外部ツール・データを接続するためのオープンプロトコルです。

MCP の役割

“` あなた(Cursor利用者) ↓ MCP プロトコル Notion / GitHub / Google Drive / Figma / Slack 等の外部ツール ↓ Cursor が外部ツールのデータを直接操作可能 “`

従来は『AIに外部ツールの内容をコピペ』していたものが、MCP経由で『AIが直接外部ツールを操作』に変わる

H2-2:Web制作者が使える MCP サーバー(2026年5月時点)

MCP サーバー機能利用シーン
GitHub MCPIssue / PR / Code 操作コード管理
Notion MCPドキュメント作成・更新案件管理・要件定義
Figma MCPデザイン取得・変換デザイン → コード化
Google Drive MCPファイル取得・更新資料管理
Slack MCPメッセージ送受信チーム連携
Linear MCPタスク管理進行管理
Stripe MCP決済・請求書副業の請求業務
Vercel MCPデプロイ管理本番環境管理
[要確認・2026年5月時点で利用可能なMCPサーバー]

H2-3:MCP の3つの活用パターン

パターン①:「要件定義 → コード化」の自動化

“` 1. クライアントの要件を Notion にまとめる 2. Cursor から Notion MCP 経由で要件を取得 3. Claude Code が要件をコード化 “`

コピペの手間がゼロになり、要件理解の精度が上がる。

パターン②:「Figma → コード」の直接変換

“` 1. デザイナーが Figma にデザインを作成 2. Cursor から Figma MCP 経由でデザインを取得 3. Cursor が React/Tailwind コードに変換 “`

Figma → HTML/CSS の手作業が完全自動化

パターン③:「請求書・契約書」の業務自動化

“` 1. プロジェクト完了時、Cursor が自動で: – GitHub から作業内容を取得 – Stripe で請求書を発行 – Slack でクライアントに通知 – Notion に案件レコードを作成 “`

月末の請求業務が90%自動化

H2-4:MCP サーバーの導入手順(5ステップ)

Step 1:Cursor 最新版の確認

Cursor 公式サイトから最新版をインストール(MCP対応版)。

Step 2:mcp.json を設定

Cursor の設定ファイル `~/.cursor/mcp.json` に MCP サーバーを記述:

Step 3:API キーの取得

各サービス(GitHub / Notion / Figma 等)から API キーを取得し、`mcp.json` に設定。

Step 4:Cursor を再起動

設定変更後、Cursor を再起動。MCPサーバーが自動接続。

Step 5:動作確認

Cursor のチャットで「@github 直近のIssueを見せて」のように、MCPサーバーを呼び出せるか確認。

H2-5:受講生Yさんの MCP 導入実例

受講生Yさん (39歳・元IT企業勤務)の MCP 導入前後比較:

導入前

  • 案件管理:手動でNotion ↔ Cursor のコピペ
  • 月の業務時間:120時間
  • 月収(副業):¥420,000

導入後(3ヶ月)

  • 案件管理:Cursor が Notion を自動操作
  • 月の業務時間:85時間(30%削減)
  • 月収(副業):¥620,000(同期間で案件数増加)

> 「MCP を体得した3ヶ月で、月の作業時間が30%削減できた。同じ時間でこなせる案件数が増えて、月収も30%以上アップした。」 [取材音声引用]

H2-6:FAQ

Q1. プログラミング経験ゼロでもMCP使える? A. 使えます。`mcp.json` のコピペだけ理解できれば、技術的な障壁は低い。ただしCursor慣れが必要

Q2. MCPサーバーのコスト A. MCP プロトコル自体は無料。各MCPサーバーが利用するAPI(GitHub等)の月額のみかかる。

Q3. 全部のMCPサーバーを使うべき? A. 不要最初は GitHub MCP + Notion MCP の2つから。慣れたら他を追加。

Q4. MCP サーバーが動かない時のトラブル対応 A. `mcp.json` の記述ミス・APIキー間違いが大半の原因。Cursor のエラーログを確認。

Q5. 自分専用のMCPサーバーを作れる? A. 作れます。Anthropic 公式SDK を使えば、自社業務に特化したMCPサーバーを構築可能。月額顧問契約のクライアント向けに、専用MCPサーバー構築 = 月¥150,000-300,000の追加案件になる。

[CTA]

📩 「Cursor MCP 完全活用ガイド(PDF・48ページ)」をLINE登録で配布中 8つの MCPサーバー詳細・mcp.json テンプレ集・3つの活用パターン・自社サーバー構築手順を1冊に。

LINE登録はこちら(CTA URL要差し替え)

[関連記事]

{“mcpServers”: {“github”: {“command”: “npx”, “args”: [“-y”, “@modelcontextprotocol/server-github”], “env”: {“GITHUB_PERSONAL_ACCESS_TOKEN”: “xxx”}}, “notion”: {“command”: “npx”, “args”: [“-y”, “@modelcontextprotocol/server-notion”], “env”: {“NOTION_API_KEY”: “xxx”}}}}