OGP 画像の参考サイト 5 選 — かっこいい OG 画像の探し方とサイズの基本

本記事のポイント

• ブログ記事の OG 画像は CMS が自動で入れます。HubSpot はキービジュアル、WordPress はアイキャッチが、そのまま共有時の画像になります
• 大手 10 社を調べると、トップページは 8 社が設定済みでした。ただし下層ページは 4 社とも全部トップと同じ 1 枚です。力を入れるべきは、ブログではなく共通の 1 枚と商談で送る数ページです
• 紹介する 5 サイトはすべて無料で見られます。「浴びる」「業種で引く」など、探す目的別の使い分けを表にまとめました

「アイキャッチを設定したので、OGP も大丈夫ですよね」「他社のかっこいい OG 画像って、どこで見られるんですか」。humbulls が BtoB マーケの支援先でよく受ける質問です。

前者は、ブログ記事にかぎればそのとおりです。HubSpot も WordPress も、設定した 1 枚を共有時の画像に自動で使います。手が回らないのは、CMS が自動化してくれない場所のほうです。

本記事では、OG 画像の参考サイトを 5 つ紹介します。あわせて、どのページに何枚必要かの優先順位、アイキャッチとの違い、1200×630px という数字の根拠も整理します。デザインの素養は必要ありません。

1. OG 画像とは — アイキャッチ・サムネイルと役割が違う

まず、混ざりやすい 3 つの画像を整理します。

OG 画像 (OGP 画像) : SNS やチャットに URL を貼ったときに出るプレビュー画像。HTML の og:image で指定します

アイキャッチ画像 : 記事ページを開いたときに、本文の先頭に出る画像

サムネイル画像 : 記事一覧やブログカードで、小さく並ぶ識別用の画像

ブログ記事では、この 3 つに同じ画像が使われます。1 枚設定すれば CMS が 3 か所に配ってくれるので、作り分ける必要はありません。

ただし、見られる状況が 1 つだけ決定的に違います。アイキャッチとサムネイルを見るのは、すでにサイトに来ている人です。OG 画像を見るのは、まだ来ていない人です。

Slack のチャンネルに貼られた URL、X のタイムラインを流れていく投稿、LINE で共有された 1 件。読み手はそこで、開くかどうかを一瞬で決めています。

OG 画像の仕様は The Open Graph protocol というプロトコルで定義されています。Facebook が 2010 年に提唱したもので、現在は X、LINE、Slack、Discord など、URL のプレビューを出す多くのサービスが同じ仕組みを読んでいます。

つまり 1 枚を正しく設定すれば、複数のサービスでまとめて効きます。逆に設定を落とすと、どこでも同じように効きません。

2. ブログは自動で入る — 手が回らないのは、それ以外のページ

OG 画像の話になると、まずブログが心配されます。ただ実際には、ブログはいちばん守られている場所です。

HubSpot CMS には記事ごとに「キービジュアル」の設定があり、公式ヘルプにも、ページやブログ記事がソーシャルメディアで共有されたときにサムネイルとして表示される、と書かれています。WordPress でも、主要なテーマや SEO プラグインがアイキャッチ画像を og:image として出力します。

しかもブログには、設定を強制する事情があります。この 1 枚は記事一覧のサムネイルにも使われるため、入れないと一覧ページの見た目が崩れます。入れざるをえない仕組みになっているから、OG 画像も記事ごとに自動で個別化されます。

問題は、そこから先です。

大手 10 社を調べた結果

2026 年 7 月に、日本の BtoB SaaS・事業会社 10 社のコーポレートサイトを調べました。トップページに og:image を設定していたのは 8 社です。採用サイトを別ドメインやサブドメインで運営している会社も、それぞれ専用の 1 枚を用意していました。

ここまでは整っています。ただ、下層ページを開くと景色が変わります。4 社のサービス紹介・会社概要・事業内容などのページを確認したところ、すべてトップページと同じ 1 枚でした。

これは手抜きではありません。全ページ分の画像を用意するのは現実的ではなく、共通 1 枚で回すのは合理的な運用です。

ただし制約は残ります。サービスページの URL を商談相手に送っても、Slack に出るのは会社の汎用画像です。何のページなのかは、テキストのタイトルだけが伝えることになります。

共通 1 枚すら整っていないサイトもある

日本語のアーカイブサイト OGP Design Archive は、実在サイトの OGP 画像を集めています。2026 年 7 月 31 日時点の集計対象は 296,683 件で、そのサイズ分布を見ると実態が分かります。

出典: OGP Design Archive 集計データ (2026-07 取得)

推奨サイズを守っているのは半分以下です。200×200px や 512×512px は、ファビコンやアプリアイコンがそのまま og:image に入っている典型的なパターンで、この 2 つだけで 5% を超えます。

ファイル形式は png が 58.53%、jpg が 34.94% で、この 2 つで 9 割を占めます。webp は 0.31% と、ほとんど使われていません。

作る枚数は 3 段階で決める

以上をふまえると、力の入れどころは自然に決まります。

1. 共通の 1 枚を作る — トップから下層まで代表する 1 枚です。ここが会社の顔になるので、いちばん時間をかける価値があります
2. 商談で送るページだけ個別化する — サービス紹介、料金、導入事例など、URL を人に送る機会が多いページに限って専用の 1 枚を用意します
3. ブログは CMS に任せる — 記事のカバー画像を作る運用さえ回っていれば、OG 画像は自動で揃います

作る前に押さえる仕様

サイズ : 1200×630px (比率 1.91:1)。ファイルサイズは 5MB 未満を目安にします

セーフエリア : LINE のように左右がトリミングされるサービスがあるため、ロゴと文字は中央 630×630px の正方形に収めます

X の表示 : 2023 年 10 月の仕様変更で、大きいカード (summary_large_image) にはタイトルが出なくなりました。画像の外に説明が出ない前提で、何のページかは画像の中に書きます

Slack の表示 : og:title・og:description・og:image の 3 つで展開されます。認証が必要なページや、管理者が展開を無効にしたワークスペースでは出ません

ここまでが土台です。ここから、そのうえに乗せるデザインを探す場所を紹介します。

3. OGimage.gallery — トップブランドの現役 OG 画像を 12 カテゴリで浴びる

「そもそも、いい OG 画像がどういうものか分からない」

この段階でまず開くべきなのが OGimage.gallery です。手作業で選ばれた OG 画像だけを集めた無料のギャラリーで、掲載は Figma、Framer、Vercel、Stripe、Runway、Procreate、Webflow、Sketch、Spline、Mailchimp といった顔ぶれです。

カテゴリは 12 あります。

いちばん厚いのが Creative カテゴリです。デザインツールやスタジオの事例が並んでいて、1 枚あたりの情報量をどこまで削れるかの上限が見えます。ロゴとプロダクト名だけ、あるいは製品の一部を大きく寄っただけ、という潔い作りが多く、日本の企業サイトの平均とは密度がはっきり違います。

このサイトの独自性は、他のギャラリーにない 2 つのカテゴリにあります。

Animated : GIF アニメーションを OG 画像に使っている事例。2026 年 7 月時点で 12 件と少数派ですが、Slack など動きを再生できる環境では目に留まります

Dynamic : ページごとに OG 画像を自動生成している事例。Supabase や Next.js Conf のチケットページなど 4 件が掲載されています。ページのタイトルを画像に流し込む仕組みで、ページ数が多いサイトで効きます

よくある失敗は、海外のミニマルな 1 枚をそのまま真似して、自社では何のページか伝わらなくなることです。ブランド名だけで通じるのは、すでに知られている会社です。認知がこれからの段階なら、事業内容を短い言葉で入れておくほうが確実です。

4. Lapa Ninja OG Image Gallery — 4,545 件、業種タグで自社に近い事例を引く

「参考は見たけれど、業界が違いすぎて自社に当てはめられない」

そういうときは量で当たります。Lapa Ninja の OG Image Gallery には、2026 年 7 月時点で 4,545 件のランディングページの OG 画像が集まっています。1 ページ 24 件、190 ページという分量です。

強みはタグの細かさです。

BtoB のサービスサイトなら Corporate と SaaS、採用サイトなら Agency や Studio、というように、自社と近い業種のタグだけを 20 件ほど並べて見るのが効率的です。同じ業種の中に共通のパターンが見つかれば、それがその領域で期待されている型です。

ランディングページ由来という点も実務向きです。トップページやサービス紹介ページの OG 画像が中心なので、まさに前章で「手が回らない」と書いた場所の参考になります。

FAQ に寸法や実装のベストプラクティスがまとまっているので、英語ですが仕様の再確認にも使えます。

5. Saaspo — SaaS 350 件超、文字設計だけを集中して見る

「デザインより先に、何を書けばいいのかが決まらない」

OG 画像で悩むポイントは、実はレイアウトよりも言葉です。Saaspo の OG Image Examples は SaaS 企業に絞ったギャラリーで、350 件超が掲載されています。

BtoB のプロダクトサイトだけが集まっているため、書いてある言葉の粒度がそろっていて比較しやすいのが利点です。サービス名だけで押すのか、一言の価値提案を添えるのか、機能名を並べるのか。同じ業態の中で、どの選択が多いかがすぐ分かります。

共通 1 枚をどう書くかで迷ったときは、ここが早いです。会社名だけの 1 枚にするか、事業内容まで入れるかは、同業他社が実際にどちらを選んでいるかを見たほうが決まります。

画像に載せる言葉そのものの作り方は、キャッチコピーの AI 生成プロンプト 7 選で型を整理しています。OG 画像は文字数が限られるぶん、言葉選びの精度がそのまま結果に出ます。

6. OGP Design Archive — 日本語 29 万件、サイズ付きの実物アーカイブ

