Open Graph
1200×630 · 1.91:1
022 · CONTENT IMAGE
ブログ・OG 画像作成ツール
NAVERブログ・Googleブログ・Webサイト・Open Graph用の代表画像を1つのデザインから作成し、サイズ別に保存できます。
LOCALブラウザ内で処理
画像・文字・ロゴ・切り抜き位置はサーバーへ送信されません。
WORKSPACEブログ・OG 画像作成ワークスペース
背景画像を選択
画像をここへドラッグするか、ボタンから選択してください。背景なしの場合は下の空デザイン開始を選べます。
JPG・PNG・WebP · ブラウザ内処理HOW TO USE
使い方
- 01
背景画像を選択するか、空のデザインから開始します。
- 02
タイトル・説明・ロゴを追加して共通デザインを作成します。
- 03
NAVERブログ・Google/Blogger・Webサイト・Open Graphの結果を確認し、必要なサイズだけ位置や切り抜きを調整します。
- 04
必要な画像を個別に保存するか、選択した結果をZIPでまとめて保存します。
FORMAT GUIDE
代表画像サイズについて知っておくこと
公式値・プロジェクト固定値とTOOLBOX推奨値を区別し、利用サービス側の切り抜きや圧縮も考慮します。Google / Blogger
1200×675 · 16:9 · TOOLBOX recommendation
Naver Blog
1200×675 · 16:9 · TOOLBOX recommendation
USE CASES
こんな場面で活用できます
ブログ記事の代表画像
NAVERブログとBloggerで同じ内容を公開するとき、1つのデザインをサイズ別に再利用します。
会社ニュース・お知らせ
会社のお知らせや更新情報の代表画像をWebとブログ向けにまとめて作成します。
Webカード・共有画像
Webサイトの代表カードとOpen Graph共有画像のデザインを統一します。
複数チャネル運用
NAVERブログ・Blogger・Webサイトへ同じ内容を公開するときの作り直しを減らします。
EXPERT POST
ブログ・Web代表画像を安定して再利用する実践基準
サイズごとの切り抜き、文字位置、ロゴ、出力結果の差を減らすための基準です。1つのデザインをサイズ別上書きで再利用
背景、文字内容、基本色、ロゴは共通状態にし、切り抜き・位置・サイズなど必要な差分だけを各プリセットの上書きとして保存します。
比率の違いは引き伸ばしではなく切り抜きで対応
1.91:1と16:9の間で単純に引き伸ばすと人物やロゴが変形します。元画像の比率を保ち、cover切り抜きと位置調整で合わせます。
プレビューと出力で同じレイアウトモデルを使用
CSSプレビューとCanvas出力で別の計算を使うと、保存画像で文字やロゴの位置がずれることがあります。同じ座標モデルを縮小表示して出力にも使います。
公式値と推奨値を分けて表示
Open Graphの主要プリセットとNAVER・Blogger向けTOOLBOX推奨値を区別し、推奨値を必須仕様と誤解しないようにします。
モバイルでは現在のサイズ編集に集中
小さい画面では現在のプリセットを優先して表示し、設定を1列にまとめると切り抜きや文字位置を調整しやすくなります。
IMPORTANT NOTES
注意事項
推奨値と実際の表示差を区別し、代表画像の予期しない切り抜きや圧縮を減らします。- NAVERブログとBloggerについて、単一の固定ピクセル値を公式必須サイズとして表示しません。
- Open Graph 1200×630は主要プリセットですが、利用サービス側で追加の切り抜きや圧縮が行われる場合があります。
- 画像サイズだけでGoogle Discoverへの表示が保証されるわけではありません。
- Discoverの幅1200px以上・16:9のガイドはBlogger固有の固定アップロード規格ではありません。
- 使用する画像やロゴの権利は利用者が確認してください。
FAQ
よくある質問
01Open Graph画像が1200×630なのはなぜですか？+
プロジェクトで確定した主要プリセットで、リンク共有用の高解像度画像として広く使われる推奨サイズです。
02NAVERブログの公式代表画像サイズは？+
表示場所によって見え方が変わるため、単一の固定ピクセル値を公式必須サイズとして表示しません。
03Googleブログは1200×630が公式ですか？+
いいえ。Bloggerに単一の固定代表画像サイズがあるとは表示せず、大きな代表画像のガイドを参考にしたTOOLBOX推奨プリセットを提供します。
04画像はサーバーにアップロードされますか？+
いいえ。対応する編集と出力は現在のブラウザ内で処理します。
05OGメタタグも作成しますか？+
いいえ。このツールは画像ファイル作成専用です。
画像・タイトル・説明・ロゴはサーバーへ送信されず、このブラウザ内で処理されます。