コードアシスト
AIツール

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

2026.05.07 奥崎 慎太郎
Cursor MCP 使い方 | Cursor の MCPサーバーで業務を3倍効率化する|Web制作者のための導入ガイド
  • 著者:奥﨑 慎太郎(おくざき しんたろう)
  • 肩書:コードアシスト 主催 / 株式会社SOFI 代表取締役
  • 経歴:株式会社SOFI 代表取締役。Cursor + MCP 連携を月10案件超で実戦投入
  • SNS / 関連noteSOFI公式

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

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

MCP(Model Context Protocol)とは何か

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

MCP の役割

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

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

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

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

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%自動化

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

Step 1:Cursor 最新版の確認

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

Step 2:mcp.json を設定

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

{ “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”} } } }

Step 3:API キーの取得

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

Step 4:Cursor を再起動

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

Step 5:動作確認

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

受講生Yさんの MCP 導入実例

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

導入前

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

導入後(3ヶ月)

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

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

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の追加案件になる。


📩 「Cursor MCP 完全活用ガイド(PDF・48ページ)」をLINE登録で配布中

8つの MCPサーバー詳細・mcp.json テンプレ集・3つの活用パターン・自社サーバー構築手順を1冊に。

LINE登録はこちら

LINE登録で詳細を受け取る →



【受講生25名検証】Cursor を使い倒した3ヶ月で気付いた7つの罠
Claude Code でWeb制作の納品速度を5倍にする9つの実戦テクニック


奥﨑 慎太郎(おくざき しんたろう)
株式会社SOFI 代表取締役 / コードアシスト 主催。Cursor + MCP連携を月10案件超で実戦投入。

関連記事