プロ仕様の次世代AIファーストベクターグラフィックツール
「Illustmaker」（イラストメーカー）

コード1行で、ベクターデザインが動き出す。
AIエージェント・サーバーサイド・cron、どこからでも叩けるシンプルな HTTP JSON API（全102メソッド）。
あなたが思い描いたことをすべて実現してくれます。

クイックスタート

1. セッション作成

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -d '{"method":"illust.create_session","params":{"width":800,"height":600,"bg":"#ffffff"}}'

{
  "ok": true,
  "session": "abc123def456",
  "state": {"docW":800,"docH":600,"docBg":"#ffffff","objects":[]},
  "open_url": "https://asi.co.jp/illustmaker/?s=abc123def456"
}

2. オブジェクト追加

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -d '{
    "method": "illust.add_object",
    "session": "abc123def456",
    "params": {"type":"ellipse","x":200,"y":150,"w":400,"h":300,"fill":"#4a9eff"}
  }'

3. SVG書き出し

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -d '{"method":"illust.export_svg","session":"abc123def456"}'

4. ブラウザで開く（ユーザーに編集してもらう）

open_url をブラウザで開けば、ユーザーは続きを手作業で編集できます。

認証 / API キー

API は匿名でも利用可能ですが、レート制限が厳しめ（30 req/分）です。継続利用には API キーの取得を推奨します。

API キーの取得

curl -X POST https://asi.co.jp/illustmaker/api/keys.php \
  -H 'Content-Type: application/json' \
  -d '{"action":"issue","email":"you@example.com","purpose":"my_project"}'

{
  "ok": true,
  "api_key": "im_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "tier": "free",
  "rate_limit_per_min": 100
}

取得した API キーは 1 度しか表示されません。安全な場所に保管してください。

利用

curl -X POST https://asi.co.jp/illustmaker/api/mcp.php \
  -H 'Content-Type: application/json' \
  -H 'X-API-Key: im_xxxxxxxxxx' \
  -d '{"method":"illust.health"}'

レート制限階層

状態確認・取り消し

# info
curl -X POST https://asi.co.jp/illustmaker/api/keys.php -H 'Content-Type: application/json' \
  -d '{"action":"info","key":"im_xxx"}'
# revoke
curl -X POST https://asi.co.jp/illustmaker/api/keys.php -H 'Content-Type: application/json' \
  -d '{"action":"revoke","key":"im_xxx"}'

制限

AIにロゴを作らせる

Claude/Cursor 等にプロンプトで依頼 → AIがSVGコードを生成 → MCPに渡してブラウザで開く。 数秒で初稿が手元に。

1. AIに「寿司屋のロゴ、 和モダンで赤と黒」とプロンプト
2. AIが illust.create_session → illust.add_svg または個別 add_ellipse/add_text を呼ぶ
3. open_url が返るのでブラウザで開く
4. 人間が微調整 → SVG/PNG/PDF書き出し

食品ラベルを100枚量産

1テンプレ + CSV/JSONで100商品分のラベルを2秒で生成。 食品工場・飲食店・クラフトビールのVariable Data Printingに。

1. テンプレ作成: create_session → 枠線/ロゴ/カラーバー add_object
2. 変数テキスト追加: {{name}}{{net}}{{expiry}}
3. 商品DB/CSVから配列抽出
4. batch_render with output:"pdf-imposition" でA4面付けPDFを一発生成
5. そのまま印刷業者へ入稿可

価格POPをPDFで一括書出

スーパーの特売POP・飲食店の値札・小売店のショーカード。 価格と商品名のCSVから30個一気にPDF化。

1. POPテンプレ作成（赤い「特価」リボン + 商品画像 + 価格）
2. POSデータ or CSV から商品名・通常価格・特売価格を配列に
3. batch_render で印刷PDFまで一気通貫

記事ごとのOGP画像を生成

ブログ100本のSNS用サムネを一気に統一感のあるデザインで生成。 タイトル+著者名の差し替えだけ。

1. 1200x630のテンプレ作成（背景+ブランドロゴ+変数タイトル）
2. ブログDBから {title, author} 配列抽出
3. batch_render with output:"png-zip" でPNG一括取得
4. 各記事ページに自動配置

