メインコンテンツへスキップ
ともやすブログ〜Codeを諦めた自分が、AIでブログサイトを立ち上げられた訳〜

ともやすブログ運用 × AI初心者向け実践ガイド

運用レポート ・ 2/19/2026, 10:30:28 AM

AIコマンド1行で3種類の画像を量産 — eyecatch・挿入図・BOOTHバナーを自動化した記録

AIコマンド1行で3種類の画像を量産 — eyecatch・挿入図・BOOTHバナーを自動化した記録
目次（17件）
<!-- KPI_REPORT period_start: 2026-02-19 period_end: 2026-02-19 pv: 0 revenue_total_yen: 0 revenue_template_yen: 0 revenue_consulting_yen: 0 ai_minutes: 30 no_ai_estimated_minutes: 120 -->

BOOTHのショップページを開いたら、"NO IMAGE" が並んでいた。

アイコンもヘッダーも何もない。商品は出品しているのに、ショップとしての見た目が整っていない状態だった。

「今日中に直す」と決めて動いたら、コマンド1行で解決できた。

この記事では、今日の作業で整えた「3種類の画像を自動生成する仕組み」をそのまま記録します。AI初心者でも同じ環境が再現できるように、コマンドと設定方法を詳しく書いています。

この記事でわかること

  • ブログの eyecatch（記事サムネイル）を Gemini API で自動生成する方法
  • before/after を示す SVG 挿入図を無料で自動生成する方法
  • BOOTH ショップのアイコン・ヘッダー画像を自動生成する方法
  • Gemini API キーの取得から .env.local への設定まで（初心者向け）
  • --dry-run でコストをかけずにプロンプトだけ確認する方法

結論として

3スクリプト・3コマンドを使い分けるだけで、画像作業は「手動」から卒業できます。

# 記事サムネイル
node scripts/generate-eyecatch.js --file <記事のmdファイル>

# before/after 挿入図
node scripts/generate-figure-svg.js --file <記事のmdファイル>

# BOOTH ショップ画像
node scripts/generate-booth-assets.js --type icon
node scripts/generate-booth-assets.js --type header

Before — 手動画像の壁

画像を手作りするのは想像以上に時間がかかります。

Canva でサムネイルを1枚作ろうとすると、レイアウト調整・フォント選び・書き出しで30〜60分が消えます。記事を書き終えた後にそれをやる気力が残っていないことも多く、「あとで」「また今度」と後回しにしてしまいました。

結果として、ブログは記事があるのに eyecatch なし、BOOTHショップは NO IMAGE のまま、という状態が続いていました。

記事ごとにトンマナがバラバラになるという問題もあります。手作りだと、毎回デザインを一から考えることになるため、統一感が出ません。

After — 3スクリプト体制の全体像

before/after 比較図 図: 手動作業からコマンド1行への変化

今日の時点で整備した3スクリプトは、それぞれ役割が異なります。

スクリプト用途出力先コスト
generate-eyecatch.js記事サムネイル PNGpublic/eyecatch/約$0.039/枚
generate-figure-svg.jsbefore/after 挿入図 SVGpublic/figures/無料
generate-booth-assets.jsBOOTHアイコン・ヘッダー PNGpublic/booth/約$0.039/枚

使い方は後述しますが、いずれも node scripts/xxx.js の1コマンドで完結します。

Gemini API キーの取得（初めての方向け）

3スクリプトはいずれも Gemini API を使います。まずキーを取得してください。

手順

  1. Google AI Studio にアクセスする
  2. 右上の「Get API key」をクリックし、APIキーを作成する
  3. プロジェクトルートの .env.local ファイルに以下を追記する
GEMINI_API_KEY=ここに取得したキーを貼る

.env.local は .gitignore 済みなので Git には上がりません。APIキーをチャットや記事本文に貼ることは避けてください。

スクリプト1: generate-eyecatch.js — 記事サムネイル

記事の Markdown ファイルを渡すだけで、サムネイル PNG が public/eyecatch/ に出力されます。

node scripts/generate-eyecatch.js --file blog-brain/inbox/processing/2026-02-XX__slug__note.md

仕組み

スクリプトは Markdown の frontmatter から title・summary・category を自動読み込みします。ファイル名から日付とスラッグも抽出するため、特別な指定は不要です。

出力ファイル例:

public/eyecatch/2026-02-19-image-generation-automation.png

プロンプトだけ確認したい場合

--dry-run オプションを使うと API を呼ばずにプロンプトを確認できます。

node scripts/generate-eyecatch.js --file <mdファイル> --dry-run

プロンプトをカスタマイズしたい場合

scripts/prompts/eyecatch.txt を編集するか、--prompt-file で別のファイルを指定できます。テンプレート変数 {title} {summary} {category} が使えます。

スクリプト2: generate-figure-svg.js — before/after 挿入図

記事本文を渡すと、Gemini がコンテンツを解析して BEFORE/AFTER の箇条書きを抽出し、SVG 図を生成します。

node scripts/generate-figure-svg.js --file blog-brain/inbox/processing/2026-02-XX__slug__note.md

SVG の特徴

  • 日本語テキストがそのまま埋め込まれる（フォント崩れなし）
  • ファイルサイズが軽い（PNG と比べて10分の1以下のことも）
  • テキスト生成枠を使うため無料で動く

出力ファイル例

public/figures/2026-02-19-image-generation-automation-before-after.svg

生成した SVG は <img> タグや Markdown の ![]() でそのまま埋め込めます。

