OGP画像ジェネレーター｜1200×630px

ブログ・SNS用のOGP画像（1200×630）をブラウザで作成・ダウンロード。6種類のテンプレート。

テンプレート

カラー

19/60
38/120

OGP画像ジェネレーター｜1200×630pxとは

OGP画像（SNSシェア画像）をブラウザで無料作成できるツールです。1200×630pxのSNS推奨サイズで6種類のテンプレートからデザインを選び、タイトル・説明文・配色を設定してPNGでダウンロードできます。ブログ・メディアサイト・サービスのOGP設定に必要なHTMLタグも自動生成されます。

使い方

  1. 1テンプレートをグラデーション・ダーク・ミニマルなど6種類から選択する
  2. 2タイトル・説明文・サイト名・タグを入力するとリアルタイムでプレビューが更新される
  3. 3カラープリセットまたはカラーピッカーで配色を調整し、PNGダウンロードボタンで1200×630の画像を保存する
  4. 4HTMLタグコピーボタンからog:imageタグをコピーしてサイトのheadに貼り付ける

メリット・特徴

  • 6種類のプロフェッショナルなテンプレート（グラデーション・ダーク・ミニマル・スプリット・ボールド・カード）
  • カラーピッカー＋6種類プリセットで配色を瞬時に変更、リアルタイムプレビュー付き
  • 1200×630px（OGP推奨サイズ）のPNG画像をワンクリックでダウンロード
  • OGP HTMLタグ（og:image・og:title・og:description）をそのままコピー可能
  • ブラウザのみで動作・サーバー送信なし・インストール不要で安全
  • 登録不要・商用利用可能な完全無料ツール
01

OGP（Open Graph Protocol）とSNSシェア画像の基礎知識

OGP（Open Graph Protocol）はFacebookが提唱したメタデータ規格で、WebページをSNSでシェアしたときに表示されるタイトル・説明文・サムネイル画像を制御します。現在はFacebook・X（Twitter）・LINE・Slack・Discordなど主要SNS・コミュニケーションツールのほぼすべてがOGPに対応しています。

OGP画像が重要な理由——クリック率への影響

SNSのタイムラインでは、OGP画像の有無・デザインがクリック率（CTR）に大きく影響します。適切なOGP画像が設定されていないページはデフォルトのサイトアイコンや空白のプレースホルダーが表示され、クリックされにくくなります。ブランドカラーやタイトルを使ったデザインのOGP画像を設定することで、SNSでのリーチ拡大に貢献します。

OGP必須タグの書き方と設定場所

OGPの主要タグはHTMLのheadセクションに配置します。og:title（ページタイトル）・og:description（説明文）・og:image（サムネイル画像のURL）・og:url（ページURL）・og:type（ページの種類、多くは"website"）が最低限必要です。本ツールで生成した画像をサーバーにアップロードし、og:imageにそのURLを指定するだけで設定が完了します。

Twitter Cardとの違い

X（Twitter）ではOGPに加え、独自のTwitter Card仕様が使われます。twitter:card（"summary_large_image"推奨）・twitter:title・twitter:description・twitter:imageの4タグが基本です。多くの場合、OGPタグとTwitter Cardタグを両方記述することで、FacebookとTwitterの両方に対応できます。og:imageとtwitter:imageは同じ画像URLを指定して問題ありません。

02

OGP画像デザインのベストプラクティス

OGP画像はSNS上でブランドの第一印象を決める重要な要素です。クリックされやすく、シェアされやすい画像を作るための設計ポイントを解説します。

テキストの入れ方と可読性

1200×630pxの画像でスマートフォンに表示される実際のサムネイルは幅300px程度になります。小さく表示されても読めるよう、タイトルテキストは大きめ（画像幅の5〜10%以上のフォントサイズ）に設定し、背景とのコントラストを高くすることが重要です。テキスト量は少なく絞り込み、一目でメッセージが伝わるシンプルな構成を目指してください。

ブランドの一貫性を保つ配色設計

ブランドカラーをOGP画像に使用することで、SNS上でのブランド認知度が高まります。本ツールのカラーピッカーでブランドのメインカラーを設定し、テンプレートを選んでください。記事・ページごとに色を変える場合も、ベースとなるテンプレートを統一することでシリーズ感が生まれます。

画像の安全表示ゾーン（Safe Zone）

SNSプラットフォームによって画像のトリミング仕様が異なります。Facebookは1200×630pxをほぼそのまま表示しますが、モバイルではセンタークロップされることがあります。重要なテキストや要素は画像の中央エリア（左右各5%、上下各8%の内側）に収めることで、どのSNSでも切れずに表示されます。

よくある質問（FAQ）

OGP画像の推奨サイズは？
1200×630pxがFacebook・Twitter（X）・Slack・LINE等の主要SNSで推奨されるサイズです。このツールはそのサイズでPNGを出力します。古い規格では1200×628pxが推奨されていましたが、現在は1200×630pxが一般的です。
日本語テキストは使えますか？
はい。端末にインストールされたシステムフォント（Hiragino Sans・Yu Gothicなど）を使用するため、日本語テキストも正しく描画されます。サーバーサイドでのレンダリングではなくブラウザのCanvas APIを使用するため、端末のフォント環境がそのまま反映されます。
生成した画像をブログに使うには？
PNGをダウンロードし、サーバーにアップロードしてog:imageタグのURLに指定します。「HTMLタグをコピー」ボタンでタグのひな型を取得できます。WordPressならアイキャッチ画像に設定するか、Yoast SEO等のプラグインのOGP設定でURLを指定してください。
OGP画像を設定したのにSNSでサムネイルが変わらない場合は？
SNSはOGP情報をキャッシュするため、既にシェアされたURLは古い画像が表示され続けることがあります。FacebookはSharing Debugger（developers.facebook.com/tools/debug）、TwitterはCard Validator（cards-dev.twitter.com/validator）でキャッシュをリフレッシュできます。
商用利用できますか？
はい。生成した画像は自由にご利用いただけます。ビジネスサイト・ブログ・サービス紹介ページなどの商用用途に制限なくお使いください。
og:imageのURLは絶対URLで指定する必要がありますか？
はい。og:imageには「https://」から始まる絶対URLを指定してください。相対パスは多くのSNSクローラーで正しく認識されません。画像ファイルをサーバーにアップロードしたあとの完全なURLを使用してください。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →