Claude CodeでSNS投稿まで完全自動化する方法｜Browser Use CLI実践

「コンテンツ生成」と「コンテンツ投稿」の間にある壁

Claude Codeでブログ記事を自動生成する。サムネイル画像も自動で作る。ここまでは多くのエンジニアが実現している。しかし、「SNSプラットフォームに自動投稿する」段階で手が止まる人は多いのではないだろうか。

理由は明確だ。記事生成はファイル操作とAPI呼び出しで完結するが、SNS投稿にはブラウザ操作が必要になる。ログイン、画像アップロード、テキスト入力、投稿ボタンのクリック。これらはAPIが公開されていないプラットフォームでは、ブラウザ自動化なしに実現できない。

私はClaude CodeとBrowser Use CLIを組み合わせて、SEO記事の執筆からnote・X Articlesへの投稿まで完全に自動化するパイプラインを構築した。この記事では、その実装手順と運用で得た知見を共有する。

Browser Use CLIとは

ブラウザ操作をAIに任せるツール

Browser Use CLIは、AIエージェントにブラウザ操作を実行させるオープンソースツールだ。Chromiumベースのブラウザを起動し、ページの読み込み・要素のクリック・テキスト入力・スクリーンショット取得などを自然言語の指示で実行できる。

Claude Codeとの組み合わせでは、Claude CodeのSkillsからBrowser Use CLIを呼び出す形で連携する。Skillが記事を生成し、画像を作成し、その後Browser Use CLIでSNSにログインして投稿するという流れだ。

なぜBrowser Use CLIを選んだか

2026年現在、Claude Codeで使えるブラウザ自動化ツールは複数存在する。Claude in Chrome（公式拡張）、Agent Browser（Vercel製）、Playwright MCP（Microsoft）などだ。

その中でBrowser Use CLIを選んだ理由は以下の通りだ。

永続セッション: ログイン状態を保持できるため、毎回ログインし直す必要がない
ファイルアップロード対応: 画像のアップロードが安定して動作する
Claude Code Skillsとの親和性: CLIツールなのでSkillsのbashコマンドから呼び出せる

note自動投稿の実装

最初にnoteから始めた理由

SNS自動投稿の実装は、noteから着手した。noteは記事投稿のUIがシンプルで、投稿フローのステップ数が少ないため、Browser Use CLIの練習台として最適だったからだ。

noteでの基本的な投稿フローは以下の通りだ。

noteにログイン（初回のみ。以降はセッション維持）
「投稿」ボタンをクリック
タイトルを入力
本文をペースト
サムネイル画像をアップロード
公開設定を確認して投稿

ファイル選択ダイアログ問題と解決策

noteの自動投稿で最も苦労したのが、サムネイル画像のアップロードだ。

通常、画像アップロードボタンをクリックするとOS標準のファイル選択ダイアログが開く。しかしこのダイアログはブラウザのウィンドウではないため、Browser Use CLIでは操作できない。

解決策はCDP（Chrome DevTools Protocol）経由でfile input要素に直接ファイルパスをセットする方法だ。ファイル選択ダイアログを開かず、プログラム的にファイルを指定できる。

この「ファイル選択ダイアログ問題」はブラウザ自動化では頻出する課題だ。noteで解決パターンを覚えたことで、後のX Articlesのカバー画像アップロードにもそのまま応用できた。

X Articles自動投稿への応用

noteの経験がそのまま活きた

noteでBrowser Use CLIの扱いに慣れた後、X Articles（旧Twitter長文記事）への自動投稿に取り組んだ。基本的なアプローチはnoteと同じだが、X Articles固有の注意点がある。

カバー画像のクロップ: X Articlesではカバー画像の下部が切り取られる仕様がある。そのため、画像生成時にテキストやアイコンを上半分〜中央に寄せて配置する必要がある
リッチテキストエディタ: X Articlesのエディタはリッチテキスト形式で、HTMLをそのままペーストすると意図しない整形が入ることがある。セクションごとに分割してペーストする方が安定する
下書き保存: 自動投稿では公開ではなく下書き保存を基本とする。最終確認は人間が行う

