「AIでチラシのデザインは作れるけど、全部画像で出てくるからうまく調整できない」
「文字や写真を差し替えたいのに、画像のままだと触りづらい」
そんな悩みを抱えていませんか。
結論から言うと、AIチラシ制作は「AIに完成させる」のではなく「AIで初速を上げて、人間が判断・調整するための下地を作る」のが実務での正解です。
この記事では、GPTで作ったチラシをCodeXでHTMLとSVGに変換し、Illustratorで編集・調整できるデータにしていく4ステップのワークフローを解説します。
読み終えるころには、AIのラフをデザイナーが使える資材に変える具体的な手順が分かります。
本記事は、実際にこのワークフローでチラシ制作の初速を2倍以上にしているデイトラのデザイナーによる動画解説をもとにしています。
・AI時代のチラシ制作ワークフローの全体像（4ステップ）
・テンプレートとCodeXで制作環境を作る手順
・GPT Image 2.0でフライヤーを生成し、HTMLとSVGに変換する方法
・SVGをIllustratorに読み込んでデザイナーが仕上げる流れと、AIに代替できないデザイナーの役割
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
AI時代のチラシ制作ワークフローとは｜AIで初速を上げ人間が仕上げる
まず、動画の冒頭では完成品が提示されます。
生成AIを活用し、Illustratorで調整して仕上げたチラシのデザインデータです。
重要なのは、これはAIが一発で完成させたものではないという点です。
GPTでラフを作り、CodeXで編集ができる下地に変換し、最後にIllustratorで微調整するという流れで作られています。
確かにAIだけでも、短時間でチラシやフライヤーのデザインが作れるようになってきました。
しかし、いざ実務に落とし込むと、次のような悩みが出てきます。
- AIでデザインは作れるけど、全部画像でうまく調整ができない
- 文字や写真を差し替えたいのに、画像のままだと触りづらい
- それっぽいデザインは出るけど、そのまま使っていいのか不安
- 結局どこを人間が直せばいいのか分からない
今のAIは、見た目だけならかなりそれっぽいものが作れます。
しかし、印刷物として使うなら「作れる」だけでは足りません。
そのためこの動画では、よくある「AIでチラシを一発で完成させます」という話はしません。
今回のテーマは、AIに全部を任せるのではなく、AIで初速を上げて人間が判断・調整するための下地を作ることです。
やることは次の4つです。
- チラシ制作のテンプレートを使って環境を作る
- CodeXのガイダンスに沿って要件を入力し、GPTに渡すプロンプトを作る
- GPTで生成したフライヤーをHTMLとSVGに変換する
- SVGをIllustratorに読み込み、調整をする
OpenAIが提供するAIコーディングエージェントです。チャットで指示を出すと、ファイルの読み取り・コードの生成・変換作業などを自動で進めてくれます。今回のワークフローでは「GPTが作った画像をHTMLとSVGの編集データに変換する」役割を担います。
手順①：チラシ制作テンプレートを使ってCodeXの環境を作る
この手順は、動画の視聴者特典として配布されているチラシ制作テンプレート（Codex.md・SKILL.md入り）を使うことが前提です。テンプレートは、動画概要欄にある公式LINEに登録し、動画内で案内されているキーワードを入力すると「AIチラシ制作スターターキット」として受け取れます。先に入手してから進めてください。
最初のステップは環境の設定です。
動画では、デスクトップに「Codex flyer」というフォルダを用意し、これを今回の作業環境として進めていきます。
フォルダの中にはテンプレートのzipファイルが入っています。
これをダブルクリックで解凍すると「template」フォルダが生成されます。
その中には、Codex.mdとSKILL.mdという2つのMDファイルが入っています。
この2つが、今回の制作フローを動かすエージェントファイルです。
次に、CodeXで作業をしていくため、CodeXがインストール済みの状態にしておきます。
インストール後にCodeXを開き、作業フォルダを指定します。
手順は次のとおりです。
- CodeXの画面左下にある「プロジェクト」の項目を選択する
- 「既存のフォルダーを使用」をクリックする
- 作業させたいフォルダ（今回はCodex flyer）を選んで開く
これで、左下に「Codex flyer」と表示され、指定フォルダをCodeXに作業させる準備が整います。
また、今回作るのはパーソナルジムの無料体験フライヤーです。
要件はあらかじめ次のように整理されています。
- 制作物名：パーソナルジム無料体験フライヤー
- 目的：無料体験予約を増やすこと
- ターゲット：運動習慣を作りたい30代〜50代の会社員
- 一番伝えたいこと：無理なく続けられる完全個別のトレーニングであること
- 載せたい情報：初回カウンセリング無料／体験トレーニング30分／平日10:00-21:00／FIT BASE 中目黒／入会金無料キャンペーン
- CTA：まずは無料体験へ
- NG・制約：過度な煽り、短期激やせ、誰でも簡単に痩せる表現は禁止
要件を先に言語化しておくことが、このあとのプロンプト生成の材料になります。
Markdown形式で書かれた指示書ファイルです。AIエージェントに「どういう手順で・どういうルールで作業するか」を教える設定ファイルとして機能します。今回のテンプレートでは、この2つのファイルがチラシ制作フロー全体をガイドしてくれます。
手順②：CodeXに要件を入力しGPTに渡すプロンプトを作る
環境ができたら、CodeXにトリガーワード「チラシ制作」と入力します。
するとCodeXがテンプレートの要件を読み取り、「この指示・要件を返してください」という形式で必要事項を返してきます。
ここで、先ほどの要件（デモから表現禁止まで書かれた内容）をそのままコピー＆ペーストしてCodeXに投げます。
あとは指示が返ってくるまで少し待つだけです。
すると、CodeXが2つのプロンプトを生成してくれます。
- GPT Image 2.0に貼る、フライヤー生成用のプロンプト
- フライヤーから素材を切り出すためのプロンプト
この2つを順番にChatGPTに貼り付けていく、というのが次のステップです。
プロンプト自体をAIに作らせるので、自分でプロンプトを考える必要はありません。
AIエージェントに特定のワークフローを開始させるための合図となるキーワードです。今回のテンプレートでは「チラシ制作」と入力するだけで、SKILL.mdに定義された制作フローが自動的に始まる仕組みになっています。
手順③：GPT Image 2.0で生成したフライヤーをHTMLとSVGに変換する
ChatGPTの画面を開き、CodeXが生成した1つ目のプロンプトをそのまま貼り付けます。
生成が完了したら、出来上がったフライヤーをダウンロードして保存します。
続けて、2つ目のプロンプトもそのままGPTに貼り付けます。
すると、フライヤーに使用されている写真素材3枚を、チラシに使える画像として出力してくれます。
こちらも同じくダウンロードすれば、GPT側の準備は完了です。
次にCodeXの画面へ戻ります。
CodeXには「画像をimportフォルダに入れた後、スレッドで完了と送ってください」という指示が表示されています。
手順は次のとおりです。
- ダウンロードしたフライヤー1枚と画像3枚を、「パーソナルジム無料体験フライヤー」のimportフォルダにコピーする
- CodeXのスレッドに「完了」と送る
- SVGが生成されるまで待つ
生成が終わったらCodexFlyerフォルダを開き、成果物を確認します。
「パーソナルジム無料体験フライヤー」フォルダの中にimportとoutputがあり、outputの中にアセット・HTML・SVGという3つのファイルが生成されています。
まずHTMLを開くと、フライヤーの生成物が表示されます。
細かい部分のずれはあるものの、大枠はフライヤーのイメージを投写して作られている印象です。
次にSVGを開くと、こちらは全体的に文字のずれなどが見られます。
このずれはIllustratorに取り込んだ後に調整していくため、この段階では問題ありません。
Scalable Vector Graphicsの略で、拡大しても劣化しないベクター形式の画像データです。ビットマップ画像（JPGやPNG）と違い、文字や図形が個別のオブジェクトとして保持されるため、Illustratorで開いてテキストの打ち替えやレイアウト調整ができます。「画像のままで編集できない」というAIデザインの弱点を解消する鍵になる形式です。
手順④：SVGをIllustratorに読み込みデザイナーが調整する
最後のステップでは、生成されたSVGをIllustratorに取り込んで調整します。
別名で保存し、「パーソナルジム無料体験フライヤー」のoutputの中に「flyer」と名前をつけてファイルを保存します。
その中にSVGファイルをそのままインポートして取り込みます。
インポートしたデータを見ると、サイズ自体はA4ぴったりになるように作られています。
ただし、この状態では全体的にずれが大きいため、既存のフライヤーを参考にレイアウト位置を微調整していきます。
ここでのポイントは、完全に元のフライヤーに合わせる必要はないということです。
必要なパーツと位置を微調整し、罫線などの細かい部分は最終的にデザイナーがチューニングして仕上げれば問題ありません。
動画では、大きな表示崩れがなくなるまでの調整が約5分で完了しています。
続いて写真の配置です。
アセットフォルダの中に写真が用意されているので、これをインポートして配置します。
画像の加工は多少必要そうな印象はあるものの、雰囲気が伝わる状態になっていれば問題ありません。
残りの画像2枚も仮あてで配置していきます。
結果として、多少のずれはあるものの大枠はほとんど再現でき、Illustratorへのインポートから約10分でこの状態まで作り上げることができました。
デザイン制作で、最終決定前に画像や素材をおおまかな位置に配置しておく作業のことです。全体のバランスを確認するのが目的なので、この段階では厳密な位置合わせやトリミングは行いません。
AIチラシ制作の価値と、AIに代替できないデザイナーの責任
動画の終盤では、このワークフローの本質的な価値が語られます。
今回の価値は、AIがチラシを完成させることではありません。
AIが作ったラフをデザイナーが使える資材にして、制作の前半を短縮できることです。
ゼロベースでこのチラシを作るなら、最低でも2時間ほどは見ておきたい内容です。
しかし今回は、すでに文字や画像の枠・情報ブロックがある状態から制作を始められたため、1時間未満でここまで持っていくことができました。
実際に同じチラシを制作する場合でも、制作の初速は2倍以上になっています。
AIはデザイナーの仕事を奪うというよりも、デザイナーが本来時間を使うべきブラッシュアップや調整に時間を戻してくれる存在です。
そのうえで、動画では大事な話が語られます。
AIはデザインを作ることはできますが、そのデザインに責任を持つことはできません。
- 使っているフォントは商用利用できるものなのか
- 写真やイラストの権利は問題がないのか
- 印刷物として安全なデータになっているのか
ここを確認して、必要なら差し替え・調整をして、最終的にクライアントに入稿できる状態まで整えること。
これがAIには代替できないデザイナーの役割であり責任です。
今回の流れを整理すると、次の役割分担で制作スピードを上げる方法だと言えます。
- GPT：デザインとレイアウトの方向性を作る
- CodeX：HTMLとSVGの編集下地に変換する
- Illustrator：SVGをベースにデザイナーが調整する
AIがある時代だからこそ、デザインの基礎を学ぶ意味はさらに大きくなっています。
AIが出したものを見る目がないと、それっぽいものをそのまま使ってしまいます。
デザインの基礎知識があれば、情報の優先順位や余白、文字組や写真の使い方まで判断でき、商用利用する際のリスクにも気づくことができます。
AIを使えるかどうかはツール操作だけでは決まらず、出てきたものを見て判断し、責任を持って最後まで仕上げられるかが特に重要です。
なお、動画の最後では視聴者特典として、今回の制作フローと環境をそのまま再現できる「AIチラシ制作スターターキット」（オリジナルのSKILL.md・CodeX.md入り）の配布が案内されています。
受け取り方法は、動画概要欄の公式LINEに登録し、動画内で案内されているキーワードを入力するだけです。
自分の作りたいチラシに近いテーマで試してみたい方は、ぜひ受け取ってみてください。
印刷会社に渡す最終的な印刷用データのことです。フォントのライセンス、画像の解像度や権利関係、サイズや塗り足しなどの条件を満たしている必要があり、この最終確認と保証こそが職業デザイナーの重要な仕事になります。
AIチラシ制作に関するよくある質問
Q. AIだけでチラシを完成させることはできませんか？
見た目だけなら、それっぽいものは短時間で作れます。ただし動画では、印刷物として使うなら「作れる」だけでは足りないと解説されています。フォントや写真の権利確認、入稿データとしての安全性の担保など、最終的な責任は人間のデザイナーが持つ必要があります。
Q. なぜ画像のままではなく、SVGに変換するのですか？
AIが生成するデザインは画像（ビットマップ）のままだと文字や写真の差し替えができず、実務での調整が困難だからです。SVGに変換すれば、Illustratorに読み込んでテキストやレイアウトを個別に編集できる「デザイナーが使える資材」になります。
Q. このワークフローでどれくらい時間短縮できますか？
動画の実例では、ゼロベースなら最低2時間ほど見ておきたいチラシを、1時間未満で仕上がる状態まで持っていけています。文字や画像の枠・情報ブロックがある状態から始められるため、制作の初速は2倍以上になると解説されています。
Q. Illustratorでの調整はどこまでやればいいですか？
元のラフと完全に同一にする必要はありません。動画では、必要なパーツの位置を微調整し、大きな表示崩れがない状態を目指せばOKとされています。細かい罫線などは最終的にデザイナーがチューニングして仕上げます。
Q. 動画と同じ環境（テンプレート）はどこで手に入りますか？
動画概要欄の公式LINEに登録し、動画内で案内されているキーワードを入力すると、「AIチラシ制作スターターキット」（SKILL.md・CodeX.md入りテンプレート）を受け取れます。今回の制作フローと環境をそのまま再現できます。
AI時代のデザインスキルを体系的に学ぶならデイトラ「Webデザインコース」
本記事で解説したAIチラシ制作のワークフローは、テンプレートを使えば誰でも試すことができます。
ただし動画でも語られていたとおり、AIの出力を活かせるかどうかは、情報の優先順位・余白・文字組・写真の使い方を判断できるデザインの基礎力で決まります。
デイトラの「Webデザインコース」は、見た目を作る力だけでなく、情報設計や言語化・判断する力を大切にしたカリキュラムが特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
AIを使いこなしながら、最後まで責任を持って仕上げられるデザイナーを目指したい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。本記事のもとになった動画では、AIチラシ制作の実演を担当しました。
