プリセットテンプレート
背景カラー
テキストカラー
レイアウト
プレビュー （実際の出力: 1200×630px）
使い方
- プリセットテンプレート（ブログ記事・製品告知・イベント告知）からベースデザインを選んでください。
- タイトル・説明文・サイト名・絵文字を入力します。入力と同時にプレビューがリアルタイム更新されます。
- 背景カラーはプリセット8色から選ぶか、「+」ボタンでカスタムカラーを指定できます。
- テキストカラー（白/黒）とレイアウト（左寄せ/中央寄せ）を選択します。
- 「PNG でダウンロード」ボタンをクリックすると、1200×630px のPNGが保存されます。
- ダウンロードしたPNGをWordPress等のOGP画像設定欄（og:imageフィールド）にアップロードするだけで完成です。
OGP画像とは？SNSシェア時に表示されるサムネイル
OGP（Open Graph Protocol）とは、WebページがSNSでシェアされたときに表示されるタイトル・説明文・サムネイル画像を制御するためのメタタグ仕様です。Twitter/X・Facebook・LINE・Slackなど主要なSNS・メッセージングアプリに対応しています。
推奨サイズは 1200×630px（比率 1.91:1）です。このサイズ以外でも表示されますが、SNSによってはトリミングされてしまうことがあります。このツールは1200×630pxで正確に出力するため、どのSNSでもきれいに表示されます。
OGP画像をWordPressに設定する方法
WordPressでは「All in One SEO」「Yoast SEO」「SWELL」「AFFINGER」などのテーマ・プラグインのSNSシェア設定でOGP画像を指定できます。ダウンロードした画像をメディアライブラリにアップロードし、各投稿またはサイト全体のOGP設定で指定してください。
個別投稿に設定する場合は「アイキャッチ画像」がそのままOGP画像になるテーマも多いため、アイキャッチに設定する方法も検討してください。
タイムライン上での見え方から逆算する
OGP画像は1200×630pxで作りますが、実際に見られるのはその大きさではありません。 スマートフォンのタイムラインでは横400px前後、 投稿一覧ではさらに小さく表示されます。 パソコンの画面で作り込んだ細部は、その時点で消えています。
文字数を絞る。 入る文字数は多くても20字程度です。 記事タイトルをそのまま入れると読めなくなるので、 主題だけを取り出して短くします。 詳しい説明は投稿本文やページ側のタイトルが担います。
端に寄せない。 SNSによって表示比率が異なり、上下または左右が切り取られます。 文字やロゴは中央寄りに置き、周囲に余白を残しておくと、 どのサービスでも欠けずに表示されます。
背景と文字の明度差をはっきりさせる。 縮小されると細い文字は背景に沈みます。 画面上で「ちょうどよい」と感じる程度では足りないことが多く、 一段強い差を付けておくほうが失敗しません。 判断に迷う場合はコントラスト比チェッカーで確認できます。
設定したのに反映されないとき
OGP画像を差し替えたのに古い画像が出続けるのは、 SNS側がキャッシュを持っているためです。 ページを更新しても、その画像は各SNSのサーバーに保存されたままです。
XやFacebookには、URLを入力してキャッシュを更新するための開発者向けツールがあります。 それでも反映されない場合は、画像のURL自体を変える （ファイル名の末尾に番号を付けるなど）のが確実です。
画像が一切表示されない場合は、次を確認してください。
- 絶対URLになっているか —
og:imageは相対パスでは動きません。https://から始まる完全なURLが必要です - 公開されている場所に置いてあるか — 会員限定ページや認証の必要な場所の画像は取得できません
- ファイルサイズが大きすぎないか — 数MBを超えると取得に失敗することがあります
- HTTPSで配信されているか — HTTPの画像は表示されない場合があります
よくある質問
- 画像サイズは1200×630px固定ですか？変更できますか？
- 出力サイズは1200×630px（Open Graph Protocol推奨比率1.91:1）に固定されています。Twitter/X・Facebook・LINEなど主要SNSでトリミングされずに表示される標準サイズのため、サイズ変更機能は設けていません。
- 作成した画像やテキストはサーバーに保存されますか？
- いいえ。入力したタイトル・説明文・デザイン設定はすべてブラウザのCanvas API上でのみ処理され、外部サーバーへの送信や保存は一切行われません。ダウンロードボタンを押した時点でお使いの端末に直接PNGファイルが保存されます。
- 絵文字が正しく表示されない・崩れることがあります
- 絵文字の描画はブラウザ標準のフォントレンダリングに依存しており、Noto Sans JPフォントで表示を試みますが、一部の絵文字（複合絵文字や新しい絵文字）はご利用の端末・ブラウザによって表示が崩れる場合があります。表示が崩れる場合はシンプルな絵文字（📝🚀🎉など）への変更をお試しください。
- タイトルや説明文が長すぎると画像からはみ出しますか？
- タイトルは最大40文字、説明文は最大80文字までの入力制限があり、自動で折り返し表示されるためレイアウトが崩れることはありません。ただし極端に長い文章は文字が小さく見える場合があるため、簡潔な文言を推奨します。
- ダウンロードボタンを押しても反応しない場合は？
- タイトル未入力の状態でダウンロードしようとするとアラートが表示され、処理が中断されます。タイトルを入力してから再度お試しください。
参照情報・免責事項
入力したテキスト・選択したデザインはすべてお使いのブラウザ内でのみ処理されます。外部サーバーへのデータ送信は一切行いません。画像の生成・ダウンロードもブラウザのCanvas APIのみで完結します。
免責事項：各SNSのOGP画像の表示仕様・トリミング範囲は予告なく変更される場合があります。実際に投稿・シェアする前に、各SNSが提供するデバッグツール（Xカードバリデータ等）やシェアプレビュー機能で表示を確認することを推奨します。