画像ボード
複数画像をコンタクトシートやラベル付きのグリッドへまとめます。
結果
ここに仕上がりが表示されます
ファイルを追加するか、サンプルで試せます。
コピー・保存する前に、内容を確認できます。
入力・処理・結果はこのブラウザ内。ページ移動でも素材を使えます。再読み込み・タブ終了で消えるため、必要な結果は保存してください。
AIエージェントから使うWebMCP 試験対応
このブラウザではWebMCPが有効になっていません。通常のツール操作と下の実行テストはそのまま使えます。
「画像ボードで画像を一覧画像にまとめる。結果を確認できる形で残してください。」
WebMCPは試験中のWeb標準です。利用には対応ブラウザと対応エージェントが必要です。MCPサーバーの接続URLではありません。AIサービスへ渡す内容は、そのサービスのデータ方針も確認してください。対応状況と使い方
入力仕様を見る · chinouken_image_layout
{
"type": "object",
"additionalProperties": false,
"required": [
"assetIds"
],
"properties": {
"width": {
"type": "integer",
"description": "出力幅。出力画像の幅（px）",
"minimum": 320,
"maximum": 8192,
"default": 1800
},
"columns": {
"type": "integer",
"description": "列数",
"minimum": 1,
"maximum": 8,
"default": 3
},
"cellHeight": {
"type": "integer",
"description": "セルの高さ。各画像欄の高さ（px）",
"minimum": 80,
"maximum": 2400,
"default": 420
},
"gap": {
"type": "integer",
"description": "画像間の余白",
"minimum": 0,
"maximum": 240,
"default": 24
},
"padding": {
"type": "integer",
"description": "外周の余白",
"minimum": 0,
"maximum": 400,
"default": 32
},
"background": {
"type": "string",
"description": "背景色",
"default": "#ffffff"
},
"showLabels": {
"type": "boolean",
"description": "ファイル名を表示",
"default": true
},
"format": {
"type": "string",
"description": "出力形式",
"enum": [
"png",
"webp"
],
"default": "png"
},
"assetIds": {
"type": "array",
"minItems": 1,
"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と接続する
画像を選ぶ
一覧にしたい画像を選び、列数とセルの高さを決めます。
ラベルを確認
ファイル名ラベルは画像の下に表示されます。
AIエージェントへの頼み方
Claude CodeやCodexなど、MCPやWebMCPに対応したエージェントに、このページのURLを添えて次のように頼めます。ファイルは会話に添付せず、手元のパスや条件を伝えます。
- 「candidates フォルダの画像12枚を、ファイル名のラベル付きで4列のコンタクトシートにまとめて。」
- 「この3枚の比較画像を横一列のボードにして、1枚の画像で保存して。」