「面倒くさい」は才能だ〜Substack投稿スキル作成の全記録〜
AIとブラウザを操り、コピペ地獄から解放されるまでの試行錯誤を全公開
突然ですが、あなたが「毎回やるのが嫌だな」と感じる作業は何ですか?
実は、その感覚こそが、自動化の出発点です。
プログラマーやエンジニアには、こんな逆説的な発想があります。
「面倒を解決するために、もっと面倒なこと(ツールを作る)をする」
同じ面倒でも、繰り返す面倒ではなく、「作る楽しさ」を選ぶ。それがエンジニア的な思考法です。
そして今や、AIを使えばプログラマーでなくてもその恩恵を受けることができます。頻繁に行う作業を「小さく自動化」することで、AIの力を日常に取り込み、やがて複雑で規模の大きい自動化にも挑戦できるようになります。
今回は、私が実際に取り組んだ「Substackへの投稿作業の自動化」を題材に、スキルを作って育てるプロセスをそのままシェアします。
意外にも時間がかかりましたが、その試行錯誤の過程に、自動化のコツが詰まっています。
なぜ、Substackの投稿が面倒だったのか
Substackへの記事投稿は、一見シンプルに見えて、実はいくつかの10の手作業が積み重なっています。また、タイトル、サブタイトル、SEO用の記事説明を作る必要もありました。



