🖼 OGP 画像ジェネレーター

タイトル・サブタイトル・著者名と背景プリセットを選んで、1200x630 の OGP / SNS シェア画像を Canvas で生成。色やフォントサイズも調整可能。

完全無料登録不要ブラウザ完結 5 言語対応ダークモード

🔒 プライバシーについて

・すべての処理はあなたのブラウザ内で完結します
・入力したテキスト・画像はサーバーに送信されません
・保存ログ・履歴・データベース等は存在しません
・登録・ログイン・課金は一切不要です

タイトル

サブタイトル

著者名

絵文字 / ロゴ

背景プリセット

文字色

タイトルサイズ (72)

📖 つまずきやすいポイント

タイトル・サブタイトル・著者名と背景プリセットから、1200×630 の OGP 画像を作って PNG でダウンロードします。処理はブラウザ内で完結します。作った画像を置いただけでは何も起きません — HTML の <head> に og:image として絶対 URL で指定して初めて使われます。設定できたかどうかは OGP 検証で確認してください。

ケース	何が起きるか	どうする
文字が枠から切れる	1200×630 で作った画像は、プラットフォームによって切り抜かれます。X の大きいカードはおおむね 2:1、Slack や Discord のプレビューはさらに縦が詰まり、モバイルではもっと小さく表示されます。端に寄せた文字や、画像の四隅に置いたロゴは、どこかで確実に欠けます。	上下左右にそれぞれ 100px 程度の余白を取り、要素は中央 1000×430 の範囲に収めてください。タイトルは 2 行まで、フォントサイズは 60px 以上を目安にします。スマートフォンのタイムラインで、指で押さえたときのサイズを想像してください — その大きさで読めない文字は、載せる意味がありません。装飾より、1 行のタイトルが確実に読めることのほうが効きます。
全ページで同じ画像を使っている	サイト共通の 1 枚を使い回すと、どの記事を共有しても同じ絵が出ます。タイムラインに並んだとき、内容の違いが伝わらず、クリック率が下がります。ロゴだけの画像は「このサイトの何かの記事」以上の情報を持ちません。共有された側から見れば、何の記事かは本文のテキストからしか分かりません。	少なくともタイトルを焼き込んだ画像をページごとに用意してください。記事数が多いなら手作業は続かないので、ビルド時に自動生成するのが現実的です (Next.js の `ImageResponse`、Satori、Playwright でのスクリーンショットなど)。この画面は、その仕組みを入れる前の数十ページや、単発の告知ページに向いています。
更新したのに古い画像が出続ける	SNS は一度取得した OGP を数日から数週間キャッシュします。同じ URL のまま画像だけ差し替えても、キャッシュが切れるまで古い絵が出続けます。クエリ文字列 (`?v=2`) を足す方法は、無視するプラットフォームがあるため確実ではありません。	ファイル名ごと変えてください — `ogp-v2.png` のように新しい URL にすれば、キャッシュとは無関係に新しい画像が取得されます。すでに共有されてしまった投稿を直したい場合は、Facebook 共有デバッガー、X の Card Validator、LinkedIn の Post Inspector で再取得を促すと、そのプラットフォームでは反映されます。ただし過去の投稿すべてが更新されるとは限りません。

OGP 画像は検索順位には影響しません。効くのは SNS で共有されたときのクリック率と、Slack や Discord に貼られたときの見え方です。逆に言えば、共有されることがほとんどない管理画面や規約ページに凝った画像を用意しても、費用対効果はありません。優先すべきは、実際に共有される記事とランディングページです。ファイル形式は JPEG か PNG にしてください — SVG と WebP は、いまだに対応していないプラットフォームが残っています。容量は 5MB 未満、できれば 300KB 程度に収めると、プレビューの生成が速くなります。

📖 使い方

1

テキストを入力

タイトル・サブタイトル・著者名・絵文字を入力。
2

スタイルを選ぶ

背景プリセット・文字色・タイトルサイズを選択。プレビューが即座に更新されます。
3

ダウンロード

1200x630 の PNG または JPEG として保存。og:image / twitter:card にそのまま使えます。

❓ よくある質問

生成画像は商用利用できますか？

はい。生成された PNG / JPEG はあなたが入力したテキストのみで構成され、自由に使用できます。

日本語・絵文字の表示は崩れませんか？

ブラウザのシステムフォントを使用します。CJK / 絵文字はほぼすべての OS で正常に表示されます。

og:image のサイズはなぜ 1200x630 ですか？

Facebook / Twitter / LinkedIn が推奨するアスペクト比 1.91:1 で、最も互換性の高いサイズです。

🔗 関連ツール

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。