ロゴA/Bテスト用に10案生成

同じ会社名で配色違い/フォント違いを10案生成 → 並べて比較 → 良い案を選んでブラッシュアップ。

1. テンプレ作成（会社名 + ロゴマーク）
2. suggest_palette で12テーマ × suggest_font で8用途 から組合せ取得
3. batch_render で配色違い10案を一括生成
4. クライアント/Slack/Notion に並べて比較

データ→グラフSVG自動図解

売上CSV/JSONをAIに渡して棒グラフ/円グラフ/折れ線を直接SVGで描画。 プレゼン資料にそのまま埋め込み。

1. データ配列をAIに渡して「これを棒グラフのSVGに」とプロンプト
2. AIがプロパティ計算→ add_object（rect）と add_text でグラフ要素配置
3. export_pdf でプレゼン用PDF

名刺・チケット連番量産

イベントチケット・QR入り受付票・名刺など、 連番＋個別情報の量産。

1. テンプレ作成（QRコード位置 + 連番フィールド + 個人情報フィールド）
2. {{name}}{{qr_url}}{{seat_no}} 変数テキスト追加
3. 参加者DBから配列抽出
4. batch_render with imposition で1枚A4に10券面付け → 印刷

商品カタログ印刷

EC/卸の商品カタログを商品DBから自動組版。 画像+型番+価格+特徴の4要素を全商品分。

1. カタログ1ページ分のテンプレ作成
2. illust.import_from_url で商品画像URLから取得
3. 商品DB全件をループ → batch_render
4. A4縦に2x4=8商品配置で印刷

Claude Desktop / Cursor / Cline （npm版）

公開中: @illustmaker/mcp

{
  "mcpServers": {
    "illustmaker": {
      "command": "npx",
      "args": ["-y", "@illustmaker/mcp"]
    }
  }
}

macOS / Homebrew で `failed to connect` になる場合： Claude Code 等は最小PATHでサブプロセスを起動するため `npx` が見つからないことがあります。下記のように 絶対パス を指定してください（パスは which npx で確認）。

{
  "mcpServers": {
    "illustmaker": {
      "command": "/usr/local/bin/npx",
      "args": ["-y", "@illustmaker/mcp"]
    }
  }
}

HTTP API直接呼出しでも利用可能。

ブラウザコンソールから（window.IM）

エディタを開いた状態で、ブラウザのDevToolsコンソールから window.IllustMaker（短縮: IM）で全機能にアクセス可能。

IM.api()                          // 全メソッド一覧
IM.newDocument({width:800,height:600})
IM.addRect({x:100,y:100,w:200,h:120,fill:"#4a9eff"})
IM.addText("Hello",{x:160,y:300,fontSize:48})
IM.exportSVG()                    // → string
IM.downloadSVG("logo.svg")

オブジェクト型

{
  "id": "o1",                    // 必須、英数字
  "type": "rect"|"ellipse"|"text"|"path"|"line"|"poly"|"star"|"image"|"raw",
  "name": "label",               // 表示名
  "x": 0, "y": 0, "w": 100, "h": 100,
  "rotation": 0,                 // 度
  "fill": "#000",                // 色 or {"stops":[...]}
  "stroke": "none",
  "strokeWidth": 0,
  "visible": true,
  "locked": false,
  // type 別:
  // text: text, fontSize, fontFamily, fontWeight, letterSpacing, lineHeight
  // path/poly/star: nodes:[{x,y,hIn,hOut}], closed
  // line: x1, y1, x2, y2
  // image: href
  // raw: rawSvg (サニタイズされる)
}

色値の許容形式

• HEX: #000, #ffffff, #00000080 (8桁=アルファ含む)
• RGB/RGBA: rgba(255, 0, 0, 0.5)
• HSL: hsl(120, 50%, 50%)
• 名前付き: red, blue, currentColor
• 特殊: none, transparent
• グラデーション: {"stops":[{"offset":0,"color":"#f00"},{"offset":1,"color":"#00f"}], "angle":0}