見出し画像

Claude Codeで作ったチラシを、Illustratorで文字が打ち替えられる.aiにする方法

楠本 愛｜AIで身軽に、美しく働く 17年目WEBグラフィックデザイナー

リールで紹介した保育園のチラシ。あれを作った仕組みをまとめました。

AIでチラシを作って、Illustratorで開いたら文字が打てなかった。
そんな経験はありませんか。

1文字ずつバラバラのテキストになっていたり、アウトライン化されていたり。これでは、入稿前に電話番号ひとつ直せません。

そこで、Claude Codeで作ったチラシを文字がテキストのまま残った.aiデータにする仕組みを作りました。この記事では、何ができるのかと、検証してわかった注意点を無料で公開しています。プロンプトと変換ツールのセット、使い方の手順は有料部分で配布しています。
そこで、Claude Codeで作ったチラシを文字がテキストのまま残った.aiデータにする仕組みを作りました。

今回作ったキットは、Illustratorの.aiと一緒に、PhotoshopのPSDとCanva用のPDFも同時に書き出されます。仕組みとしては、イラレを通してPhotoshopのPSDとCanva用のPDFを作るキットなので、要注意。
イラレを通さずにPhotoshopのPSDとCanva用のPDFを書き出すキットは、現在検証中なので、ちょっと待っててくださいね〜！！

Illustrator
Photoshop
Canva

この記事では、何ができるのかと、検証してわかった注意点を公開しています。プロンプトと変換ツールのセット、使い方の手順は有料部分で配布しています！


AIで作ったチラシが、Illustratorで困る理由

ClaudeなどのAIにHTMLやSVGでチラシを組ませて、PDFやSVGで書き出すと、Illustratorで開いたときに文字が次のどちらかになりがちです。

  • 1文字ずつのテキスト：「ちいさな保育園が、」が1個ずつのテキストに分かれている。打ち替えるには1文字ずつ消して、並べ直すしかない

  • アウトライン：文字がすべて図形になっていて、そもそも打てない

見た目はきれいでも、修正用の元データとしては使えません。お客様から「電話番号が変わりました」と言われたら、作り直しになります。

なお、ChatGPTやGeminiの画像生成で作ったチラシは、文字ごと1枚の画像です。この記事の仕組みは、そちらには使えません。（Codexは使えると思います！）

今回作った仕組み

対応しているのはA5両面のチラシです（ほかのサイズにするには、プロンプトの用紙サイズを書き換えればOK！）。

Claude Codeに、いきなり.aiを作らせるのではありません。次の3段階で動きます。

  1. Claude CodeがHTMLでチラシをデザインする

  2. 変換ツールが、HTMLの文字の位置・書体・色・字間を測る

  3. 変換ツールがIllustratorを自動で動かし、背景・写真の上に文字をテキストとして打ち直す

デザインはHTMLで組むので、レイアウトの自由度はそのままです。最後にIllustratorで組み直すので、ひとまとまりの文章（見出し1つ、説明文1つ）が、それぞれ1つのポイント文字として残ります。改行位置は固定なので、文字数を大きく変えるときは改行を打ち直してください。

書き出されるデータ

作業フォルダの書き出しの中に、次のファイルができます。

  • .ai：編集用データ。A5の仕上がりサイズのアートボード2枚（表面・裏面）、塗り足し3mm、トンボつき。カラーモードはCMYKに変換済みです（鮮やかなRGBの色はくすむので、色は入稿前に確認してください）。レイヤーは「表面_背景・写真」「表面_テキスト」「裏面_〜」「トンボ」に分かれています

  • SVG：表面・裏面。文字はテキストのまま

  • PSD：Photoshop用。文字はテキストレイヤーのまま

  • Canva用PDF：Canvaに読み込んで文字を打ち替えられます（Canvaにない書体は、近い書体に置き換わります）

  • 照合画像：左にHTML、右にIllustratorを並べた確認用。ずれがないかを目で確かめられます

お客様がIllustratorを使っていなくても、PSDやCanva用PDFで渡せます。

検証してわかった注意点

作りながら検証して、わかったことを書いておきます。検証はIllustrator 2026で行いました。

