前回の記事では、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とつないで、案件管理ページをまるごと作ってもらう方法を紹介します。
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が操作できるか試してみましょう。
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と表示されていれば設定成功です！
まとめ
今回は Notion との連携を例に、MCPサーバーの登録方法を体験しました。
接続方式は2種類あり、それぞれ次のような流れでした。
A：OAuth認証
Notionのの場合は公式推奨。手軽だが、この方式が使えない外部サービスもあるため注意。
claude mcp add --transport httpコマンドで登録する- VSCode を再起動する
/mcpからブラウザ認証する
B：アクセストークン
導入はやや手間がかかるが、Notion以外のMCP対応サービスの大半で応用がきく手法。
- 外部ツール側でアクセストークンを取得する
claude mcp add -e TOKEN=〇〇〇のようなコマンドでトークンを登録する/mcpで接続確認する
どちらの方法も、そこまで難易度は高くありません。
上手くいかないときは、接続したいAI（ClaudeCode）に相談しながら操作を行ってみてください。
次のレッスンでは、簡単にClaudeCodeに指示をしてNotionを操作してもらう方法を解説します。