OGP画像をAIで自動生成する方法【サイズ・ツール・プロンプトまとめ】

この記事のポイント

• OGP画像の推奨サイズは1200×630px。ただしLINEは正方形クロップされるため中央寄せが重要
• 汎用AI（ChatGPT・Midjourney）でも作れるが「テキストなし背景のみ生成 → 後からオーバーレイ」が正解
• プロンプトにサイズ・背景スタイル・テキスト不要の3点を明記すると精度が上がる

OGP画像を後回しにしてリリースしたら、SNS告知で困った話

Webサービスを公開してXに投稿したとき、リンクカードが真っ白だったことがあります。

URLを貼り付けたのにサイト名もサムネも何も出てこない。なんならURLがそのままテキストで表示されているだけ。これ、かなりしょんぼりします。

原因はシンプルで、OGP画像を設定していなかったからでした。コードを書くのに必死で「後でどうにかなる」と後回しにしていたんですが、リリース当日に慌てて設定することになりました。

meta og:image タグの設定自体は5分で終わります。問題は「og:imageに渡す画像ファイルをどうやって作るか」という部分です。Figmaで作るのは時間がかかるし、かといって適当な画像を置くと見栄えが悪い。最近はAIを使って作れるようになったので、自分がやっている方法をまとめておきます。

まずOGP画像の仕様を整理する

推奨サイズは1200×630px

OGP画像の推奨サイズは 1200×630px です。縦横比は約1.91:1。FacebookとXの公式仕様でこのサイズが推奨されており、これを下回ると画質が荒くなりやすく、比率がずれると表示時にトリミングされます。

「なぜこの比率か」を深く知る必要はなくて、実務的には「Canvaで1200×630のキャンバスを作る」という覚え方で十分です。

X・Facebook・LINE・Slackの表示仕様まとめ

各SNSで表示の仕様が微妙に違います。特にLINEだけは正方形クロップになるため、他と同じ感覚で作ると中身が切れます。

LINEは正方形表示になるため、伝えたいテキストやロゴは画像の中央エリアに収めておかないと切れます。XとFacebookを先に最適化して、LINEはその後で確認するのが現実的な順番です。

AIでOGP画像を生成するプロンプトの書き方

盛り込むべき3つの要素

汎用AIでOGP画像を生成するとき、プロンプトに含めるべき要素は3つです。

1. サイズ指定：1200x630 pixels または landscape, 16:9 ratio を明示する
2. 背景スタイル：「ダークなグラデーション」「ミニマルなホワイト」など、雰囲気を具体的に伝える
3. テキスト不要の指定：「No text, no typography」と明記する

テキストを入れてほしくてプロンプトに書いてしまうと、それっぽい見た目だけど読めない謎の文字が生成されます。これ最初やりがちなミスで、自分も何度かやりました。テキストは後から自分でオーバーレイするのが正解です。

コピペで使えるプロンプトテンプレート

英語で指定するほうが精度が出やすいです。主要な画像生成AIが英語テキストで学習しているため、日本語より意図が伝わりやすいからです。日本語でも通じますが、細かいニュアンス（「控えめな」「洗練された」など）は英語の方が反映されやすいです。

Create a 1200x630 pixel OGP banner background image.
Background style: dark gradient with deep purple and blue tones.
No text, no typography, no letters.
Clean, modern, professional look suitable for a tech product.
Subtle geometric or abstract patterns in the background.

日本語対応のCanva AI等を使う場合：

1200×630ピクセルのOGP背景画像。
ダーク系グラデーション背景、深い紫と青のトーン。
テキストなし、文字なし。
モダンでミニマルなテクノロジー向けデザイン。
背景に控えめな幾何学的パターン。

サービスのブランドカラーが決まっている場合は「青と白を基調に」のように色を指定すると、複数枚作ったときの統一感が出ます。

ツール別：AIでOGP画像を作る具体的な手順

① ChatGPT（DALL-E）で作る

ChatGPT（DALL-E）は追加インストールなしで今すぐ試せる方法ですが、リサイズ作業が別途発生する点だけ注意が必要です。ChatGPT Plusがあれば、チャット画面からそのまま画像生成できます。

1. 上記のプロンプトテンプレートをチャットに貼り付けて送信
2. 生成された画像をPNGでダウンロード
3. CanvaかSquooshで1200×630pxにリサイズ
4. Canvaでサービス名・キャッチコピーをテキストとして追加

生成自体は30秒ほどですが、「背景を生成 → リサイズ → テキストを追加」という工程が発生します。1枚作るだけならそこまで手間ではないですが、複数スタイルを試したいときは往復が少し面倒です。

生成結果がいまいちのときはプロンプトを少し変えて再生成します。「too dark」「more vibrant」など英語で追加指示を入れると調整しやすいです。手軽さは一番ですが、仕上げに一手間かかるのがChatGPTの特徴です。

② Canva AIで作る