一つひとつは小さな作業ですが、毎回3~4回のコピペと複数のクリック操作と、「考える時間」が必要になります。「またか…」という気持ちが積み重なって、投稿するたびにじわじわとストレスになっていました。
最初に思いついたのは「APIで自動化できないか?」でした。APIとはプログラムを通じて、Webシステムを操作する仕組みのことです。しかし、Substackにはそのような仕組みが用意されていません。人間が手でブラウザを操作するしかないのです。
そこで目を向けたのが、Claude in Chrome です。
Claude in Chromeは、ClaudeがChromeブラウザを直接操作できる仕組みです。これを使えば、マークダウン形式で書いた文章をもとに、Substackへの下書き投稿を自動で完成させることができるのではないか、と考えました。
スキルとは何か?(前回の記事を読んでいない方へ)
本題に入る前に、「スキル」について簡単に説明します
スキルとは、Claudeに特定の作業をさせるための「手順書」 のようなものです。
「Substackに投稿するとき、どの画面を開いて、何を入力して、どのボタンを押すか」といった手順をあらかじめ文章で書いておく(指示だけでなくプログラムも実行できます)と、次回からはそれをClaudeが読んで同じ作業を繰り返してくれます。
毎回細かく指示を出す必要がなくなり、「Substackに投稿して」と一言伝えるだけで動いてくれる——それがスキルの力です。
バージョン1:まず動かしてみる
最初は、シンプルなプロンプトで作業を依頼してみました。
テスト用の記事データ(
.mdファイル)を準備するClaudeに、以下のように依頼をします。
添付ファイルの内容を読んで、記事のタイトル、サブタイトル、SEO説明文章、URL(スラッグ)の4つを考えてください入力に必要なものが出来上がったら、次に「操作」を依頼します。操作を依頼する前に、Google Chromeを立ち上げて、Claude in Chromeのログインは完了させておく必要があります。
Control Chrome (Claude in Chrome)を使って、私のSubstackに、記事を投稿(下書き)してください。
新規投稿は、https://ccwm.substack.com/publish/post?type=newsletter です。以下を全て記入してください。
- セクション
- タイトル
- サブタイトル
- 本文(MD形式ではなく、書式付きフォーマットで貼り付け)
- 設定をクリックして開く
- スクロールして、SEOオプションをクリック
- SEO説明文章
- URL(スラッグ)コツは「小うるさいオカン(大阪人にとって、母親のこと)」のように、ちょっとだけ細かく伝えることです。
一発では成功しませんでした。何度も失敗して試行錯誤している場合は、停止させて、「この画面が出たらこうして」「このボタンはここにある」など、指示を細かくしながら作業を進めました。
一通りの投稿作業をClaudeが完了させることができました。正直言って、めっちゃめんどくさいです。さっと、自分で作業した方が簡単ですが、次の一言で報われます。Claudeに次のように指示します。
やっとSubstackに投稿できました。対話を分析して、Substackに投稿するためのスキルを作成してください。
Control Chrome, Claude in Chromeを使って作業をします。私が与えるのは、Markdownファイルだけです。
あとは、全部、あなたが考えて、作業するスキルにしてください。作業を一通りやり遂げたら、「この一連の作業をスキルにして」と伝えるだけで、Claudeが手順書を作成してくれます。難しいことは何もありません。
ただし、一つ大きな問題がありました。とにかく遅い のです。
バージョン2:遅い原因を探る
動くことは動くのですが、体感で「これなら自分でやった方が早い」と感じるほどの遅さでした。
「Claudeがブラウザ上でマウスを動かして、文字を一文字ずつ入力している」——そのイメージ通りの操作をしているため、どうしても時間がかかってしまいます。
ここで私は、「改善できるか、Claudeに相談する」ことにしました。
すると、javascript_tool というものが使えることを教えてくれました。
computer_use(コンピューター操作)がマウスやキーボードを人間のように操作します。その方法は、恐ろしく(個人の体験)遅いです。まず、スクリーンショットを撮影し、その画像をClaude AIのサーバーに送ります。その画像を解析して、次の行動を考えます。次の行動をしたら、またスクリーンショットを撮影し・・・と続けます。
そりゃー、時間がかかりますよね。
それに対して、javascript_tool はブラウザ上で直接JavaScriptコードを実行できる仕組みです。ページの要素に直接値を書き込んだり、ボタンを直接クリックさせたりできるため、見た目上の操作をスキップして処理できます。
臨機応変な判断が必要な場合、computer use が良いですが、「決まりきっている作業」や「システム」なら、javascript_tool が使えます。
スキルの修正は、簡単です。「カスタマイズ」からスキルを選び、編集をするだけです。以下のように指示をします。
このスキルは、computer_use を使っていますが、動作が非常に遅いです。そこで、javascript_tool を使うように変更してください。
javascript_tool を使う上で、必要な情報は、Chrome上で調査してください。
ただし、私が作業して調べたほうが良いことがあれば、指示してください。私が調べて、あなたに伝えます。上記の指示のように、「私が何を調べて教えればいいか、指示してくれ」とClaudeに聞き、必要な情報を渡していくことで、スムーズに作業することができます。
この逆転の発想——「何を教えればいい?」とClaudeに聞く——は、非常に効果的です。取得できない可能性のあるデータを、Claudeが無理に試行錯誤して時間を浪費することを避けることができます。
さて、何度かのやりとり、試行錯誤、テストを経て、処理速度はかなり改善されました。
バージョン3:徹底的に速くする
それでも、まだ満足できませんでした。
そこで、実際に投稿作業を行いながら、その様子をClaudeに分析させてみることにしました。まず、実際に投稿テストをします。その次に
スキルの実行を分析して、無駄な部分を分析してください。改善すべきところ、改善できるところを教えてくださいすると、こんなことがわかりました。
Claudeが同じ内容を3回も「読んで・出力して」いる無駄があった。
細かい技術的な説明は割愛しますが、必要のないClaude AIの処理(使用量を消費するし、動作が遅くなる)が3回も繰り返されていたのです。その部分を省略・統合することで、処理全体がシンプルになり、速度が大幅に向上しました。
実際には、3分程度で下書き投稿が完成するようになりました。
たかが3分の空き時間ですが、その間に筋トレ(しませんけど)をしたり、席を立って移動したりする小休憩ができます。それに、面倒な作業を自分がやらなくていい、というだけで、体感のストレスはぐっと減ります。
まとめ:スキルを育てるプロセスが、学びそのもの
今回の取り組みを通じて、改めて感じたことをまとめます。
マインドセット
「面倒くさい」という感覚を大切にする。それが自動化の出発点です。
知識
Claude in Chromeを使えば、ブラウザ操作を自動化できます。APIがなくても、Claudeがブラウザを操れる。
やり方
まず一通り作業をして見せる
うまくいったら「スキルにして」と依頼する
スキルを使ってみて、問題を見つける
改善策をClaudeと一緒に考える
完璧なものを最初から作ろうとしなくていいのです。動くものを作り、使って、育てる。そのプロセス自体が、AIとの協働を学ぶ最良の方法です。
公開スキルのご案内
今回作成したSubstackスキルは、以下のリポジトリで公開しています。
ただし、スキルの中身を必ずカスタマイズしてください。 私のSubstackのURLやカテゴリ名がそのまま入っているため、あなたの環境に合わせて書き替える必要があります。
スキルをアップロードする
「…」をクリックして、スキルの編集を実行する
会話画面が開くので、指示をする
このスキルは、他者のもので、投稿用のURLや、セクション名が違います。私用に修正してください。
まず、スキルを読み込んで、「固有の情報」の箇所をピックアップしてください(URLや、名前など)。
次に、それらを置き換えるために、私に質問をしてください。得られた情報で、書き換えをしてください。実は、ニュースレターの新規作成は、 「あなたのSubstackのURL/publish/post?type=newsletter」です。このスキルは、 ccwm.substack.com として記載されているので修正が必要です。他にも、キーワード候補や、デフォルトのセクションなども「私専用」になっているので修正が必要です。
やってみたら、難しくないので、試してみてください。Claudeが修正してくれるはずです。ぜひ試してみてください。
※ Claude Desktop App を使ってください。Claude in Chrome を Google Chromeにインストールして設定しておいてください。さらに、Claude Desktop App のコネクタで「Control Chrome」を有効にする必要があります。このスキルを使うときは、Claude in Chromeが起動している状態で使います
今回のプロセスは、Substackの記事で説明しましたが、別のWebシステムでも応用可能です。Claude CoworkのDispatchという機能にも応用できます。こちらは、パソコンそのものを操作するので、javascript_useのようなことはできませんが、パソコン作業の自動化が可能になります(私は、試したことはないです)。




記事を見てワクワクしました。一緒に作業を考えて、良い自動化とは何か?を研究室で一緒に考えるような感じを受けました。知識がなくてもできるのが一番ワクワクしました。早速触ってみます💻
追記: 長ーい文章だと、実行に時間がかかります。しかも、無駄にトークンを消費するので、その場合は、コピペが良いかもしれない。理由はシンプルです。
ClaudeのMarkdownファイルのデータを、Claude in Chrome に渡すときに、プログラマティック(いわゆるコード実行)に渡すのではなく、Claude自身が読み込んで、javascript_tool の javascript として吐き出すという作業をするからです。
[Claude チャット] => Claude AIが飲み込む(ここは一瞬、キャッシュしているから) => Claude AI が、javascript_tool コードを吐き出す(長ーいコードとして出力。ここが時間がかかる) => ブラウザで実行(ここは早い)
もっと良い方法は、実はあります。Claude Code を使って、Playwright を使う(ログインしておくが、若干の鬼門だけども)。