OG画像をブラウザだけで組み立てる
タイトル、背景、画像、ロゴを組み合わせ、SNSやWebページの共有用カードをリアルタイムで作成します。
カード設定
BACKGROUND
TYPOGRAPHY
IMAGE / LOGO
OGカードプレビュー
PNGを書き出す
設定を変更するとプレビューが自動更新されます。
OG CARD STUDIOでできること
OG CARD STUDIOは、Webページやブログ記事をSNSなどで共有するときに使うOG画像を、ブラウザ上で手軽に作成するためのツールです。タイトルやサブタイトル、背景、画像、ロゴなどを組み合わせ、プレビューを確認しながら共有用カードの見た目を整えられます。
画像編集ソフトを毎回開かなくても、用意されたレイアウトを選び、必要な文字や素材を入れて調整できることを目的としています。ブログ運営、Webサービスの紹介、記事更新、小規模な告知など、OG画像を繰り返し作る場面で利用できます。
基本的な使い方
- 用途に合うレイアウトテンプレートを選びます。
- 表示したいタイトルやサブタイトルを入力します。
- 背景色やグラデーションを調整します。
- 必要に応じて画像やロゴを挿入します。
- フォントサイズなどを調整し、リアルタイムプレビューで全体のバランスを確認します。
- 使用したいOG画像サイズを選び、完成した画像をPNGで書き出します。
最初からすべての項目を使う必要はありません。文字と背景だけのシンプルなカードにしたり、メイン画像を大きく見せる構成にしたり、用途に応じて必要な要素だけで作成できます。
タイトルとサブタイトルの整え方
OG画像は小さく表示される場合もあるため、タイトルは長くしすぎず、共有先で内容が伝わる言葉を優先すると見やすくなります。サブタイトルは、タイトルだけでは説明しきれない補足情報を加えたいときに使います。
文字が画像や背景に埋もれてしまう場合は、背景色やグラデーション、文字サイズを調整し、プレビュー上で読みやすさを確認してください。Webページのタイトルをそのまま入れるだけでなく、OG画像用に短く整理する方法もあります。
背景・画像・ロゴを使うときのポイント
背景には単色やグラデーションを利用でき、必要に応じて画像やロゴを組み合わせられます。写真を使用する場合は、文字と重なる部分が読みづらくならないかを確認してください。
ロゴを入れると、どのサイトやブランドのコンテンツなのか伝えやすくなります。ただし、ロゴや写真、イラストなどの素材を使用する際は、著作権、商標権、肖像権、利用規約などを利用者自身で確認してください。
OG画像サイズについて
OG CARD STUDIOでは、1200×630など主要なOG画像サイズを想定して作成できます。共有先のサービスによってカードの表示方法やトリミングが異なる場合があるため、重要な文字やロゴは端へ寄せすぎず、プレビューで余白を確認してから出力するのがおすすめです。
作成した画像が必ず同じ比率や位置で表示されるとは限りません。X、Facebook、Discordなど各サービス側の仕様変更や表示環境によって見え方が変わる場合があります。
リアルタイムプレビューの見方
タイトル、背景、画像、ロゴ、文字サイズなどを変更すると、完成イメージをプレビューで確認できます。OG画像は要素を増やしすぎると情報が伝わりにくくなるため、「タイトルが読めるか」「画像の主役が分かるか」「ロゴが大きすぎないか」を確認しながら調整してください。
完成後はPNGとして書き出し、実際にWebサイトへ設定する前に画像そのものを確認してください。
こんな用途に向いています
- ブログ記事やニュース記事のOG画像
- WebサービスやFREE TOOLの紹介画像
- SNSで共有するページのサムネイル
- 小規模事業や個人サイトのお知らせ画像
- 同じデザイン方針で複数の記事画像を作りたいとき
プライバシーと注意事項
アップロードした画像やロゴは、ブラウザ内で扱う設計を前提としています。ただし、公開してはいけない写真や機密情報を含む素材は使用しないでください。
OG CARD STUDIOで作成するのは画像データです。実際にWebページのOG画像として表示するには、作成した画像をサイト側へ設定する必要があります。また、SNSや各サービスでの表示はサービス側の仕様に左右されるため、完全に同じ表示を保証するものではありません。
FAQ
OG画像とは何ですか？
WebページのURLをSNSなどで共有したときに、タイトルや説明と一緒に表示される代表画像として使われる画像です。共有先や設定状況によって表示方法は異なります。
1200×630のOG画像を作れますか？
はい。元PROJECTでは1200×630など主要なOGサイズへの対応が想定されています。用途に合うサイズを選び、プレビューを確認して作成してください。
自分の写真やロゴを使えますか？
画像やロゴを挿入する機能が想定されています。自分で権利を持つ素材、または利用条件を確認した素材を使用してください。
作った画像はPNGで保存できますか？
はい。作成したOG画像をPNGとして出力する機能が想定されています。保存後は画像の文字切れや配置を確認してから利用してください。
SNSで必ずプレビューどおり表示されますか？
いいえ。SNSやメッセージサービス側の仕様、画像のトリミング、キャッシュなどによって見え方が変わる場合があります。OG CARD STUDIOのプレビューは画像作成時の確認用として利用してください。