Illustmaker 使い方マニュアル

ブラウザだけで動く、無料のベクターイラスト作成ツール「Illustmaker」の使い方ガイド。
基本操作から実践的なテクニックまで。

動作環境	PC のモダンブラウザ（Chrome / Safari / Firefox / Edge 最新版）
登録	不要。ブラウザでアクセスするだけ
保存	ブラウザ内に自動保存。ファイル書き出しも自由
料金	完全無料。商用利用 OK

クイックスタート

初めての方向けに、最初の図形を作って書き出すまでを駆け足で。

1. エディタを開く

トップページの「今すぐつかう」ボタン、または /illustmaker/app/ に直接アクセス。初回起動時はキャンバスサイズを選ぶダイアログが表示されます。

2. 図形を描く

左のツールバーから 長方形(R) を選び、キャンバス上でドラッグ。Shift を押しながらドラッグで正方形になります。

3. 色を変える

図形を選択した状態で、右パネルの「塗り」「線」をクリックしてカラーピッカーで色変更。

4. 書き出す

上部メニューの ファイル → 書き出し、またはツールバーの SVG書出 ボタンから SVG / PNG / JPEG / PDF を選んで保存。

ツール一覧

左のツールパネルから選択できます。括弧内はキーボードショートカット。

`V`	選択ツール	図形をクリックやドラッグで選ぶ。Shift で複数選択、Alt+ドラッグで複製。
`A`	ダイレクト選択	アンカーポイント単位で編集。パスの形を細かく調整。
`Q`	なげなわ選択	自由形状で囲んで一気に選択。
`P`	ペン（ベジェ）	クリックで直線、ドラッグでベジェ曲線。プロ仕様の描画。
`R`	長方形	ドラッグで長方形。Shift で正方形、Alt で中心から。
`O`	楕円	ドラッグで楕円。Shift で正円。
—	多角形 / スター	ホバーで頂点数・凹凸度などのオプション。
`L`	直線	2点を結ぶ線。Shift で角度を 15° 刻みに。
`T`	テキスト	クリックで点テキスト、ドラッグでエリアテキスト。1500+ フォント対応。
`I`	スポイト	他の図形の塗り・線スタイルを抽出して適用。
`G`	グラデーション	線形/放射状グラデーションを設定。
`N`	ペンシル	フリーハンドで描いたパスを Schneider 法で滑らかに自動補正。
`B`	ブラシ	画像レイヤーに直接ペイント。
`E`	消しゴム	パスを削るか、画像から消す。
`H` / Space	手のひら	キャンバスをドラッグで移動。Space は一時切替。

ショートカット一覧

ファイル操作

新規ドキュメント	`⌘N`
SVG 書き出し	`⌘E`
名前を付けて保存	`⌘S`
開く	`⌘O`

編集

取り消し	`⌘Z`
やり直し	`⌘⇧Z` または `⌘Y`
切り取り / コピー / ペースト	`⌘X` / `⌘C` / `⌘V`
複製	`⌘D`
すべて選択 / 解除	`⌘A` / `⌘⇧A`
削除	`Delete` または `Backspace`

表示

拡大 / 縮小	`⌘+` / `⌘-`
全体表示	`⌘0`
100%	`⌘1`
グリッド切替	`⌘'`
ルーラー切替	`⌘R`

整列・配置

前面へ / 背面へ	`⌘]` / `⌘[`
最前面 / 最背面	`⌘⇧]` / `⌘⇧[`
グループ化 / 解除	`⌘G` / `⌘⇧G`
ロック / 解除	`⌘2` / `⌘⌥2`

レイヤー

右パネルの「レイヤー」タブで管理。アイコンで表示 / ロック / カラータグを設定できます。

表示切替：👁 アイコンをクリック
ロック：🔒 アイコンで誤操作を防止
並べ替え：レイヤー行をドラッグして上下入れ替え
フォルダ化：複数選択して「フォルダ」ボタンでまとめる
色タグ：左端の四角をクリックして色分け、視認性UP

配色・グラデーション

単色塗り

右パネル「塗り」→「単色」を選び、カラーピッカーで指定。HEX 入力、Adobe 風カラーパレットから選択も可能。

グラデーション

G キーまたは「塗り」→「グラデ」で起動。

線形・放射状を切替
カラー停止点（gradient stop）を追加 / 削除 / ドラッグで移動
角度をドラッグハンドルで調整

カラーパレット保存

カラーピッカーの「+」ボタンで現在の色を保存。よく使う配色をプロジェクトごとに管理できます。

テキスト

点テキスト・エリアテキスト

クリック：1行の点テキスト
ドラッグ：囲んだ範囲に流れるエリアテキスト

フォント

Google Fonts 1500+ を内蔵。Adobe Fonts、ローカルファイル（.ttf / .otf / .woff / .woff2）の読み込みも可能。

パス沿い文字

パスを選択 → 右パネル「テキスト」→「パス沿いに配置」で、曲線に沿った文字レイアウトに変換できます。

エクスポート

`SVG`	ベクター	編集可能なベクターデータ。Web・印刷両用
`SVG最適化`	ベクター	不要属性を削除・圧縮した軽量 SVG
`PNG`	ラスター	透過対応。サイズ倍率指定可（1x / 2x / 3x）
`JPEG`	ラスター	非透過。品質指定可
`PDF`	ベクター	真のベクター PDF（TCPDF）。印刷データに最適
`.ai互換`	ベクター	Adobe Illustrator が開ける SVG ベース
`.json`	プロジェクト	編集状態をまるごと保存。バックアップ用

印刷・入稿フロー

Illustmaker で作成したデータを印刷会社に入稿するときの推奨手順です。

1. 入稿前チェックリスト

仕上がりサイズ・トンボ・塗り足し：印刷会社のテンプレートに合わせる（塗り足し通常 3mm）
解像度：埋め込み画像は実寸 300dpi 以上
フォントアウトライン化：必ず実施（後述）
色域：印刷は CMYK、Web の RGB から変換が必要（後述）
透明効果・ブレンドモード：印刷所によっては非対応。事前確認を

2. フォントのアウトライン化

テキストを画像化（ベクターパスに変換）することで、印刷先でフォントが無くても再現できます。

方法 A：ツールメニューから「テキスト → アウトライン化」を実行
方法 B：MCP API illust.outline_text でセッション内のすべてのテキストを一括変換

アウトライン化後はテキストの再編集ができなくなるので、元データは別途保存しておきましょう。

3. CMYK 変換（重要）

Illustmaker は RGB ベースで動作します。CMYK が必要な印刷物の場合は、最終データを以下のいずれかでCMYK変換してください。

Adobe Illustrator で開き、ファイル → ドキュメントカラーモード → CMYK
Adobe Acrobat Pro で「印刷工程 → カラー変換」
InDesign に貼り付けて書き出し設定で CMYK 化

特に、印刷で色が大きく変わりやすいビビッドな青・緑系（ネオン系）は要注意。発色の落ち込みを試刷りで確認してください。

4. PDF 書き出しのおすすめ設定

用途	設定
Web 用 PDF	そのまま「PDF」エクスポート。サイズ重視
印刷入稿用	「PDF」エクスポート後、Illustrator/Acrobat で PDF/X-1a に再書き出し
ベクター品質保持	透明効果は分割・統合せず、ベクター属性のまま出力

5. .ai 互換書き出しと再編集

.ai 互換 は SVG 形式に Illustrator の名前空間を付与したもので、Adobe Illustrator が開けます。受け取った側で CMYK 変換・トンボ追加・最終調整できます。

完全な .ai バイナリ形式ではなく Illustrator が読み込める SVG なので、一部の特殊効果（複雑なパターン、グラデーションメッシュなど）は失われる可能性があります。

6. 印刷入稿PDF（v3.0新機能）

商用印刷会社へ入稿できるトンボ・塗り足し付きPDFを直接書き出せます。エディタから書き出し、または AI/MCP 経由で illust.export_print_pdf を呼ぶことで利用可能。

トンボ: コーナー4箇所 + センター4箇所 + 塗り足し補助線を自動付与
塗り足し: 3-20mm 可変
レジストレーションマーク: 4色対応（オプション）
プリフライト診断: illust.preflight_check で塗り足し漏れ・未アウトライン化・RGB→CMYK警告を 0-10点スコアで返却

可変データ印刷

CSVから 100枚〜数千枚 の名刺・ラベル・チケット・名札を一括生成できます。専用ページ: /illustmaker/batch/

テンプレ選択: 名刺/ロゴ/チラシ/カード/クーポン/バナーから選ぶか、自作プロジェクトJSONをアップロード
CSV入力: ヘッダー行に変数名（name, title, phone 等）、データ行に値。ドラッグ&ドロップ・ペースト・サンプル自動生成の3経路
プレビュー: 先頭6件を即SVG表示で確認
一括出力: SVG-ZIP / PNG-ZIP / PDF面付け（A4/A3/Letter・列数行数余白指定可）

