個人開発をしていると、実装そのものよりも「OGP画像」「READMEのヒーロー画像」「リリース告知用のSNS画像」といった、ちょっとしたビジュアル作業で地味に手が止まることがあります。デザインツールを開くほどでもないし、かといって適当な画像で済ませるとシェアされたときのクリック率にも響きます。
今回は、無料のAI画像生成ツールを使って、この「ちょっとした画像」をブラウザだけでサクッと作る方法をまとめます。使ったのはImagine Image（imagineimage.io）というツールです。現在動いているエンジンはImagine Image 2.0で、旧バージョンよりテキスト描画や顔の一貫性が改善されているとのことです。
本稿にはImagine Imageの紹介が含まれます。価格や仕様は変更される可能性があるため、利用前に公式サイトをご確認ください。
なぜOGP画像は後回しにされがちか
OGP画像が必要になる場面は、READMEのヒーロー画像、ブログ記事のアイキャッチ、LPのファーストビュー、リリース告知のSNSカードなど、意外と多岐にわたります。共通しているのは「クオリティより、まず1枚出す速さ」が優先される場面だという点です。ここに凝ったデザイン作業を挟むと、本来の実装作業に戻れなくなります。
使い方：3ステップ
Imagine Imageは、プロンプトを入力するテキストエリアが1つあるだけのシンプルな構成です。
-
作りたい画像を言葉で説明する
例えば、開発者向けツールのOGP画像を想定するなら、次のようなプロンプトが扱いやすいです。
Create a clean hero image for a developer tool's Open Graph card. Main subject: a minimal dark-mode dashboard UI on a laptop screen. Composition: wide landscape, laptop on the right half of the frame, generous empty space on the left for a title to be added later. Keep the main subject inside the center safe area so it won't be cropped.サービス名やバージョン番号など、後で変わる可能性のある文字要素は生成段階で無理に入れず、背景と分けておくと、あとからHTMLや画像編集ツールでテキストを重ねる際に扱いやすくなります。
-
縦横比を選ぶ
OGP画像であれば横長（1200×630px相当の16:9系）、README内の挿絵であれば用途に応じて正方形や4:3も選べます。
-
生成してダウンロード
数秒で結果が返ってきます。無料版でもフル解像度でダウンロードできるので、そのままリサイズしてOGP用のPNGとして書き出せます。
複数モデルを切り替えられる（Grok Imagine Imageも選べる）
Imagine Imageは1つの画面の中で、Grok Imagine（xAI）、GPT Image 2（OpenAI、最大4K）、Seedream 5 Lite（ByteDance）、Nano Banana 2（Google）といった複数のモデルを切り替えて使えます。写真的な質感を出したいときはGPT Image 2、テキストの描画精度を重視したいときはGrok Imagine Imageというように、用途によって使い分けると再現性が上がります。どれを使うか迷った場合は自動選択にも対応しているので、モデル名を意識せずまず1枚出してみる、という使い方もできます。
「Grok Imagine Image」と検索して来た方へ
技術記事なので、この表記についても補足しておきます。「Grok Imagine Image」や「Grok Imagine Image 2.0」という検索フレーズは、xAIの画像生成モデル「Grok Imagine」と、本記事で紹介しているツールのバージョン名「Imagine Image 2.0」が混ざって生まれた表記です。運営元が同じというわけではなく、Imagine ImageはxAIが公開しているAPIを経由してGrok Imagineモデルを呼び出しているサービスという位置づけです。実用上は、Grok Imagine Imageで画像を作りたい場合、Imagine Image上でモデルをGrok Imagineに切り替えるだけで生成できます。xAI公式のインターフェースを探している場合はx.ai/grokへどうぞ。
実装まわりの仕上げTips
-
文字は生成後に重ねる：タイトルやバージョン番号はNext.jsの
ImageResponseやsatori、あるいはFigma／Canvaなどで後乗せするほうが、フォントや行間のコントロールがしやすいです。生成画像は背景として使うイメージです。 - セーフエリアを意識する：SlackやX（旧Twitter）のOGPプレビューは端が切れることがあるため、被写体は中央寄りに収まるようプロンプトで指定しておくと事故が減ります。
- 同じ構図で複数バリエーションを作る：記事ごとにアイキャッチのテイストを揃えたい場合、プロンプトのテンプレートを1つ作っておき、被写体の説明部分だけ差し替えると統一感が出ます。
- 画像to画像で微調整する：一度生成した画像の色味や背景だけを直したい場合、写真をアップロードして変更点だけ指示するモードを使うと、再生成のたびに構図が変わってしまう問題を避けられます。
まとめ
OGP画像やREADMEのヒーロー画像は、凝ったデザインよりも「設定されていること」自体が効果を持つ場面が多いです。Imagine Imageのようなブラウザ完結型のAI画像生成ツールを使えば、実装の合間に数分で1枚出せるので、個人開発のちょっとした画像作業を後回しにせずに済むようになりました。Imagine Image 2.0のエンジン刷新でテキスト描画も安定してきているので、READMEやOGP画像のような文字入り素材とも相性が良くなっています。
公式サイト：https://imagineimage.io/