OGP画像生成ツール（無料・登録不要）
OGP画像・ブログアイキャッチをブラウザだけで無料作成。Twitter/X・Facebook・Instagram・noteなど6種のSNSサイズに対応。テンプレート10種＋完全カスタム。PNG高解像度ダウンロード。登録不要・サーバー送信なし。
最終更新：2026年5月14日
OGP画像とは、SNS（Twitter/X・Facebook・LinkedIn等）でURLをシェアした際にリンクカードとして表示されるサムネイル画像です。og:image メタタグで指定し、推奨サイズは 1200×630px（1.91:1）です（2026年5月・各SNS公式仕様に基づく）。本ツールはブラウザ内（Canvas API）で OGP 画像をリアルタイムプレビューしながら無料作成できます。テンプレート10種・完全カスタム対応。Twitter/X・Facebook・Instagram・note など6サイズのプリセットを内蔵。ダウンロードは高解像度 PNG 形式。
背景
テキスト
レイアウト
ダウンロード設定
OGP画像の作り方（4ステップ）
- サイズを選ぶ — 使用するSNS（Twitter・Facebook・Instagram等）に合わせてサイズボタンをクリック
- テンプレートを選ぶ — 10種のデザインからベースを選択。プレビューがリアルタイム更新
- テキストを入力する — 「テキスト」タブでタイトル・サブタイトル・著者・サイト名を入力
- PNGをダウンロード — 「PNGダウンロード」ボタンで高解像度画像を即ダウンロード
設定はブラウザのLocalStorageに自動保存されます。次回訪問時にも前回の設定が引き継がれます。
OGP画像とは？SEO・SNSシェアへの効果
OGP（Open Graph Protocol）画像とは、ブログや記事をSNSでシェアしたときに表示されるサムネイル画像のことです。og:imageタグで指定します。
OGP画像が重要な3つの理由
- クリック率（CTR）向上: 視覚的に魅力的なOGP画像はシェアのクリック率を最大3倍高めると言われています
- ブランド認知: 統一されたデザインで記事ブランドを強化できます
- SNSアルゴリズム優遇: 画像付き投稿はテキストのみより多くのユーザーに届く傾向があります
OGP画像の最適サイズ（2026年版）
| SNS | 推奨サイズ | アスペクト比 | 最大ファイルサイズ |
|---|---|---|---|
| Twitter / X | 1200 × 630 px | 1.91:1 | 5MB |
| 1200 × 630 px | 1.91:1 | 8MB | |
| 1200 × 627 px | 1.91:1 | 5MB | |
| はてなブログ | 800 × 400 px | 2:1 | − |
| note | 1280 × 670 px | 1.91:1 | 10MB |
| Instagram（正方形） | 1080 × 1080 px | 1:1 | 8MB |
クリック率を上げるOGPデザインのコツ
CTRを高めるOGP画像デザインの実践ポイントです。
1
タイトルは30文字以内
SNSのタイムラインで読み切れる文字数。大きく・太く・中央配置が基本。
2
コントラスト比4.5:1以上
明るい背景に暗い文字、または暗い背景に白文字。視認性が格段に上がる。
3
サイト名・ロゴを必ず入れる
ブランドを覚えてもらうためにドメイン名か屋号を下部に小さく入れる。
4
カテゴリバッジで内容を伝える
「初心者向け」「無料」「2026年版」などのバッジでクリックを促す。
5
全SNSで1サイズ共用は危険
InstagramはTwitterと比率が違う。SNSごとに最適なサイズで作成する。
Twitter（X）カードの仕様と設定方法
Twitterでシェアされたときに大きな画像カードを表示するには、OGP設定に加えTwitter Card専用のmetaタグが必要です。
必須metaタグ（HTMLに追加）
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="記事タイトル" />
<meta name="twitter:description" content="記事の説明文" />
<meta name="twitter:image" content="https://example.com/ogp.png" />
<!-- OGPタグも必須 -->
<meta property="og:image" content="https://example.com/ogp.png" />
注意点:
twitter:card を summary_large_image にしないと小さい正方形で表示される。画像サイズは1200×630px以上・最大5MB・JPEG/PNG/WebP/GIF対応。
ブログ・アイキャッチの作り方（WordPress・はてな・note別）
各ブログプラットフォームでのアイキャッチ画像設定方法です。
WordPress
- 記事編集画面の右サイドバー「アイキャッチ画像」をクリック
- 「アイキャッチ画像を設定」→ メディアライブラリにアップロード
- 推奨サイズ: 1200×630px（テーマによって異なる場合あり）
- OGP対応テーマ（Cocoon・SWELL等）なら自動でog:imageに設定される
はてなブログ
- 記事編集画面の「記事の設定」→「このエントリーのサムネイル」
- 800×400px推奨（はてなブログカード表示に最適）
- はてなブログProで詳細OGP設定が可能
note
- 記事右上のカバー画像エリアをクリックしてアップロード
- 推奨サイズ: 1280×670px（アスペクト比1.91:1）
- 画像は自動でog:imageとして使用される
他ツールとの比較（rilaks / ogpanic / Canva との違い）
主要なOGP画像作成ツールとの機能比較（2026年5月調査）。
| ツール | SNSサイズ対応 | テンプレート | 背景画像 | ブラウザ完結 | 登録 | 設定保存 |
|---|---|---|---|---|---|---|
| 本ツール（tools-navi.jp） | ✔ 6サイズ | ✔ 10種 | ✔ | ✔ | 不要 | ✔ LocalStorage |
| rilaks.jp/eyecatch-maker | △ 1サイズのみ | ✗ | ✗ | ✔ | 不要 | ✗ |
| ogpanic.com | △ 動的のみ | △ 少 | △ | ✗ サーバー依存 | 要登録 | ✔ |
| Canva（OGPテンプレ） | ✔ 多数 | ✔ 多数 | ✔ | ✗ 外部サービス | 要登録 | ✔ 要会員 |
| ogimage.tsmallfield.com | ✗ 確認のみ | ✗ | ✗ | ✔ | 不要 | ✗ |
※ 2026年5月現在の調査。各サービスの仕様は変更される場合があります。
よくある質問（FAQ）
- 作成したOGP画像は無料で使えますか？
- はい、完全無料・商用利用可能です。登録不要でダウンロードした画像の著作権はご自身に帰属します。
- 背景に写真を使いたいのですが対応していますか？
- はい。「背景設定」タブで「画像」を選択し、ファイルを選ぶと背景画像として使用できます。ファイルはブラウザ内のみで処理され、サーバーには送信されません。
- ダウンロードした画像のファイルサイズが大きすぎます
- 「ダウンロード品質」スライダーを下げるとファイルサイズを削減できます。TwitterはPNG最大5MB、Facebookは8MBが上限です。サイズオーバーする場合は品質を80〜90%に調整してください。
- フォントを変えることはできますか？
- 「スタイル設定」タブからフォントを選択できます。現在はゴシック・明朝・丸ゴシック・等幅の4種を内蔵しています。ブラウザに依存するためOSによって表示が若干異なる場合があります。
- スマートフォンでも使えますか？
- はい。iPhone Safari・Android Chromeで動作確認済みです。ただしCanvas操作はPC環境が快適です。モバイルではテンプレート選択→テキスト入力→ダウンロードの流れを推奨します。
- 作成した設定を保存して次回も使えますか？
- はい。ブラウザのLocalStorageに自動保存されます。同じブラウザで次回訪問した際、前回の設定が自動で読み込まれます。プライベートブラウズでは保存されませんのでご注意ください。
- OGP画像の推奨サイズは何ピクセルですか？
- Twitter/X・Facebook・LinkedIn 共通の推奨サイズは 1200×630px（比率約1.91:1）です。Twitterの largeカードでは 1200×600px（2:1）がより良く表示されます。Instagramフィード用は 1080×1080px（1:1）、ストーリーズ・リールは 1080×1920px（9:16）です。本ツールは全サイズに対応したプリセットを内蔵しています（2026年5月現在の各SNS公式仕様に基づく）。
- OGP画像が設定したのにTwitterで表示されないのはなぜですか？
- Twitterはページをクロールした時点のOGP画像をキャッシュします。新しい画像に更新した場合は、Twitter Card Validator（cards-dev.twitter.com/validator）でURLを入力して「Preview card」するとキャッシュがリセットされます。また og:image の URL が https で始まり、ファイルサイズが PNG で5MB以下であることを確認してください。