CanvaにはAI画像生成機能（Magic Media）が内蔵されていて、生成からテキスト追加・書き出しまでCanva上で完結します。リサイズ作業が不要なのが一番の利点です。

1. Canvaで1200×630pxのカスタムサイズのキャンバスを作成
2. 「素材 → AI画像生成（Magic Media）」を選択してプロンプトを入力
3. 気に入った画像をキャンバスにそのまま配置
4. テキストレイヤーでサービス名・コピーを追加してPNGで書き出し

Canvaのキャンバス上で最初からサイズが決まっているため、リサイズの手間が完全になくなります。実際に自分が試した中では、ChatGPTより工程が少なくてスムーズでした。

ただし無料プランはAI生成の月間回数に上限があります。10パターン以上試したいなら有料プランのほうが快適です。

③ OGP専用の自動生成ツールで作る

汎用AIとの違いは「OGP専用の設計になっている」点です。サイズが最初から1200×630pxに固定されており、リサイズ作業が不要です。また、複数のスタイルやカラーテーマを一括で生成して比較できるものもあります。

たとえばソロアシストのOGP画像生成機能は、アプリ名とREADMEを入力すると7スタイル×8カラーテーマの組み合わせで一括生成してくれます。「どんなトーンが合うか」を試行錯誤する手間が省けて、個人開発のリリース準備をまとめてやりたい人に向いています。

専用ツールは汎用AIほど自由なカスタマイズはできませんが、「とにかく早く用意したい」「複数パターンを比較したい」というケースでは選択肢に入れる価値があります。

生成後に必要な仕上げ作業

CanvaやSquooshでリサイズする手順

リサイズにはCanvaかSquooshを使うのが手軽です。汎用AIは正方形（1024×1024px）で出力することが多く、そのまま使うと縦横比がずれてSNSで崩れて表示されるからです。

Canvaでリサイズする場合：

1. 新規キャンバスを1200×630pxで作成
2. 生成した画像をアップロードしてキャンバスいっぱいに配置
3. 必要に応じてトリミング位置を調整してPNGでダウンロード

Squoosh（無料Webツール）でリサイズする場合：

1. squoosh.app にアクセスして画像をアップロード
2. リサイズオプションで1200×630を入力（比率ロックは外しておく）
3. PNGで書き出し

Squooshはブラウザだけで動くので、インストール不要で使えます。「とにかく早くリサイズしたい」ときに便利です。

タイトルテキストをオーバーレイで入れる場合

背景だけAIで生成して、テキストをCanva上でオーバーレイする方法が一番仕上がりがきれいです。

フォントは太めのゴシック系（Noto Sans JP Bold等）を使って、白または明るい色で乗せると視認性が上がります。サービス名とキャッチコピー1行の組み合わせが、OGP画像として収まりがいいです。

背景が暗い場合は白テキスト、明るい場合は濃いグレーか黒で統一すると、どのSNSで表示されても見やすくなります。

ページ・記事が増えてきたときのOGP画像管理のコツ

記事が増えてきたら、背景共通化か動的生成の2択で対応するのが楽です。手作業は1〜2枚が限界で、それ以上になると管理コストが地味にしんどくなります。

自分がやっている方法は2つです。

① 背景画像を共通化してテキストだけ差し替える：サービスのカラーに合った背景画像を2〜3パターン作っておき、Canvaのテンプレートとして保存。ページごとにサービス名やタイトルのテキストだけ変えて書き出します。背景生成は最初の1回だけで済むのでコスパがいいです。

② Next.jsのOGP動的生成を導入する：@vercel/og（Vercel OG Image Generation）や next/og を使うと、記事タイトルを渡すだけで自動生成できます。初期設定に1〜2時間かかりますが、一度入れると管理コストがほぼゼロになります。記事が10本を超えてきたら導入を検討する価値があります。

まとめ

OGP画像をAIで作るときのポイントをまとめます。

• サイズは1200×630pxが基本。LINEは中央正方形でクロップされる点だけ注意
• AIにテキストを生成させない。背景だけ作ってもらって、テキストは自分でオーバーレイする
• ChatGPT（DALL-E）やCanva AIで十分作れる。専用ツールを使うとリサイズ不要・複数スタイル一括比較ができる
• 記事が増えたら背景テンプレートの共通化か、動的生成の導入を検討する

SNS告知のときにちゃんとカードが出るだけで、クリック率も印象もかなり変わります。リリース当日に慌てないために、早めに1枚作っておくのがおすすめです。

関連記事

• アプリアイコンをAIで作る方法と、やってみてわかったこと — アプリアイコンのAI生成手順と注意点
• App Store申請文をAIで自動生成する方法【個人開発者向け】 — 審査を意識した申請文の効率的な作り方
• App Storeのスクリーンショット（プロモーション画像）をAIで自動生成する方法 — プロモーション画像の自動生成と規定サイズまとめ