FIRST CH TOOLS LOCAL PROCESSING — 画像はサーバーに送信されません EN

FIRST CH TOOLS / 画像 / 68 OGP IMAGE GENERATOR

OGP画像ジェネレーター

記事のタイトルとサイト名を入れて配色を選ぶだけで、SNSでシェアされたときに出るOGP画像（1200×630）を作ります。和文は句読点や閉じ括弧が行頭に来ないよう禁則を守って自動で改行し、収まる最大の文字サイズを選びます。描画はすべてお使いの端末内で完結します。

文字

配色テンプレート

背景

背景の写真をドラッグ&ドロップ またはクリックして選択／⌘V・Ctrl+V で貼り付け（PNG / JPEG / WebP / GIF）

組み方

次の一手: 保存した画像を SNS画像サイズ一括書き出し に入れると X・note・Instagram などの規定サイズへ展開でき、OGPメタタグ生成ウィザード で og:image を含むタグ一式を作れます（このリンクはタイトルをURLに載せて引き継ぎます）。

How to Use

  1. 文字を入れる記事のタイトルとサイト名を入れます。カテゴリや日付を添えたいときはラベル欄へ。タイトルの好きな位置で改行すると、そこで折ります。
  2. 配色と背景を選ぶ配色テンプレートを選び、必要なら背景をグラデーションや写真に。写真は覆いの濃さで文字の読みやすさを整えます（コントラスト比が低いと警告が出ます）。
  3. 保存する「保存」でPNG（またはJPEG）をダウンロード。ブログやCMSのアイキャッチ・OGP画像の欄にそのまま設定できます。

About This Tool

OGP画像は、記事のURLがX・Facebook・LINE・Slackなどでシェアされたときにカードとして表示される画像です。設定していないとサイト共通の画像（またはテキストだけのカード）になり、どの記事なのかが流れてくる一覧で伝わりません。本ツールは、記事ごとのタイトル入り画像を画像編集ソフトを開かずに作るためのものです。寸法は各SNSで広く推奨されている 1200×630（1.91:1）に固定しています。

和文の改行は1字ごとに折れる位置を持ちつつ、句読点・閉じ括弧・小書きの仮名（っ・ゃ 等）・長音「ー」を行頭に置かず、開き括弧を行末に置かない（禁則処理）ように組みます。禁則に当たるときは直前の文字ごと次の行へ送る「追い出し」で処理し、行の右端から約物がはみ出すことはありません。英単語・数字・URLは途中で折らず（1行より長い語だけは字単位で割ります）、「……」「――」も分けません。文字サイズは上限から2pxずつ下げて指定した行数と高さに収まる最大を採り、「行の長さをそろえる」が有効なら同じ行数のまま折り返し幅を詰めて、最終行に1〜2字だけ残る形を避けます。それでも意図した位置で折れないときは、タイトル欄で改行を入れてください。最小の36pxでも収まらない場合は末尾を「…」で切り、警告を出します。

写真の背景は短い辺を合わせて余りを切り（縦の位置は調整可）、文字色が明るければ黒、暗ければ白の覆いを重ねます。コントラスト比は、文字が載る範囲の背景を実際に描いて画素ごとに測り、最も低い所（下位2%）の値を表示します。大きな文字の基準である 3 : 1 を下回ると警告します。書体の「IBM Plex Sans JP」はWebフォントなのでどの端末でも同じ形になります。「端末のゴシック体／明朝体」は端末に入っている書体（Macならヒラギノ、WindowsならYu Gothic等）を使うため、同じ設定でも端末によって字形と改行位置が変わります。X の小さなカード（summary）や一部のチャットアプリは画像の中央を正方形に切り抜いて表示するため、「正方形に切り抜かれる範囲を表示」で中央630×630に要点が入っているかを確かめられます。

描画はブラウザのCanvasで行い、入力した文字や写真が外部サーバーへ送信されることはありません。保存した画像は SNS画像サイズ一括書き出し で他の媒体の寸法へ、画像→WebP一括変換 で軽い形式へ変換できます。og:image を含むメタタグは OGPメタタグ生成ウィザード で作れます。

設定はURLパラメータでも渡せます（写真の選択は手元で行います。URLに入れた値はページを開くリクエストとしてサーバーに届くため、公開前の記事タイトルなどは画面で入力してください）。例: /ogp-image/?title=はじめてのOGP画像&site=サンプルブログ&label=入門&tpl=night&align=center&lines=2（title・site・label＝文字 / tpl=paper,ink,vermilion,night,leaf,hydrangea,haze / bg=solid,gradient,image / c1・c2・text・accent＝色 / angle＝角度 / overlay=0〜90 / pos=0〜100 / font=plex,sans,serif / align=left,center / deco=band,side,frame,none / lines=1〜4 / size=40〜110 / balance=0 でそろえない / guide=1 / format=png,jpeg）。

Other Tools