OGP 画像ジェネレーター
関連する外部サイト
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
カラーコード変換HEX・RGB・HSL・HSV・RGBA を一画面で相互変換。どれか1つを直すと全部追従、ワンクリックコピー・透過・WCAGコントラスト対応。配色ジェネレーターベース色から補色・類似色・トライアドなど色彩理論に基づく調和したカラーパレットを自動生成。色をロックして再生成、CSS変数・Tailwind・JSONに書き出し。グラデーションジェネレーターlinear・radial・conic の CSS グラデーションを複数カラーストップで作成。角度・形状・中心を調整し、background CSS や Tailwind 値をワンクリックでコピー。QRコード作成ロゴ入りのおしゃれなQRコードをブラウザだけで作成。色・ドットの形・目のスタイルを変えて、無劣化SVGやPNGで保存。透かしなし・登録不要・アップロードなし。
Open Graph（OGP）画像を作成します。SNS でリンクをシェアしたときに表示されるプレビューカードです。タイトルと任意のサブタイトルを入力し、テーマとサイズを選んで、すぐに使える PNG をダウンロードしてください。すべてブラウザで描画され、データはアップロードされません。
使い方
- タイトルと任意のサブタイトルを入力します。
- サイズとカラーテーマを選びます。
- PNG をダウンロードしてページの og:image に設定します。
仕組み
ツールは各プラットフォームが期待する正確なピクセルサイズのキャンバスにテキストを描画します。タイトルは幅に合わせて折り返され（スペースがある言語は単語単位、スペースがない言語は文字単位）、選択したテーマカラーで中央揃えにされます。ダウンロード時にキャンバスが PNG としてエクスポートされるため、ファイルはすべてデバイス上で生成されます。
機能
主要サイズに対応
Open Graph・X/Twitter・正方形のプリセットが内蔵されています。
カラーテーマ
見やすく洗練されたカラースキームから選べます。
スマートな折り返し
スペースなし言語を含めてタイトルが幅に合わせて自動折り返しされます。
完全プライベート
画像はブラウザで描画・保存され、アップロードはされません。
活用シーン
ブログ記事
記事ごとのシェア画像を数秒で作成するときに。
ローンチ告知
製品やページ公開のプレビューカードを作るときに。
SNS 投稿
アナウンス用のブランド画像を素早く用意するときに。
ドキュメント・Wiki
社内ページに統一されたシェア画像を設定するときに。
注意事項
- Open Graph サイズ（1200×630）はほとんどのプラットフォームに対応しています。
- テキストを大きく読みやすく保つためにタイトルは短めにしてください。
- ダウンロードしたファイルを og:image メタタグに設定してください。
- すべてデバイス上で動作し、データはアップロードされません。
よくある質問
- OGP 画像とは何ですか？
- SNS でリンクをシェアしたときに表示されるプレビュー画像で、og:image メタタグで設定します。
- どのサイズを選べばよいですか？
- Open Graph（1200×630）はほぼすべてのプラットフォームで機能します。1:1 を好むフィードには正方形を使ってください。
- ダウンロード形式は何ですか？
- 選択したプリセットの正確なピクセルサイズの PNG 画像です。
- スペースがない言語（日本語など）も使えますか？
- はい。スペースがない場合はタイトルが文字単位で折り返されるため、日本語などのスクリプトも適切に収まります。
- データはアップロードされますか？
- いいえ。画像はすべてブラウザで生成され、デバイスの外に出ることはありません。