テンプレに {{name}} のようなプレースホルダーを書くと、CSVヘッダーと一致した値が自動置換されます。MCP illust.batch_render でAI経由でも実行可能。

テンプレ・部品ライブラリ

サーバー側に保持された高品質な部品・テンプレートをAIから検索・利用できます。

テンプレ（7種）	名刺：和モダン / 名刺：モダンIT / ロゴ：モノグラム / SNSバナー 1080 / A4チラシ / サンクスカード / クーポン
アイコン（12種）	星 / ハート / チェック / 右矢印 / メール / 電話 / 位置 / カレンダー / 地球 / 設定 / 人 / 時計
フレーム（3種）	円フレーム細 / 角飾り四角 / 角丸フレーム
装飾（4種）	ジグザグ / 星3つ / 二重線 / フラリッシュ

MCPツール: illust.library_search / illust.library_use / illust.template_list / illust.template_render

ロゴファクトリー

ロゴ制作の量産処理に特化したMCPツール。

カラーバリエーション一括生成 (illust.logo_variations) — mono / inverse / gray / orange / blue / red / green / gold の8パターン。各バリアントごとに新セッション作成
ロゴキット一括書き出し (illust.logo_export_kit) — 9種類のサイズをZIPで：favicon-16/32, apple-touch-180, PWA-192/512, Twitter card 1200×630, Instagram 1080, master SVG, master-print SVG

ライブトレース（画像→ベクター変換）

ラスター画像オブジェクトを potrace でベクターパスに変換します。手書きスケッチからロゴ起こし、AI生成画像のベクター化に。

パラメータ: 二値化閾値 / ノイズ除去 / 最適化許容差 / 塗り色 / 元画像置換有無

MCPツール: illust.live_trace

画像生成 / AI Vision批評（BYOK）

BYOK = Bring Your Own Key。ユーザーご自身のAPIキーで画像生成・AI批評が実行できます。ASIサーバーはキーを一切保管しません（透過プロキシ）。

画像生成 (illust.generate_image) — OpenAI DALL-E / Recraft API を呼び出し、生成画像を image オブジェクトとして配置
AI Vision 批評 (illust.critique) — 現在のセッションをPNGレンダリング → Claude/GPT Vision に投げて批評をJSONで返却（score 0-10 / 問題点 / 改善提案 / 良い点）

「描く → AI自己評価 → 修正」を繰り返すワークフローに使えます。

グラデーションメッシュ

バイリニア補間で4隅または N×M グリッドの色を補間し、滑らかな2D色グラデーションを生成します（576〜3600ポリゴン）。

エディタの「AI」メニュー → 「グラデーションメッシュ」から GUI 配置可能（位置・サイズ・4隅色・detail）
MCPツール: illust.add_mesh_gradient — {session, x, y, w, h, cols?, rows?, detail?, corners?, colors?}
detail (8-60) で滑らかさ調整。corners で [tl, tr, bl, br]、または colors で N×M グリッド全色指定

ブランドキット保存

パレット・フォント・アセットURLをひとまとめにブランド資産として保存。匿名 owner_fp（ip+ua hash）ベースなので、ログイン不要で複数キット管理可能。

エディタの「ファイル」メニュー → 「ブランドキット」から保存・呼び出し・削除
MCPツール: illust.brand_save / illust.brand_list / illust.brand_delete
保存内容: {name, palette[], fonts[], assets[]}（kit_id指定で上書き）

リアルタイム共同編集（v5.0 / mode='edit'）

共有リンクを mode='edit' で発行すると、複数人が /illustmaker/live/{token} から同時に図形を描画・移動・削除できる完全共同編集モードになります。Figma 的な「同じキャンバスを複数人で触る」体験が、専用クライアント不要・ブラウザだけで実現。

HTTP long-polling（25秒）+ LWW（Last-Write-Wins）競合解決。WebSocket 不要、ファイアウォール越えやプロキシ環境でも動作
同時編集ロック: 移動・編集中のオブジェクトは他参加者から保護（5秒で自動解放）
カーソル・選択範囲共有: 他参加者がどこを見て・何を選んでいるか即時表示（カーソルは~80msでブロードキャスト）
参加者リスト: 上部アバター + 右パネルで色付き表示
図形ツール: 選択 / 長方形 / 楕円 / テキスト / 直線（軽量MVP）。今後ペン・パスファインダー等を追加予定
MCPツール: illust.collab_join / illust.collab_leave / illust.collab_op_submit / illust.collab_poll / illust.collab_status

用途：複数デザイナーの同時ブレスト・社内ワークショップ・チーム MTG でのアイデア出し・教育現場のグループ演習など。

バージョン履歴・コメント

セッションの状態を名前付きバージョンで保存・後から復元できます（最大30バージョン）。座標付きのコメント・アノテーションも残せます。

バージョン保存: illust.session_snapshot でラベル付きで保存
バージョン復元: illust.session_restore。復元前に現状を自動スナップ
コメント: illust.session_comment（action=add/list/resolve/delete）。座標・対象オブジェクト指定可・解決マーキング対応

マクロ（操作の連鎖を保存・再生）

MCP呼び出しの連鎖をマクロとして保存し、変数置換で再実行できます。「ロゴパーツを3つ追加→整列→グループ化」のような複合操作を1コマンド化。

illust.macro_save でステップ配列を保存（{{var}} 変数対応）
illust.macro_list でセッション内マクロ一覧
illust.macro_run で実行

セキュリティ: マクロ内で使えるメソッドはホワイトリストで厳格に制限。BYOK系（画像生成・AI批評）やネットワーク系（URL取得）は実行不可。

ギャラリー（コミュニティ）

作品を /illustmaker/gallery/ に投稿して公開できます。匿名OK・登録不要。

エディタの「ファイル」メニュー → 「ギャラリーに投稿」から
リミックス: 他のユーザーの作品を読み込んで再編集可能（プロジェクトJSONが公開されているため）
コメント・いいね・通報機能あり（3件通報で自動非表示）
カテゴリ（icon/logo/illustration/character/ui/pattern/other）・タグ・新着/人気/トレンドソート
AIから操作: gallery.submit / gallery.list / gallery.get / gallery.remix / gallery.comment / gallery.list_comments

MCP API（AI連携・全102メソッド）

AIエージェント（Claude Desktop / Cursor / Cline 等）から直接エディタを操作できる Model Context Protocol サーバーを公開しています。

npm: @illustmaker/mcp（86ツール）
HTTP API: https://asi.co.jp/illustmaker/api/mcp.php（102メソッド）
完全リファレンス: MCPドキュメント
llms.txt: /illustmaker/llms.txt（AIエージェント向け簡潔リファレンス）

セッション作成・図形追加・パスファインダー・整列・マスク・テキスト編集・印刷PDF出力・テンプレ展開・画像生成・AI批評・マクロ・ギャラリー投稿まで全てAIから操作可能。

互換性マトリックス

本ツールで「できること」「現状できないこと」をまとめます。プロ用途で検討する際の参考にしてください。

サポート機能

ベジェ描画（ペンツール）	✓ ハンドル付きアンカー操作対応
シェイプ	✓ 矩形・楕円・多角形・スター・直線
フリーハンド・ペンシル	✓ Schneider 曲線フィッティング
テキスト（点・エリア）	✓ パス沿いテキスト含む
パスの結合・分割	✓
レイヤー / グループ	✓ フォルダ階層対応
整列・分布	✓ 8 種（左/中央/右/上/中段/下/水平分布/垂直分布）
クリッピングマスク	△ 簡易対応（複雑なネストはIllustrator側推奨）
不透明度・透過	✓ 0–100%
線形・放射状グラデーション	✓
グラデーションメッシュ	✗ 非対応
パターン塗り	△ 単純パターンのみ
ブレンドモード	△ 一部対応（multiply/screen/overlay 等基本）
シンボル	✗ 非対応（duplicate で代替）
3D 効果	✗ 非対応
カラーモード	RGB のみ（CMYK は外部変換）
カラー管理（ICC プロファイル）	✗ 非対応
フォント埋め込み（SVG）	✓ Google Fonts は CDN 参照、ローカルは Base64 埋め込み
アウトライン化	✓ `outline_text`
SVG 読込	✓ ほぼフル対応（一部 filter は簡略化）
SVG 書出	✓ 最適化版/フル版
PNG / JPEG 書出	✓ 1x/2x/3x スケール対応
PDF 書出	✓ TCPDF ベース。真のベクター
PDF/X-1a 直接書出	✗ Illustrator/Acrobat で変換推奨
AI 互換書出	✓ Illustrator で開ける SVG ベース
.eps	✗ 非対応

日本語フォント・ライセンス

