非エンジニアPM・デザイナーがClaude Code + MCPで業務を自動化する入門チュートリアル

Posted at 2026-05-15

結論：コードを書けなくても、Claude Codeで業務は自動化できる

コードは書けなくても大丈夫——Claude Codeはターミナルで日本語を打つだけで動く、あなた専属の自動化アシスタントです。

この記事では、普段コードを書かないPM・デザイナーが、Claude CodeとMCP（Model Context Protocol）を使って以下の3つの業務を自動化する手順を、ステップバイステップで解説します。

Notion連携で議事録テンプレートを自動生成
Figma連携でデザイントークンをCSS変数に変換
Slack連携で日次レポートを自動投稿

エンジニアの方は、チーム内の非エンジニアメンバーにこの記事を共有することで、「ちょっとしたお願い」の依頼を減らせるかもしれません。

1. 対象読者

プロダクトマネージャー、プロジェクトマネージャー
UIデザイナー、UXリサーチャー
開発チームと日常的に協働しているが、自分ではコードを書かない方
ターミナルは怖いけど、定型業務の自動化には興味がある方

エンジニアの方は「非エンジニアメンバーにClaude Codeをどう導入してもらうか」という観点でお読みください。

2. Claude Codeとは？——30秒で伝わるたとえ話

Claude Codeは、Anthropic社が提供するターミナルベースのAIエージェントです。

たとえ話

あなたのPCに住み着いた「超優秀なインターン」だと思ってください。
日本語で「○○して」と頼むと、ファイルを作り、APIを叩き、レポートを整形してくれます。
ただし、指示が曖昧だと暴走するので、最初にルールを決めておくのが大事です。

基本操作（3つだけ覚える）

操作	コマンド	説明
起動	`claude`	ターミナルで打つだけ
指示	日本語で入力	「議事録テンプレートを作って」等
終了	`/exit`	セッション終了

これだけです。GUIのアプリを開く感覚で使えます。

3. インストール〜初回セットアップ

前提条件

Node.js 18以上がインストールされていること
Anthropic APIキー（Claude Proプランでも可）

Mac の場合

# 1. Node.jsがなければインストール（Homebrewを使用）
brew install node

# 2. Claude Codeをインストール
npm install -g @anthropic-ai/claude-code

# 3. 起動
claude

Windows の場合

# 1. Node.jsがなければ公式サイトからインストール
# https://nodejs.org/

# 2. Claude Codeをインストール（PowerShellで実行）
npm install -g @anthropic-ai/claude-code

# 3. 起動
claude

初回起動時にAnthropicアカウントへの認証が求められます。ブラウザが開くので、画面の指示に従ってログインしてください。

非エンジニアの方へ： Node.jsのインストールが不安な場合は、チームのエンジニアに「node -v で18以上が出る状態にして」とお願いしてください。そこまでできれば、あとは自分でできます。

4. 全体像：業務フローとMCPの関係

本題に入る前に、この記事でやることの全体像を図で示します。

MCPとは？

MCP（Model Context Protocol）は、Claude Codeが外部サービスと会話するための共通規格です。

「Claude CodeにNotionやFigma、Slackと話せる能力を追加するプラグイン」と理解すればOKです。

5. 実践① Notion MCPで議事録テンプレートを自動生成

MCPサーバーの設定

Claude Codeでは、claude mcp add コマンドでMCPサーバーを追加できます。

# Notion MCPサーバーを追加
claude mcp add notion-mcp -- npx -y @notionhq/notion-mcp-server

このコマンドを実行すると、ユーザーの設定ファイル（~/.claude.json）にMCPサーバーの情報が保存されます。

Notion APIトークンの準備： 事前に Notion Developers でインテグレーションを作成し、トークンを取得してください。対象のページやデータベースにインテグレーションを接続するのも忘れずに。

環境変数としてトークンを設定する場合は以下のようにします。

claude mcp add notion-mcp -e OPENAPI_MCP_HEADERS='{"Authorization":"Bearer ntn_xxxx","Notion-Version":"2022-06-28"}' -- npx -y @notionhq/notion-mcp-server

Claude Codeへの指示

Notionの「ミーティングノート」データベースに、以下の構造で議事録テンプレートを作成してください。

- タイトル: 【週次定例】YYYY/MM/DD
- セクション: 参加者 / 前回アクション確認 / 議題 / 決定事項 / ネクストアクション
- ネクストアクションにはチェックボックスを付けてください
- 日付は今日の日付で埋めてください

Claude Codeは、MCP経由でNotion APIを呼び出し、指定した構造のページを自動生成します。

ポイント

毎週の定例会議の前に同じ指示を実行するだけでテンプレートが生成される
指示をテキストファイルに保存しておけば、コピペで再利用可能
前回議事録のURLを貼って「前回のネクストアクションを引き継いで」と指示することも可能

