未ログイン状態で閲覧中
  • 投稿日:2026/04/14
  • 更新日:2026/04/17
挿絵も自動化!クロコちゃんで記事が華やかになった話【ノウハウ図書館効率化②】

挿絵も自動化!クロコちゃんで記事が華やかになった話【ノウハウ図書館効率化②】

Nao@あなたの夢を叶えるFP

Nao@あなたの夢を叶えるFP

この記事は約7分で読めます
要約
私はデザインが苦手なので、ずっと挿絵なしで記事を書いていました💦 でもクロコちゃんに頼んだら、挿絵入りの記事が簡単に書けるようになりました✨️ BananaXでスタイルを選んで渡すだけで、挿絵の場所・内容までクロコちゃんが全部考えてくれます😊挿絵に悩んでいる方はぜひ!

1. はじめに

こんにちは❗ Naoです。フリーランスのFPとITコンサルをやっています✨️

突然ですが、こんなお悩みはありませんか?


🌀 挿絵を作るのが面倒で、テキストだけの記事になってしまう

🌀 そもそもどこにどんな挿絵を入れればよいか分からない

🌀 デザインセンスがない…

実は私も、ずっと挿絵なしで記事を書いていました。正直に言うと……画面スクショで誤魔化していました😅
スクショ.png↑こんな感じです!


🧑🏻「挿絵があったら見やすいのはわかる。でも作るの大変そう。まあスクショでいいか」

という感じで、何十本も記事を書いてきました😅


それが、クロコちゃん(Claude Code/Cowork)のおかげで状況が一変したのです!

シリーズ全体の流れ
このシリーズでは、私がノウハウ図書館の記事投稿を効率化した方法を段階別にご紹介しています。

⭕️ 第1回:記事執筆の効率化

⭕️ 第2回:挿絵の自動生成(この記事)

⭕️ 第3回:ノウハウ図書館への自動入稿

今回は挿絵を自動生成して記事に挿入する方法をご紹介します。


2. 好みのテイストをBananaXで見つける

挿絵を作る前に、まず「どんな雰囲気の挿絵にするか」を決めます。

👩🏻‍🦱「デザインセンスがないから無理🤮」


と思った方、大丈夫です!


ここで使うのが BananaXというサイトです。

BananaXは、AIで生成された挿絵のプロンプトと実例を集めたサイトです。サンプル画像を見て「これいいな」と思った挿絵の「プロンプトCOPY」ボタンを押すだけで、そのスタイルを再現するためのプロンプトがコピーできます!260412_クロコでノウハウ図書館を効率化.png

私が選んだスタイルは 「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で画像を生成

「どこに何を入れるか」を考えるのはクロコちゃんの仕事。私は出来上がりを確認するだけです。03_auto_flow_cleaned.png

4. 文字化けしたら:GeminiのNanobananaで修正する

AIが生成した画像の日本語はおかしいことがあります。260412_クロコでノウハウ図書館を効率化 (1).pngそんなときはGeminiのチャット版を開き、Nanobanana2に修正をお願いします。

🧑🏻「この画像の『ファファイル』というテキストを『ファイル』に修正してください。」

どのワードをどう直したいか具体的に伝えると、しっかり直してくれますよ😊


5. 背景透過・テキスト除去ツールで仕上げる

文字を消したいときや、背景を透明にしたいときは、クロコちゃんに作ってもらったツールが活躍します。

⭕️ テキスト消去ツール:消したい部分をブラシで塗ると自然に消えてくれる

⭕️ 背景透過ツール:ワンクリックで背景を透明なPNGに変換260409_透過・テキスト消しClaude Code (4).png
どちらもブラウザで動くアプリなので、インストール不要・アカウント不要・完全無料で使えます✨️

テキスト消去ツール:https://nao-text-eraser.netlify.app

背景透過ツール:https://nao-bg-remover.netlify.app

このツールをどうやって作ったかは、以下の記事でご紹介しています。

👉 Canvaいらず?クロコちゃんで背景透過・文字消しアプリを作ってみた

6. やってみたら何が変わった?

この方法を実践して、こんな変化がありました。


⭕️ 挿絵のある記事が書けるようになった

以前はスクショで誤魔化していたのに、今は図解や概念イラストが入った記事を普通に作れるようになりました。


⭕️ 記事の見た目が華やかになった

