メインコンテンツへスキップ

無料オンラインOGP画像ジェネレーター

Facebook、LinkedIn、X、Slack用に1200×630のOGPプレビュー画像を作成できます。16種類のカスタマイズ可能なテンプレートから選び、JPGまたはPNGでダウンロードできます。

100%プライベート。アップロードは一切行われません。

テキストや画像が端末外に送信されることはありませんレンダーボタン不要、入力するとプレビューが更新されます無料で利用でき、アカウント登録や透かしも不要です

主な機能

OG画像ジェネレーターのテンプレート:16種類すべてのテンプレートデザインを1200×630のサムネイルで表示、グラデーションを選択中

16種のテンプレートを用意

OG画像ジェネレーターのライブプレビュー:エディターで入力したタイトルが、入力と同時に1200×630のカードに表示される

入力中にライブプレビュー

  • 100%ブラウザベース — アップロード不要
  • 無料 - アカウント登録不要

3ステップでOG画像を作成する方法

  1. コンテンツを入力してください

    「OG画像エディターを開く」を押して、タイトル・説明文・サイト名を入力しましょう。プレビューは入力するたびに更新されます。

  2. テンプレートとブランドカラーを選択してください

    Clean、Dark、Gradient、Grid(Light)など、16種のテンプレートから1つを選びます。多くのテンプレートはブランドカラーを反映します。お好みで「カスタム画像」からロゴや背景写真を追加できます。

  3. 画像をダウンロード

    「エクスポート」でJPGまたはPNGを選び、「JPGをダウンロード」または「PNGをダウンロード」を押してください。ファイルは常にオープングラフ画像の標準サイズである1200×630pxです。

カスタムOGイメージが必要な場合

ブログとコンテンツ

  • ブログ記事を公開する前に、各記事のブランドプレビューを作成する
  • ドキュメントページ用にマッチするOG画像を作成
  • ニュースレターアーカイブページ用に統一感のあるプレビューをデザイン
  • X、LinkedIn、Slackで記事リンクを目立たせる

製品およびSaaS

  • 各機能ページ用にブランド化されたプレビューを作成
  • 更新履歴やリリース投稿用にOG画像を作成
  • 料金、会社概要、登録ページ用のカードを作成
  • 各キャンペーンのランディングページ用にプレビューをデザイン

開発者および代理店

  • 動的ジェネレーターを構築する前にカードデザインを試作
  • 専用のOG画像がないページ用にフォールバック画像を作成
  • クライアントのブランドカラーとロゴでカードを作成
  • いくつかの見出し案を並べて比較

オープングラフ(OG)画像とは?

オープングラフ画像、つまりOG画像とは、Facebook、LinkedIn、X、Slackなどでページのリンクが共有されたときに表示される画像のことです。ページのHTML内のog:imageタグで設定します。ソーシャルメディアの投稿画像とは異なり、投稿画像は各プラットフォームに自分でアップロードするものです。

オープングラフ画像のサイズ、形式、テスト方法

良いOG画像とは、適切なサイズで、読み込みが速いほど軽量で、スマートフォンサイズでも読みやすいものです。以下の回答で各ポイントを押さえましょう。

オープングラフ画像の最適なサイズは?

1200×630px(縦横比1.91:1)を使用してください。これは主要なプラットフォームすべてに対応しており、このジェネレーターが生成するサイズでもあります。各プラットフォームには独自の制限があります。

  • Facebook:鮮明なプレビューには最低1200×630が必要です。600×315未満では、大きな画像の代わりに小さな画像が表示されます。ファイルサイズは最大8MBまでです。
  • LinkedIn:1.91:1の比率で最低1200×627、最大5MBまでです。
  • X:ラージカードは2:1の比率を使用するため、1200×630の画像では上下の細い帯が切り取られることがあります。ファイルサイズは5MB未満である必要があります。

JPGとPNG:OG画像にはどちらが最適?

ここではJPGがデフォルトで、ほとんどのカードを小さく保てます。品質スライダーは50%から95%まで調整でき、推定サイズが200KBを下回ると緑色で表示されます。PNGはすべてのピクセルを保持しますが、500KB以上になることもあります。すでに完成した画像がある場合は、代わりに画像リサイザーのFacebook投稿用プリセット(1200×630)をご利用ください。