6. 実践② Figma MCPでデザイントークンをCSS変数に変換

MCPサーバーの設定

# Figma MCP サーバーを追加
claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=figd_xxxx

Figma APIキーは、Figmaの Settings > Personal access tokens から生成できます。

Claude Codeへの指示

Figmaファイル「Design System v2」からカラートークンを取得して、
CSS変数として出力してください。

出力形式:
:root {
  --color-primary: #xxxxx;
  --color-secondary: #xxxxx;
  ...
}

ファイルは colors.css という名前で保存してください。

変換フローの図

ポイント

デザインシステムの更新のたびにエンジニアへ「トークン変わりました」と共有する手間がなくなる
colors.css をそのままリポジトリにコミットすればエンジニアが即座に使える
カラーだけでなく、タイポグラフィやスペーシングのトークンも同様に変換可能

7. 実践③ Slack MCP連携で日次レポートを自動投稿

MCPサーバーの設定

# Slack MCP サーバーを追加
claude mcp add slack -- npx -y @anthropic/slack-mcp-server

Slack Bot Token の準備： Slack API でアプリを作成し、chat:write、channels:read などのスコープを持つBot User OAuth Tokenを取得してください。環境変数 SLACK_BOT_TOKEN に設定します。

# 環境変数付きで追加する場合
claude mcp add slack -e SLACK_BOT_TOKEN=xoxb-xxxx -- npx -y @anthropic/slack-mcp-server

Claude Codeへの指示

以下の情報をもとに日次レポートを作成し、#pm-daily チャンネルに投稿してください。

【今日やったこと】
- スプリントレビューの準備
- デザインレビュー（ログイン画面リニューアル）
- ステークホルダーMTG

【明日の予定】
- スプリントレビュー本番
- ユーザーインタビュー設計書レビュー

【ブロッカー】
- APIチームのレスポンス待ち（チケット #1234）

フォーマットはSlackのmrkdwn記法で、絵文字を適度に入れて読みやすくしてください。

ポイント

毎日のルーティンが「ターミナルにコピペ → Enter」で完了する
箇条書きのメモだけ渡せば、Claude Codeが読みやすく整形してくれる
投稿前に「プレビューを見せて」と指示すれば、送信前に確認もできる

8. 安全に使うためのルール：CLAUDE.mdの活用

Claude Codeは強力ですが、指示次第で意図しない操作を実行するリスクがあります。プロジェクトルートに CLAUDE.md ファイルを置くことで、Claude Codeの行動にルールを設定できます。

CLAUDE.md の記述例

# CLAUDE.md

## 基本ルール
- ファイルを削除しないでください
- `main` ブランチに直接コミットしないでください
- APIキーやトークンを画面に表示しないでください

## MCP利用ルール
- Slack投稿は #pm-daily と #design-updates チャンネルのみ許可
- Notionは「ミーティングノート」データベースのみ操作可能
- Figmaは読み取り専用（ファイルの編集はしない）

## 操作前の確認
- 外部サービスへの書き込みを行う前に、必ず内容をプレビュー表示して確認を取ること

なぜ重要か

非エンジニアが使う場合、「何が危険な操作か」の判断が難しい
CLAUDE.mdでガードレールを設定しておけば、Claude Code自身が禁止操作を拒否してくれる
チームのエンジニアがCLAUDE.mdを作成 → 非エンジニアが安心して使える、という分業が理想的

エンジニアの方へのお願い： 非エンジニアメンバーにClaude Codeを導入する際は、必ずCLAUDE.mdを先に整備してください。これが最も重要なステップです。

9. まとめ：非エンジニアがAIエージェント時代に持つべきスキルセット

3つのポイント

Claude Codeは「日本語で指示を出すターミナルツール」。コードが書けなくても、明確な日本語で指示が出せれば業務を自動化できる
MCPは「Claude Codeに外部サービスとの接続能力を追加するプラグイン」。Notion、Figma、Slackなど普段使いのツールと連携して、手作業を減らせる
CLAUDE.mdによるガードレール設定が必須。エンジニアと協力して「やっていいこと・いけないこと」を先に決めておくことで、安全に運用できる

非エンジニアに求められる新しいスキル

AIエージェント時代に非エンジニアが身につけるべきは「コーディング力」ではなく、以下の3つです。

指示設計力 — 曖昧さのない日本語でやりたいことを構造化する力
ツール接続の基礎知識 — APIキーとは何か、MCPが何を繋いでいるかの概念理解
リスク判断力 — 自動化してよい作業と人間が確認すべき作業を見極める力

参考リンク

注意： MCP関連のエコシステムは急速に発展中です。各MCPサーバーのパッケージ名やインストール方法は変更される可能性があります。利用前に各リポジトリの最新READMEを確認してください。特にコミュニティ製のMCPサーバーは、公式サポートの範囲外である点にご留意ください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up