テキストだけのページと、挿絵入りのページでは読んでいる感覚が全然違います。


⭕️ 「どこに何を入れるか」まで含めて、ほぼ全部クロコちゃんに任せられる

デザインセンスがなくても、BananaXでスタイルを選んでクロコちゃんに渡すだけ。それだけで完成します。Gemini_Generated_Image_lk6u7blk6u7blk6u.png

7. おわりに

いかがでしたでしょうか?

今回ご紹介した方法を実践すると、

⭕️ BananaXで好みのスタイルをコピーできる

⭕️ クロコちゃんが挿絵の場所・内容・生成まで全自動でやってくれる

⭕️ 文字化けや細かい修正もNanobananaで対応できる

⭕️ 仕上げツールも無料で使える

という体験ができます😊

次回はノウハウ図書館への自動入稿についてご紹介します。記事の執筆から入稿まで完全自動化したい方は、ぜひチェックしてみてください✨️

本記事が、皆様のAI活用の参考になれば嬉しいです!

他にも、以下の記事を投稿しています。宜しければご覧ください✨

クロコちゃん活用事例

生活をラクにしたい方へ

超簡単!スマホで見られる持ち物リストを作ろう!【Claude Code/Cowork】

【コピペでOK!】マネフォMEからスプシに自動転記する方法【Claude Code/Cowork】

【まさに秘書】乗り換えを自動検索してスケジュールに転送する方法

【クロコで作ろう!】リベシティにふりがなを振る方法【こども会員用】


仕事・副業を効率化したい方へ

Claude Codeに複数のGoogleアカウントを連携する方法

Canvaいらず?クロコちゃんで背景透過・文字消しアプリを作ってみた


ブログ・情報発信をしたい方へ

寝て起きたら入稿直前だった!クロコちゃんで記事執筆が3倍速になった話【ノウハウ図書館効率化①】

挿絵も自動化!クロコちゃんで記事が華やかになった話【ノウハウ図書館効率化②】

寝て起きたら入稿されてた!クロコちゃんで記事入稿が10分になった話【ノウハウ図書館効率化③】


経費処理を自動化したい方へ

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

【毎月1分】Gmailの領収書をクロコちゃんで自動保存しよう!【電子帳簿保存法対応】

記帳もお任せ!クロコちゃんで記帳を自動化する方法【Claude Code/Cowork】

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

Nao@あなたの夢を叶えるFP

投稿者情報

Nao@あなたの夢を叶えるFP

トラ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(8
  • 会員ID:YshNJAkc
    会員ID:YshNJAkc
    2026/04/17

    私もブログ記事作成の際に、挿絵にいつも時間が取られて億劫になっていたのでとても参考になりました! ありがとうございます😊 一つ聞きたいのですが、こちらはGeminiの有料プランに入らないと出来ないですか?

    Nao@あなたの夢を叶えるFP

    投稿者

    2026/04/17

    レビューありがとうございます! 挿絵面倒ですよね〜😭 これはGeminiの有料プランとは関係ないです👍️ 別途「Gemini API」を使って従量課金となります。画像1枚で10円くらいです〜

    Nao@あなたの夢を叶えるFP

    投稿者

  • 会員ID:YbTiXrJA
    会員ID:YbTiXrJA
    2026/04/15

    朝のセミナーでbananaXを知り、とても簡単に作れて感動しました! 改めてノウハウ記事を読ませていただき、Claudeとの連携も頑張ってみます🙌いつも貴重なノウハウありがとうございます😊

    Nao@あなたの夢を叶えるFP

    投稿者

    2026/04/16

    かめ子さん、レビューありがとうございます! 本当に簡単でセンスよくてびっくりしますよね😆 Nanobananaの連携もぜひ頑張ってみて下さい🙏こちらこそ、いつもありがとうございます!

    Nao@あなたの夢を叶えるFP

    投稿者

  • 会員ID:4kvn0fte
    会員ID:4kvn0fte
    2026/04/15

    まさに、「ここにいつも時間を取られる」を解決してくれる、素晴らしい記事でした!ありがとうございました😄

    Nao@あなたの夢を叶えるFP

    投稿者

    2026/04/16

    レビューありがとうございます! 挿絵の作成本当に時間かかりますよね😭 素晴らしいと言って頂けて大変うれしいです✨️ ぜひお役立て下さい🙏

    Nao@あなたの夢を叶えるFP

    投稿者