【はじめてのMPCサーバー登録】ClaudeCodeとNotionをつないで、タスク管理を楽にする
「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。
14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。
（先着限定、6月7日まで）
» 「司令塔」側に回る14日間プランを見る
前回の記事では、MCPの仕組みと、コマンド不要で使えるChrome連携を紹介しました。
今回はコマンドを使って自分でMCPサーバーを登録する方法を体験してみましょう。
題材としてNotionを使用します。
メモ・タスク管理・案件管理をひとつにまとめられるノートアプリで、Web制作を学んでいる方にも相性のいいツールです。
Notionとの連携を通じて、MCPサーバー登録の流れを一通り学んでいきます。
Notionをはじめよう
もうすでに使っているよという方は、Claude CodeとNotionをつなごうへ読み飛ばしてください。
Notionについて知ろう
Notionとはどんなツール？
Notionは、メモ・タスク・データベース・wikiなどをひとつにまとめられるノートアプリです。
テキストメモ・チェックリスト・テーブル・カレンダーなどを自由に組み合わせてページを作れます。
無料で使い始めることができ、スマホからもアクセスできるのが特徴。
使い勝手の良さから、個人の学習管理から、チームのプロジェクト管理まで幅広く使われています。
Web制作を学んでいる人にとってのメリット
Web制作を学び始めると、こんな情報がどんどん増えてきませんか？
- 学習メモ（「CSSのflexってこうするんだった」みたいなもの）
- 自分がハマったポイントと解決策のメモ
- 案件ごとのタスクリスト
- クライアントとのやりとりメモ
- ドキュメント・リファレンスサイトのブックマーク
- 素材サイトのブックマーク
メモやタスクリストについては、デスクトップのメモ帳やテキストファイルで管理している方も多いと思います。でも「あのメモどこ行ったっけ…」となりがち。
Notionを使えば、情報を整理された場所に集約できるので、探す手間がなくなります。
ちなみに、今回はやりませんが、ブラウザのブックマークをNotionに移行したりもできます。興味のある方は調べてみてください。
Notionの始め方
アカウントを作成する
Notion公式サイトにアクセスして、「無料ではじめる」のボタンからアカウントが作成できます。
Notion公式サイト：https://www.notion.com/ja
サインアップ画面になります。
上部にメールアドレスかを登録するか、Googleアカウント等を使って登録するだけでOKです。
初期設定のアンケート等が表示されます。
どれを選んでも問題ないので、ご自身に合うものを選択して進めてください。
「〇〇さんのスペース」という、自分専用のワークスペースが表示されたら登録完了です。
Notionの基本的な使い方
Notion便利らしいよ、と言われて登録したものの、最初の画面でちょっと困った…という経験のある方も珍しくありません。
まず新しいページを作ってみましょう。左下にあるEditアイコン（ ）をクリックして「Page」を選択します。
白紙の新規ページが開きます。
- ① タイトル部分：ページの名前を入力します
-
② 本文部分：テキストを入力したり、「
/」でコマンドを呼び出してテーブル・チェックリストなどを追加したりできます - ③ クイックスタートメニュー：よく使う機能への近道です。Templates（テンプレート）を選ぶと、用途別の雛形ページをベースに始められます。「とりあえず自由に書き始めたい」という場合は、無視してOKです
また、Notionには、一般的なアプリのようなフォルダという概念がありません。
その代わりに、ページの中にページを作る「入れ子（ネスト）構造」で情報を整理します。
試しにやってみましょう。
まず、ページのタイトルを「案件管理」とします。
その下、本文部分で半角の/ （スラッシュ）を入力して、表示されるメニューからPageを選びます。
左サイドバーでページ名の左横 をクリックすると展開。
そのページの中に入っている子ページが表示されます。
このように、あるページを作り、その中に別ページを入れていく、という使い方が基本になります。
基本の使い方はわかった。
とはいえ…
- 白紙からどうページを作ればいいか分からない…
- イチから作るのは大変だからテンプレートを探したけど、イマイチ…
- 管理が面倒になってきた…
というのが正直なところだと思います。
私も面倒で、登録したけれど使っていなかった時期があります。
そんなときこそ、Claude Codeの出番！
次のセクションでは、NotionをClaude Codeとつないで、案件管理ページをまるごと作ってもらう方法を紹介します。
今回やること
この記事では、以下の3つをやっていきます。
① ClaudeとNotionを接続する
ClaudeCodeがNotionを操作できるよう、MCPサーバーを登録します。
② Claudeに案件管理データベースを作ってもらう
- 案件管理データベース（一覧表示されるインデックス）
- 各案件のアイテム（ページ）にタスクリストとメモ欄
- 作ってもらったページを確認し、気になる点を修正してもらいます。
③ 既存のローカルファイルをNotionに移行する
今まで使っていたテキストファイルのメモを、作ったページに移してもらいます
Claude CodeとNotionをMCPでつなごう
接続方式はA・Bの2種類
Claude CodeとNotionをつなぐ方法は2種類あります。
どちらでも同じことができますので、やりやすい方を選んでください。
「まずNotionをつないでみたい」→ Aがおすすめ
コマンド1行＋ブラウザで許可するだけなので、手順が少なく確実です。
A：OAuth認証を使う場合の手順はこちら
「他のサービスとも連携してみたい」→ Bも試してみる価値あり
アクセストークンを使う方式は、他のサービスと接続する場合にも似た流れで行うことができます。この手順を覚えておくと応用が効きます。
B: アクセストークン（APIトークン）を使う場合の手順はこちら
| A：OAuth認証 | B：アクセストークン | |
|---|---|---|
| 難易度 | かんたん | すこし手順が多い |
| Notion側の準備 | ログインするだけ | インテグレーション作成・トークン取得・ページ接続設定が必要 |
| トークン管理 | 不要 | トークンを自分で管理する必要あり |
| 公式推奨 | ◎ | △ |
| 他サービスへの応用 | △（OAuth認証は限られたサービスでのみ導入されている） | ◎（MCPで使う多くのサービスで同じパターンが使える） |
同じNotionアカウントに対してAとBを両方登録することはできますが、どちらか一方で十分です。迷ったらAから始めてみてください。
A：OAuth認証を使う場合
A1. Notionにログインする
ブラウザでNotionにログインした状態にしてください。
A2. Claude CodeでMCP連携を行う
Claude CodeからMCPの設定を行っていきます。
Notionの管理と連動させたいフォルダをVSCodeで開いておいてください。
デモでは「クライアント」を想定したフォルダを使用していますが、Web学習記録などでも構いません。
A3. MCPサーバーを登録する
VSCodeの統合ターミナルを開きます。
以下のコマンドをそのままコピーして、Enterキーで実行してください。
claude mcp add -s user --transport http notion https://mcp.notion.com/mcp
「Added ～」とMCPサーバーを追加した旨のメッセージが表示されたら、成功です。
A4. VSCodeを再起動する
VSCodeを完全に再起動（ウィンドウを閉じて開き直す）してください。
A5. ClaudeCodeから接続確認・認証を行う
VSCodeを再起動出来たら、Claude Codeのチャットパネルを開きます。
チャット入力欄に/mcpと入力して、表示されるメニューから「MCP servers」を開いてください。
notionの表示が増えていたら、コマンド自体は成功しています。
認証が必要な場合「Needs Auth」などの表示が出ていますので、notionをクリック。
Authenticateボタンをクリックして、ブラウザで認証を行ってください。
ブラウザでAuthentication Successfulと表示されたら、認証成功です。
MCP serversのウィンドウは、右上の×で閉じて良いです。
これでMCP接続が出来ました！
Claude CodeにNotionを操作してもらおうに進んで、実際にClaudeが操作できるか試してみましょう。
B：アクセストークン（APIトークン）を使う場合
B1. Notionでインテグレーションを作成
ブラウザでNotionにログインしてください。
そのまま、Notionのコネクト設定ページ https://app.notion.com/developers/connections を開きます。
「＋ 新規コネクト」をクリックしてください。
設定ウィンドウが開きます。
コネクト名は何でも良いので、わかりやすい名前を付けましょう。
「保存」を押すと、インテグレーションが作られます。
B2. アクセストークンをコピーする
作成したインテグレーションの詳細画面に、アクセストークンがあります。
これが今回使う NOTION_TOKEN です。コピーしておいてください。
B3. 連携したいNotionページで接続設定を行う
Claude Codeに操作してもらいたいページ（または親ページ）を開きます。
まだページがない場合は、空の親ページを1つ作っておきましょう。
接続したページとその配下の子ページが、Claude Codeから操作できる範囲になります。新しくページを作ってもらう場合は、空の親ページを1つ作り、そこに接続しておくのがおすすめです。
ページ右上の「…」メニューを開きます。
接続→ 先ほど作成したコネクト名を探して選択してください。
接続を追加して良いかの確認が表示されます。
許可すると、接続の一覧に「アクティブな接続」として表示されます。
ここまで出来たら、Notion側の設定は完了です。
B4. VSCodeを開く
ここからはClaude Code側でのMCPの設定になります。
Notionの管理と連動させたいフォルダをVSCodeで開いておいてください。
デモでは「クライアント」を想定したフォルダを使用していますが、Web学習記録などでも構いません。
B5. MCPサーバーを登録する
VSCodeの統合ターミナルを開きます。
以下のコマンドをコピーして、〇〇〇 の部分を先ほどコピーしたAPIトークンに書き換えてください。
ご自身のトークンに変更できたら、Enterキーで実行します。
claude mcp add -s user notion -e NOTION_TOKEN=〇〇〇 -- npx -y @notionhq/notion-mcp-server
↓ 実行
上図の「Added ～」のように、追加した旨を示すメッセージが表示されたら上手くいっています。
B6. VSCodeを再起動し、接続を確認
VSCodeを再起動し、ClaudeCodeのチャットパネルを開きます。
チャット入力欄に/mcpと入力して、MCP serversを選択。
一覧表示の中にnotionがあり、Connectedと表示されていれば設定成功です！
Claude CodeにNotionを操作してもらおう
Notionページのテンプレートを作成
接続が確認できたら、さっそくClaude CodeにNotionページを作ってもらいましょう。
チャットに以下のように入力して送信してみてください。
- プロンプト内の
「案件管理」の部分は、Notionで使いたいページ名に変えてOKです。
指定したページが存在しない場合は、自動的に新規作成されます。 - 学習記録の場合は、クライアント名を講座名、案件タイトルをレッスン名などに置き換えると使いやすいです。
「案件管理」というNotionページの中に、案件管理用のデータベースを作ってください。
（ページが存在しない場合は新しく作成してください）
データベース名：案件管理
プロパティ：
- クライアント名（セレクト型）
- 案件タイトル（タイトル型）
- 納期（日付型）
- ステータス（セレクト型：未着手・進行中・確認待ち・完了）
データベースの各行（エントリー）はページとして開けるので、
サンプルとして1行追加し、そのページ本文に以下を入れてください：
- タスクリスト（チェックボックス3行ほど）
- メモ・議事録欄（テキストブロック）
ClaudeCodeとがページ確認・作成を始めます。
ページを探して良いか、変更して良いか、と許可を求められますので、1 もしくは 2 を選んでClaudeCodeの操作を許可してください。
少し待つと、完了通知が表示されます。
ブラウザでNotionを開いて、お願いしたページを確認してみましょう。
案件管理データベース（一覧表示されるインデックスのようなもの）と、それぞれの案件詳細が開けるようになっているはずです。
ちなみに、ページは下記アニメーションの手順で削除できます。
Notionの始め方で作った子ページ等が不要な場合は、削除してください。
気になる部分は追加で修正してもらう
最初のプロンプトで作成した以外にも「こういう情報を入れたい」 「タスクの項目を変えたい」という場合は、そのままチャットで追加の指示を送ればOKです。
案件一覧データベースに「最終編集日」列を追加してください。
また、各案件の詳細ページをもっと使いやすくしたいけど…など、具体案が思いつかないときは、チャットパネルからClaudeCodeに相談することもできます。
自分の使い方に合った形になるまで、気軽に調整してもらいましょう。
新規追加した案件ページも同じ構成にしたい場合は…
上のプロンプトはサンプルの1件を更新するものです。
ClaudeCodeに作り込んでもらっても、新しく案件を追加しようとすると、ほぼ白紙のページになります。
新しく案件を追加するたびに同じ構成で始めたい場合は、Notionのデータベーステンプレート機能を使うのがおすすめです。
【手順】
- ClaudeCodeが作ってくれたサンプル案件で、テンプレート化したい部分をコピーする
- 新しく作成したデータベースの行（アイテム）を開き、下部の「テンプレートを作成」を選択
- テンプレートのタイトルを入力
- 下部にコピーしたものを貼り付ける（必要に応じて空欄化する）
- 適用したいページで、作成したテンプレートを選ぶ
作成したテンプレートは、テーブル（データベース）上部にある新規のプルダウンから確認できます。
作成したテンプレートを「デフォルトに設定」しておくと、新しくページを追加したときにも自動で適用されます。決まった形に揃えたい、という方は、この設定をしておくと便利です。
既存のローカルファイルからNotionに移行する
今まで .md や .txt で管理していたメモがある、手で打ち直すのは面倒…なんて場合も、Claude Codeに頼むとNotionページに移行してくれます。
以下はデモで使用した「案件管理」のサンプルファイルになります。
ここまで一緒に操作してきて、試してみたい方はご活用ください。
サンプルの案件メモDL
VSCode上で対象のファイル（素材のyamadashouten.txt）を開いた状態で、次のようにお願いします。
開いている yamadashouten.txt の内容を Notion の案件管理ページに移行してください。
クライアント名・納期・メモの内容を読み取って、案件ごとに案件管理データベースに1行追加。
それぞれの案件アイテム（ページ）も作成して、テンプレートに沿って内容を登録してください。
入れる場所が不明の情報はメモ欄に入れてください。
途中でファイルのアクセス許可や、「これどうします？」という問いが表示される場合は答えてください。
完了したと報告があったら、Notionを見てみましょう。
バッチリできています。
以下のように指示をすれば、複数ファイルをまとめて移すことも可能です。
以下のファイルの内容を読み取り、それぞれNotionに移行してください。
- tanakaseitai.md：田中整体院の案件メモ
- hanamarucafe.md：はなまるカフェのタスクリスト
それぞれ案件ごとに案件管理データベースに追加し、アイテム（ページ）内に内容を整理して入れてください。
「ファイルを読む → Notionページを作る → 内容を移す」という一連の作業を、Claude Codeがまとめてやってくれます。便利ですね！
今回のデモでは案件・タスクで行っていますが、学習記録やプライベートのスケジュール管理、家計簿などまで様々なことに応用が効きます。Notionはスマホからもアクセスでき、共有もできますので、いろいろな情報まとめに活用できそうですね。
メモが散らかりがち、ポチポチと入力し直すのが面倒でまとめていない、そんな方にもClaude Code活用はおすすめです。情報整理をお任せして「見えない業務」を効率化しましょう。
まとめ
今回は Notion との連携を例に、MCPサーバーの登録方法を体験しました。
接続方式は2種類あり、それぞれ次のような流れでした。
A：OAuth認証
Notionのの場合は公式推奨。手軽だが、この方式が使えない外部サービスもあるため注意。
-
claude mcp add --transport httpコマンドで登録する - VSCode を再起動する
-
/mcpからブラウザ認証する
B：アクセストークン
導入はやや手間がかかるが、Notion以外のMCP対応サービスの大半で応用がきく手法。
- 外部ツール側でアクセストークンを取得する
-
claude mcp add -e TOKEN=〇〇〇のようなコマンドでトークンを登録する -
/mcpで接続確認する
どちらの方法も、そこまで難易度は高くありません。
上手くいかないときは、接続したいAI（ClaudeCode）に相談しながら操作を行ってみてください。
外部ツールと連携することで、様々な業務・作業をAIに手伝ってもらえるようになります。
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
6月7日まで