1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「この余白を2mmに」で直るチラシデザイン。Claude Codeと入稿まで。

1
Posted at

papers.png

NTTデータCCSで、なぜかGISチームに所属しているデザイナーのホンゴウです。中途入社で、地図の専門家に囲まれて働いています。最近、明治の東京で汽車や鉄道馬車を乗り継ぐとどうなるかを体験できるプロトタイプを作りました(またの機会に紹介します)。汽車が1日に数本しかない時代は、乗り換えのタイミングによっては「歩いた方が早いじゃん」が普通に起こります。そんな百数十年前の不便さの上に、今の街ができている。地図を眺めていると、過去の積み重ねがあって今の街があり、その先に未来の街がある。そんなことに心を動かされるようになりました。

本業のデザインでいうと、ちょっとしたバナーならAIがすぐに作ってくれる時代になりました。それでも、見た人の気持ちを動かすデザインは、AIに負けない自負があります。そのうえでAIを使い倒して自分のバリューを上げたい。そう思っていたら気づけば上期はAIと一緒に作ったプロトタイプが十数個になっていました。

この記事は、その中の1つ、紙のチラシをAIと一緒に組んで、印刷所に入稿するまでの話です。組むことや確かめることはAIに任せて、自分は「何を良しとするか」を決めることに集中しました。

3行で言うと

  • 大学の学園祭で配るチラシを、Claude CodeとオープンソースのDTPソフトDesignCraftで組み、Illustratorで仕上げて入稿しました
  • AIに画像を描かせるのではなく、組版ソフトを操作させました。だから「この余白を2mmに」と言えば、そこだけが調整できます
  • 印刷所の細かい規定(総インク量300%未満など)はPythonで検査し、印刷所ごとの入稿SKILLにしました

はじめに:紙のデザインだけが取り残されていた

画面のデザインでは、AIとの協業が始まっています。FigmaのMCPサーバーがキャンバスへの書き込みに対応し(ベータ)、Claude Codeなどのエージェントが、フレームやコンポーネントをFigmaのファイルに直接作れるようになりました。AIが作ったものが、いつものツールの中に、人が直せる形で残ります。

一方で、紙のデザイン、とくに印刷所に入稿するような印刷物は取り残されていました。現場の道具はIllustratorやInDesignです。スクリプトもありますが、決まった作業を自動化するちょっとした便利機能で、レイアウトに直接関わるものではありません。AIに頼めるのは、たいてい画像を生成して貼るところまで。生成した画像は1枚の絵に焼き付いているので、あとから人が直すことはできません。

当初、Canvaで作るつもりでデザインシステムを書いていました。ただ、AIにデザインを作ってもらうと、直したいときは作り直してもらうことになります。ChatGPTに描いてもらった絵の一部が気に入らなくて、全体を描き直してもらう過程に似ています。ClaudeからAdobeのコネクタも試しましたが、クラウドで画像を加工するような使い方が中心で、手元の.aiでレイアウトを組むことはできませんでした。欲しかったのは、「この余白を2mmに」と言えばそこだけが直る作り方でした。

そこで出会ったのが、DesignCraftという異端児です。InDesignのような組版ソフトをゼロから作り直したオープンソースで、メニューでできる操作がすべてJSONの命令になっていて、MCPからも呼べます。ヘッドレスで動き、組んだ結果(文字があふれていないか、要素がどこにあるか)も読み取れます。紙のデザインにも、AIと協業できる道具が現れました。

そして2026年11月10日、Adobe MAX 2026で、外部のAIエージェントからPhotoshopやIllustratorを操作できる「ローカルMCP連携」が発表されました(2027年初めに限定ベータの予定)。エージェントはPCの中のファイルを直接書き換え、レイヤーやベクターは人が編集できるまま残るそうです。Illustratorのベータ版には、すでにMCPサーバーが入っています。Figmaで起きたことが、紙のデザインの本流でも起きようとしています。

この記事のチラシは、その流れの中で、紙でもAIと協業できることを入稿まで通して確かめた1つの例です。

作ったもの

芸術系の学生が作品を発信・販売できるWebギャラリーの告知物です。大学の学園祭で、作品を展示・販売する学生たちに配りました。

  • A4のチラシ(片面):キャッチの入ったヘッダー、利用学生の声のカード2枚、QRコードを並べたフッター
  • SNS画像(Instagramの投稿・ストーリー、Xの投稿)
  • A3二つ折りのリーフレット(デザインは手作業。入稿の準備をAIと)

