DevTools Japan トップへ

OGP画像ジェネレーター

テキストから1200×630のOGP画像(SNSアイキャッチ)をブラウザ上で生成。サーバー送信なし・プライバシー安全。

テキスト入力

デザイン設定

#6366f1
#ffffff
プレビュー(1200×630)

画像はお使いのブラウザ内で生成され、サーバーにアップロードされません。

OGP画像ジェネレーターの使い方

OGP画像ジェネレーターは、タイトル・サブタイトル・サイト名のテキストを入力するだけで、SNSでシェアされたときに表示される1200×630のOGP画像(アイキャッチ/サムネイル)を作成できる無料ツールです。OGPとはOpen Graph Protocolの略で、FacebookやX(旧Twitter)、LINE、Slackなどに記事URLが貼られたとき、リンク先のタイトルや説明文とともに表示されるあの大きな画像のことを指します。専用の画像編集ソフトやデザインの知識がなくても、テキストを打ち込んで色と配置を選ぶだけで、ブログ記事やSNS投稿のアイキャッチを手軽に量産できます。

使い方はとても簡単です。まず「タイトル」欄に記事の見出しを入力します。必要に応じてサブタイトルやサイト名(ドメイン)も入力すると、画像下部に小さく添えられます。次に背景プリセットのグラデーションを選ぶか、背景色・文字色を自由に指定し、テキストの配置を左寄せか中央から選びます。プレビューはリアルタイムで更新されるので、仕上がりを確認しながら調整でき、納得できたら「PNGダウンロード」を押すだけで画像が保存されます。長いタイトルはcanvas上で文字幅を測定しながら自動で折り返されるため、文字がはみ出す心配はありません。

この変換・生成処理はすべてお使いのブラウザ内(canvas)で完結します。入力したテキストや生成した画像がサーバーへアップロードされたり外部へ送信されたりすることは一切なく、プライバシーが保たれた状態で安全に利用できます。会員登録や課金も不要で、何枚作っても無料です。ページを一度開いてしまえば、通信が不安定な環境でもオフラインに近い形で動作します。ブログのアイキャッチを大量に作りたいときや、SNSキャンペーンのバナーを素早く用意したいときに便利です。

OGP画像のサイズ・基礎知識

OGP画像の推奨サイズは横1200×縦630ピクセルで、比率にするとおよそ1.91:1です。これはFacebookが推奨し、X(旧Twitter)の大きなサマリーカード(summary_large_image)でも採用されている標準的なサイズで、多くのSNSがこの比率を基準にサムネイルを切り出します。本ツールはこのサイズちょうどの画像を生成するため、各SNSで余白や見切れが起きにくく、きれいに表示されます。各SNSでの表示の目安は次のとおりです。

項目推奨値・内容
推奨サイズ1200 × 630 ピクセル
アスペクト比約 1.91 : 1(横長)
ファイル形式PNG(本ツール)/ JPEG も可
最小サイズの目安600 × 315 ピクセル以上
安全マージン端から60〜80px内側に文字を収める
Facebook / LINE1.91:1 でほぼ全面表示
X(large image)1.91:1、左右がわずかに切れる場合あり

注意したいのは「文字が切れない安全マージン」です。SNSによってはサムネイルの四隅が角丸にトリミングされたり、わずかに左右が見切れたりすることがあります。重要なタイトル文字は画像の端ギリギリではなく、上下左右の端から少し内側(おおむね60〜80ピクセル程度)に収めておくと、どのSNSでも文字が欠けずに読めます。本ツールはあらかじめ内側に余白を取ってテキストを配置し、長いタイトルも自動で折り返すため、安全マージンを意識せずとも読みやすいレイアウトに仕上がります。文字数が多すぎると一文字が小さくなり読みにくくなるため、タイトルは要点を絞って短めにまとめるのがおすすめです。

よくある質問

OGP画像のサイズは?
OGP画像の推奨サイズは横1200×縦630ピクセル(比率およそ1.91:1)です。本ツールはこのサイズちょうどの画像を生成します。FacebookやX(旧Twitter)、LINEなど主要なSNSでシェアされたときに表示されるサムネイルとして、文字が切れずきれいに表示されます。
画像はサーバーに送信される?
いいえ。入力したテキストの描画から画像の生成、PNGダウンロードまで、すべてお使いのブラウザ内(canvas)で完結します。入力内容や生成した画像がサーバーへアップロードされたり外部に送信されたりすることは一切なく、無料・登録不要で安全に利用できます。
作った画像はどう使う?
ダウンロードしたPNGをサーバーやブログにアップロードし、HTMLのhead内でog:imageメタタグの画像URLとして指定します。<meta property="og:image" content="画像のURL">のように設定すると、SNSでシェアされた際にそのOGP画像がサムネイルとして表示されます。
日本語は使える?
はい。タイトル・サブタイトル・サイト名いずれも日本語を入力できます。長い日本語タイトルは自動で折り返して表示され、文字幅をcanvasで測定しながら改行するため、はみ出さずに収まります。英数字や記号と混在しても問題なく描画されます。
商用利用できる?
はい。生成されるのはご自身が入力したテキストを描いた画像なので、ブログ記事や商用サイト、企業のSNS投稿のアイキャッチなどに自由に利用できます。第三者の著作物やロゴを含めていない限り、用途の制限はなく、クレジット表記も不要です。