投稿フローの自動化

X Articles投稿の自動化フローは以下の通りだ。

Xにログイン（セッション維持済み）
X Articlesの新規作成画面を開く
タイトルを入力
本文を複数セクションに分割して順次ペースト
カバー画像をCDP経由でアップロード
挿絵画像も同様にアップロード
下書き保存

SEO記事→SNS投稿の完全自動パイプライン

1つのスキルで全工程をカバーする

現在の運用では、1つのスキルを実行するだけで以下の全工程が自動実行される。

データ収集: SEOキーワードCSV・既存記事CSV・実績DBを読み込み
記事執筆: HTML形式でSEO記事を生成（4,000〜6,000文字）
サムネイル生成: Gemini APIで16:9のサムネイル画像を生成
挿絵生成: HTML/CSS→Puppeteerスクリーンショットで図解を生成（コスト0円）
MicroCMS投稿: サムネイル・挿絵をアップロードし、記事を下書き投稿
note投稿（オプション）: Browser Use CLIでnoteに下書き投稿
X Articles投稿（オプション）: Browser Use CLIでX Articlesに下書き投稿
既存記事CSV更新: 次回のスキル実行時に重複を防止

特に重要なのは挿絵生成にAI画像生成APIを使わず、HTML/CSS→Puppeteerで生成している点だ。テキスト主体の図解画像なら、HTMLで作る方が品質が安定し、かつコストが0円だ。

パイプラインの設計思想

このパイプラインは「Thin Harness, Fat Skills」の設計パターンに沿っている。CLAUDE.mdには「SEO記事はこう書け」とは一切書かない。スキル内に記事執筆ルール・画像生成手順・CMS投稿手順がすべて定義されており、スキルを呼び出すだけで全工程が実行される。

共通の処理（画像アップロード、CMS投稿等）は共通コンポーネントとして切り出し、SEO記事スキル・X記事スキル・note記事スキルから共有参照する構造だ。

運用のポイント

/scheduleで定期実行する

コンテンツ制作パイプラインは定期実行と相性が良い。Claude Codeの/schedule機能を使えば、指定した時間に自動でスキルを実行できる。

私の運用では、GSCデータの定期取得（週1回）と組み合わせている。GSCで伸びているキーワード周辺の記事を自動生成し、内部リンクで繋げる施策だ。「資産の状態確認」としてWebサイトやサービスの状態を定期モニタリングする用途に、/scheduleは非常に使いやすいと実感している。

remote-controlでスマホから確認する

パイプラインの実行状況はremote-control機能でスマホから確認できる。基本的にremote-controlをONにしておき、外出先からいつでもタスクの進行状況を確認し、必要があれば追加の指示を出す。

1人経営で外出も多い私にとって、「PCの前にいなくても仕事が進む」のは大きなメリットだ。記事の自動生成が完了したら、スマホで下書きを確認して公開判断をするだけでよい。

「投稿」は常に下書きにする

自動パイプラインで重要なルールが1つある。自動投稿は必ず下書き（draft）状態にすることだ。

AIが生成した記事には、事実確認が必要な箇所や、微妙なニュアンスの調整が必要な箇所がある。Hooksで品質チェックを自動化していても、最終判断は人間が行うべきだ。自動化の範囲は「下書き作成まで」とし、公開判断は人間が行う。これが安全な運用ラインだ。

記事の反応と品質の関係

noteに投稿した記事には実際にいいねが多くつき、どの記事も見てもらえている実感がある。自動化しているからといって品質が低いわけではない。

品質を保てている理由は明確だ。浅い情報を大量生産するのではなく、実績・知見 × 公的データ × トピックの深い知識を組み合わせた記事を書いているからだ。自動化しているのは「作業工程」であって「思考工程」ではない。記事の骨格となる実体験やデータは事前にデータベースに蓄積しており、スキルはそれを適切に組み合わせて記事にするだけだ。