広告が嫌いですか? 行く広告なし今日 

Open Graphソーシャルカード画像ジェネレーター

色開発者画像

広告削除する？

入力

自動処理

プリセット

幅

ピクセル

身長

ピクセル

コンテンツ

タイトル

説明

サイト名

レイアウトとテーマ

レイアウト

テーマ

背景

グラデーション開始

グラデーション終了

グラデーション角度

アクセントカラー

トップバーおよびサイト名で使用されます。

フォント

タイトルサイズ： 72 長いタイトルでは自動で収縮し、可能な限り1行に収める。

説明サイズ： 32

サイト名を表示

出力

クライアント側

広告削除する？

ガイド

Open Graphソーシャルカード画像ジェネレーター

Open Graph、Twitter Card、LinkedIn、およびFacebook向けにブラウザ内でピクセル正確な共有画像を設計できます。タイトル、説明、サイト名を入力し、レイアウトとテーマを選択した後、各プラットフォームが期待する正確なサイズでPNG、JPG、またはWebPをダウンロードできます。デザインツールやアップロードは不要です。

使用方法

事前設定（Open Graph用1200×630、Twitter用1024×512）を選択するか、カスタムの幅と高さを設定します。
カードに表示したいタイトル、説明、サイト名を入力します。
レイアウト（中央寄せ、左寄せ、またはトップバー強調）とテーマ（ライト、ダーク、ブランドカラー、またはグラデーション）を選択します。
フォントファミリー、タイトルサイズ、説明サイズを調整してブランドと一致させます。
クリック ダウンロード およびPNG、JPG、またはWebPを保存して、使用に備えます。 og:image または twitter:image.

機能

正しいソーシャルサイズ – Open Graph（1200×630）、Twitter Card（1024×512）、LinkedIn、およびFacebook向けの事前設定。
複数のレイアウト – 中央寄せ、左寄せ、トップバー強調のテンプレートで異なるブランドの見た目を実現。
ライト、ダーク、ブランド、およびグラデーションテーマ – 1クリックで背景を切り替えたり、自社のブランドカラーを使用できます。
自動縮小タイトル – 長いヘッドラインは折り返され、サイズが調整され、カードが読みやすく保たれます。
ライブキャンバスプレビュー – すべての変更はリアルタイムでHTML5キャンバスに再レンダリングされ、見えるものはダウンロードしたものと同じです。
PNG、JPG、WebPのエクスポート – ホスティングやCDNに最適なフォーマットを選択できます。
ブラウザ内で完全に動作 – アップロードやアカウント、ウォーターマークは不要です。

 よくある質問

Open Graphプロトコルとは何ですか？

Open GraphはFacebookが導入したタグのセットで、ウェブページがソーシャルプラットフォームに自身を説明できるようにします。最も一般的なタグは <meta> です。 og:title, og:descriptionと、 og:imageリンクを共有した際に、プラットフォームはこれらのタグを読み取り、シンプルなURLではなく豊かなカードを表示します。
og:imageとしてどのサイズが適切ですか？

Open Graph仕様では1.91:1のアスペクト比、最小600×315ピクセルの推奨されています。ほとんどのプラットフォームでは1200×630が最適で、リターンディスプレイでは鮮明に表示され、Facebookの8MBのサイズ制限を下回ります。Twitter Cardでは、summary_large_image形式では1024×512が一般的です。
ソーシャルプラットフォームがog:imageのURLをキャッシュする理由は？

Facebook、LinkedIn、Slackなどのプラットフォームは、リンクが共有されるたびに元のサーバーに複数回問い合わせないように、og:imageを一度だけ取得してCDNに保存します。そのキャッシュは数日から数週間も維持されます。画像を更新した後、キャッシュを強制的に更新するには、ファイルURLを変更するか、プラットフォームデバッガー（例：Facebookの共有デバッガー）を使用してページを再スキャンすることで対応できます。
og:imageとtwitter:imageの違いは？

og:image はOpen Graphプロトコルの一部で、Facebook、LinkedIn、Slack、Discordなどほとんどのメッセージアプリで読み込まれます。 twitter:image はTwitter Cardに属し、X（Twitter）で読み込まれます。もしのみ存在する場合、Xはこれを自動的に使用します。そのため、高品質の1つの画像で両方のプラットフォームに適応できますが、両方を提供することで各プラットフォーム向けにサイズを最適化できます。 og:image タイトルが長くなると自動的に縮小される理由は？
ソーシャルカードは固定サイズのキャンバスを持っています。長いヘッドラインが端に溢れると破損のように見えます。HTML5キャンバスAPIはテキストを自動で折り返さないため、生成者は各単語を測定し、

でヘッドラインを複数行に分割し、安全エリア内に収まるように文字サイズを段階的に小さくして調整します。これにより、すべてのエクスポートが手動調整なしに読みやすく保たれます。 ctx.measureText()Open Graph ソーシャルカード画像生成ツール 1