「ブログ記事の執筆から投稿まで、もっと効率化できないだろうか」——そんな思いから、Claude Codeを使ってWordPress記事の自動投稿システムを構築してみました。この記事では、Claude Codeの導入手順から、実際にAIに渡したプロンプト全文、途中でハマった認証エラーの解決法、図解ダイアグラムの自動挿入の仕組み、そして最終公開を手動にした理由まで、すべて包み隠さず解説します。初めて挑戦する方でもこの記事の手順通りに進めれば、同じシステムをゼロから再現できるはずです。実際、この記事もClaudeCodeを用いて生成しています。
Claude Codeとは？登録からインストールまでの全手順
Claude Codeの概要
Claude Codeは、Anthropic社が提供するターミナル上で動作するAIコーディングアシスタントです。普段使っているターミナル（コマンドプロンプトやiTerm2など）から直接AIに指示を出し、コードの生成・修正・デバッグをすべてコマンドライン上で完結できます。VSCodeのようなエディタ拡張ではなく、ターミナルネイティブで動く点が最大の特徴です。
私がこのツールを選んだ理由は単純で、「プロジェクトのディレクトリ構造を丸ごと理解した上でコードを書いてくれる」からです。ファイル間の依存関係を把握しながらコード生成してくれるので、複数ファイルにまたがるシステム開発との相性が抜群でした。
課金について（重要）
Claude Codeを使うには以下のどちらかが必要です。
① サブスク（Pro / Max）
- Pro：約$20/月
- Max：約$100/月
② API課金（おすすめ）
👉 実はこっちでも使えます
- APIキーを発行して従量課金で使用
- 使った分だけ支払う形式
👉 自分はこのAPI課金で使っています
ポイント
- 軽く使うならAPIの方が安い
- がっつり使うならProでもOK
アカウント作成手順
Claude Codeを使うには、まずclaude.aiでアカウントを作成し、有料プラン（ProプランまたはMaxプラン）に加入する必要があります。以下の手順で進めてください。
- ブラウザで
https://claude.aiにアクセスする - 「Sign up」をクリックし、メールアドレスまたはGoogleアカウントで新規登録する
- メール認証を完了させ、ログインする
- API使う場合はAPIキーを発行する
- 支払い情報（クレジットカード）を登録して確定する
無料プランではClaude Codeは利用できません。
Node.jsのインストール
Claude Code CLIを使うにはNode.jsが必要です。
手順
- 公式サイトにアクセス
https://nodejs.org/ - LTS版をダウンロード
- インストール後確認
node -v
npm -v
👉 バージョンが表示されればOK
Claude Code CLIのインストールと認証
アカウント準備が整ったら、ターミナルでClaude Code CLIをインストールします。事前にNode.js（v18以上）がインストールされている必要があります。
npm install -g @anthropic-ai/claude-codeインストールが完了したら、以下のコマンドで認証を行います。
claude auth login実行するとブラウザが自動的に開き、claude.aiのログイン画面が表示されます。ログイン後に「CLIからのアクセスを許可しますか？」という確認画面が出るので「Allow」をクリックしてください。ターミナルに「Authentication successful」と表示されれば認証完了です。
認証後は、任意のプロジェクトディレクトリに移動して claude コマンドを実行すれば、対話型のAIコーディングセッションが始まります。
Python環境（軽く補足）
Pythonで動くので環境も用意しておく
python -m venv venv
source venv/bin/activate
pip install requests python-dotenv
システム構成とClaude Codeへ渡した最初のプロンプト
4ファイル構成のシステム設計
今回構築したシステムは、以下の4つのPythonファイルと1つの環境変数ファイルで構成されています。
- app.py：メイン実行ファイル。全体のフロー（記事生成→画像挿入→WordPress投稿）を制御する
- article_gen.py：Claude APIを呼び出して、日本語のHTML記事を生成する
- image_gen.py：記事内容を分析し、図解ダイアグラム（Mermaid）を生成してWordPressにアップロード・記事に挿入する
- wp_uploader.py：WordPress REST APIを使って下書き（draft）として記事を投稿する
- .env：APIキーやWordPress認証情報などの機密情報を管理する
役割を明確に分離したのは、後から個別にデバッグや改修がしやすいからです。実際、WordPress認証でハマったときもwp_uploader.pyだけを修正すれば済んだので、この設計にして正解でした。
Claude Codeへの最初のセットアップ用プロンプト全文
プロジェクトディレクトリを作成し、そこで claude を起動した後、以下のプロンプトをそのまま貼り付けて実行しました。これがシステム全体の設計図になります。
Pythonで以下の仕様のWordPress記事自動投稿システムを作ってください。
【ファイル構成】
- app.py ：メイン実行ファイル。全体のフローを制御する
- article_gen.py ：Claude APIを使い日本語記事をHTML形式で生成する
- image_gen.py ：記事の内容を分析して図解ダイアグラムを生成し、WordPressにアップロードして記事に挿入する
- wp_uploader.py ：WordPress REST APIに下書き（draft）として投稿する
- .env ：APIキーやWordPress認証情報を管理する
【記事生成の仕様】
- 文字数：約5000文字
- 言語：日本語のみ
- 出力形式：HTMLタグのみ（マークダウン不可）
- 構成：<h1>タイトル、リード文<p>、<h2>/<h3>見出しの本文、<h2>まとめ
- 手順説明は<ol><li>の番号付きリストで書く
- コードやプロンプトは<pre><code>タグで掲載する
【画像生成の仕様】
- Claudeが記事を分析し、図解があると理解しやすい箇所を2〜3か所特定してMermaidダイアグラムコードを生成
- mermaid.inkでPNG化→WordPressメディアライブラリにアップロード→記事HTMLに<figure>タグで挿入
【WordPress投稿の仕様】
- カスタムREST APIエンドポイントに下書きとして保存（公開は手動）
【.envで管理する環境変数】
ANTHROPIC_API_KEY、WP_URL、WP_USERNAME、WP_APP_PASSWORD、AFFILIATE_LINK、AFFILIATE_TEXTこのプロンプトを渡した結果、Claude Codeは約2分ほどで4つのファイルをすべて生成してくれました。各ファイルにはコメントつきの丁寧なコードが書かれており、依存ライブラリのrequirements.txtまで自動作成されていたのには驚きました。
WordPress認証エラーで苦戦した話と解決法
401 Unauthorizedの壁
コード生成まではスムーズに進んだのですが、いざ python app.py を実行してWordPressに投稿しようとしたところ、見事にエラーで止まりました。ターミナルに表示されたのは以下のようなメッセージです。
requests.exceptions.HTTPError: 401 Client Error: Unauthorized for url: https://yourdomain.com/wp-json/wp/v2/posts「401 Unauthorized」——つまり認証が通っていないということです。.envファイルにWordPressのユーザー名とパスワードを設定していたのですが、WordPress REST APIは通常のログインパスワードでは認証できないことを、このとき初めて知りました。
エラー文をそのままClaude Codeに投げたら解決した
ここで私がやったことは非常にシンプルです。エラーメッセージをそのままコピーして、Claude Codeに以下のように伝えました。
このエラーを解決して、手順通りに直して
requests.exceptions.HTTPError: 401 Client Error: Unauthorized for url: https://yourdomain.com/wp-json/wp/v2/postsするとClaude Codeは即座に原因を特定し、「WordPress REST APIにはApplication Password（アプリケーションパスワード）が必要です」と教えてくれた上で、以下の手順を提示してくれました。
Application Passwordの発行手順
- WordPress管理画面（https://yourdomain.com/wp-admin）にログインする
- 左メニューの「ユーザー」→「プロフィール」をクリックする
- ページ下部にある「アプリケーションパスワード」セクションまでスクロールする
- 「新しいアプリケーションパスワード名」に任意の名前（例：「auto-post-system」）を入力する
- 「新しいアプリケーションパスワードを追加」ボタンをクリックする
- 生成されたパスワード（スペース区切りの英数字）をコピーする（この画面を閉じると二度と表示されないので注意）
- .envファイルの
WP_APP_PASSWORDに、コピーしたパスワードをスペースを含めたままペーストする
この手順通りにアプリケーションパスワードを発行し、.envファイルを更新したところ、再実行で問題なくWordPressへの投稿が成功しました。
この体験で強く感じたのは、「エラーメッセージをAIにそのまま丸ごと渡す」というアプローチの威力です。自分でStack Overflowを検索して情報を取捨選択する時間が丸ごと省略できます。エラーの文脈をAIが自動的に理解して、「何を」「どの順番で」直せばいいかを具体的に教えてくれるので、初心者でも迷うことがありません。
この一連のトラブルシュートを経て、Claude Codeは「コードを書くだけのツール」ではなく「デバッグの相棒」だと確信しました。もしあなたもシステム構築に挑戦してエラーに直面したら、まずはエラー文をそのままAIに投げてみてください。驚くほどスムーズに解決します。ClaudeCodeには教材もあるので勉強してみると理解も深まっていいかもしれません。
ClaudeCode入門教材はこちら
図解ダイアグラムを自動挿入する仕組み
image_gen.pyの4ステップ処理フロー
このシステムの中で最も「作ってよかった」と感じている機能が、図解ダイアグラムの自動挿入です。ブログ記事は文章だけだと離脱率が上がりがちですが、フロー図や構成図が挿入されるだけで、読者の理解度も滞在時間も大きく改善します。
image_gen.pyは以下の4ステップで動作します。
- Claudeが記事を分析して挿入箇所とMermaidコードを生成：生成済みの記事HTMLをClaude APIに渡し、「図解があると理解しやすい箇所を2〜3か所特定し、それぞれにMermaidダイアグラムコードを生成してください」と指示します。Claudeは記事の見出し構造を読み取り、各見出し直後に挿入すべきダイアグラムの種類（フローチャート、シーケンス図、構成図など）を判断してMermaidコードを返してくれます。
- mermaid.inkでPNG画像にレンダリング：生成されたMermaidコードをBase64エンコードし、
https://mermaid.ink/img/{base64エンコードされたコード}というURLにGETリクエストを送信します。レスポンスとしてPNG画像のバイナリデータが返ってくるので、これをローカルに一時保存します。 - WordPressメディアライブラリにアップロード：保存したPNG画像をWordPress REST APIの
/wp-json/wp/v2/mediaエンドポイントにPOSTリクエストで送信します。アップロードが成功すると、WordPress上の画像URLが返ってきます。 - 記事HTMLの見出し直後に<figure>で挿入：Claudeが指定した挿入箇所（見出しの直後）に、
<figure><img src="WordPress上の画像URL" alt="説明文"><figcaption>図：説明文</figcaption></figure>という形式でHTMLを挿入します。
これらの作業を自動で行ってくれるようになります。
なぜMermaidを使うのか
画像生成AIを使って図解を作る方法もありますが、今回あえてMermaidを選んだ理由は「テキストが文字化けしない」ことです。画像生成AI（DALL-Eやstable diffusionなど）で図解を作ると、図中の日本語テキストが崩れたり読めなかったりするケースが非常に多いです。
一方、MermaidはSVGベースのダイアグラムをコードで記述するため、ノードやラベルに書かれたテキストが正確にレンダリングされます。技術記事の図解には「正確な文字情報」が不可欠なので、Mermaidとの相性は抜群でした。
実際に生成されるMermaidコードの例を示しておきます。
graph TD
A[app.py実行] --> B[article_gen.py: 記事生成]
B --> C[image_gen.py: 図解生成・挿入]
C --> D[wp_uploader.py: WordPress下書き投稿]
D --> E[管理画面で最終確認・公開]このようにシンプルなテキストで構造図が定義でき、mermaid.inkを経由するだけでPNG画像に変換されます。APIキーも不要で、完全に無料で使える点も大きなメリットです。
最終確認は手動にした理由と実際の公開フロー
なぜ完全自動公開にしなかったか
ここまで自動化を進めると、「公開ボタンも自動で押せばいいのでは？」と思うかもしれません。技術的には可能です。WordPress REST APIのステータスを「draft」から「publish」に変更するだけで実現できます。
しかし、私はあえて最終公開を手動にしました。その理由は２つあります。
- AIの誤情報リスク：Claude APIが生成する記事は高品質ですが、100%正確とは限りません。技術的な手順が微妙に間違っていたり、バージョン情報が古かったりするケースがあります。公開前に人間の目でファクトチェックすることで、読者に誤った情報を届けるリスクを排除しています。
- SEOタイトル・メタディスクリプションの調整：AIが生成したタイトルはそのまま使えることが多いですが、検索意図とのズレがないか、競合記事のタイトルと差別化できているかを確認し、必要に応じて調整します。
自動化の範囲と手動の範囲
最終的に、自動化の範囲と手動の範囲を以下のように切り分けました。
自動化する範囲（python app.pyの一発実行で完了）：
- Claude APIによる約5000文字のHTML記事生成
- 記事内容の分析と図解ダイアグラム（Mermaid）の自動生成
- mermaid.inkでのPNG画像変換
- WordPressメディアライブラリへの画像アップロード
- 記事HTMLへの図解挿入
- アフィリエイトリンクの自動挿入
- WordPress REST APIへの下書き（draft）保存
手動で行う範囲：
- WordPress管理画面で下書き記事を開く
- 記事内容のファクトチェック（技術的な正確性の確認）
- アフィリエイトリンク前後の文脈チェックと微調整
- SEOタイトル・メタディスクリプション・スラッグの最終調整
- アイキャッチ画像の設定（必要に応じて）
- 公開ボタンを押す
このバランスが実運用でちょうどいい理由
この「下書きまで自動・公開は手動」というバランスが、実運用では最もストレスが少ないと感じています。記事執筆の中で最も時間がかかるのは「ゼロから文章を書く」工程であり、そこをAIに任せることで作業時間は体感で8割削減できました。
一方で、最終確認という「人間にしかできない品質チェック」を挟むことで、読者に対する責任を果たせます。「AIが書いたから間違ってるかもしれません」では通用しない以上、この最後のチェック工程は省略すべきではないと考えています。
実際の運用では、app.pyを実行してから公開までの所要時間は約15〜20分です。記事をゼロから書くと3〜5時間はかかっていたので、圧倒的な時短になっています。
まとめ
今回は、Claude Codeを使ってWordPress記事自動投稿システムをゼロから構築した全過程をお伝えしました。改めてポイントを振り返ります。
- Claude Codeはターミナルで動くAIコーディングアシスタントで、複数ファイルにまたがるシステム開発に特に強い
- 最初のプロンプトでシステム全体の設計図を渡すことで、一貫性のあるコードが一括生成される
- エラーが出たらエラー文をそのままAIに投げるのが最速の解決法。WordPress認証エラーもこの方法で即解決できた
- Mermaidによる図解自動挿入で、記事の読みやすさと滞在時間を向上させられる
- 下書きまで自動・公開は手動のバランスが、品質と効率の両立に最適
プログラミング経験が浅い方でも、Claude Codeに適切なプロンプトを渡せば、ここまでのシステムを構築できます。AIは完璧ではありませんが、「コードを書く」「エラーを直す」「繰り返し作業を自動化する」という領域では、もはや人間の手作業を圧倒しています。
もしこの記事を読んで「自分もやってみたい」と感じたら、まずはClaude Codeのインストールから始めてみてください。最初の一歩さえ踏み出せば、あとはAIが伴走してくれます。また、ClaudeCodeの教材などもあるので勉強してみるとより理解が深まるかもしれません。
ClaudeCode入門教材はこちら
この記事が、あなたのブログ運営の効率化に少しでも役立てば幸いです。質問があればコメント欄やSNSでお気軽にどうぞ。
コメント