DTP は MCP の夢を見るか？ LLM で Illustrator の作業効率化を試みる

生成 AI 全盛期の昨今ですが、Adobe Illustrator や InDesign 等のソフトウェアにて行われる DTP は一歩取り残されている感が否めません。本記事では、 Illustrator 用の MCP サーバを実装して、LLM を介した Illustrator の作業効率化が可能であるかを探ります。

DTP（Desktop Publishing）とは、レイアウトや組版作業を通じて印刷物用のデータを作成することを指します。この DTP では、大量のオブジェクトに対して操作を加えたり、原稿やインターネット上の情報を基に文字を入力したりする作業が頻繁に行われます。これらを Adobe 製品、特に Illustrator で実現するには、データ駆動型グラフィックの作成や、ExtendScript を用いたスクリプティング等の複雑な作業が必要です。

一方、近年では GPT や Claude に代表される LLM の進化が著しく、DTP でもこれを活用しない手はありません。Illustrator にも生成 AI を用いたベクター生成機能は搭載されているのですが、実際にはグラフィックを新規生成するよりも、オブジェクトの配置や組版といった日常的な作業を効率的に行いたいという需要の方が高いのではないでしょうか。

自然言語でイラレを操作する

そこで、MCP（Model Context Protocol）と呼ばれる技術に注目してみます。MCP とは LLM と外部の SaaS やソフトウェアを連携させるためのオープンなプロトコル（手順）であり、これを活用することによって、自然言語を通じて外部の様々なデータを取得したり、アプリケーションを自動で操作させたりすることが可能となります。分かりやすく言えば、ChatGPTに指示を出すことで、様々な情報を取ってきたり、様々なアプリを操作できたりするようになるということです。

Adobe 製品では MCP は正式にはサポートされていませんが、先述した ExtendScript を経由することで、間接的な連携を実現することができます。実際、Photoshop や Premiere を自然言語で操作する取り組みは既に行われているようです。しかし、Illustrator に関しては、こうした取り組みはほとんど検討されていないのが現状です。

そこで本記事では、MCP を活用した Illustrator の操作を試みます。ただし、現時点では理想の制作物を一発で出すことは難しく、またプロンプト芸と WYSIWYG の相性も悪いため、今回は「手動で行うには煩雑だが、LLM によって効率化できそうな操作」に注目して、現時点でどの程度の自動化が達成可能であるかを考えます。

Node.js 上に MCP サーバを、@modelcontextprotocol/sdk を用いて実装しました。macOS でのみ作動します。ソースコードは GitHub 上に公開しています。illustrator-mcp-server という先行実装もあったのですが、こちらでは具体的なオブジェクトの操作については定義されていないのに対し、今回の実装ではオブジェクトの操作を具体的に定義している点が特徴です。

https://github.com/inaniwaudon/illustrator-mcp

ツールが呼ばれると AppleScript を経由して ExtendScript が実行されます。MCP サーバ→Illustrator では、ExtendScript の中に JSON.stringify したオブジェクトを直接展開することでパラメータを受け渡しています。一方の Illustrator→MCPサーバ では標準出力によって戻り値を返しますが、この際 ExtendScript は JSON に関する操作をサポートしていないため、適当な Polyfill を定義しています。

ドキュメントやオブジェクトを操作するツールとしては、以下のものを用意しています。

ExtendScript には、ドキュメント内のオブジェクトを一意に特定するための API が存在しないため、オブジェクトを配置または取得した時点にて UUID を生成し、pageItem.note に代入しています。以降、オブジェクトを操作する際には、この UUID を用いて操作対象を指定します。これらの管理は MCP クライアントが担当してくれるため、ユーザが意識する必要はありません。

また、MCP の呼び出しには一定時間を要するため、それぞれのツールで複数のオブジェクトを操作できるようにして、ある程度バッチ処理的な使い方が可能となるように設計しています。

いくつかの作業を MCP を介して試してみました。MCP クライアントには Cursor を利用しています。その例をご紹介します。

1. チラシの流し込み

様々な媒体のテンプレートを作り、内容を流し込むことで、定期的／大量に発行される印刷物を効率的に自動組版することができます。しかしながら、これをデータソースから一括処理しようと思うと、変数へのバインディング等が発生してなかなかに面倒です。

ここで MCP を活用すると、データソースのスキーマを厳格に定めずとも、LLM によしなに解釈させた曖昧なデータを用いて流し込みを行うことができます。手始めに以下のスーパーのチラシ風テンプレート（図 1）を作成して、そこに別途用意したデータと画像を流し込んでみます。

図 1：チラシのテンプレート

Illustrator で開いている文書内の既存のテキストフレームに、中身を流し込んでください。
以下の通りに流してください。流し込みはできるだけ一括で行ってください。
- 売り出し期間
  - 「売り出し期間」に対して、日付だけ変更
- キャッチコピー
  - 1行目、2行目それぞれ代入
- Aの日付 → 「A」のテキストフレーム（日付のみ）
  - 日付の数字だけ
- Bの日付も同様
- 商品1
  - 「メーカ1」、「商品1」、「1円」のテキストフレームにそれぞれ
  - 「円」は「s」に置き換える
- 商品2–9も同様

## 売り出し期間
- 開始：5月4日
- 終了：5月6日

## キャッチコピー
- 1行目：大型連休
- 2行目：特別大売出し

## 商品情報
A：5日
商品1
- 茨城県産、卵、98円
商品2
- 長野県産、はくさい、198円

B：6日
商品3
- 鹿児島県産、豚ロース、298円
商品4
- 北海道産、さつまいも、98円

商品5
- サントリー、天然水、98円
商品6
- メイトー、ジュース、98円
商品7
- アサヒ、モンスター、205円
商品8
- ハーゲンダッツ、アイス、188円
商品9
- マルハニチロ、さば缶、198円

ファイルの場所 ~/documents/articles/mcp-illustrator/ad
- 画像1：tamago.webp
- 画像2：hakusai.webp
- 画像3：buta.webp
- 画像4：satsumaimo.webp
- 画像5：water.webp
- 画像6：juice.webp
- 画像7：monster.webp
- 画像8：ice.webp
- 画像9：saba.webp

無事にテキストを流し込むことができました（図 2）。商品名と価格が被っているところがありますが、そこは手動で調整すれば良さそうです。同様に、写真についても流し込んでみます。画像を配置するための矩形に「画像1, 2, ……」とオブジェクト名を付与しています。

図 2：テキストが流し込まれたチラシ

Illustrator に画像を流し込みたいです。
画像1...4の名前の矩形があるので、同様の位置とサイズに、指定されたファイルの画像を配置してください

画像を流し込み、僅かに調整を加えたチラシを図 3 に示します。結構良さそうな感じです。

図 3：画像を流し込み、微調整を行ったチラシ

2. はがきの流し込み

年賀状や DM、名刺等を作成する際にも、住所や氏名を流し込むことがよくあります。今度は、はがきのテンプレを用意して、以下の住所録から一括で流し込んでもらいます。

山田太郎,100-0001,東京都千代田区千代田1-1,パークサイド千代田101
佐藤花子,530-0001,大阪府大阪市北区梅田2-2-2,グランフロント大阪202
鈴木一郎,460-0008,愛知県名古屋市中区栄3-3-3,ミッドランドスクエア303
田中誠,980-0001,宮城県仙台市青葉区一番町4-4-4,仙台ガーデンパレス404
伊藤美咲,810-0001,福岡県福岡市中央区天神5-5-5,天神ガーデンタワー505
渡辺健太,060-0001,北海道札幌市中央区北1条西6-6-6,札幌グランドタワー606
高橋優子,730-0001,広島県広島市中区基町7-7-7,ヒロシマガーデン707
小林直樹,980-0002,宮城県仙台市青葉区二番町8-8-8,仙台セントラルパーク808
加藤真理,460-0009,愛知県名古屋市中区錦9-9-9,ナゴヤガーデンタワー909
中村和也,530-0002,大阪府大阪市北区堂島10-10-10,堂島リバーフォレスト1010

Illustrator ではがきのテンプレを開いています。
~/documents/address.csv を読み込んで、その数だけアートボードをコピーしてください。
また、テキストを編集して氏名、郵便番号、住所を流し込んでください。
郵便番号はハイフン抜き、氏名の間は一文字空白空けて。ハイフンは‐にして。

