Claude Codeのスキルでnote記事を自動投稿する仕組みを作ってみた

皆さん、こんにちは。今回はClaude Codeの「skills」という機能を使って、note記事の作成を自動化した話をシェアします。

「開発作業をClaude Codeで進めて、最後にコマンド一発でその開発記をnoteに下書き投稿する」——サムネイル画像の自動生成まで含めて、全部自動でやってくれる仕組みを作りました。ちなみにこの記事自体も、まさにその仕組みで投稿されています。

Claude Codeには「スラッシュコマンド」を自分で定義できるskillsという仕組みがあります。~/.claude/commands/ ディレクトリにマークダウンファイルを置くだけで、オリジナルのコマンドが使えるようになります。

例えば ~/.claude/commands/note-new.md というファイルを作れば、Claude Codeのチャットで /note-new と打つだけで、そのファイルに書かれた手順をClaude Codeが実行してくれるわけです。

ポイントは、skillsが実行されるとき会話スレッド全体がコンテキストに入っていること。つまり、そのスレッドで行った作業内容をすべて踏まえた上で、指示を実行してくれるんですよね。

今回作った /note-new skillsは、以下の流れで動きます。

• 認証情報の取得 — ローカルのJSONファイルからnote.comのログイン情報を読み取る
• note.comにログイン — Playwright MCPでブラウザを自動操作してログイン
• 記事コンテンツの生成 — 会話スレッドの内容を元にClaude Codeが記事を書く
• サムネイル画像の生成 — Gemini 3.0 Proで文字入りのアイキャッチ画像を自動生成
• note.comエディタで入力 — Playwrightでエディタにタイトル・本文・サムネイルを入力
• 下書き保存 — 「下書き保存」ボタンをクリックして完了

このスキルの核となるのがPlaywright MCPです。Claude Codeからブラウザをプログラマティックにコントロールできる仕組みで、ログインフォームの入力からボタンのクリックまで、人間がやる操作をそのまま自動化できます。

具体的には、こんなステップで動きます。

• browser_navigate でnote.comのログインページを開く
• browser_snapshot でページの状態を確認する（アクセシビリティツリーを取得）
• browser_fill_form でメールアドレスとパスワードを入力
• browser_click でログインボタンをクリック

note.comの本文エディタはProseMirrorというリッチテキストエディタを使っています。ここにどうやって書式付きテキストを入力するかが最大のポイントでした。

最初はHTMLをClipboardEventでペーストする方法を試したのですが、実はマークダウンをそのままtext/plainでペーストする方が簡単でした。note.comのProseMirrorエディタはマークダウンをネイティブにパースしてくれるんです。

code
const editor = document.querySelector('.ProseMirror');
editor.focus();
const clipboardData = new DataTransfer();
clipboardData.setData('text/plain', markdownText);
const event = new ClipboardEvent('paste', {
  bubbles: true, cancelable: true,
  clipboardData: clipboardData,
});
editor.dispatchEvent(event);

見出し、太字、リスト、コードブロック——全部マークダウン記法のまま貼り付ければOKです。HTMLに変換する手間が省けて、スキルの記述もシンプルになりました。

記事にはサムネイル画像が欲しいですよね。これも自動化しています。

別途作っていた /banana というスキル（Gemini APIで画像生成するコマンド）の仕組みを /note-new に統合しました。Gemini 3.0 Proを使うのがポイントで、Proモデルは画像内に日本語を描画できるんです。

サムネイルには記事タイトルのキーワードを大きく入れるようにしています。YouTubeのサムネイルのように、テキスト入りの方がクリック率が高くなるからです。プロンプトでは配色・構図・タイポグラフィまで指定して、ブログサムネイルとして映えるデザインを狙います。

生成された画像は、Playwrightの browser_file_upload を使ってnote.comの「見出し画像」エリアに自動アップロードされます。サムネイルが不要な場合は --no-thumbnail フラグでスキップすることもできます。

このスキルを実際に動かしてみて、いくつかの知見が得られました。

• マークダウンペーストが正解 — HTMLペーストよりシンプルで確実。note.comのProseMirrorが自動パースしてくれる
• ペーストが重複することがある — ClipboardEventが2回発火するケースがあり、ペースト後にDOMをチェックして重複除去が必要
• Playwright MCPのファイルアクセス制限 — browser_file_upload はPlaywrightの許可ディレクトリ内のファイルしか扱えない。画像生成後にプロジェクトディレクトリにコピーする一手間が必要
• サムネはProモデル+文字入り — Flashモデルでは文字が入らない。Proなら日本語テキストも描画できるので、クリック率の高いサムネイルが作れる

使い方はとてもシンプルです。

• Claude Codeで作業を実施する（例: アプリの開発、作業の自動化など）
• 作業が終わったらそのスレッド内でスキルを呼ぶ: /note-new 開発の技術ブログ
• あとは自動 — ログイン → 記事生成 → サムネイル生成 → エディタ入力 → 下書き保存まで全自動

スレッド内の作業内容（何を作ったか、どんな技術を使ったか、どこで詰まったか）がすべてコンテキストに入っているので、リアルで具体的なnoteが自動で出来上がります。

既存の下書きを更新したい場合は /note-update を使えば、記事の部分修正や全文書き換えも自動でやってくれます。

自分でもskillsを作りたい方向けに、最低限の手順を紹介します。

• ~/.claude/commands/ ディレクトリにマークダウンファイルを作成する
• ファイルの先頭にフロントマター（description と argument-hint）を書く
• 本文にClaude Codeに実行してほしい手順を自然言語で記述する
• Claude Codeのチャットで /ファイル名 と打てば実行される

手順の中では、Bashコマンドの実行、ファイルの読み書き、MCP経由のブラウザ操作など、Claude Codeが持つすべてのツールを使えます。やりたいことを日本語で書くだけなので、プログラミング経験が浅くても作れるのが嬉しいポイントです。

※人間の追記：正確には上記ですが、やってみたい作業をClaude Codeにやらせた後、「今の手順を/~~でskillsにして」と伝えれば勝手にskillsが完成します（便利だね）

Claude Codeのskillsを使えば、開発→記事執筆を一つのスレッドで完結させることができます（確認のために下書きで止めていますが、投稿まで自動化も可能です）

• 開発作業のコンテキストがそのまま記事に活きる
• Playwright MCPでブラウザ操作を自動化できる
• マークダウンペーストでProseMirrorに書式付き入力が可能
• Gemini 3.0 Proで文字入りサムネイルも自動生成できる
• skillsはマークダウンで書くだけなので誰でも作れる

「開発したら記事を書きたいけど面倒」という方には、かなりおすすめのワークフローです。ぜひ試してみてください。

• Claude Code — Anthropic公式CLI（カスタムスキル機能）
• Playwright MCP — ブラウザ自動操作（ログイン・エディタ入力・画像アップロード）
• Gemini 3.0 Pro — サムネイル画像の自動生成（文字描画対応）