OGP画像の設定ガイド｜SNSシェアで差がつく作り方と設定方法

OGP画像とは？なぜ重要なのか

OGP画像とは、WebページがSNSでシェアされたときに表示されるサムネイル画像のことです。OGPは「Open Graph Protocol」の略で、FacebookやX（旧Twitter）、LINEなどのプラットフォームがページの情報を取得するための仕組みです。

なぜOGP画像が重要なのでしょうか。理由はシンプルです。

• クリック率に直結する: タイムライン上で目を引く画像があるかないかで、クリック率は大きく変わります
• 第一印象を決める: 多くのユーザーは画像を見て「読むかどうか」を判断します
• ブランドの認知につながる: 統一感のあるOGP画像は、繰り返し目にするうちにサービスや個人の認知を高めます

OGP画像が未設定の場合、SNSによってはページ内の適当な画像が使われたり、まったく画像が表示されなかったりします。せっかく良いコンテンツを作っても、シェアされたときの見栄えが悪ければもったいないですよね。

OGP画像の推奨サイズと仕様

OGP画像を作る前に、各SNSの推奨仕様を押さえておきましょう。

サイズ

プラットフォーム	推奨サイズ	アスペクト比
Facebook	1200×630px	1.91:1
X（旧Twitter）	1200×628px	1.91:1
LINE	1200×630px	1.91:1
LinkedIn	1200×627px	1.91:1

ほぼすべてのSNSで 1200×630px が共通の推奨サイズです。迷ったらこのサイズで作れば問題ありません。

その他の仕様

• ファイル形式: PNG またはJPEG（PNGのほうが文字がくっきり表示されます）
• ファイルサイズ: 5MB以下（Facebookの制限）。実用的には 300KB〜1MB 程度を目安にしましょう
• 重要な要素は中央に寄せる: SNSによってトリミングされる範囲が異なるため、タイトルやロゴは中央付近に配置するのが安全です

OGP画像の作り方

デザインの専門知識がなくても、OGP画像は十分に作れます。以下の方法が実用的です。

1. Canvaを使う（初心者向け）

Canvaには「OGP画像」や「SNSバナー」用のテンプレートが豊富に用意されています。

1. カスタムサイズで1200×630pxを指定
2. テンプレートを選ぶ、または背景色を設定
3. タイトルテキストを配置
4. サービスのロゴやアイコンを追加
5. PNGでダウンロード

2. Figmaを使う（カスタマイズ重視）

Web開発者やデザインに慣れている方にはFigmaがおすすめです。

• フレームを1200×630pxで作成
• コンポーネント化しておけば、記事ごとにテキストを差し替えるだけで量産できます
• Auto Layoutを活用すると、タイトルの長さに応じたレイアウト調整も自動化できます

3. プログラムで動的に生成する

Next.jsの ImageResponse やVercelの @vercel/og を使えば、コードからOGP画像を動的に生成できます。ブログやサービスページが多い場合に便利です。

// Next.js App Routerでの例
import { ImageResponse } from "next/og";

export async function GET(request) {
  return new ImageResponse(
    <div style={{ fontSize: 48, background: "white", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
      記事タイトルをここに
    </div>,
    { width: 1200, height: 630 }
  );
}

OGP画像にはサービスのロゴを入れるとブランド認知が高まります。まだロゴをお持ちでない方は、LogoKitのロゴ作成ページで無料でAIロゴを作成できます。ロゴのサイズ規格についてはロゴサイズ一覧ガイドも参考にしてください。