期間は、原稿を受け取ってから入稿まで2週間(2026年10月14日〜27日)。体制はデザイナーの私とClaude Codeです。たたき台は初日に出せたので、残りの時間は磨き込みとSNS画像、入稿の準備に使えました。

数字 中身
約2,600行 Claudeが書いたコード(組版の部品、Illustratorの操作、入稿の検査)
11個 SKILL(部品ごとに9個、印刷所ごとに2個)
約4秒 A3の入稿PDF 1面を、印刷所の規定で全項目検査する時間

DesignCraftで組む

04-architecture.png

Claudeは中身を書き、配置は部品が決める

Claudeが書くのは、どの部品をどの順に並べ、そこにどの文章と画像を入れるか、だけです。位置や大きさ、余白は書きません。それは部品が決めます。そのために、役割を3つの層に分けました。

層 置き場所 持っているもの
spec flyers/<案件>/<面>.json チラシの中身。どの部品をどの順に置くか、文言、画像
部品 dclib/parts/*.py 見た目の組み方。中の配置、余白、角丸、QRの置き方
SKILL .claude/skills/dc-*/SKILL.md Claude向けの手順書。その部品のspecの書き方や、過去に決めたこと

specの1ブロックはこんな形です。座標や大きさの数字が出てこないのが分かると思います。

{"part": "voice_card",
 "name": "…", "genre": "イラスト・マンガ",
 "catch": "…", "body": "…",
 "icon": "assets/hires/…/icon.tif",
 "qr": {"image": "assets/qr/….svg", "label": "…さんの\n作品ページ"},
 "works": [{"image": "…", "title": "…"},
           {"image": "…", "title": "…", "vanchor": "top"}]}

06b-same-part.png

部品は、どれも同じ2つの関数を持つプラグインの形にしました。

def height(grid, block):     # 高さが決まっていれば返す。Noneなら残りの高さを等分する
def build(st, rect, block):  # 与えられた矩形の中に、DesignCraftの命令を積む

ビルドは、specのブロックを上から順に部品へ渡すだけです。

dclib/build.py(抜粋)
grid = page.setup(st, spec)                      # 用紙・余白・色・段落スタイル
for block, rect in zip(spec["blocks"], layout(grid, spec, tokens)):
    PARTS[block["part"]].build(st, rect, block)  # 部品が命令を積む

inspect, pdf = st.run(out_dir, name)             # DesignCraftのCLIで組んでPDFに
findings, pngs = qa.check(inspect, pdf, grid, spec, ...)  # 文字あふれ・余白・解像度

チラシ1面で約270の命令になり、DesignCraftが画面を開かずに組んでPDFを書き出します。最後に組み上がった状態(各要素の位置、文字があふれていないか)を受け取って検査し、確認用のPNGを書き出します。ClaudeはそのPNGを自分で開いて、見た目も確かめます。

言葉で直す

DesignCraftを入れて15分ほどで最初のたたき台が出て、思わず「すごいぞこれは」とIDEに入力していました。そこから1時間ほどのやり取りは、こんな調子でした。

  • 「利用学生の声のカード、背景の角丸を4pxにしてみたい」
  • 「ジャンルの級数を1段下げる」
  • 「ラベルの角丸の直径を高さと同じにして、左右を半円に」
  • 「作品名を画像の右下揃えにする」
  • 「作品画像と作品名の間のマージンはいくつ?」「2mmにしたい」
  • (スクリーンショットを見せて)「ここのマージンも今の半分くらいに」

Claudeが直すのは部品とspecなので、カードがN枚あっても、1回言えば全部に効きます。全部の作り直しにはならず、言ったところだけが変わります。

ルールはコードに置く

デザインのルールは、PythonとJSONに置きました。外周の余白10mm、文字は7pt以上、ブランドのパレットにある色だけ、といったMUSTは、破るとビルドが例外で止まります。行間や余白の目安のようなGUIDEは、チラシごとに変えてよく、外れるときは理由をspecのnotesに書きます。おかげで、言葉で指定した数字は、必ずそのとおりになります。

同時に作成したSNS画像も同じ部品と素材で組んだので、キャッチの案を差し替えると、チラシとSNS画像がまとめて差し替わりました。

Illustratorで仕上げる