「前後の比較が一目でわかる図があると、記事の伝わりかたが変わります。」

スクリプト3: generate-booth-assets.js — BOOTHショップ画像

今日の作業のきっかけになったスクリプトです。--type でアイコンかヘッダーを選びます。

# ショップアイコン（512×512px）
node scripts/generate-booth-assets.js --type icon

# ショップヘッダー（1280×360px）
node scripts/generate-booth-assets.js --type header

今日の生成結果

このコマンドを実行して、実際に以下の画像が出力されました。

BOOTHショップアイコン 図: 生成したショップアイコン（ネイビー背景 + オレンジアクセント）

BOOTHショップヘッダー 図: 生成したショップヘッダーバナー

プロンプトはスクリプト内にデフォルトで内蔵されています。カスタマイズしたい場合は scripts/prompts/booth-icon.txt または scripts/prompts/booth-header.txt を作成して配置するだけで自動読み込みされます。

コスト感

処理モデルコスト
SVG 用テキスト抽出（generate-figure-svg.js）gemini-2.0-flash無料枠
PNG 生成（eyecatch / booth）gemini-2.5-flash-image約$0.039/枚（約6円）

10記事分の eyecatch を生成しても 約60円。Canva の有料プランや外注と比べて圧倒的に安く、時間も数秒で完了します。

困った具体例（3ケース）

ケース1: 画像生成の品質が毎回バラバラで安定しない

  • 状況: 記事ごとに画像をその場で作ろうとするたびに、仕上がりの品質がまちまちだった
  • 困りごと: 同じテーマでも生成するたびにデザインが変わり、ブログ全体として統一感が出なかった
  • 当時の影響: 品質が低い回は使えないと判断して作り直しになり、そのたびに時間と気力を消耗した
  • my-blogでの解消: プロンプトを scripts/prompts/eyecatch.txt にテンプレートとして固定した。毎回同じプロンプト構造を使うことで品質が安定し、生成やり直しがほぼゼロになった
  • 再発防止ルール: プロンプトは記事ごとに書き直さず、テンプレートファイルで管理する。変数（{title} {summary} {category}）だけを差し替える設計にする

ケース2: Canvaで作ると毎回似たような構図・文字になってしまう

  • 状況: アイキャッチ画像をCanvaで手作りしていたが、気づくと同じレイアウト・同じフォントの組み合わせを繰り返していた
  • 困りごと: 「また同じ見た目になってしまった」と気づいても、毎回1から作り直す余力がなく、そのまま使い続けるしかなかった
  • 当時の影響: 記事の内容は違うのにサムネイルが似通ってしまい、読者から見たときの区別がつきにくくなっていた
  • my-blogでの解消: generate-eyecatch.js でGemini APIに生成を委ねることにした。記事のtitle・summary・categoryをプロンプトに渡すため、記事ごとに内容に合った異なるデザインが自動で生成される
  • 再発防止ルール: アイキャッチは手作りせずスクリプトに任せる。プロンプトに記事の情報を反映させることで、内容とビジュアルの一致を保つ

ケース3: 画像作成→保存→記事公開の手間が多くて後回しになる

  • 状況: 記事を書き終えても「次は画像を作って、保存して、パスを記事に貼って、公開する」という工程が残っており、手が止まっていた
  • 困りごと: 工程が多いと着手のハードルが上がり、「あとでやろう」と後回しにしてしまう。結果として NO IMAGE のまま公開されることが続いた
  • 当時の影響: BOOTHショップにもアイキャッチにも画像が入っておらず、ショップとしての見た目が整わないまま運用を続けてしまっていた
  • my-blogでの解消: 「コマンド1行→自動保存」の流れを3スクリプトで統一した。記事ファイルを渡すだけで画像生成・正しいフォルダへの保存まで完了するため、工程の迷いがなくなった
  • 再発防止ルール: 記事執筆→generate-eyecatch.js→generate-figure-svg.js→md-to-supabase.js の順番をルーティンとして固定する。工程を決めておくことで「次何をすればいいか」で迷わない

数値の見方

指標値
PV0（記事公開直後・計測開始前）
収入（テンプレ/相談/合計）0 / 0 / 0 円
AI作業時間30分
非AI想定時間120分（Canva3枚＋手書き記事）
削減時間90分
削減率75%

PVと収入は現時点で0ですが、画像生成の自動化により「作業時間30分で120分相当の成果物を出力できた」というのが今週の主な成果です。

まとめ

今日整備した3スクリプトで、画像作業の「後回し」はなくなりました。

  • generate-eyecatch.js → 記事を書いたら即サムネイル生成
  • generate-figure-svg.js → before/after をそのまま図にできる
  • generate-booth-assets.js → ショップページの見た目を1コマンドで整える

どれも --dry-run でプロンプトを確認してから実行できるため、結果のイメージを事前に確認できます。

次の1歩

  1. 新しい記事を書いたら generate-eyecatch.js と generate-figure-svg.js をセットで実行する習慣にする
  2. プロンプトの品質を上げたい場合は scripts/prompts/ のテキストを編集する
  3. BOOTH ショップのアイコン・ヘッダーを管理画面からアップロードして表示を確認する

CTA

  • 同じ仕組みを試したい方: /reports と Agent実践 カテゴリで実践ログを確認できます
  • テンプレートが必要な方: /templates でスターターキットの詳細を確認できます
  • 個別に相談したい方: /contact から申し込んでください