noteの有料プロンプト集をClaude Codeで全件収集し、Gemini APIで記事サムネイルを自動生成した実録です。
- 要点1: agent-browserのDOM取得で有料noteメンバーシップの全20記事を一括スクレイピング可能
- 要点2: 収集したプロンプトをmdファイル（4,100行）に整理し、再利用可能なプロンプト辞書を構築
- 要点3: Gemini Flash 2（2K・16:9）で5パターンのサムネイルを生成し、スキルとして自動化
対象: 画像生成AIを業務に活用したいメディア運営者・DX推進担当者
今日やること: Claude Codeのagent-browserスキルをインストールし、ログイン済みChromeプロファイルを設定する
この記事の目次
noteの有料メンバーシップに加入しても、結局は記事を手で読んでプロンプトを一つずつコピーするだけで終わっていた——そんな経験はないでしょうか。
あるメディアサイトの運営者が、画像生成専門家のnoteメンバーシップ記事（全20本、有料部分を含む）からプロンプトを一括収集し、4,100行のプロンプト辞書として整備。最終的にGemini APIで毎回ブランド統一感のある記事サムネイルを自動生成するスキルへと昇華させた事例があります。
この記事では、Claude CodeのAgentブラウザ機能を使ったプロンプト収集から、整理・活用・スキル化までの全フローを体験談として解説します。固有名詞（サイト名・筆者名）はぼかしますが、実際の手順・遭遇したトラブル・解決策はそのまま紹介します。
きっかけ — プロンプト集に「加入するだけ」で終わっていた
画像生成AIのプロンプト設計は、奥が深い専門分野です。Gemini（Google DeepMindが提供する生成AIモデル群）やMidjourney、Stable Diffusionといったツールでは、プロンプトの書き方一つで出力品質が大きく変わります。
ある画像生成の専門家がnoteでメンバーシップを運営しており、毎月プロンプト集や解説記事を公開していました。このメンバーシップに加入していたメディアサイト運営者は、記事の質の高さは評価していたものの、実際の活用は「気になるプロンプトを見つけたらその都度コピーする」程度にとどまっていました。
有料noteに眠るプロンプトの価値
このメンバーシップには20本以上の記事があり、なかには1記事あたり1,000行以上のプロンプト集を収録したものもありました。特に注目すべきは「PROMPT DESIGN辞典」シリーズで、1つの記事に67スタイルの英語語彙辞典が収録されていました。
こうした大量のプロンプトを手動で整理するのは現実的ではありません。しかし「全部読んで使う」か「放置する」かの二択しかない状況は、明らかにもったいない状態です。
「手で読んで使う」から「AIで収集して自動化する」への発想転換
そこで検討されたのが、Claude CodeのagentブラウザでDOMを直接取得し、全記事のプロンプトを一括収集してmdファイルに整理するというアプローチです。
画像生成プロンプトの品質は、被写体・スタイル・構図・照明の4要素を具体的に指定することで大幅に向上します。一方で、この4要素を毎回ゼロから考えるのは非効率です。良質なプロンプト集を「自分専用の辞書」として手元に持つことで、生成速度と品質の両方を高めることができます。
agent-browserでnoteの有料記事を全件スクレイピングする
Claude Codeには agent-browser というスキルがあります。これは、ログイン済みのChromeブラウザプロファイルを活用して、認証が必要なWebサービスを含むあらゆるブラウザ操作をClaude Codeから自動化できる機能です。
通常のスクレイピングツールでは有料会員限定コンテンツにアクセスできませんが、ログイン済みプロファイルを使えば、ブラウザで見える情報をすべてプログラム的に取得できます。（agent-browserの詳細 →）
ログイン済みChromeプロファイルを使う理由
~/.chrome-agent-browser/ に専用のChromeプロファイルを用意し、事前にnoteにログインしておきます。agent-browserはこのプロファイルを使ってChromeを起動するため、ログイン状態のまま操作できます。
有料メンバーシップに加入済みのアカウントでログインしていれば、会員限定記事の本文がDOMに含まれた状態で取得できます。実際にこの方法で、全20記事の有料部分を含む本文をすべて取得できることが確認されました。
DOMから本文を取得するJavaScriptの書き方
最初は agent-browser のUI操作（スクリーンショットを見ながら操作）で記事を読もうとしていましたが、非常に非効率でした。そこで agent-browser eval コマンドを使い、JavaScriptで直接DOMから本文を取得する方法に切り替えました。
noteの記事本文は特定のCSSクラスで管理されており、以下のJavaScriptで全文を取得できます。
document.querySelector('.note-common-styles__textnote-body').innerTextこのコマンドを各記事URLで実行することで、ページ全体をロードせずに本文テキストだけを効率的に抽出できます。UIのスクリーンショット解析と比べて処理速度が大幅に向上しました。
20記事を並列処理したときの速度
20記事すべてのURLリストを取得した後、バックグラウンドで並列処理を実行しました。各記事のテキストを /tmp/ 以下の一時ファイルに保存しながら進行したため、進捗を確認しながら処理を続けることができました。
全20記事の取得完了後に各ファイルのサイズを確認したところ、「ペイウォール後のコンテンツがない」記事は存在せず、有料部分を含む全文が正常に取得できていることが確認されました。
＼ Claude Codeの導入、何から始めればいいかわかります ／
法人向けClaude Code個別指導の無料相談はこちら収集したプロンプトを整理して「プロンプト辞書」を作る
取得した生データをそのままにしておいても使いにくいため、構造化されたプロンプト辞書として整備するステップが重要です。
有料部分の取得確認とペイウォールの検証
全記事のデータに 「ここから先は有料部分です」 というマーカーが含まれているかを確認したところ、すべての記事でペイウォールの境界が確認され、さらにその後にも大量のコンテンツが続いていることが判明しました。
| 記事 | ペイウォール位置 | 総行数 | 有料部分の行数 |
|---|---|---|---|
| 記事2（辞典篇） | 77行目 | 1,867行 | 1,790行 |
| 記事7（デザイン史篇） | 41行目 | 1,200行超 | 1,159行 |
| 記事12（NotebookLM集） | 22行目 | 2,500行超 | 2,480行 |
有料部分が圧倒的に多いことがわかりました。無料部分だけ読んでいた場合、記事の価値の95%以上を活用できていなかったことになります。
抜け漏れを発見した話と再収集
最初の整理作業では「プロンプトが少ない」と判断して詳しく確認しなかった記事がいくつかありました。しかし、キーワード出現回数を確認すると、記事5（31回）、記事8（33回）、記事10（39回）などに多数のプロンプト関連語句が含まれていることがわかりました。
再確認したところ、以下の抜けが見つかりました。
| 記事 | 最初の記録 | 実際の内容 |
|---|---|---|
| 記事5 | 「記事参照」のみ | 60枚分の講義構成 + NotebookLMカスタムプロンプト |
| 記事6 | 「記事参照」のみ | スタイル変更用コピペテンプレート（即使用可） |
| 記事8 | 「記事参照」のみ | カスタム指示・メモリ設定・キャラ設定・多段テンプレ 計9本 |
「少ない」と判断した記事の多くが、実は大量のプロンプトを含んでいたのです。この教訓から、収集後に「プロンプト系キーワードの出現回数」を定量的に確認するというステップを追加しました。
NotebookLMプロンプト15本を追加した顛末
記事12については特に印象的なエピソードがあります。最初の分析では「7本のNotebookLMプロンプトが含まれている」と報告されていましたが、全文を丁寧に読み直すと実際には15本のプロンプトが含まれていました。
それぞれのプロンプトは①〜⑮として番号付きで構成されており、最初の分析では後半の番号が見落とされていたのです。15本すべてを追加したことで、mdファイルは3,004行から4,100行へと増加しました。
Gemini APIでサムネイルを5パターン生成してみた
Claude Codeの導入や活用方法について、個別にご相談いただけます。「どの機能から使えばいいか」「自社業務への適用方法を知りたい」といった段階から対応しています。
プロンプト辞書が完成したタイミングで、実際の業務への応用として「AI研修おすすめ会社」というテーマのSEO記事サムネイル（ブログのアイキャッチ画像）の生成を試みました。
Gemini Flash 2（Googleが提供するGeminiモデルの軽量・高速バリエーション）をGemini APIを通じて呼び出し、16:9の2K解像度で画像生成を実行しました。Gemini Flash 2は、テキスト描画精度が十分に高く、日本語タイトルを画像内に正確に配置できるため、サムネイル生成に適しています。（Gemini API画像生成スキルの詳細 →）
プロンプト辞書からスタイルを選ぶ方法
収集した4,100行のプロンプト辞書には、67スタイルの英語語彙辞典（PROMPT DESIGN辞典）や、マスタープロンプトが含まれています。
スタイル選定では以下の観点で辞書を参照しました。
- 色・テイスト: ネイビー・ミニマル・コーポレートな印象
- 構図: テキストを大きく、オブジェクトは右寄りに配置
- ライティング: ソフトスタジオライティング、コンタクトシャドウ
- フォント: 幾何学的サンセリフ、極太
辞書に登録されたマスタープロンプト（記事18）をベースに、サムネイル専用にアレンジしたプロンプトを5パターン用意しました。
5パターン生成のプロンプトと結果比較
| # | スタイル | 背景色 | ヒーローオブジェクト | 結果 |
|---|---|---|---|---|
| 1 | ネイビー×タイポグラフィック | deep navy (#1a1a3e) | 発光する脳モチーフ | 採用 ✓ |
| 2 | ネオブルータリズム | 黄色 | ロボットアイコン | 派手すぎて不採用 |
| 3 | モダンミニマル白 | 白 | ビジネス写真 | コーポレート感が弱い |
| 4 | グラスモーフィズム | 紫グラデ | すりガラスパネル | テック感過剰 |
| 5 | ベントーグリッド | コーラル | カード分割 | 情報過多 |
パターン1のネイビー×タイポグラフィックデザインが最も「ミニマル・エレガント・コーポレート」の要件を満たしており、このスタイルをブランドの標準サムネイルとして採用することが決まりました。
日本語テキスト描画の精度問題
生成の過程で一度、KeychainからAPIキーを取得できないエラーが発生しました。Keychainがロックされた状態だったため、別ターミナルで security unlock-keychain ~/Library/Keychains/login.keychain-db を実行してアンロックしたところ、問題なく生成できました。
日本語テキストの描画精度については、Gemini Flash 2では「メインタイトルを1行あたり8文字以内」に抑えることで、視認性を保ちながら正確に描画できることがわかりました。文字数が多くなると文字が小さくなり、読みにくくなります。
＼ 業務自動化のお悩み、プロが30分で整理します ／
法人向けClaude Code個別指導の無料相談はこちら再利用可能なスキルとして整備する
単発の実験で終わらせず、毎回同じ品質でサムネイルを生成できる「スキル」として整備することが重要です。Claude Codeのスキル（Skill）とは、特定の作業手順を SKILL.md ファイルに記述しておくことで、いつでも同じフローを再現できる仕組みです。（Skillsの作り方 →）
SKILL.mdとprompt-templates.mdの設計
スキルの設計で工夫した点は、プロンプト辞書から収集・整理したスタイル情報を prompt-templates.md として外出しにしたことです。
skills/nexa-media/thumbnail/├── SKILL.md ← 生成フローの手順└── references/ └── prompt-templates.md ← スタイル別プロンプトテンプレートSKILL.md では生成の手順（入力確認→タイトル設計→プロンプト構築→Gemini実行→確認）を定義し、prompt-templates.md では以下の情報を一元管理します。
- カラーパレット（6色）とその使い分けの目安
- カテゴリ別ヒーローオブジェクトの辞書
- 変数マッピング（
{BG_COLOR},{MAIN_TITLE}等）
変数マッピングで再現性を保つ方法
ベーステンプレートに変数を定義し、記事テーマに応じた値を渡すだけでプロンプトが自動構築される設計にしました。
BG_COLOR: "deep navy blue (#1a1a3e)"TEXT_COLOR: "pure white"KW_EN_1: "AI"KW_EN_2: "TRAINING"HERO_OBJECT: "holographic brain glowing with cyan light"MAIN_TITLE: "AI研修"SUB_TITLE: "おすすめ会社10選"この設計により、記事タイトルさえ決まれば数分で統一感のあるサムネイルを生成できるようになりました。スキル化以前は「プロンプト辞書を見ながら手でプロンプトを書く」作業に30〜60分かかっていたものが、ほぼゼロになっています。
よくある質問
Q. noteの有料記事のスクレイピングは問題ないですか？
利用規約の確認が前提です。noteの利用規約では、自分が正規に購入・加入したコンテンツを個人の業務に利用することは一般的に許容されています。ただし、収集した内容を第三者に公開・転載することは禁止されています。今回の事例では、自分自身が購読しているメンバーシップの記事を、自分の業務効率化のために整理・活用するという用途です。
Q. Gemini APIの費用はどのくらいかかりますか？
Gemini Flash 2での画像生成は、2026年3月時点でGoogleのAI Studio（Gemini API）から利用可能です。費用は生成する画像数と解像度によりますが、1枚あたりの単価は数円〜十数円程度です。月に100枚程度の生成であれば、費用はほとんど問題になりません。正確な料金はGoogle AI Studioの公式ページでご確認ください。
Q. 収集したプロンプトをどう更新・管理すればよいですか？
mdファイルをGitリポジトリで管理するか、Googleドキュメントに転記しておくのが現実的です。プロンプト辞書は一度作ったら終わりではなく、新しい生成結果の知見を追記したり、不要なプロンプトを削除したりする更新サイクルが重要です。更新の際は「日付・変更点・生成結果の評価」を短くメモしておくと、改善の軌跡を追いやすくなります。
Q. 日本語テキストが画像に正しく描画されない場合はどうすればよいですか？
Gemini Flash 2では日本語テキストの描画精度が高いものの、文字数が多い場合や複雑な漢字では崩れることがあります。対策として、メインタイトルは1行あたり8文字以内に抑えること、プロンプト内でテキストを引用符で囲むこと（例: "AI研修"）が有効です。それでも崩れる場合は、プロンプトに ultra-precise Japanese kanji rendering というような文字描画の精度を指示するフレーズを追加して再生成します。
＼ AI活用の「次の一手」を一緒に考えませんか ／
法人向けClaude Code個別指導の無料相談はこちらまとめ
noteの有料プロンプト集を最大限に活用するためのフローをまとめると、次の4ステップになります。
- 収集: agent-browserのDOM直接取得で、有料記事を含む全文をバッチ処理で取得する
- 整理: 取得したテキストを構造化されたmdファイル（プロンプト辞書）に整理し、種別・スタイルでカテゴライズする
- 活用: プロンプト辞書を参照してGemini APIで実際の画像（サムネイル・挿絵）を生成し、効果を検証する
- スキル化: 再現性を保つためにSKILL.mdとprompt-templates.mdを設計し、毎回同じ品質で生成できる仕組みを整備する
このサイクルを一度確立すると、プロンプト設計に費やしていた時間が大幅に削減されます。また「良いプロンプトを見つけたら辞書に追加する」という習慣が身につくことで、プロンプト辞書がビジネス上の知的資産として継続的に成長していきます。
Claude Codeの導入・活用をサポートします
株式会社Nexaでは、Claude Codeを活用した業務自動化の個別指導・企業研修を提供しています。「agent-browserの設定方法がわからない」「プロンプト収集から自動化までの流れを自社に合わせて構築したい」という段階からご支援いたします。詳しい設定方法やカスタマイズについては、無料相談でお伝えしています。