デザインが決まったら、DesignCraftのPDFをIllustratorに読み込んで、入稿データ(.ai)を作ります。DesignCraftは、色の扱いも書き出しの形式も、まだ印刷所の入稿には向いていません。そこで入稿データは、使い慣れたIllustratorで仕上げることにしました。最後の色の調整は、自分の目で見ながら手で行います。

「はじめに」で書いたとおり、Illustratorのスクリプトはレイアウトには関われません。そのかわり、決まった仕上げの作業は得意です。ClaudeはPowerShellからCOMで起動中のIllustratorにつなぎ、ExtendScriptを流して、次の作業をさせました。

  • 写真を、印刷用のCMYKにしたTIFFに差し替える
  • RGBから変換されて4色になった黒を、黒インク1色(K100)に置き換える
  • PDFを読み込むと消える段落の揃え(中央・右)を、DesignCraftの記録から戻す
  • 文字をアウトライン化して、印刷所のプリセットでPDF/X-1aに書き出す
$ai = New-Object -ComObject Illustrator.Application
$ai.DoJavaScriptFile('C:\...\tools\illustrator\exportX1a.jsx')
# → 保存:front_cmyk.ai / アウトライン化:26個 / 書き出し:front_x1a.pdf

08-illustrator-api.png

画面をクリックするのではないので、同じ手順を何度でも再現でき、何を何個変えたかが毎回わかります。

入稿前の検査をPythonで

入稿は、やり直せない本番デプロイ

01-deploy.png

Webなら、最悪リリースしてから直せます。紙は刷ってしまったら、直すにはもう一度同じ金額がかかります(パッチのように、そこだけシールを作って貼ることも……)。しかも印刷所ごとに細かい規定があります。

規定の例 破るとどうなるか
PDF/X-1a(印刷用のPDFの規格)で入稿、文字はアウトライン化 受け付けてもらえない、文字が化ける
色は印刷の4色(CMYK)だけ、総インク量は300%未満 色が変わる、乾かずに裏に移る
黒い文字は黒インク1色(K100) 版がずれて文字がにじむ
孤立点や、面積のない塗りを残さない 目に見えなくても、印刷所の自動チェックで指摘される

これまでは、デザイナーが目と経験で1つずつ確かめていました。規定は印刷所ごとに違うので、入稿先が変われば確かめ直しです。

いちばん厄介なのが総インク量

総インク量は、ある色のC・M・Y・Kの割合を足した値です(4色とも100%なら400%)。インクが多すぎると乾きにくく、重ねた紙の裏に色が移ってしまいます。今回の印刷所の上限は300%未満でした。

厄介なのは、見た目では分からないことです。修正前のリーフレットのデータでは、ただの黒に見える色がC93 M88 Y89 K80で、350%ありました。しかも色は作業するうちに増えていき、チラシ1面の図形の色だけで33種類になっていました。1色ずつ検算するのは現実的ではありません。

03-colors-grow.png

規定をコードにする

印刷所の規定をPythonの辞書に書き、入稿PDFをPyMuPDFで開いて、全部数えることにしました。

SHOPS = {
    "shop_a": {
        "name": "今回使った印刷所",
        "pdfx": ["PDF/X-1a:2003"],  # 印刷所のプリセットで書き出した規格
        "ink_limit": 300,           # 総インク量 300%未満
        "thin_line_pt": 0.25,       # 0.25pt以下の線は印刷されないことがある
        "bleed_mm": 3,              # 塗り足し
    },
    # "shop_b": {...}  印刷所を足すときは、ここに1つ足す
}

画像は画素ごとに4色(CMYK)を足し、図形は中身から色の指定を全部拾います。

# 画像:CMYKの画素ごとに4色を足す(0〜400%)
a = np.frombuffer(pix.samples, dtype=np.uint8).reshape(pix.height, pix.width, pix.n)[:, :, :4]
ink = a.astype(np.float32).sum(axis=2) / 255 * 100

# 図形:PDFの中身から「c m y k k」の色の指定を拾う
CMYK_OP = re.compile(rb"(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s+([kK])\b")

印刷所の規定において検査をするということは以下になります