ラクラクですね。流し込んだ後にテキストに対して一括編集を加えることもできます。

数字はすべて漢数字にして。

3. 請求書の修正

私は請求書を Illustrator で作成しているのですが、これを毎月書き換えるのは意外に面倒な作業です。この作業を半自動で行ってみます。ここでは、いつも使用している請求書のテンプレートを使用しました。確実性を高めるために、編集してほしいテキストフレームに「請求日」「お支払い期限」「ご請求金額」「請求内容」と名前を付したうえで、その他のオブジェクトはロックしています。

今、請求書を Illustrator で開いています。これを以下の通りに修正してください。
ロックされていないテキストを対象に処理してください。該当箇所をすべて修正してください。

稼働時間が64時間だったので、それに合わせてテキストを修正してください。
- 小計：3000×64
- 消費税：小計×0.1
- 合計：小計+消費税

請求日を本日の日付にしてください。支払期限は、今月の25日に設定してください。
曜日は日本語で記入してください。
数値計算、日付と曜日はコマンド等を用いて取得して、正しいものを記入してください。

余裕そうです。日付や数値も正しく記入できています。これを保存してメールで送付するところまでを定期的なタスクとして定義すれば、完全な自動化も達成できそうです。

4. カレンダーの生成

もう少し複雑なタスクとして、カレンダーの生成に取り組んでみます。

基本的なレイアウトは予め定義しておき、カレンダー部分を矩形で囲んでおきます（図 a 左）。これに対して、以下のプロンプトを与えることでマス目を生成します （図 a 右）

Illustrator で、今選択している矩形に対して、水平方向に7等分する6個の垂線を引いてください。
矩形の幅を7等分して座標を算出してください

続いて、縦に6等分する5個の水平線を引いてください。
高さの比率は 1:3:3:3:3:3 にしてください。

図 a：左：初期状態。右：マス目が生成された状態

次に、曜日と日付を振っていきます（図 b 左）。

カレンダーを作りたいです。
罫線の位置を参考に、最初の行に「日, 月, ……, 土」と曜日のテキストフレームを作ってください。
これをグループ化してください。

罫線に沿って、次の行から日付を配置してください。
2025/5/1 が何曜日から始まるかはコマンドで取得してください。
グループ化してください。

生成されたテキストに関して、手動でフォントサイズや配置を調整します。生成時にグループ化するように指示しておくことで、曜日や日付を一括で編集することが容易くなります。また、外枠と垂線が目障りなので、これを削除します。

続いて、祝日の表記を追加します（図 b 右）。

祝日があります。
テキストの位置を取得して、日付の下に別フレームとして記述してください。小さめでお願いします。
3日：憲法記念日、4日：みどりの日、5日：こどもの日、6日：振替休日

図 b：左：曜日と日付を振った状態。右：祝日表記を追加した状態

同様に、六曜（大安等）も表記してもらいましょう。また、日曜祝日は赤く表記するように追加で指示します。

六曜を振りたいです。日付の横にテキストフレームを作って記述してください。
六曜の内容はWebから2025/5の情報を取得してください。

5月の日曜日と祝日を Web で取得してください。
テキストフレームを再度取得して、その日付を赤色にしてください。

最後にレイアウトを微調整して完成です。テキストを 70 個近く配置する必要があり、手動で行うと骨の折れる作業ですが、MCP を介して比較的楽に処理することができました。

5. 組版・タイポグラフィの修正

組版やタイポグラフィにて頻出の作業を行ってみます。

行の両端を揃える

各行の行長が異なるテキストに対して、行ごとのフォントサイズを変化させてテキストの両端を揃えるというテクニックが存在します（以前、スクリプトとしても実装しました）。これは以下のプロンプトによって実現されます。この際、LLM が四則演算や文字数のカウントを頻繁に間違えていたため、ユーティリティツールとして calc_expression, count_characters ツールを別途定義しました。

