ひとつのアイコンを、各プラットフォームへ。
iOS、Android、macOS、Web。原稿から各サイズと設定ファイルを作り、プロジェクトへ持ち込めるZIPにまとめます。
仕上がりプレビュー
設定に合わせて更新ここに画像をドロップ
まとめて追加して、同じ仕上がりに。
SVG・PNG・JPEG・WebP・AVIFに対応。
端末のマスクは表示イメージです。iOSは角丸を画像に焼き込まず、Android adaptive・PWA maskableは安全領域に収まるよう追加の余白を取ります。
素材
画像・動画はこのタブのメモリに保持します。画像20MB／動画100MB、合計24素材・120MBまで。
作成結果
作成したファイルと設定がここに表示されます。確認してから保存できます。
加工レシピを保存・読み込み
同じ設定を繰り返し使えます。素材そのものは含めません。
{
"version": 1,
"width": 1200,
"height": 630,
"fit": "contain",
"format": "webp",
"quality": 85,
"rotation": 0,
"flipX": false,
"flipY": false,
"background": "#123d43",
"positionX": 50,
"positionY": 50,
"brightness": 100,
"contrast": 100,
"saturation": 100,
"grayscale": 0,
"sepia": 0,
"blur": 0,
"preset": "all-icons",
"padding": 12,
"radius": 0,
"appName": "My App",
"foreground": "#ffffff",
"watermark": "",
"text": "知"
}画像・動画はブラウザ内で加工します。MCP接続時は、このPC上のアダプターと素材・結果を受け渡します。
AIエージェントから使うWebMCP 試験対応
このブラウザではWebMCPが有効になっていません。通常のツール操作と下の実行テストはそのまま使えます。
「この画像からiOS・Android・macOS・Webのアイコンと設定ファイルをまとめて作って。」
WebMCPは試験中のWeb標準です。利用には対応ブラウザと対応エージェントが必要です。MCPサーバーの接続URLではありません。AIサービスへ渡す内容は、そのサービスのデータ方針も確認してください。対応状況と使い方
入力仕様を見る · chinouken_media_process
{
"type": "object",
"properties": {
"preset": {
"type": "string",
"enum": [
"favicon",
"ios",
"android",
"macos",
"all-icons",
"social",
"custom"
],
"default": "favicon"
},
"sourceIds": {
"type": "array",
"maxItems": 24,
"uniqueItems": true,
"items": {
"type": "string",
"maxLength": 100
},
"description": "Image IDs from media_session. Omit to use all loaded images. Exclusive with text."
},
"text": {
"type": "string",
"maxLength": 16,
"description": "1–4 characters for an icon. No image upload required. Emoji use the OS font."
},
"appName": {
"type": "string",
"maxLength": 60,
"default": "My App"
},
"foreground": {
"type": "string",
"pattern": "^#[0-9a-fA-F]{6}$",
"default": "#ffffff"
},
"background": {
"type": "string",
"pattern": "^(transparent|#[0-9a-fA-F]{6})$",
"default": "transparent"
},
"width": {
"type": "integer",
"minimum": 1,
"maximum": 8192,
"default": 1200
},
"height": {
"type": "integer",
"minimum": 1,
"maximum": 8192,
"default": 630
},
"format": {
"type": "string",
"enum": [
"webp",
"jpeg",
"png"
],
"default": "webp",
"description": "Custom/social output format. Platform icons always PNG + ICO."
},
"quality": {
"type": "number",
"minimum": 1,
"maximum": 100,
"default": 85
},
"fit": {
"type": "string",
"enum": [
"contain",
"cover"
],
"default": "contain"
},
"padding": {
"type": "number",
"minimum": 0,
"maximum": 40,
"default": 12
},
"radius": {
"type": "number",
"minimum": 0,
"maximum": 50,
"default": 0
},
"rotation": {
"type": "integer",
"enum": [
0,
90,
180,
270
],
"default": 0
},
"flipX": {
"type": "boolean",
"default": false
},
"flipY": {
"type": "boolean",
"default": false
},
"positionX": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 50
},
"positionY": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 50
},
"brightness": {
"type": "number",
"minimum": 0,
"maximum": 200,
"default": 100
},
"contrast": {
"type": "number",
"minimum": 0,
"maximum": 200,
"default": 100
},
"saturation": {
"type": "number",
"minimum": 0,
"maximum": 200,
"default": 100
},
"grayscale": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 0
},
"sepia": {
"type": "number",
"minimum": 0,
"maximum": 100,
"default": 0
},
"blur": {
"type": "number",
"minimum": 0,
"maximum": 20,
"default": 0
},
"watermark": {
"type": "string",
"maxLength": 80,
"description": "Bottom-right label on custom/social images only."
}
},
"required": [],
"additionalProperties": false
}通常のMCPクライアントと接続
ローカルのMCPアダプターを起動し、media_connectが返す接続コードを入力してください。このPC上のMCPクライアントから素材を受け取り、加工結果を同じPCへ返します。接続するまで待機します。
アダプターのセットアップ方法この4つのメディアツール間では素材と結果を引き継げます。ページの再読み込み・タブ終了で消去されます。通常のMCP接続・ブラウザAPIの使い方
一つの画像から、各プラットフォームへ
1024px以上の正方形の原稿が目安です。文字から作ることもできます。iOS・Android・macOSを個別に選ぶか、「すべてのアイコン」でWeb向けも一度に作成してください。
iOSとmacOSはPNGとContents.jsonを含むAppIcon.appiconset、Androidは密度別のmipmapフォルダ、adaptive iconの前景とXML、Play Store用画像を出力します。
OSの形に合わせて余白を取る
iOSの出力は背景を不透明にし、角丸を焼き込みません。角丸はOS側で適用します。Androidのadaptive前景は中心の安全領域へ収め、背景を別リソースにします。
プレビューの丸形・角丸は参考表示です。端末によってマスクは異なるため、実際のアセットカタログとランチャーでも確認してください。
含まれる形式と、含まれない形式
従来のフラットPNG用アセットを作成します。Icon Composerのレイヤー形式、watchOS、Androidの単色テーマアイコンを自動生成する機能はありません。既存プロジェクトのリソースへ取り込む際は、設定とファイル名を確認してください。
処理はブラウザ内で完結します。原稿画像はサーバーへアップロードしません。
AIエージェントへの頼み方
Claude CodeやCodexなど、MCPやWebMCPに対応したエージェントに、このページのURLを添えて次のように頼めます。ファイルは会話に添付せず、手元のパスや条件を伝えます。
- 「icon-master.png から、iOSとAndroidのアプリアイコン一式を作って。Xcodeのアセットカタログの形で保存して。」
- 「Androidのadaptive iconとして、余白が足りないか確認したうえで書き出して。」