OGP画像ジェネレーター
タイトル、ロゴ、背景を組み合わせて1200x630のSNSシェア用画像を作成し、PNGでダウンロードできます。すべてブラウザー内で処理されます。
ブラウザー内でローカルに処理されます。ファイルはアップロードされません。
このツールでできること
Open Graph(OGP)画像は、SNSやチャットアプリ、検索結果のプレビューでリンクが共有されたときに表示される画像です。このツールは、タイトル、サブタイトル、任意のロゴ、そしてお好みの背景(単色、角度を調整できる2色のグラデーション、または文字を読みやすくするために暗くするオーバーレイ付きの自分の写真)から、多くのプラットフォームが推奨する1200x630のPNGを生成します。
テキストは自動的に折り返され、タイトルが長い場合はレイアウトに収まるよう縮小されるため、改行位置を細かく調整する必要はありません。中国語や日本語のようにスペースで区切られない文字でも、文字の間で折り返されます。右から左へ書く言語も正しい向きで描画されます。フォントはシステムで安全に使えるリストから選べ、サイズ、太さ、色、行間を調整できます。
開始用のテンプレートは6種類あります。画像はブラウザーのキャンバスに描画され、アップロードされません。
使い方
- 1開始点となるテンプレートを選ぶか、デフォルトのまま始めます。
- 2タイトルとサブタイトルを入力します。配置、フォント、サイズ、色を調整します。
- 3背景(単色、グラデーション、またはアップロードした画像)を選びます。写真の場合は、文字が読みやすくなるまでオーバーレイを強めます。
- 4必要に応じてロゴを追加し、どの隅に配置するかを選びます。
- 5PNGをダウンロードし、og:imageメタタグでページから参照します。
対応形式
入力:ロゴと背景にPNG、JPG、WebP、SVG。出力:1200x630のPNG。
プライバシー
このツールはブラウザー上で動作します。入力されたデータはお使いのデバイス上で処理され、当社のサーバーには送信されません。
制限事項
- 使用できるのは、閲覧する端末にインストールされているフォント(システムで安全なリスト)のみです。同じデザインでも、別のOSでは見え方がわずかに異なる場合があります。結果を固定するには、PNGをダウンロードしてください。
- 非常に長いタイトルは最小サイズまで縮小され、それでも収まらない場合ははみ出さずに省略記号で短縮されます。
- 絵文字や珍しい文字は、お使いのデバイスにインストールされているフォントに依存します。
- プラットフォームによって、画像の切り抜きやキャッシュの扱いが異なる場合があります。重要な内容は端から離してください(レイアウトにはすでに72 pxの余白があります)。
よくある質問
Open Graph画像のサイズはどのくらいにすればよいですか?
1200x630ピクセル(約1.91:1)であれば、Facebook、LinkedIn、Slack、Discord、そしてX(Twitter)の大きなカードで利用できます。サイズは約5 MB以内に収めてください。このツールが出力するPNGは通常、それよりはるかに小さくなります。
サイトでこの画像を使うにはどうすればよいですか?
画像をサイトにアップロードし、ページのheadに<meta property="og:image" content="https://example.com/og.png">と、summary_large_imageを指定したtwitter:cardメタタグを追加します。URLは絶対URLを使ってください。
利用できるテンプレートはどれですか?
ミッドナイト、デイライト、オーロラ、サンセット、エディトリアル、ターミナルです。コントロールを使って、手作業であらゆるスタイルを作成することもできます。
中国語、日本語、アラビア語のテキストに対応していますか?
はい。お使いのデバイスにその文字のフォントがあれば対応します。CJKのテキストは文字の間で折り返され、アラビア語・ヘブライ語のテキストは右から左に描画されます。
関連ツール
スクリーンショットモックアップ作成
スクリーンショットをブラウザー、ノートPC、スマートフォン、タブレットのフレームに配置し、背景や影を設定してPNGで書き出せます。
ファビコン生成ツール
1枚の画像から、favicon.ico、各サイズのPNG、Apple Touch Icon、Androidアイコン、Webマニフェスト、HTMLタグまでファビコン一式を作成できます。
カラーパレット生成ツール
基準色から配色パターンを生成し、気に入った色をロックして、WCAGコントラストを確認できます。CSS、Tailwind、JSON、PNGでエクスポートも可能です。
画像からカラーパレット抽出
あらゆる画像から主要な色を抽出し、16進コードをコピーできます。スポイトで正確なピクセルの色を拾い、パレットとしてエクスポートも可能です。