サムネイル・カード作成
背景画像に見出しと副題を重ね、YouTube・SNS・記事OGPのサムネイルを作ります。テンプレートと出力サイズを選ぶと、文字は枠に収まるまで自動で小さくなります。
結果
ここに仕上がりが表示されます
入力と設定を確認して、実行してください。サンプルからも始められます。
コピー・保存する前に、内容を確認できます。
入力・処理・結果はこのブラウザ内。ページ移動でも素材を使えます。再読み込み・タブ終了で消えるため、必要な結果は保存してください。
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と接続する
見出しを決めてから画像を選ぶ
先に見出しを書くと、文字が乗る場所からテンプレートを選べます。見出しは枠に収まるまで自動で小さくなるので、字数を増やすほど文字は小さくなります。
公開先のサイズで書き出す
YouTube、X・OGP、Instagram、縦型のプリセットのほか、任意サイズも指定できます。セーフエリアの確認用を書き出すと、再生時間や操作ボタンが重なる位置を赤枠で確かめられます。
できないこと
背景の絵は作れません。手元の画像か背景色だけを使います。使えるのは端末に入っている日本語フォントで、フォントファイルの追加はできません。商用フォントを使った画像を配布するときは、そのフォントの利用条件を確認してください。
AIエージェントへの頼み方
Claude CodeやCodexなど、MCPやWebMCPに対応したエージェントに、このページのURLを添えて次のように頼めます。ファイルは会話に添付せず、手元のパスや条件を伝えます。
- 「cover.jpg に3分でわかる動画の切り出しという見出しを重ねて、帯付きでYouTubeの1280×720にして。セーフエリアの確認用も出して。」
- 「同じ見出しと副題で、X・OGPの1200×630と縦型1080×1920のサムネイルも作って。文字は白の縁取りで。」