「海外の事例はきれいだけれど、日本語だとどう見えるのか分からない」

日本語のサイトで探すなら OGP Design Archive です。実在サイトの OGP 画像を自動で収集していて、登録件数は 296,747 件 (2026 年 7 月 31 日時点)。大手通信、電力、決済サービス、大学、官公庁まで、日本のあらゆる業種の実物が並びます。

他のギャラリーと違うのは、キュレーションされていないことです。かっこいい事例だけでなく、サイズが崩れている実例も等しく並ぶので、避けるべきパターンの教科書としても読めます。

各画像には「サイズ」「取得元」「取得日」が表示されます。すべて 1.91:1 の枠に収めて表示されるため、正方形の画像を設定しているサイトがどう見えるかも、その場で確認できます。

日本語の OG 画像には、英語圏にはない固有の制約があります。

• 漢字とかなが混ざるため、同じ文字数でも見た目の密度が上がる
• 縮小表示で最初に潰れるのは、細いウェイトの日本語書体
• 英語のように単語間にスペースがないので、改行位置を指定しないと不自然な位置で折り返す

「色から探す」機能 (Beta) も入っているので、自社のブランドカラーに近い色で絞り込み、その色が縮小されたときにどう見えるかを確かめる使い方もできます。

7. ogimage.design — 見る・検証する・作るが 1 か所に揃う

「作ったはいいけれど、これが正しく表示されるのか自信がない」

最後の 1 つは、探す場所であると同時に確認と制作もできる OG Image Design です。無料で、3 つの機能が 1 か所にまとまっています。

とくに使い出があるのがバリデーターです。OG 画像は自社サイトの中からは見えないため、実際に貼って確かめるまで結果が分かりません。テスト投稿を繰り返さずに済むだけで、確認の手間はかなり減ります。

確認ツールは、見たいものによって使い分けます。

なお、X の公式 Card Validator は 2022 年夏にプレビュー機能が削除されており、現在は表示確認に使えません。X のキャッシュは最大 7 日ほどで更新されるため、画像を差し替えた直後に古い表示が出ても、しばらく待てば入れ替わります。

8. 迷い別の使い分けと、公開前 3 分のチェック

5 つのサイトは、「きれいだから見る」のではなく、迷いの種類で開き分けます。

そのうえで、公開前の確認は 3 分で終わります。

1. 画面上で 4 分の 1 程度に縮小し、文字が読めるか確かめる。スマートフォンのタイムラインでの表示は、だいたいこの大きさです
2. ロゴと主要な文字が、中央 630×630px の中に入っているか確かめる。ここに収まっていれば、左右がトリミングされても意味は変わりません
3. バリデーターに URL を入れ、画像・タイトル・説明文の 3 つが意図どおり出ているか確認する

3 番目に入れる URL は、ブログ記事ではありません。トップページ、サービス紹介、料金、採用、直近で作った LP の 5 本です。CMS が面倒を見てくれないのはそちらで、しかも商談相手に送る機会はブログより多いページです。

型を決めておく効き目は、スライドデザインの参考サイト 5 選で書いたスライドの話と同じです。参考を見る時間が資産になるのは、自社のルールが先に決まっているときだけです。

まとめ

OG 画像が後回しになる原因は、優先度の低さではありません。自社サイトの中からは見えないので、確認する機会がないことです。

• ブログ記事は CMS がアイキャッチを自動で使うため、放っておいても個別化されます
• 大手 10 社でもトップは 8 社が設定済みの一方、下層ページは調べた 4 社すべてが共通 1 枚でした。作るべきは共通の 1 枚と、商談で送る数ページです
• 5 つのサイトは「浴びる」「業種で引く」「言葉を決める」「日本語で確かめる」「検証する」で使い分けます

まずは自社のトップページ URL を、バリデーターかチャットツールに 1 回貼ってみてください。そこで出てきた 1 枚が、いま社外の人が見ている自社の顔です。

オウンドメディアの記事に毎回カバー画像を用意する体制づくりは、オウンドメディアを 1 人 × AI で運用するで制作パイプラインごと整理しています。

サイト全体の設計から相談したい場合は、humbulls の Growth Partner サービスで伴走しています。BtoB マーケティング全体を整理したい方は BtoB マーケティング AI 活用ガイドもご活用ください。

参考文献

• OGimage.gallery — 手作業で選ばれた OG 画像のギャラリー (取得日: 2026-07)
• Lapa Ninja — OG Image Gallery — ランディングページの OG 画像 4,545 件 (取得日: 2026-07)
• Saaspo — OG Image Examples — SaaS 企業の OG 画像 350 件超 (取得日: 2026-07)
• OGP Design Archive — 日本語 OGP 画像アーカイブ・集計データ (取得日: 2026-07)
• OG Image Design — ギャラリー・バリデーター・ビルダー (取得日: 2026-07)
• ページまたはブログ記事のキービジュアルを使用する — HubSpot ナレッジベース (取得日: 2026-07)