Google Fonts 内蔵（Noto Sans JP / M PLUS 系 / Zen 系など）— SIL Open Font License。商用可
Adobe Fonts（要 Creative Cloud 契約）— Adobe の利用規約に従う
カスタムフォント（.ttf/.otf/.woff/.woff2）— 端末内のみ登録。サーバーへ送信されません。商用利用は各フォントのライセンス確認を

日本語版ではアウトライン化することで、印刷先でのフォント問題を回避できます。

SVG出力の他ツール互換度

本ツールは標準SVGを出力するため、ほぼすべてのベクター編集ソフト・ブラウザ・印刷RIPで開けます。複雑な要素の互換性目安：

テキスト	✓ ほぼ全ツールで互換
パス（ベジェ）	✓ 完全互換
レイヤー（SVG <g>）	✓ ほぼ完全互換
クリップ・マスク	△ シンプル形のみ広く互換
パターン・3D効果	△ ベクター編集ソフトで再構築が必要な場合あり
カラー（CMYK）	本ツールは `illust.export_print_pdf` で印刷入稿PDF出力可（v3.0以降）

大量データ・性能

ブラウザベースのツールのため、扱えるオブジェクト数には実用的な上限があります。

推奨ガイドライン

500 オブジェクト以下	軽快に動作。問題なし
500 〜 2,000	動作可能。複雑な編集はやや重い
2,000 〜 5,000	動作可能だが要注意。レイヤー分割推奨
5,000 超	非推奨。`batch_render` で個別生成を検討

大量量産の推奨フロー

1 ファイル＝1 デザインに分割
illust.batch_render で CSV データを流し込む
出力は pdf-imposition / png-zip / svg-zip
最大 1,000 件まで 1 リクエストで処理可

埋め込み画像のサイズ目安

個別画像：5MB 以下推奨（API import_from_url の上限）
1 セッションの総保存サイズ：5MB 以下
大きい画像は事前に圧縮・リサイズ

テクニック集

1. Alt+ドラッグで複製しながら移動

選択ツールで Alt（Mac は Option）を押しながらドラッグすると、図形を複製しつつ動かせます。連続複製にも便利。

2. Shift で 15° 刻みの回転

回転ハンドルを Shift を押しながらドラッグすると 15° 単位でスナップ。正確な傾きを作るときに。

3. スマートガイドで自動整列

上部の スマートガイド をオン。図形を動かすと近くの図形に対して自動でガイド線が表示され、ピタッと整列します。

4. 連番テキストを一気に

テキストを縦に並べてグループ化 →「整列・均等配置」で間隔を揃えると、メニュー表や価格表が一気に整います。

5. なげなわで遠い図形をまとめて

大きな絵で離れた図形を選ぶときは Q（なげなわ）で囲って一括選択。Shift で追加選択もOK。

6. スポイトでスタイル統一

気に入った塗り・線の図形があれば I でスポイト → 他の図形に同じスタイルを瞬時に適用。

7. パスの結合 / 分割

2つのパスを選択 → 右クリック「パスを結合」で1本に。逆にアンカーポイントで切断もできます。

8. ガイドラインを引く

ルーラー（⌘R）の目盛りからドラッグで水平・垂直のガイド線を作成。⌘; でガイド全体の表示切替。

9. レイヤーカラーで仕分け

ロゴ案 A・B・C をレイヤーカラーで分けると、視覚的に切替が一発でわかる。チームレビューにも便利。

10. 自動保存で安心

編集のたびにブラウザ内（localStorage）に自動保存。タブを閉じても次回開いた時に復元できます。

よくある質問

商用利用は可能ですか？

はい、完全無料で商用利用可能です。作成したデータは利用者ご自身に帰属します。

スマートフォンでも使えますか？

PCブラウザ向けに設計しています。スマートフォンでアクセスすると警告が出ますが、機能上は PC のみのサポートです。

データはクラウドに保存されますか？

いいえ、ブラウザ内（localStorage）に保存されるだけで、サーバーには送信されません。書き出したファイルはご自身で保管してください。

Adobe Illustrator のファイルは開けますか？

SVG として書き出されたファイルなら開けます。.ai 互換書き出しにも対応しているので、Illustrator との往復編集が可能です。

AI に操作させたいです

MCP API に対応しています。AIエージェントのマニュアルをご覧ください。

使ったことがなくても大丈夫？

Illustrator 経験があれば違和感なく使えるはずです。初めての方も「クイックスタート」セクションから始めれば、5分で図形を書き出せます。

問い合わせ先は？

ASI Studio お問い合わせまでお寄せください。