サムネイル・カード作成

背景画像に見出しと副題を重ね、YouTube・SNS・記事OGPのサムネイルを作ります。テンプレートと出力サイズを選ぶと、文字は枠に収まるまで自動で小さくなります。

WebMCP 試験対応

入力 → 設定 → 確認・保存

入力と設定
またはここへドロップ

背景にする画像を1枚。ロゴも重ねる場合は、背景・ロゴの順に2枚選んでください。画像を選ばなくても背景色だけで作れます。 素材は1件60MB、合計120MB・30件まで。

設定を保存・読み込む

ファイルの中身や素材IDは含めず、現在の設定をJSONで保存します。

結果

ここに仕上がりが表示されます

入力と設定を確認して、実行してください。サンプルからも始められます。

コピー・保存する前に、内容を確認できます。

入力・処理・結果はこのブラウザ内。ページ移動でも素材を使えます。再読み込み・タブ終了で消えるため、必要な結果は保存してください。

AIエージェントから使うWebMCP 試験対応

このブラウザではWebMCPが有効になっていません。通常のツール操作と下の実行テストはそのまま使えます。

「サムネイル・カード作成で見出し入りのサムネイルを作る。結果を確認できる形で残してください。」

WebMCPは試験中のWeb標準です。利用には対応ブラウザと対応エージェントが必要です。MCPサーバーの接続URLではありません。AIサービスへ渡す内容は、そのサービスのデータ方針も確認してください。対応状況と使い方

入力仕様を見る · chinouken_thumbnail
{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "template": {
      "type": "string",
      "description": "テンプレート",
      "enum": [
        "band",
        "gradient",
        "left",
        "center",
        "calm"
      ],
      "default": "band"
    },
    "size": {
      "type": "string",
      "description": "出力サイズ",
      "enum": [
        "youtube",
        "social",
        "square",
        "vertical",
        "custom"
      ],
      "default": "youtube"
    },
    "width": {
      "type": "integer",
      "description": "幅。size が custom のとき使用",
      "minimum": 320,
      "maximum": 4096,
      "default": 1280
    },
    "height": {
      "type": "integer",
      "description": "高さ。size が custom のとき使用",
      "minimum": 320,
      "maximum": 4096,
      "default": 720
    },
    "headline": {
      "type": "string",
      "description": "見出し。改行したところで折り返します。改行しなければ自動で折ります。",
      "maxLength": 60,
      "default": ""
    },
    "subtitle": {
      "type": "string",
      "description": "副題。空のままなら見出しだけを置きます。",
      "maxLength": 40,
      "default": ""
    },
    "maxLines": {
      "type": "integer",
      "description": "見出しの行数",
      "minimum": 1,
      "maximum": 2,
      "default": 2
    },
    "weight": {
      "type": "string",
      "description": "文字の太さ",
      "enum": [
        "regular",
        "bold",
        "black"
      ],
      "default": "bold"
    },
    "textEffect": {
      "type": "string",
      "description": "文字の可読性",
      "enum": [
        "outline",
        "shadow",
        "none"
      ],
      "default": "outline"
    },
    "textColor": {
      "type": "string",
      "description": "文字色",
      "default": "#ffffff"
    },
    "accent": {
      "type": "string",
      "description": "帯・重ねる色。帯とグラデーション、暗幕に使います。",
      "default": "#0b3a42"
    },
    "background": {
      "type": "string",
      "description": "背景色。背景画像を使わないときの下地です。",
      "default": "#0b3a42"
    },
    "backgroundStyle": {
      "type": "string",
      "description": "背景の塗り。背景画像を使うときは下地として隠れます。",
      "enum": [
        "solid",
        "gradient"
      ],
      "default": "gradient"
    },
    "imageUse": {
      "type": "string",
      "description": "選んだ画像の使い方",
      "enum": [
        "background",
        "background-logo",
        "logo"
      ],
      "default": "background"
    },
    "safeArea": {
      "type": "boolean",
      "description": "セーフエリアを重ねた確認用も書き出す。再生時間や操作ボタンが重なる位置を赤枠で示します。",
      "default": true
    },
    "format": {
      "type": "string",
      "description": "出力形式",
      "enum": [
        "png",
        "webp"
      ],
      "default": "png"
    },
    "assetIds": {
      "type": "array",
      "maxItems": 30,
      "uniqueItems": true,
      "items": {
        "type": "string",
        "maxLength": 100
      },
      "description": "IDs of files already imported in this browser tab, in processing order. No URLs, paths or base64."
    }
  }
}
通常実行はローカルテストです。入力・結果が画面に反映されます。
このPCのMCPと接続する

ローカルMCPアダプターの utilities_connect が返した接続コードを使います。ファイルの受け渡しはこのPC内で行います。

未接続
接続方法とダウンロード

作った1枚を、公開先の数だけ用意する

このツールは1回に1サイズを書き出します。同じ見出しを縦・正方形・OGPへ展開する、複数の候補を同じ条件で揃える、といった繰り返しは一括加工のほうが早く終わります。背景そのものを作り直したい場合は、直しやすさで道具を選んだほうが作業が減ります。

見出しを決めてから画像を選ぶ

先に見出しを書くと、文字が乗る場所からテンプレートを選べます。見出しは枠に収まるまで自動で小さくなるので、字数を増やすほど文字は小さくなります。

公開先のサイズで書き出す

YouTube、X・OGP、Instagram、縦型のプリセットのほか、任意サイズも指定できます。セーフエリアの確認用を書き出すと、再生時間や操作ボタンが重なる位置を赤枠で確かめられます。

できないこと

背景の絵は作れません。手元の画像か背景色だけを使います。使えるのは端末に入っている日本語フォントで、フォントファイルの追加はできません。商用フォントを使った画像を配布するときは、そのフォントの利用条件を確認してください。

AIエージェントへの頼み方

Claude CodeやCodexなど、MCPやWebMCPに対応したエージェントに、このページのURLを添えて次のように頼めます。ファイルは会話に添付せず、手元のパスや条件を伝えます。

  • 「cover.jpg に3分でわかる動画の切り出しという見出しを重ねて、帯付きでYouTubeの1280×720にして。セーフエリアの確認用も出して。」
  • 「同じ見出しと副題で、X・OGPの1200×630と縦型1080×1920のサムネイルも作って。文字は白の縁取りで。」