2026/04/07

はじめに

Claude Code（Anthropic公式のCLIツール）を使って、技術ブログの記事作成からWordPressへの投稿、表示確認、品質改善までを1日で完了させました。

Tech Blogを始めようとしたものの、「記事を書く → WordPressにコピペ → 整形 → プレビュー → 修正」の繰り返しが地味に手間で、なかなか記事を公開できずにいました。Claude Codeを使えば、記事の下書きから投稿、CSSの調整、SEO対策まで一気通貫でターミナルから完結できるのではないかと考え、試してみました。

結果、記事の作成・投稿・品質改善まですべてターミナル上で完結し、従来の半分以下の時間で記事を公開できました。当社はMicrosoftパートナーとしてAzure関連の技術記事も発信しており、この仕組みで記事の量産体制を構築しています。

なぜClaude Codeを選んだのか

ツール	記事作成	WP投稿	表示確認	SEO設定
WordPress管理画面で手動	手動	GUI	プレビュー	手動
ChatGPT + コピペ	AI生成	手動コピペ	手動	手動
Claude Code + WP-CLI	AI生成	コマンド	自動スクショ	コマンド

• ターミナルで完結 — ブラウザを開く必要がない。記事作成からデプロイまで一連の流れで実行できる
• WP-CLIとの相性が良い — Claude CodeはSSH経由でサーバーのWP-CLIを直接叩ける
• 品質チェックも自動化 — Playwrightでスクリーンショットを撮って表示を確認できる
• 反復改善が速い — 「ここ修正して」→即反映→即確認のサイクルが数秒

やったこと

1. 記事テンプレートの準備

まず、Tech Blog用のHTMLテンプレートを作成しました。見出し構成、コードブロック、CTA（お問い合わせ誘導）のフォーマットを統一することで、Claude Codeに「テンプレートに沿って記事を作って」と指示するだけで、一定品質の記事が生成されます。

<h3>はじめに</h3>
<p>何をやったか</p>
<h3>なぜ〇〇を選んだのか</h3>
<h3>やったこと</h3>
<h3>つまったところ</h3>
<h3>まとめ</h3>
<h3>CTAセクション</h3>

2. Claude Codeで記事を生成

Claude Codeに作業の文脈を共有した状態で「テンプレートに沿って記事を作って」と指示します。Claude Codeはファイルの読み書きができるため、HTMLファイルとして直接出力されます。

実際の会話の流れはこのようなものでした：

ユーザー: テンプレートに沿って記事を作って
Claude Code: → docs/blog-windows11-home-ssh.html を作成

ユーザー: 自社のパスがそのまま出ています修正してください
Claude Code: → IPアドレス、ユーザー名をマスク

ユーザー: Microsoftのリファレンスとかリンク付けた方がいいかな？
Claude Code: → Microsoft Learn の公式ドキュメントリンクを3箇所に追加

対話しながら記事の品質を上げていけるのが、ChatGPTにコピペするのとは違うところです。

3. WP-CLIでWordPressに投稿

レンタルサーバーにSSH接続し、WP-CLIで記事を投稿します。Claude Codeがこの操作も実行してくれます。

# HTMLファイルをサーバーに転送
scp -P 8022 blog-post.html user@server:/tmp/

# WP-CLIで投稿（下書きとして）
wp post create --post_title='記事タイトル' \
  --post_name='slug-name' \
  --post_status=draft \
  --post_category=7 \
  --post_content="$(cat /tmp/blog-post.html)"

WP-CLIの詳細は WP-CLI公式ドキュメントを参照してください。

4. Playwrightで表示確認

投稿した記事の表示をPlaywrightでスクリーンショットを撮って確認します。ブラウザを開かずにClaude Codeが画像を見て判断してくれます。

# フルページスクリーンショット
npx playwright screenshot --browser chromium \
  --full-page --viewport-size="1280,900" \
  "https://example.com/slug-name/" \
  /tmp/blog-screenshot.png

実際にこの方法で「テーブルのCSSが効いていない」という問題を発見し、テーマのCSSにテーブルスタイルを追加する対応を行いました。

5. meta descriptionとSEO設定

Rank MathのSEO設定もWP-CLIから行えます。

# meta descriptionを設定
wp post meta update 136 rank_math_description \
  '記事の説明文をここに入れる'

つまったところ

WP-CLIのpost updateでパイプの標準入力が効かない

記事の更新時に、HTMLファイルの内容をパイプで渡そうとしたところ、本文が -（ハイフン1文字）になってしまいました。

# これは失敗する
cat blog-post.html | wp post update 136 --post_content=-

原因は、WP-CLIの post update コマンドでは - が標準入力として解釈されない場合があることでした。代わりに、ファイルをサーバーに転送してから $(cat ...) で渡す方法で解決しました。

# サーバーにファイルを転送してから更新
scp blog-post.html user@server:/tmp/
wp post update 136 --post_content="$(cat /tmp/blog-post.html)"

CSSのキャッシュバージョンが更新されない

テーマのCSSにテーブルスタイルを追加しましたが、ブラウザで確認してもスタイルが反映されませんでした。

原因は、WordPressテーマの functions.php でCSSのバージョン番号がハードコードされていたためです。バージョン番号を更新することでキャッシュが破棄されました。

// functions.php
// '2.2' → '2.3' に変更してキャッシュを破棄
wp_enqueue_style('main', $theme_uri . '/css/style.css', [], '2.3');

Claude Codeに任せられること・任せられないこと

任せられる	人間がやるべき
テンプレートに沿った記事の下書き	記事のテーマ・切り口の決定
HTMLの生成・修正	技術的な正確性の最終確認
WP-CLIでの投稿・更新	機密情報のマスク確認
Playwrightでの表示確認	読者目線での読みやすさチェック
CSSの追加・修正	ブランドトーンとの整合性
meta description・SEO設定	公開の最終判断
公式ドキュメントのリンク追加	記事の方向性・ネタ選び

まとめ

• Claude Code + WP-CLI で記事の作成から投稿まで、ターミナルで完結する
• Playwrightで表示確認を自動化でき、CSSの問題もその場で修正できる
• 対話しながら品質を上げられるのが、単純なAI文章生成とは違う点
• テンプレートを用意しておくと、記事の品質が安定する
• 機密情報のマスクや技術的正確性は人間が最終確認すべき

Tech Blog・コンテンツ制作のご相談

株式会社ビギニングは、AIツールを活用した業務効率化やコンテンツ制作のサポートを行っています。

• 社内Tech Blogの立ち上げ・運用支援
• AI（Claude、GPT）を活用した業務フロー構築
• WordPress + WP-CLIによるコンテンツ運用の自動化

お気軽にご相談ください。

お問い合わせはこちら