ロゴか背景か:自分の画像をどう追加すべき?

「カスタム画像」の下で画像モードを選択してください。JPG、PNG、WebP、SVGファイルに対応しています。

  • ロゴ(オーバーレイ):選択したテンプレートの左下に、高さ約80pxで画像が配置されます。
  • 背景(フィル):写真がカード全体を覆い、サイズに合わせてトリミングされます。端はわずかに暗くなり、テキストは下部の暗い帯の上に配置されます。
  • 背景モードは独自のテキストレイアウトを使用するため、選択したテンプレートの影響は受けません。

良いOG画像の条件とは?

ほとんどの人はスマートフォンサイズでカードを見るため、タイトルは短く力強くしましょう。テンプレートはタイトルの約65~70文字、説明文の110~120文字までを表示し、それ以降は省略されます。一部のアプリは端の文字を切り取るため、重要な単語は端から離してください。すべてのページで同じテンプレートとブランドカラーを使うと、読者があなたのリンクをひと目で見分けられます。

OG画像はどうやってテストする?

ページを公開した後、そのURLをFacebookのシェアデバッガーやLinkedInのPost Inspectorに貼り付けてください。どちらもカードを表示し、最新のデータを取得します。Xの場合は、新規投稿欄にリンクを貼り付けるとカードプレビューが表示され、投稿する必要はありません。古い画像が表示され続ける場合は、新しいファイル名で画像をアップロードし直し、タグを更新してください。

OGイメージジェネレーター - よくある質問

オンラインでOpen Graph画像を作成する際のよくある質問

正しいオリジナル画像のサイズはどれくらいですか?

1200×630ピクセル、縦横比1.91:1を使用してください。このツールは常にこのサイズで正確に書き出します。Facebookは大きなプレビューを表示するのに最低600×315が必要で、LinkedInは最低1200×627を要求します。1200×630の画像1枚で、Facebook、LinkedIn、X、そしてリンクプレビューを表示するほとんどのチャットアプリに対応できます。

Twitter(X)カード画像のサイズは?

Xのラージ画像カードは2:1の比率で、最低300×157px、5MB未満です。1200×630のOG画像もそこで使えますが、Xが上下の細い帯を切り取ることがあります。twitter:imageタグがない場合、Xはog:imageを読み取ります。ラージカードを表示するには、ページに<meta name="twitter:card" content="summary_large_image" />も追加してください。

このジェネレーターは自分のウェブサイトにmetaタグを追加してくれますか?

いいえ、画像ファイルを作成するだけです。ファイルを自分のサイトにアップロードし、下の最後の質問で示すようにog:imageタグを自分で追加する必要があります。多くのウェブサイトビルダーやブログプラットフォームには、代わりにアップロードできるソーシャル画像・シェア画像用の項目も用意されています。

OG画像はどのフォントと言語に対応していますか?

すべてのテンプレートはInterフォントの標準・太字を使用します。エディターが読み込むのはInterのラテン文字セットのみのため、英語とほとんどの西欧言語に対応しています。中国語、日本語、韓国語、アラビア語、キリル文字は正しく表示されません。独自フォントのアップロードはできません。

これらのオリジナル画像を商用利用してもいいですか?

はい。作成した画像は個人・ビジネスサイトで自由に使用でき、透かしやクレジット表記は不要です。Interフォントは商用利用が可能なSIL Open Font Licenseの下でライセンスされています。ロゴや写真を追加する場合は、使用権があることを確認してください。

ウェブサイトにオリジナル画像を追加するにはどうすればよいですか?

ダウンロードした画像を自分のサイトやCDNにアップロードし、ページの<head>内にog:imageのmetaタグを追加してください:<meta property="og:image" content="https://yourdomain.com/og/page-name.jpg" />。httpsから始まる完全なURLを使用してください。og:image:widthとog:image:heightタグもそれぞれ1200と630に設定して追加しましょう。公開後は、FacebookのシェアデバッガーとLinkedInのPost Inspectorを使ってキャッシュされたプレビューを更新してください。

まだご質問がありますか?サポートチームにお問い合わせください。