ホーム / 無料ツール / Open Graph Image Generator

リンクが共有されたときに見える画像を作る

誰かがあなたのページを共有したときに表示される 1200 x 630 の画像を作ります。

共有されたリンクはカードとして描かれ、その大部分を画像が占めます。プラットフォームはその画像を 1200 x 630 前後で求め、中央から切り取り、誰かの目に触れる前に大きく縮小します。そのためスクリーンショットや白い正方形に載せたロゴは、この過程を通り抜けられないことがほとんどです。このツールは正しいサイズで画像を描きます。見出しを入力し、背景色、グラデーション、または自分の写真を選び、ロゴがあれば追加してください。切り取りガイドが、スマートフォンで見えたまま残る範囲を示します。書き出しは PNG、または大きなファイルを受け付けないプラットフォーム向けに十分小さい JPEG を選べます。すべてブラウザー内で処理され、画像はどこにも送信されません。

書体
配置
文字色
背景
写真
ここに写真をドロップ
ブラウザー内で読み込まれ、どこにも送信されません。
写真をドラッグして、画面に残す部分を選べます。
ロゴ 任意
ここにロゴをドロップ
ロゴの位置
ここでは何も保存もアップロードもされません。画像はご自身のブラウザーで描画して書き出すため、このページを閉じると失われます。
1200 × 630 · PNG ·
WhatsApp はファイルが 600KB 未満であることを求め、それを超えると小さなプレビューになります。他のプラットフォームははるかに大きくても通るので、写真が入っていない限り PNG を選んでください。

スクリーンショットではうまくいかない理由

スクリーンショットは形が合わず、消えてしまう細部で埋まっています。カードは小さく表示され、スマートフォンでは横幅が数百ピクセルということも多く、プラットフォームは 1.91:1 にするため中央から切り取ります。その時点で、画面上の文字や細い線、端の近くにあるものはすべて失われています。その大きさで残るのは、大きな文字の短い一行と、強い形がひとつだけです。共有用の画像があのような見た目になるのは、そのためです。

切り取りは中央を取る

プラットフォームごとに縦横比が違うため、画像は合わせて切られます。切り取りは中央から外側へ向かうので、上端、下端、左右の端が失われやすい部分になります。ここのガイドは、実際に使われている中で最も狭い切り取りにも残る範囲を示します。見出しとロゴをその内側に収めれば、試した一か所だけでなく、どこでも正しく読める画像になります。

ファイルサイズは実際の制限

WhatsApp は 600KB という上限を明記しており、X は 5MB を超えるものを受け付けません。1200 x 630 の写真背景は、PNG では簡単に 600KB を超えます。サイズ制限を有効にして JPEG で書き出すと、ファイルが収まるまで画質を下げます。カードが表示される大きさでは、その差はほとんど見えません。背景が単色やグラデーションのときは PNG を選んでください。ごく小さく圧縮され、輪郭も完全に保たれます。

ブラウザの外に出るデータはありません

キャンバスはあなたの端末上で描かれ、書き出しもそこで行われます。追加した写真はディスクから読み込まれるだけで送信されることはなく、完成した画像はページから直接保存されます。アカウントもアップロードもなく、作業内容のコピーがどのサーバーにも残りません。つまり、ページを閉じたあとで復元できるものは何もないということでもあります。

その機能

どのプラットフォームも求めるサイズのキャンバスがひとつ。

正しいサイズ
  • 書き出しは 1200 x 630
  • セーフエリアを表示
  • プラットフォームの見え方どおり
背景
  • 単色またはグラデーション
  • 自分の写真
  • 文字が読めるように暗く
文字
  • 見出しと 2 行目
  • 5 書体、サイズと太さ
  • 左、中央、右
ファイル
  • PNG または JPEG
  • 指定すれば 600KB 未満に
  • アップロードしない
使い方
1
見出しを書く
短くしてください。カードは一目で読まれるもので、長い見出しは画像が問題になる前にプラットフォーム側で切られます。
2
背景を選ぶ
単色かグラデーションが最も無難で、ファイルも最小になります。写真があるならそれを入れ、文字が楽に読める濃さになるまで暗さを上げてください。
3
ガイドを確認する
印のついた範囲が、最も狭い切り取りでも残る部分です。その外側にあるものは、プラットフォームによっては切られることがあります。
4
書き出してページに追加する
ファイルを保存し、自分のサイトにアップロードして、og:image をそのアドレスに向けてください。そのアドレスはログインなしで開ける必要があります。
これらの言葉の意味
og:image
ページの head に置く meta タグで、画像のアドレスを指定します。これがないと、プラットフォームはページから何かを拾うか、画像をまったく表示しません。
セーフエリア
どのプラットフォームの切り取りでも残る、画像の中央部分。その外側にあるものは、より狭い比率を使うプラットフォームで失われる可能性があります。
1.91:1
1200 x 630 の横縦比であり、ほとんどのプラットフォームが大きなカードを描くときの形です。
質問