SVGに書き出すと、文字がパスになる書体がある

IllustratorからSVGに書き出すとき、書体によっては文字が強制的にアウトライン化されました。手元のMac（Illustrator 2026）では、Noto Sans JP、M PLUS 1、Fredokaがパスになりました。原因はまだ特定できていません。手元では、これらの書体が重複して入っていた（同じ書体の別バージョンが2つ入っていた）ので、心当たりがある人は整理してから試してみてください。

一方、Zen Kaku Gothic New、Zen Maru Gothic、Shippori Mincho（しっぽり明朝）、ヒラギノ、Futura、DINなどは文字のまま残りました。

.aiやPSDでは、どの書体でも打ち替えられます。SVGで渡す予定があるときだけ、書体を選んでください。変換ツールは最後に、SVGの文字がすべて残っているかを自動で確認します。

CanvaはSVGの文字を編集できない

CanvaにSVGを読み込むと、文字は図形扱いになり打ち替えられません。Canvaで使うときは、Canva用PDFを読み込んでください。

PhotoshopでSVGを開くと、1枚の画像になる

PhotoshopはSVGをラスタライズして開きます。Photoshopで使うときは、PSDを使ってください。

.aiは重くなる

写真入りのA5両面で、最初の試作は97MBありました。写真を長辺2400pxに縮めると75MBになりました。ただし、紙面いっぱいに敷く写真は2400pxだと約290dpiです。印刷所の推奨解像度に合わせて調整してください。

用意するものとダウンロード

  • Claude Code（Proプラン以上）

  • Adobe Illustrator（2026で動作確認）

  • Google Chrome（アプリケーションフォルダに入っていること）

  • Mac（変換ツールはMac用です）

  • 下に添付したキット（zip）

⚠️このあとは有料キットを配布しますが、注意事項を先に記載しておきます！ご希望にそぐわない場合、ご了承いただけない場合は、ご購入はおすすめしません😄（これ使えねーじゃん！！のノリの人は、遠慮してほしい！笑
検証してくれてありがとう！の想いのある人だけ買ってください！！ww）
また、デザインはできますが、最終調整はやった方が良いと思います^^ワイヤー作成やレイアウトなどはショートカットできるので、時短になることは確か👍✨

【ご利用にあたって】

再配布・転売について：

キット（プロンプト・変換ツール）の再配布、転売、有料・無料を問わない公開はご遠慮ください。
手を加えたものも同様です。
ご自身の制作やお客様の案件に使うのは自由です。キットで作ったチラシのデータは、
納品物として使っていただいて構いません。

ベータ版であることについて：

このキットはベータ版です。検証はMac・Illustrator 2026・Google Chromeの環境で行いました。
OSやアプリのバージョン、入っている書体によっては、うまく動かなかったり、
結果が変わったりすることがあります。
記事の検証結果は手元の環境で確かめたものです。すべての環境で同じになるとは限りません。
不具合やミスがあった場合はご了承ください。

★入稿前に必ずご自身で確認してください

書き出したデータは、そのまま入稿できる状態を目指していますが、
最終確認はご自身でお願いします。特に次の点を見てください
・書体が置き換わっていないか
・文字がずれていないか
・色（CMYKへの変換でくすんでいないか）
・写真の解像度
・塗り足し
・AIが作った文章（キャッチコピーなど）は、内容が正しいか
・言い回しが適切か
を必ず確認してください。電話番号・住所・日付などの情報は、案件情報として渡したものと
合っているかも確認が必要です
データを使ったことで起きた印刷トラブルや損害については、責任を負いかねます。

書体・写真の権利について：

使う書体のライセンス（商用利用、お客様へのデータ納品の可否）は、各書体の規約をご確認ください
imgフォルダに入れる写真は、使用許諾を確認したものを使ってください

Illustratorについて：

変換中はIllustratorが自動でファイルを開いたり閉じたりします。
作業中のファイルは保存してから実行してください

その他：

Claude Codeの利用料金は、各自のプランに準じます
個別の導入サポートは行っていません
返金については、行なっておりません。

ここから先は

1,757字 / 3画像 / 1ファイル

¥ 500

ログイン

この記事が気に入ったらチップで応援してみませんか？