MCP サーバーってなに？ — 非エンジニアが「外のサービス」を Claude Code につなぐ話

結論（2 行で）

• MCP は、Claude Code を「外のサービス」につなぐコンセント。
• 最初の 1 つは Playwright（ブラウザ操作） がおすすめ。「スクショ撮って」ができるようになる、体感が一番大きいです。

---

このページで扱うこと

• MCP を 3 行で説明
• 私が実際につないでいる 3 つ
• 最初の 1 つ: Playwright の入れ方
• 注意点（セキュリティ）

MCP を 3 行で説明

• MCP = Model Context Protocol
• AI に「手」を生やす仕組み（PC の外のサービスを触れる手）
• 手の種類は、MCP サーバーという「ミニプラグイン」として配布される

コンセントに差し替える感覚で、「今日は Gmail を触れる Claude Code」「今日は Figma を触れる Claude Code」 を切り替えます。

私が実際につないでいる 3 つ

① Playwright（ブラウザ操作）— 一番おすすめ

できること: 「このページのスクショ撮って」「このフォームに入力して」「この記事を読んで要約して」

使い方の例:

「https://hajimete-ai.jp/tools/chatgpt のスクショを撮って、読みにくい部分があれば教えて」

これだけで、ブラウザが自動で開いて、スクショを撮って、デザインの指摘まで してくれます。サイト運営している人には神機能🌸

② Google Drive（資料を AI に読ませる）

できること: Drive の PDF やスライドを、ダウンロードせずに Claude Code に読ませる

使い方の例:

「Drive の『2026-04 家計シート』を読んで、3 ヶ月の推移を 3 行でまとめて」

個人情報の塊なので、CC-11 のプライバシールール に従って扱います。

③ Gmail（下書きまで作ってもらう）

できること: メールの下書きを Claude Code が作成（送信はしない。私が確認してから手動送信）

使い方の例:

「お客様 A さんから鑑定のお問い合わせ。返信の下書きを、トーンは丁寧で温かく、日程候補 3 つつきで」

下書きフォルダに入るだけ。最後の送信は私が目視確認してから。「最後の 1 タップは人間が押す」 が大事です。

最初の 1 つ: Playwright の入れ方

Claude Code は、プロジェクトごとに MCP サーバーを設定できます。

ステップ 1: 設定ファイル

<プロジェクト>/.claude/settings.local.json にこう書きます。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

.local.json がコツ。Git にコミットされない（個人設定に保てる）ので、API キーなども安心して書けます。

ステップ 2: claude を再起動

起動時に読み込まれる仕組みなので、一度終了して再起動 が必要です。

ステップ 3: 動作確認

このページ（https://example.com）のスクショを撮って

と言って、スクショが返ってくれば成功🌸

注意点（セキュリティ）

MCP は 便利 = 強力 = 危険 とセットです。

⚠️ 信頼できないサーバーを入れない

MCP サーバーは、npm や GitHub で誰でも公開できます。公式・有名な開発者のものに限る こと。

⚠️ 読み取り権限と書き込み権限を分ける

Google Drive なら、まずは「読み取りのみ」のスコープ で入れる。「書き込み」はしばらく様子を見てから。

⚠️ Gmail などは「送信しない」を明言

CLAUDE.md に 1 行書いておくだけで、事故が減ります。

## MCP 運用ルール

- Gmail: 下書き作成のみ。送信は必ず人間が手動で
- Drive: 読み取りのみ。書き込みは人間が最後に
- Playwright: ヘッドレスで OK、結果のスクショは削除

詰まったポイント

• MCP サーバーが見つからない: .local.json に書いたのに読まれない → claude の再起動忘れ
• スコープを広げすぎた: 「メール全部読める」権限で入れたら怖くなって削除。最小権限で入れ直す
• 料金: Playwright は無料。Drive / Gmail は Google アカウントの無料枠で回せます

次に読むとよい記事

• CC-13 Skills で「自分の型」を保存する
• CC-14 Hooks で「うっかり事故」を防ぐ
• CC-16 サブエージェントで「重い仕事」を任せる