画像をOGP推奨サイズに自動でリサイズ・トリミングし、そのままSNSでの見え方をシミュレーターで確認できます。 og:title・og:imageなどのmetaタグもコピーするだけで生成可能です。
画像をドラッグ or タップ
PNG, JPG, WebP 対応
Preview
画像をアップロードしてください
ここにプレビューが表示されます
OGP画像サイズ変換・シミュレーターとは？
本ツールは、お手持ちの画像をSNSシェア時に最も美しく表示される「OGP推奨サイズ」へ瞬時にリサイズ・トリミングできるオンラインエディタです。 X（旧Twitter）やFacebook、LINE、Instagramなど、各プラットフォームで画像が引き伸ばされたり、重要な部分が切れてしまう問題を解決します。
整形した画像は、そのまま「OGPシミュレーター」でX・Facebook／LINE・Slack／Discordでの見え方を確認できます。タイトルや説明文を入力すると、文字数オーバーによる省略表示まで含めて事前にチェック可能です。あわせてog:title・og:image等のmetaタグもコピーするだけで生成できるため、画像作成から実装までをこのページだけで完結できます。
こんなシーンで便利です
ブログのアイキャッチ画像作成
記事のアイキャッチを、SNSで推奨される1200×630px（1.91:1）に一括整形。シェア時のクリック率を高めます。
公開前のSNS表示シミュレーション
タイトル・説明文・画像を入力し、X・Facebook・LINE・Slackでどう見えるかを公開前に確認。文字数オーバーによる省略も事前にチェックできます。
metaタグの実装・コピー
og:title、og:description、og:image、twitter:cardなどのタグをまとめて生成。コピーしてそのままHTMLのheadに貼り付けられます。
画像サイズ・比率の事前チェック
既存の画像をアップロードするだけで、OGP規定の比率（1.91:1など）に対して切り抜きや余白がどう出るかを確認できます。
X（旧Twitter）投稿の16:9修正
縦長画像やスマホ写真を、タイムラインで見栄えの良い1280×720pxにリサイズ。重要な被写体を中央に配置できます。
インスタ投稿用の正方形加工
長方形の画像を、Instagramに最適な1:1（1200px）の正方形に整形。余白の色も自由に選んでデザイン性を保てます。
使い方は簡単 4ステップ
- 「画像をリサイズ」タブで、編集したい画像をアップロードします。
- 「出力サイズ」や「フィットモード」を選び、必要に応じてテキストを入力・保存します。
- 「OGPプレビュー確認」タブに切り替え、タイトル・説明文・URLを入力すると、各SNSでの見え方が表示されます。
- 画面下部の「生成されたmetaタグ」をコピーし、ご自身のサイトのHTMLに貼り付けます。
※リサイズした画像は自動的にシミュレーターの表示にも反映されます。タブを行き来しながら仕上がりを確認してください。
ご利用時の注意点
- 高画質での保存：ダウンロードされる画像はPNG形式で出力されるため、テキストを入れても文字がぼやけず、高画質を維持したまま保存されます。
- シミュレーターの仕組み：URLからの自動取得ではなく、入力したタイトル・説明文・画像をもとに見え方を組み立てて表示する仕様です。実際の表示はプラットフォームの仕様やキャッシュ状況により変わる場合があります。
- metaタグのog:imageについて：生成されるコードのog:image値は見本です。実際に公開する画像の絶対URLに必ず置き換えてください。
- 推奨サイズの設定：デフォルトで設定されている「1200×630」は、現在の主要SNS（X, Facebook, LINE）における共通の最適解です。
主要SNS別の推奨OGP画像サイズ一覧
各プラットフォームで画像がトリミングされずに表示される最適なピクセル数とアスペクト比です。
| SNS・プラットフォーム | 推奨サイズ (px) | アスペクト比 | 特徴・注意点 |
|---|---|---|---|
| X (Twitter) / Facebook | 1200 × 630 | 1.91:1 | 最も標準的なOGPサイズ。共通で利用可能 |
| X (カード：大) | 1200 × 628 | 1.91:1 | 「Summary with Large Image」の最適値 |
| LINE | 1200 × 630 | 1.91:1 | トーク画面でのシェア時に上下左右が切れないサイズ |
| Instagram (投稿) | 1080 × 1080 | 1:1 | 正方形。OGPとは別にプロフィール一覧でも重要 |
| Instagram (ストーリーズ) | 1080 × 1920 | 9:16 | スマホ全画面表示に最適な縦長サイズ |
| YouTube (サムネイル) | 1280 × 720 | 16:9 | 高画質表示に必須のサイズ。アスペクト比が重要 |
| YouTube ショート | 1080 × 1920 | 9:16 | 中央に重要な要素を配置する「セーフゾーン」に注意 |
| Slack / Discord | 制限なし | 不定 | 横長であれば美しくプレビュー表示されます |
【OGP画像の基本ルール】
現在、多くのSNSで共通して利用できる「1200 × 630 px」を作成しておくのが最も効率的です。 最小サイズは 600 × 315 px ですが、高解像度のスマートフォン（Retinaディスプレイ等）で画像がぼやけるのを防ぐため、2倍のサイズでの作成を強く推奨します。
【セーフゾーンについて】
プラットフォームによっては、上下左右が数ピクセル分切り取られて表示される場合があります。 ロゴや重要なテキストなどのメインコンテンツは、画像の中心から上下左右10%程度内側の「セーフゾーン」に配置すると、どの環境でも確実に表示されます。
【画像形式と容量】
ファイル形式はPNGまたはJPGが一般的です。PNGは文字がぼやけず、JPGは写真などのファイルサイズを抑えるのに適しています。 なお、多くのSNSでは5MBを超える画像はプレビューが表示されないことがあるため、本ツールでの適切なリサイズが有効です。
SNSクローラーの仕組みを捉えたOGP設定の最適化とクローリング自動化の手順
画像を推奨サイズに整形し、metaタグを実装した後に発生する、キャッシュによる表示遅延やクローラーの巡回挙動といった技術的な課題を解消するための実践的な運用ノウハウです。
metaタグの実装バリエーションと異なるアスペクト比のカード表示制御
画像を1200×630pxで作成しても、HTMLのメタタグ（og:image）の設定に不備があるとSNS上で画像が正しく表示されません。
特にX（旧Twitter）ではtwitter:cardタグの値を「summary_large_image」に指定しなければ、大きな1.91:1のカード形式にならず、小さな正方形に縮小されてしまうため、本ツールで生成したタグをそのまま活用し、全ページに正確なタグを出力してください。
画像更新時のキャッシュ問題を解決する独自URLパラメータと即時反映の手法
OGP画像を新しいデザインに差し替えても、各SNSが保持するキャッシュにより、タイムライン上の表示が古いままになるトラブルが頻発します。
これを回避するには、メタタグに記述する画像パスの末尾に?v=20260623といったタイムスタンプやバージョン情報のクエリパラメータを付与することで、別画像と認識させクローラーに最新画像を強制的に再取得させることが可能です。
本ツールのシミュレーターと、各SNS公式デバッガーによる公開後の最終検証の使い分け
本ツールのシミュレーターは、公開前にタイトル・説明文・画像の組み合わせやレイアウトを手早く試すのに向いています。
一方、実際に公開したページが正しく認識されているかの最終確認には、X（旧Twitter）のCard Validatorや、Facebookのシェアデバッガーのように、実URLをクロールして検証する公式ツールが必要です。本ツールで下準備をしたうえで、公開後はこれらの公式デバッガーも併用することで、キャッシュの再取得も含めて確実に反映を確認できます。
よくある失敗と対策
画像サイズ・アスペクト比の間違いでSNSシェア時に意図しない切り抜きが発生
X（旧Twitter）やFacebookの「1.91:1」という比率や、1200×630pxの推奨サイズを無視して画像をアップロードした結果、プラットフォーム側で自動トリミングされてしまい、タイトル文字や商品の顔となる重要部分が切れてしまう失敗です。
💡 対策・解決策を見る▼
「URLを貼るだけの自動シミュレーター」だと誤解し、公開前チェックを怠る
本ツールに限らず、静的サイトで提供されるOGP系ツールを「URLを入力すれば実際のタグを読み取ってくれる」ものだと誤解し、手入力の内容と実際に公開しているタグの内容が食い違ったまま安心してしまうケースです。
💡 対策・解決策を見る▼
生成したmetaタグのog:image値を見本のまま公開し、画像が表示されない
本ツールで生成したmetaタグをコピーしたものの、og:imageの値が見本のURLのままサイトに実装してしまい、実際にはOGP画像が全く表示されないという初歩的な失敗です。
💡 対策・解決策を見る▼
低解像度・低画質な画像を出力してスマホやRetinaディスプレイで表示がぼやける
最小規格である「600×315px」以下など、低解像度のままOGP画像を書き出してしまうケースです。最近の4Kディスプレイや高画素なスマートフォン画面では引き伸ばされて全体が粗くなり、Webサイト自体の信頼性やクリック率（CTR）を下げる原因になります。
💡 対策・解決策を見る▼
タイトル・説明文の文字数オーバーによる、SNS上での不自然な省略表示
og:titleやog:descriptionを長文のまま設定し、実際にシェアされた際にX・Facebookのカード内でタイトルや説明文が中途半端な位置で「…」と省略され、伝えたい内容が読者に届かない失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.編集のために選択した画像ファイルが外部のサーバーに保存されることはありますか
A. いいえ、ありません。画像の読み込み、リサイズ、トリミング、テキスト合成といったすべての画像処理は、お客様のパソコンやスマートフォンのブラウザ内のみで実行されます。データが外部のサーバーへ送信されたり、データベースに保存されたりすることは一切ないため、未公開の製品画像や機密情報を含むアイキャッチ画像でも安全に加工できます。
Q.OGPシミュレーターとはどのような機能ですか。URLを入力するだけで確認できますか
A. 本ツールのシミュレーターは、タイトル・説明文・画像を入力すると、X（Twitter）・Facebook／LINE・Slack／Discordでそれぞれどのように表示されるかを組み立てて再現する機能です。正直にお伝えすると、当サイトは静的サイトのため、URLを貼るだけで実際のページからOGPタグを自動取得することはできません。公開前に見え方を確認したい場合や、タイトル・説明文の文字数が長すぎて省略されないかを事前にチェックしたい場合にご活用ください。公開後の最終確認には、X公式のCard ValidatorやFacebookのシェアデバッガーもあわせてご利用いただくことをおすすめします。
Q.生成されたmetaタグはそのまま自分のサイトに貼り付けて使えますか
A. はい、そのままコピーしてご利用いただけます。ただし、og:imageの値には見本のURLが入っているため、実際にサーバーやCDNへアップロードした画像の絶対URL（https://から始まるURL）に必ず置き換えてください。相対パスのままではSNS側が画像を読み込めず、OGP画像が表示されないトラブルの原因になります。
Q.手持ちの画像がOGPの規定サイズ・比率に合っているかチェックすることはできますか
A. はい、画像をアップロードした時点でプレビューに反映されるため、指定した比率（1.91:1など）に対して画像がどのように切り抜かれる、または余白が入るかを事前に確認できます。比率が大きくずれている画像は「全体表示（Contain）」モードに切り替えることで、はみ出た部分を背景色で埋めて調整することも可能です。
Q.出力サイズを1200x630にリサイズした画像はどのようなファイル形式で保存されますか
A. 整形後の画像はPNG形式で出力されます。PNG形式は可逆圧縮のため、ツール内で合成したタイトル文字やロゴの輪郭がぼやけることなく、クリアな高画質を維持したまま保存できるのが特徴です。ダウンロードされたファイルは、そのまま各種WebサイトのメタタグやSNSの設定欄にアップロードしてご利用いただけます。
Q.縦長の写真や正方形の画像を歪ませずに特定の比率へ整形することは可能ですか
A. はい、可能です。フィットモードの切り替え機能により、元の画像の縦横比を歪ませることなく加工できます。カバーモードを選択すれば画像の中央を基準に指定サイズへぴったり切り抜かれ、コンテインモードを選択すれば元の画像全体を表示した上で、はみ出た余白部分を指定した背景色で埋めることができます。
Q.スマートフォンのブラウザからでも画像の加工や文字入れ、シミュレーターの確認をおこなうことはできますか
A. はい、できます。本ツールはレスポンシブ対応の設計となっており、iPhoneやAndroidなどのスマートフォン、タブレットのブラウザからでも、パソコンと同様にファイルの選択からフィットモードの調整、テキスト合成、シミュレーターでの見え方確認、metaタグのコピーまですべての機能をそのままご利用いただけます。
Q.XやFacebook以外のプラットフォームの画像サイズにも利用できますか
A. はい、利用可能です。デフォルトの1200x630pxはX、Facebook、LINEなどで共通して使える最適なOGPサイズですが、出力サイズやフィットモード、背景色を調整することで、Instagram用の正方形画像やYouTubeのサムネイルなど、用途に応じたアスペクト比の画像を作成できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。