OG画像＆アイキャッチの作り方：サイズ・配置・文字切れ対策

URLを貼った時の見た目（OG/Twitterカード）と、記事内のアイキャッチは別物。本記事では、横長1200×630（16:9）を基準に「切れない・にじまない・軽い」画像の作り方と、Bloggerでの設定、よくある不具合の直し方をまとめます。

1. まずは要件（比率/解像度/容量）

比率：16:9推奨（1200×630 or 1200×675）。正方形はサムネで切れやすい。
文字：上下左右8–10%は「安全マージン」（端に寄せない）。
フォント：太め（Semibold以上）＋文字間をやや広め。
容量：JPEG/WEBPで200–400KB目安（にじみ・遅延のバランス）。
配色：背景と文字のコントラストは4.5:1程度を意識（可読性UP）。

2. 文字が切れないレイアウト設計

SNSやテーマのサムネイルは、表示側で微トリミング（上下数％）されることがあります。そこで「安全マージン」を確保します。

キャンバス：1200×630
安全域：上下左右 96〜110px を空けて文字・重要要素を配置
推奨レイアウト：左寄せ or 中央寄せ / 行間はやや広く

ロゴや小さな注釈は右下に寄せがちですが、右端が切られやすいテーマもあるため10%内側に配置。

3. 作り方：Canva／生成AI

Canvaで作る（汎用）

「デザインを作成」→1200×630のカスタムサイズ。
背景→写真か単色＋ノイズ/グラデ微量。
タイトルを太字で配置。上下左右10%空ける。
書き出し：JPG/WEBP、画質80–90%。容量200–400KB。
ファイル名は半角英数（例：og-checklist42-1200x630.jpg）。

生成AIで作る（テイスト量産）

背景だけAIで出力（模様・質感・抽象図形）。
Canva/画像編集で文字を合成（日本語のカーニング調整が効く）。
端切れ防止の安全マージンを厳守。

文字合成のプロンプト例（AIに背景を作らせる場合）

横長 1200×630、コントラストの高い抽象背景。読みやすさ重視で中央は比較的フラット。
上下左右の縁は暗めにして、中央から10%内側には重要要素を置かない余白を確保。

4. Bloggerでの設定（OG/Twitter）

テーマ編集の<head>内にOG/Twitterタグを入れておくと、各記事のタイトル・説明・画像がカードに反映されます。あなたのテーマはすでに実装済みなので、記事先頭に横長1200×630の画像を置くだけでOK（拾われないときは既定画像を指定）。

記事の検索説明に120–160字の要約を書く→og:descriptionに流用されやすい。
カードが古いときは、URL末尾に?v=2で再貼付（キャッシュ回避）。

5. 記事内アイキャッチ：切れない埋め込みコード

本文で“見切れ”が起きにくい、レスポンシブな埋め込み例です（横幅720px想定）。URLは差し替えてください。

<figure class="eyecatch" style="margin:12px 0;text-align:center">
  <a href="【1200x630画像のURL】" target="_blank" rel="noopener noreferrer">
    <img
      src="【1200x630画像のURL】"
      srcset="
        【320wのURL】 320w,
        【640wのURL】 640w,
        【1200wのURL】 1200w"
      sizes="(max-width: 768px) 92vw, 720px"
      width="1200" height="630"
      alt="【画像の説明（記事タイトル+要約）】"
      loading="eager" fetchpriority="high" decoding="async"
      style="max-width:100%;height:auto;border-radius:14px;display:inline-block">
  </a>
  <figcaption style="color:#6b7280;font-size:.9rem;margin-top:.25rem">【任意のキャプション】</figcaption>
</figure>

ポイント：解像度の異なるURLをsrcsetで渡し、sizesで本文幅を指定。width/heightでCLSを防止。

6. トラブル対策Q&A

Q1：Xに貼ると文字が切れる

A：1200×630に統一し、文字は10%内側へ。古い画像が出る時は?v=2を付けて貼り直し。

Q2：記事一覧のサムネで上下が切られる

A：テーマの一覧は多くが16:9でトリミング。元画像を横長にするか、サムネ用に別の横長版を用意。

Q3：本文では正方形のまま見せたい

A：本文側は正方形でもOK。サムネ対策としてSNS用に横長版も同時に用意しておくのが安全。

Q4：ぼやける／重い

A：文字は太め＋コントラストを強く。容量は200–400KBを目安に調整（WebPや画質80–90%）。

Q5：OGタグを入れても反映されない

A：OGが重複していないか確認。テーマ内でog:を検索し、1セットに統一。説明は検索説明から供給。

SmartLifeBit｜AI・副業・生活に役立つ情報ブログ