OGP画像ジェネレーター

使い方

1. タイトルを入力します。入力と同時に右のプレビューが更新され、長い場合は自動で折り返し・縮小されます。
2. 必要に応じてサブタイトル（サイト名）と著者名を入れ、テーマ・アクセント色・レイアウト（左揃え＋縦バー / 中央揃え）・サイズを選びます。
3. ロゴやアイコンを入れたい場合は画像ファイルを選びます。左下に高さ 64px で配置されます。
4. 「PNG で保存」でダウンロードし、WordPress のアイキャッチや note の見出し画像、X の投稿画像として使います。対応ブラウザでは「クリップボードへコピー」で直接貼り付けることもできます。

このツールについて

画像はブラウザの canvas で実寸（1200×630・1280×720・1080×1080）のまま描画し、PNG として書き出します。プレビューは CSS で縮小表示しているだけで、保存されるファイルは実寸です。入力したタイトルやロゴ画像はお使いの端末のブラウザ内だけで処理され、サーバーへ送信されることも保存されることもありません。

タイトルは 1 文字ずつ幅を測って折り返します。句読点や閉じ括弧、長音「ー」が行頭に来そうな場合は直前の文字ごと次の行へ送り（行頭禁則）、開き括弧が行末に残る場合も次の行へ送ります。半角英数の単語は途中で切らず、単語ごとに折り返します。文字サイズは 72px から始め、3 行に収まるまで 4px ずつ 36px まで小さくします。36px でも収まらない場合は末尾を「…」で省略し、画面に注意を表示します。

テーマの文字色・サブタイトル色・アクセント色は、いずれも背景（グラデーションは両端の色）に対して WCAG 2.1 のコントラスト比 4.5:1 以上になるように選んでいます。アクセント色を変更して 4.5:1 を下回った場合は注意を表示します。比率は sRGB の相対輝度から計算しています。

文字の描画には端末にインストールされているフォント（macOS / iOS はヒラギノ、Windows は游ゴシックやメイリオ、Android は Noto Sans JP など）を使うため、同じ入力でも環境によって字形・太さ・折り返し位置が変わります。Web フォントを読み込んでいないのは、ページを軽く保ち、入力内容を外部へ送らないためです。公開前に保存した PNG を確認してください。

よくある質問

Q. OGP 画像はなぜ 1200×630 なのですか？

Facebook（Meta）の共有ガイドで推奨されている寸法（約 1.91:1）で、多くの SNS やメッセージアプリがこの比率を基準にしているためです。X の大きな画像付きカード（summary_large_image）は 2:1 で表示されるため、1200×630 では上下がわずかにトリミングされることがあります。重要な文字は中央寄りに置くと安全です。WordPress のアイキャッチにもそのまま使えます。

Q. タイトルは何文字まで入りますか？

目安は 60 字までです。それ以上でも 36px まで縮小して 3 行に収めようとしますが、SNS のタイムラインでは小さく表示されるため、短いほど読みやすくなります。改行を入れると、その位置で行を分けられます。

Q. フォントを変えられますか？

現在は端末の標準的なゴシック体のみです。特定の Web フォントで作りたい場合は、保存した PNG を画像編集ソフトで加工するか、他のツールをお使いください。

Q. 「クリップボードへコピー」が使えません。

画像のクリップボードコピー（Clipboard API の write）に対応しているのは、HTTPS で開いた比較的新しいブラウザに限られます。非対応の場合や許可されなかった場合は「PNG で保存」を使ってください。

Q. ロゴ画像はアップロードされますか？

いいえ。ロゴはブラウザの中だけで読み込んで canvas に描き、ページを離れると消えます。サーバーへの送信はありません。