- 投稿日:2026/04/14
- 更新日:2026/04/17
1. はじめに
こんにちは❗ Naoです。フリーランスのFPとITコンサルをやっています✨️
突然ですが、こんなお悩みはありませんか?
🌀 挿絵を作るのが面倒で、テキストだけの記事になってしまう
🌀 そもそもどこにどんな挿絵を入れればよいか分からない
🌀 デザインセンスがない…
実は私も、ずっと挿絵なしで記事を書いていました。正直に言うと……画面スクショで誤魔化していました😅
↑こんな感じです!
🧑🏻「挿絵があったら見やすいのはわかる。でも作るの大変そう。まあスクショでいいか」
という感じで、何十本も記事を書いてきました😅
それが、クロコちゃん(Claude Code/Cowork)のおかげで状況が一変したのです!

このシリーズでは、私がノウハウ図書館の記事投稿を効率化した方法を段階別にご紹介しています。
⭕️ 第1回:記事執筆の効率化
⭕️ 第2回:挿絵の自動生成(この記事)
⭕️ 第3回:ノウハウ図書館への自動入稿
今回は挿絵を自動生成して記事に挿入する方法をご紹介します。
2. 好みのテイストをBananaXで見つける
挿絵を作る前に、まず「どんな雰囲気の挿絵にするか」を決めます。
👩🏻🦱「デザインセンスがないから無理🤮」
と思った方、大丈夫です!
ここで使うのが BananaXというサイトです。
BananaXは、AIで生成された挿絵のプロンプトと実例を集めたサイトです。サンプル画像を見て「これいいな」と思った挿絵の「プロンプトCOPY」ボタンを押すだけで、そのスタイルを再現するためのプロンプトがコピーできます!
私が選んだスタイルは 「Flat illustration / Corporate / Memphis」 です。フラットなイラストにメンフィス柄の幾何学模様が入った、明るくてプロっぽい雰囲気が気に入っています✨️
コピーしたプロンプトは、次のステップでクロコちゃんに渡します。
3. APIで挿絵を自動生成する
3.1. APIの取得と設定(初回だけ)
挿絵の生成には Nanobanana2 というツールを使います。Nanobanana2は、Googleの画像生成AIで、Gemini APIを使って高品質な画像を生成してくれます。旧バージョンより精度が高く、日本語が絡む表現も再現性が向上しています。
まずクロコちゃんに、Geminiとの接続設定をしてもらいましょう!
🧑🏻「Gemini APIの gemini-3.1-flash-image-preview モデルを使った画像生成Pythonスクリプトを作って。コマンドラインでプロンプトと出力ファイル名を指定できるようにして。APIキーの取得方法も教えて」
クロコちゃんが以下を全部やってくれます。
✅️① Gemini APIキーの取得手順を案内
✅️② 画像を生成するためのプログラムを作成
✅️③ テスト実行して動作確認
一度セットアップしてしまえば、次回以降は「挿絵を作って」と言えばすぐ使えます👍️
💡ワンポイント💡
Gemini APIは従量制で、使った料に応じて支払いが発生します。
挿絵1枚で10円くらいなので、私は遠慮無く使っています!
3.2. 文章に合った挿絵を作ってもらう
設定が終わったら、いよいよ挿絵の生成です。
ここで一番驚いたのは、「どこにどんな挿絵を入れるか」を自分で考えなくていいということです。
私は挿絵を入れたことがなかったので、どこに何を入れれば読みやすくなるかが正直わかりませんでした。そこで、クロコちゃんにこう頼みました。
※記事本体は前段階で作成済です。
🧑🏻「読みやすくなるような挿絵の内容と挿入位置を考えて。スタイルはこのプロンプト(BananaXからコピーしたもの)を使ってください。」
これだけです。
クロコちゃんは以下を全部自分でやってくれました。
✅️① mdファイルを読んで内容を把握
✅️② 挿絵が必要な箇所を判断(「ここは概念を図解したほうが分かりやすい」等)
✅️③ 各挿絵のプロンプトを生成
✅️④ Nanobanana2で画像を生成
「どこに何を入れるか」を考えるのはクロコちゃんの仕事。私は出来上がりを確認するだけです。
4. 文字化けしたら:GeminiのNanobananaで修正する
AIが生成した画像の日本語はおかしいことがあります。
そんなときはGeminiのチャット版を開き、Nanobanana2に修正をお願いします。
🧑🏻「この画像の『ファファイル』というテキストを『ファイル』に修正してください。」
どのワードをどう直したいか具体的に伝えると、しっかり直してくれますよ😊
5. 背景透過・テキスト除去ツールで仕上げる
文字を消したいときや、背景を透明にしたいときは、クロコちゃんに作ってもらったツールが活躍します。
⭕️ テキスト消去ツール:消したい部分をブラシで塗ると自然に消えてくれる
⭕️ 背景透過ツール:ワンクリックで背景を透明なPNGに変換
どちらもブラウザで動くアプリなので、インストール不要・アカウント不要・完全無料で使えます✨️
テキスト消去ツール:https://nao-text-eraser.netlify.app
背景透過ツール:https://nao-bg-remover.netlify.app
このツールをどうやって作ったかは、以下の記事でご紹介しています。
👉 Canvaいらず?クロコちゃんで背景透過・文字消しアプリを作ってみた
6. やってみたら何が変わった?
この方法を実践して、こんな変化がありました。
⭕️ 挿絵のある記事が書けるようになった
以前はスクショで誤魔化していたのに、今は図解や概念イラストが入った記事を普通に作れるようになりました。
⭕️ 記事の見た目が華やかになった
テキストだけのページと、挿絵入りのページでは読んでいる感覚が全然違います。
⭕️ 「どこに何を入れるか」まで含めて、ほぼ全部クロコちゃんに任せられる
デザインセンスがなくても、BananaXでスタイルを選んでクロコちゃんに渡すだけ。それだけで完成します。
7. おわりに
いかがでしたでしょうか?
今回ご紹介した方法を実践すると、
⭕️ BananaXで好みのスタイルをコピーできる
⭕️ クロコちゃんが挿絵の場所・内容・生成まで全自動でやってくれる
⭕️ 文字化けや細かい修正もNanobananaで対応できる
⭕️ 仕上げツールも無料で使える
という体験ができます😊
次回はノウハウ図書館への自動入稿についてご紹介します。記事の執筆から入稿まで完全自動化したい方は、ぜひチェックしてみてください✨️
本記事が、皆様のAI活用の参考になれば嬉しいです!
他にも、以下の記事を投稿しています。宜しければご覧ください✨
クロコちゃん活用事例

超簡単!スマホで見られる持ち物リストを作ろう!【Claude Code/Cowork】
【コピペでOK!】マネフォMEからスプシに自動転記する方法【Claude Code/Cowork】
【まさに秘書】乗り換えを自動検索してスケジュールに転送する方法
【クロコで作ろう!】リベシティにふりがなを振る方法【こども会員用】

Claude Codeに複数のGoogleアカウントを連携する方法
Canvaいらず?クロコちゃんで背景透過・文字消しアプリを作ってみた

寝て起きたら入稿直前だった!クロコちゃんで記事執筆が3倍速になった話【ノウハウ図書館効率化①】
挿絵も自動化!クロコちゃんで記事が華やかになった話【ノウハウ図書館効率化②】
寝て起きたら入稿されてた!クロコちゃんで記事入稿が10分になった話【ノウハウ図書館効率化③】

クロコちゃんに指示するだけで領収書を自動アップロードする方法