Shape Maker

図形を描いて、そのまま画像でダウンロード

OGP 画像の推奨サイズは 1200×630：SNS ごとの表示と作り方

公開日：

ブログや Web サイトのリンクを X（旧 Twitter）や Facebook、LINE でシェアすると、タイトルと一緒に大きな画像が表示されます。 この画像が OGP 画像です。この記事では、OGP 画像の推奨サイズと、SNS ごとの表示のされ方、端が切れないレイアウトのコツ、設定方法をまとめます。

結論：1200×630 ピクセルで作れば OK

OGP 画像は 1200×630 ピクセル（縦横比 約 1.91:1）で作るのが定番です。 Facebook が推奨しているサイズで、X や LINE など、ほかの多くのサービスでもきれいに表示されます。

推奨サイズ1200×630 ピクセル
縦横比約 1.91:1
形式PNG または JPEG
ファイルサイズできるだけ軽く（目安として 1MB 以下）

各サービスの仕様は変わることがあります。最新の情報は、それぞれの開発者向けの案内で確認してください。

SNS ごとの表示のされ方

同じ OGP 画像でも、サービスによって表示される比率が少しずつ違います。

サービス表示のされ方
Facebook1.91:1 の横長で表示される。1200×630 がそのまま収まる
X（大きな画像のカード）2:1 に近い比率で表示されるため、上下の端が少し切れることがある
LINE・Slack などアプリや表示場所によって、横長のまま縮小されたり、一部が切り取られたりする

つまり、どのサービスでも確実に見えるのは画像の中央部分です。タイトルやロゴなどの大事な要素は、中央に寄せて配置するのが基本です。

端が切れないレイアウトのコツ

  • 上下左右に 40〜60 ピクセルの余白を取る：端ぎりぎりに文字を置かないようにします。
  • タイトルは中央に大きく：文字サイズは 56〜72 ピクセル程度、文字数は 20〜30 文字までが目安です。長いタイトルは要点だけに縮めましょう。
  • サイト名やロゴは小さく添える：タイトルの下や隅に小さく入れると、どのサイトの記事かが伝わります。
  • 背景は透明にしない：サービスによっては透明な部分が黒や白で表示され、見た目が崩れます。背景色は必ず付けてください。

Shape Maker で OGP 画像を作る手順

  1. OGP 画像作成ツールを開きます。1200×630 のキャンバスに、枠・タイトル・下線・サイト名のひな形が入っています。
  2. 「選択」ツールでタイトルとサイト名をクリックし、左側のパネルで文字を書き換えます。
  3. 枠や飾りの図形を選び、「塗り」や「線の色」をサイトのテーマカラーに合わせます。
  4. 形式は PNG（ファイルを軽くしたい場合は JPEG）、解像度は「1x」でダウンロードします。1x なら、ちょうど 1200×630 の画像になります。

PNG と JPEG のどちらにするか迷ったら、PNG と JPEG の違いと使い分けを参考にしてください。 図形と文字だけの画像なら、PNG のほうが文字の輪郭がくっきりします。

OGP 画像を設定する方法

ブログサービスや CMS を使っている場合

多くのブログサービスや WordPress のテーマでは、記事の「アイキャッチ画像」に設定した画像が OGP 画像として使われます。 作った画像をアイキャッチ画像としてアップロードしてください。

自分で HTML を書いている場合

ページの <head> に次のようなタグを入れます。

<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

画像の URL は https:// から始まる完全な URL で書きます。twitter:card を summary_large_image にすると、X で大きな画像のカードとして表示されます。

画像を変えても反映されないときは

SNS は一度読み込んだ OGP 画像をしばらく保存しているため、画像を差し替えてもすぐには反映されないことがあります。 Facebook ならシェアデバッガーで URL を読み込み直すと更新できます。ほかのサービスでは、時間をおいてから確認するか、画像のファイル名を変えて設定し直すと確実です。

まとめ

OGP 画像は 1200×630 ピクセルで作り、大事な要素を中央に寄せておけば、どの SNS でもきれいに表示されます。 記事ごとに内容がわかる OGP 画像を用意すると、シェアされたときにクリックされやすくなります。 SNS 向けの画像づくり全般のコツはSNS 用のシンプルな図解・画像を作るコツで紹介しています。

ほかの記事