Notion MCP連携でWordPress記事を自動生成する方法

2026年2月16日 最終更新日時 : 2026年2月16日 NARA REN
Claude Code × Notion MCP連携でWordPress記事を自動生成する方法

Claude CodeにはMCP（Model Context Protocol）という仕組みで外部サービスと連携できる機能があります。これを使ってNotionと接続すると、「Claude Codeに記事を書かせてそのままNotionに保存」というワークフローが実現できます。

さらに「スキル」という機能を使えば、毎回同じ指示を出さなくてもスラッシュコマンド一発でWordPress用のHTML記事を生成できるようになります。本記事ではその全体の流れを解説します。

この記事でできるようになること

  • Claude CodeからNotionに直接ページを作成できる
  • WordPressのGutenbergエディタにそのまま貼り付け可能なHTMLを生成できる
  • /wordpress-article コマンド一発で記事作成からNotion保存まで自動化できる

最新の投稿はこちら

最新の関連記事はこちら

前提環境

  • Claude Codeがインストール済み（VSCode拡張 or CLI）
  • Notionアカウントを持っている
  • WordPressサイトを運営している

Step 1: Notion MCPをセットアップする

MCPサーバーを追加

ターミナルで以下を実行します：

claude mcp add --scope user --transport http notion https://mcp.notion.com/mcp

実行結果：

Added HTTP MCP server notion with URL: https://mcp.notion.com/mcp to user config
File modified: C:\Users\{username}\.claude.json

💡 --scope user を指定すると、全プロジェクト共通で使えるグローバル設定になります。

OAuth認証を完了する

Notion MCPはGitHub MCPと違って、トークンの手動取得が不要です。OAuth認証で自動的に接続されます。

ただし、初回の認証には注意点があります。

⚠️ VSCode拡張版で /mcp を実行しても「needs-auth」のまま認証が始まらない場合があります。その場合はCLI版で認証を行ってください。

CLIでの認証手順：

  1. ターミナルで claude を実行してCLIを起動
  2. CLI内で /mcp を入力
  3. Notionサーバーを選択するとブラウザが開く
  4. Notionにログインしてアクセスを許可

認証完了後、VSCodeを再起動すればVSCode拡張版でも使えるようになります。

Step 2: Notionに記事を作成してみる

セットアップが完了したら、Claude Codeに「Notionにページを作成して」と指示するだけで、Notionに直接ページが作られます。

しかし、NotionのページをそのままWordPressにコピペするとスタイルが崩れます。NotionとWordPressはマークアップに互換性がないからです。

Step 3: WordPress向けのHTMLで出力する

解決策は、最初からWordPressのGutenbergブロック形式のHTMLで出力することです。Gutenbergブロック形式とは、以下のようなHTMLコメントでブロックを囲む形式です：

<!-- wp:heading -->
<h2>見出し</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>本文テキスト</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>コードブロック</code></pre>
<!-- /wp:code -->

この形式で書かれたHTMLをWordPressの「コードエディター」に貼り付けると、見出し、段落、コードブロック、テーブルなどが正しくブロックとして認識されます。

貼り付け手順

  1. WordPressの投稿画面を開く
  2. 右上の「…」メニュー → コードエディターに切り替え
  3. 生成されたHTMLをそのまま貼り付け
  4. ビジュアルエディターに戻して表示を確認

Step 4: スキルで自動化する

毎回「WordPress用のHTMLで書いてNotionに保存して」と指示するのは面倒です。Claude Codeの「スキル」機能を使えば、スラッシュコマンド一発で同じ操作を実行できます。

スキルとは

スキルはClaude Codeのカスタムコマンドです。Markdownファイルに指示を書いておくと、/コマンド名 で呼び出せます。

スキルファイルの作成

以下のパスにファイルを作成します：

~/.claude/skills/wordpress-article/SKILL.md

💡 ~/.claude/skills/ に置くとグローバル設定になり、どのプロジェクトでも使えます。プロジェクト固有にしたい場合は .claude/skills/（プロジェクトルート）に置きます。

SKILL.mdの中身

スキルファイルはYAMLフロントマター + Markdownという形式です。以下が実際の構成例です：

---
name: wordpress-article
description: 記事をWordPress Gutenbergブロック形式のHTMLで出力し、Notionに保存する。
argument-hint: [記事のテーマ]
---

# WordPress記事作成スキル

与えられたテーマについて、WordPress Gutenbergのブロックマークアップ形式のHTMLで記事を作成し、
Notionに保存する。

## 出力形式のルール
- 必ずGutenbergブロックコメントで囲む
- タイトルはHTMLに含めない
- 導入文 → 本文 → まとめの構成
- ハマりポイントと解決策を含める

## テーマ
$ARGUMENTS

ポイントは以下です：

フィールド説明
nameスラッシュコマンド名（/wordpress-article）
descriptionスキルの説明。Claudeが自動判断にも使う
argument-hint入力欄に表示されるヒント
$ARGUMENTSユーザーが入力した引数が展開される

スキルの使い方

Claude Codeで以下のように入力するだけです：

/wordpress-article Next.js App Routerの最新の書き方

これだけで以下が自動的に実行されます：

  1. Claudeが記事を執筆
  2. Gutenbergブロック形式のHTMLで出力
  3. Notion MCP経由でNotionに保存

ハマりポイントと対処法

1. Notion MCPの認証が通らない（VSCode）

❌ 問題：VSCode拡張版で /mcp を実行しても「needs-auth」のままでクリックしても反応なし

✅ 解決策：ターミナルで claude を実行してCLI版を起動。CLI内で /mcp を実行するとブラウザが開いて認証できる。認証後にVSCodeを再起動すればOK。

2. NotionからWordPressへのコピペでスタイル崩れ

❌ 問題：NotionのページをそのままWordPressにコピペするとテーブルや背景色が崩れる

✅ 解決策：最初からGutenbergブロック形式のHTMLで出力する。スキルを作っておけば毎回自動でこの形式になる。

3. スキルが認識されない

❌ 問題：/wordpress-article と入力してもコマンドが見つからない

✅ 解決策：Claude Codeを再起動する。スキルファイルが ~/.claude/skills/wordpress-article/SKILL.md に正しく配置されているか確認。

まとめ

  • Notion MCPを導入すれば、Claude Codeから直接Notionに記事を保存できる
  • WordPress向けにはGutenbergブロック形式のHTMLで出力することでスタイル崩れを防げる
  • スキルを作成すれば /wordpress-article テーマ だけで全自動化できる
  • スキルは ~/.claude/skills/ に置けばどのプロジェクトでも使える

一度セットアップしてしまえば、記事執筆のワークフローが大幅に短縮されます。技術記事を頻繁に書く人にはおすすめのワークフローです。

良かったらフォローお願いします

カテゴリー
MCPサーバー、Notion

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
GitHub Personal Access Token (PAT) 取得ガイド
2026年2月16日
次の記事
【VSCode背景透過】"GlassIt-VSC"の導入方法 - コーディング効率を爆上げ
2026年2月16日