Illustrator で選択中のテキストについて、MCP で以下の処理を行ってください。
すべての計算には calc_expressions ツールを使ってください。
- 各行の文字数を取得
- 新たなフォントサイズ = 元のフォントサイズ * (最大の行長 / 各行の行長) を算出
- 各行の文字を新たなフォントサイズに設定。行送りはフォントサイズ + 4mm に
  - この際、インデックスは改行文字を考慮しながら、行長を加算して算出

行の両端が揃った組版。広告等でよく見がち

括弧のウェイトを落とす

タイポグラフィのテクニックとして、鍵括弧のフォントのウェイトを落とすことで、視覚的な煩わしさを軽減するというものがあります（元ネタ）。Illustrator には正規表現スタイリングの機能がないため微妙に面倒な作業なのですが、これも MCP を用いて処理できます。

Illustrator で選択中のテキストについて、文字ごとのフォントのウェイトを変えてください。
すべての括弧について処理してください。
- 鍵括弧（「」）自体 → ExtraLight
- 鍵括弧（「」）の中身 → Heavy
ただし、あなたは数値計算が苦手なので、count_characters および
calc_expression を組み合わせて、正確にインデックスを計算してください。

鍵括弧は新ゴ EL、内容は新ゴ H で指定されている

助詞だけを級下げする

広告やテロップ等の文脈では、助詞の部分だけ級数を下げる（フォントサイズを小さくする）ことがあります。これを実現は以下のプロンプトによって実現されます。

Illustratorで選択中のテキストを取得してください。改行を省略しないでください。
続いて、そのテキストから助詞を取得して、そのインデックスを教えてください。
あなたは数を数えるのが苦手なので、先頭から一緒に1文字ずつカウントしてください。

これらの助詞について、水平・垂直比率を0.8倍に設定してください。

出力結果。「には」「や」等の助詞が級下げされている

正確にインデックスを計算させるのに大分苦労しました。より複雑なテキストを処理する場合は、Mecab 等の形態素解析ライブラリの利用が必須になってくるかと思われます。

6. 情報の抽出

趣向を変えて、既存のデータから情報を抽出してみます。取得元にはつくばらーめん 10 選を使用しました。

Illustrator で、らーめん屋の紹介に関する文書を開いています。
ここからテキスト情報を抽出してください。
抽出した情報は、以下の形式で構造化して、Markdown として書き出してください。
すべての情報を必ず含めるようにしてください。

## ポイント
- 情報は各店舗ごとに、縦方向に 店舗名→説明文→住所等 の順に並んでいます。
  店舗名をまず取得して、その直下にある情報を関連情報として含めましょう。
- 検索結果や推論結果を含めず、ドキュメントから取得した情報のみを使用してください。
- テキストには余分なスペース等を含む場合があるので、適宜削除してください。

## 形式
\```
## 番号: 店舗名
説明文説明文説明文
- 住所
- TEL
- SNS
\```

#01: 七福軒
鶏・豚・しじみから丁寧に出汁を取った「たまり醤油そば」。極上の醤油スープに食指が動く。麺は細く、食感も最高。学生証提示で大盛or味玉サービス。＋まかない丼で満腹。
住所: 茨城県つくば市天久保1丁目6–14
TEL: 記載なし
SNS: shichifukuken
……

テキスト自体は正しく取得できていますが、店舗名と番号、説明文の組み合わせが誤っています。モデルを良くすると改善する……のかも。

本記事では、Illustrator 用の MCP サーバを実装し、いくつかの活用例を示しました。

実用に供するかと言えば若干怪しいところですが、これまでは都度手動で処理する必要があった（あるいはスクリプトを書いていた）ところが、自然言語を通じて一括処理できるというのはかなり画期的です。（特にデザイン系の方はコーディングに馴染みがないため、このように自然言語で指示できる点は有用なのだと思います）。一方、LLM の性能や MCP の実装内容にも依りますが、やりたい内容を指示すればロジックを考える必要がない、という段階には残念ながら至っておらず、実装を知らないと上手く機能しない部分も多いと感じました。また、対人間のみならず、今後は LLM が処理しやすいように機械可読性を保ったレイヤ構造等も意識していく必要があるのかもしれません。良い距離感を保っていきたいところです。

もっとも、いずれは全てが Adobe 製品に統合されて、Firefly のように一発で版面を作ってくれる時代も到来するのでしょうが……