✅ 画像 300ppi 以上・CMYK
✅ 画像の総インク量 300% 未満:最大 298.0%
✅ 図形の総インク量 300% 未満:最大 265% C78M73Y71K43
✅ 0.25pt 以下の線がない(仕上がりの内側):0 本(外側のトンボなど 88 本は可)
✅ 塗りだけの線(面積 0 の塗り)がない
✅ 描画した総インク量 300% 未満(仕上がり内、150dpi):最大 291.8%
→ ✅ 条件はすべて満たしている(見た目は別に目で確かめる)

A3の1面で検査にかかる時間は約4秒です。入稿直前に直しても、すぐに確かめ直せます。

印刷所ごとにSKILLに

規定と手順は、印刷所ごとのSKILLにしました。条件の表、書き出しのプリセット、入稿後に確かめること、つまずいたことが書いてあります。これは案件に関係なく使えるので、チラシのリポジトリではなく、どのリポジトリからも使えるユーザー単位のSKILL(~/.claude/skills/)に置きました。一方、ヘッダーやカードといった部品のSKILLは、チラシのリポジトリに残しています。次の案件には、印刷所のSKILLだけを持っていけます。

直せるデータをAIに作らせるには

「はじめに」で触れたAdobe MAX 2026では、外部のエージェントからアプリを操作する「ローカルMCP連携」のほかに、Adobe自身のAIエージェント「Creative Agent」がIllustratorやInDesignに入ったことも発表されました。アプリの中で、AIアシスタントとして複数の工程をまとめて引き受けてくれるものです。入稿まで終えた今、この2つと今回の作り方を並べてみます。

今回の作り方 Adobe Creative Agent ローカルMCP連携
提供 — 主なデスクトップアプリでベータ 2027年初めに限定ベータの予定(Illustratorはベータ版に先行して入っている)
エージェント Claude Code(アプリの外) Adobeのもの(アプリの中) 好きなもの(アプリの外)
Illustratorでできること スクリプトで仕上げの作業 アプリの中の操作 読む・直す・検査・書き出し。文字や図形を新しく置くツールはない(ベータ版で試した結果)
組版(InDesign) DesignCraftで組む 対象 対象に入っていない

AIに直しを回してもらうのに要るもの

やってみて分かったのは、AIに直しを何十回も回してもらうには、2つのことが要るということです。

  • 組んだ結果を、数字で読めること(文字があふれていないか、要素がどこにあるか)
  • 全体を、いつでも作り直せること(specから毎回組み直す)

DesignCraftは、この2つがそろっていました。Illustratorの.aiは、手で調整した結果がファイルに積み重なっていきます。作り直すと、その調整が消えてしまいます。だから、組んで直すのはDesignCraft、最後の仕上げはIllustrator、と分けました。

IllustratorベータのMCPで試してみた

記事を書いている途中で、IllustratorベータのMCPにつないで、今回と同じことをやらせてみました。ツールは47個。位置や級数、文字のあふれを数字で読めて、入稿前の検査では4色の黒(総インク量301%)まで拾い、印刷所のプリセットを指定してPDF/X-1aにも書き出せました。仕上げの側は、かなり強いです。

一方で、文字の枠や図形、画像を新しく置くツールはありませんでした。段落スタイルも、級数を変えるツールもありません。「ジャンルの級数を1段下げて」と頼むと、拡大縮小で縮めることになり、行の左端が約1.9mmずれて、上の行と揃わなくなりました。組む側は、まだほとんど手が出せません。

なので、ローカルMCPで楽になりそうなのは後半の仕上げです。今はCOMとスクリプトでやっている作業の一部は、正式な入り口からできるようになりそうです。一方、組版を担うInDesignは対象に入っていないので、前半の組んで直す工程は、当面このままだと思います。

もう1つ、細かい直しが言葉で通じたのは、道具の力だけではありませんでした。部品、SKILL、検査という層をこちらで作ったからです。道具の入り口がMCPで開いても、この層は自分たちで持つことになりますし、そのまま使えます。

まとめ

紙のチラシでも、AIと一緒に組んで、入稿まで通すことができました。

  • AIがやったこと:specを書いて組む、言われたところを直す、Illustratorで仕上げの作業をする、印刷所の規定で検査する
  • 人が決めること:何を載せるか、デザインの演出や原理原則に基づく指示、最後の色調整

組むことや確かめることをAIに任せた分、「何を良しとするか」を考える時間が増えました。見た人の気持ちを動かすデザインは、まだ人の仕事だと思っています。AIと協業し、バリューを上げていく作り方を、今後の印刷物にも広げていくつもりです。

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?