Google AI の画像生成をブラウザだけで使える！アイキャッチ画像ジェネレーターを作ってみた

AI

はじめに

noteやWordPressで記事を書くたびに、アイキャッチ画像の用意に手間がかかっていませんか？

私もずっとそう感じていました。Google AI Studio の Gemini は画像生成がかなり優秀なのですが、毎回ブラウザでAI Studioを開いて、チャット画面でプロンプトを打って……という手順が地味に面倒です。

そこで「HTMLファイルをダブルクリックするだけで使えるアイキャッチ画像ジェネレーター」を作りました。サーバーも不要、インストールも不要。Google AI Studio のAPIキーさえあれば、ローカルで完結します。

こんな人に向いています

  • note / WordPress のアイキャッチ画像を毎回手作業で用意している
  • AI Studio のチャット画面を毎回開くのが面倒
  • 無料または安価にAI画像生成を使いたい
  • インストール不要でサクッと使いたい

どんなことができるの？

作ったツールでできることをざっとまとめると、こんな感じです。

  • 記事タイトルを入力するだけでプロンプトを自動構築
  • スタイルを8種類から選択（モダン・フラット、写真風、アニメ風、サイバーパンクなど）
  • サイズのプリセットが5種類（note/OGP・WordPress・Facebook・Instagram・Twitterカード）
  • 1〜4枚を一括生成して見比べられる
  • ダウンロード or クリップボードコピーがワンクリック
  • APIキーはブラウザに保存されるので毎回入力不要
  • Nano Banana 2・Nano Banana Pro・Imagen 3 など複数モデルを切り替え可能

使い方

ステップ1：Google AI Studio で APIキーを取得する

まず Google AI Studio にアクセスして、APIキーを発行します。Googleアカウントがあれば無料で取得できます。

ステップ2：HTMLファイルをダウンロードして開く

記事末尾のリンクからHTMLファイルをダウンロードし、ダブルクリックするだけ。ChromeやEdgeなど、お使いのブラウザでそのまま動きます。インストール一切不要です。

ステップ3：APIキーを入力して保存

ツールを開いたら、取得したAPIキーを入力して「💾 保存」ボタンを押します。次回からは自動的に読み込まれます（ブラウザのlocalStorageに保存されます）。

ステップ4：記事タイトルとスタイルを設定する

  • 記事のタイトル・テーマ：記事タイトルをそのまま入力するだけでOKです
  • スタイル：8種類から選択。迷ったら「モダン・フラット」がどんな記事にも合いやすいです
  • カラーイメージ：ブランドカラーがあれば入力（任意）
  • 追加指示：「テキストなし」「人物を入れる」など、細かい要望があれば（任意）

ステップ5：生成ボタンを押す

「✦ アイキャッチ画像を生成する」ボタンを押すと、数秒〜十数秒で画像が生成されます。複数枚生成して、一番気に入ったものをダウンロードするだけです。

モデルの使い分け

このツールでは3種類のモデルを選べます。

モデル特徴おすすめ用途
🍌🍌 Nano Banana 2高速・大量生成向け日常的なアイキャッチ作成
🍌 Nano Banana Proプロ品質・テキスト描画が得意こだわりたいとき
Imagen 3従来型の高品質モデル写真風の画像

迷ったら Nano Banana 2（gemini-3.1-flash-image）がスピードと品質のバランスが良くておすすめです。

実際に生成してみた

試しにこの記事のアイキャッチを、このツール自体で生成してみました。タイトルを入力してスタイルを「モダン・フラット」に設定し、生成ボタンを押すだけ。

数枚生成して、一番しっくりくるものを選びました。所要時間は1分もかかりません。

注意点

APIの利用料金について

  • Nano Banana 2 / Nano Banana Pro は現在プレビュー段階で、無料枠内で利用できる場合がありますが、今後課金が発生する可能性があります
  • 最新の料金は Google AI Studio 料金ページ でご確認ください

APIキーの管理について

  • APIキーはブラウザのlocalStorageに保存されます
  • 共有PCや公共の場での使用にはご注意ください
  • 心配な場合は毎回手動で入力し、保存しないようにしてください

まとめ

HTMLファイル1つで動く、インストール不要のアイキャッチ画像ジェネレーターを作りました。

Google AI Studio をいちいち開かなくても、記事タイトルを入れてボタンを押すだけで画像が生成できます。note・WordPress・Instagram・Twitter など、よく使うサイズのプリセットも用意してあるので、そのままダウンロードして使えます。

ぜひ試してみてください！

ダウンロード

▼Noteの記事からお願いします。

AIアイキャッチ画像を、ブラウザだけで一発生成するツールを作りました【HTMLファイル配布】｜mickeyさん
毎回 AI Studio を開いてチャットでプロンプトを打って……が面倒で、自分用に作ったツールです。 せっかくなので配布します。 これひとつでできること 記事タイトルを入力するだけでアイキャッチ画像を生成 note / WordPress…
note.com

この記事はお役に立ちましたか？気に入っていただけたら、ぜひシェアしてください！

コメント