Blog

ブログ

home > ブログ > IllustratorデザインをAIコーディングに渡す前の前処理メモ

IllustratorデザインをAIコーディングに渡す前の前処理メモ

導入メモ

最近、イラレ案件を受けたときに「まずAIへ投げてコーディング案を出してもらう」流れを試している。最初はかなり使える感触があったけど、ファイルによって出力精度の差が大きい。

ほぼそのまま使えることもあれば、HTML構造もCSS設計も崩れていて、手で書いたほうが早いケースもある。何件か試して見えてきたのは、AIの性能差というより、渡すIllustratorデータの作り方がかなり効いているということ。

🎨 Figma案件とイラレ案件でAIの読み取り精度が変わる理由

FigmaはWebやアプリUIを作る前提のツールなので、オートレイアウトやコンポーネントの考え方がそのままHTML/CSSの構造に近い。Flexboxやコンポーネント設計に変換しやすく、AIも「このまとまりはセクション」「この並びはカード一覧」みたいに読み取りやすい。

一方でIllustratorは、もともと印刷物・ロゴ・イラスト制作寄りのツール。Web実装を前提にした構造情報が自然に入るわけではない。

観点FigmaIllustrator
主な用途UI/UXデザイン印刷物・ロゴ・グラフィック
構造の持ち方フレーム、オートレイアウト、コンポーネントレイヤー、グループ、アートボード
AIが読み取りやすい情報レイアウト構造、余白、繰り返しパーツ命名・整理されていれば読み取れる
実装との相性比較的高いデータ整理に左右される

つまり、イラレ案件では「AIに渡す前の前処理」がかなり効く。もらったデータをそのまま投げるより、5分だけ確認してから渡したほうが、後工程の修正が減りやすい。

🧩 1. レイヤー名・グループ名を見る

まず見るのはレイヤー名とグループ名。AIが構造を判断するときのかなり大きな手がかりになる。

ダメな例良い例
グループheader
グループ のコピーhero-section
長方形cta-button
レイヤー 4footer-nav

「グループ のコピー」が大量に並んでいるデータは、人間でも構造を追いにくい。AIにとっても同じで、どこがヘッダーで、どこがメインビジュアルで、どこがCTAなのかを推測するしかなくなる。

チェック方法

Illustratorのレイヤーパネルを開いて、上から順に名前を見る。英語名でなくても、「ヘッダー」「ヒーロー」「ボタン」「フッター」くらいの日本語名ならAIも理解しやすい。

ダメだったとき

小規模なら自分でリネームする。大きめの案件なら、デザイナーさんに「AIコーディングに渡す前提で、主要グループ名だけ整えてほしい」と依頼したほうが早い。

♻️ 2. 共通パーツがシンボル化されているか

ボタン、カード、見出し、ナビゲーションなど、何度も出てくるパーツがシンボル化されているかを見る。

シンボル化されていると、AIが「これは共通コンポーネント」と判断しやすい。ReactやVueならコンポーネント分割、通常のHTML/CSSなら共通クラス化につなげやすくなる。

状態AIの解釈
同じボタンが毎回別オブジェクト個別スタイルとして扱いやすい
ボタンがシンボル化されている共通コンポーネントとして扱いやすい
カードUIが統一されている配列データやループ構造にしやすい
見た目だけ似ていて微妙に違うCSSが散らばりやすい

チェック方法

シンボルパネルを見る。空っぽの場合、共通パーツとしての情報はほぼ渡っていないと考える。

ダメだったとき

全部を直す必要はない。ボタン、カード、CTA、ナビゲーションなど、頻出パーツだけでもシンボル化しておくと、AIの設計がかなり安定しやすい。

✍️ 3. 段落スタイル・文字スタイルを見る

段落スタイルや文字スタイルは、CSSのクラス設計に近い情報になる。

たとえば「見出しH1」「本文」「キャプション」のようにスタイルが定義されていれば、AIはテキストの役割を判断しやすくなる。

.heading-1 {
  font-size: 36px;
  font-weight: 700;
}

.body-text {
  font-size: 16px;
  line-height: 1.8;
}

逆に、すべてのテキストが個別に設定されていると、AIはフォントサイズや位置から役割を推測することになる。これだと、見た目は近くてもCSS設計が散らかりやすい。

見るポイント理由
見出しスタイルがあるかhタグ設計に使いやすい
本文スタイルがあるか共通CSS化しやすい
キャプションや注釈が分かれているか小さいテキストの扱いが安定する
フォントサイズがバラバラすぎないかCSSの肥大化を防ぎやすい

チェック方法

書式メニューから段落スタイル・文字スタイルパネルを確認する。

ダメだったとき

スタイルが未設定でも、AIに渡す前にフォントサイズ一覧だけ作っておくと変わる。

H1: 36px / Bold
H2: 28px / Bold
本文: 16px / Regular
注釈: 12px / Regular

この情報をプロンプトに添えるだけでも、CSS設計がかなり整理されやすい。

🎨 4. スウォッチで色管理されているか

色が名前付きスウォッチやグローバルカラーで管理されていると、AIがCSS変数に落とし込みやすい。

:root {
  --color-primary: #1A73E8;
  --color-secondary: #34A853;
  --color-text: #333333;
}

逆に、色がすべてオブジェクトごとに直接指定されていると、AIは色の意味を読み取りにくい。結果として、同じような色がCSS内に何度も直書きされる。

状態出力されやすいCSS
スウォッチで管理CSS変数化されやすい
色名がPrimaryなどで整理デザイントークン化しやすい
色がベタ打ち直書きCSSになりやすい
似た色が大量にある余計なカラー定義が増えやすい

チェック方法

スウォッチパネルを開いて、使用色が整理されているかを見る。グローバルカラーとして管理されていればなお良い。

ダメだったとき

主要カラーだけでも手動で一覧化してAIに渡す。

Primary: #c87577
Accent: #8aab98
Background: #fdf9f7
Text: #3d3030

色の意味を添えるだけで、AIがCSS変数名を作りやすくなる。

📱 5. アートボードでブレイクポイントが分かれているか

PC、タブレット、スマホでアートボードが分かれていると、AIがレスポンシブ設計を読み取りやすい。

アートボード例
PC1440px / 1920px
タブレット768px / 1024px
スマホ375px / 390px

PC版しかない状態でAIに渡すと、スマホ時のレイアウトはかなり推測に寄る。デザイン意図と違う崩し方をされることもある。

チェック方法

アートボードパネルで幅を見る。PC、タブレット、スマホのパターンがあるか確認する。

ダメだったとき

PC版しかない場合は、プロンプトでスマホ幅を明示する。

スマホは375px基準で実装。
カードは1列表示。
ヘッダーナビはハンバーガーメニュー化。
CTAボタンは幅100%。

軽いワイヤーでもいいので、スマホ時の並びだけ決めてから渡すと精度が上がる。

⚠️ AIが特に困りやすいイラレデータ

AIに渡す前に、これは先に見ておきたい。

状態困る理由対応
テキストがアウトライン化されている文字情報が消えているアウトライン前のデータを依頼
オブジェクトが画像化されている構造情報が取れない元データを依頼
クリッピングマスクが多すぎる階層が複雑になりやすい必要箇所だけ整理
アートボード外にメモが大量にあるAIにとってノイズになりやすい渡す前に削除 or 別資料化
似たパーツが微妙に違う共通化しにくいコンポーネント候補を整理

特にアウトライン化されたテキストはきつい。見た目は文字でも、実体はパスなので、AIにとってはテキスト情報ではなく図形になる。コーディング前提なら、アウトライン前のデータをもらったほうがいい。

🧪 AIに渡す前の前処理フロー

イラレ案件を受けたら、いきなりAIに投げる前にこの順番で見る。

順番チェック項目見ることダメなとき
1レイヤー名header、hero、footerなどが分かるか主要グループだけリネーム
2シンボル共通パーツが管理されているか頻出パーツだけシンボル化
3文字スタイル見出し・本文が分かれているかフォントサイズ一覧を作る
4スウォッチ色が意味付きで管理されているか使用色一覧を作る
5アートボードブレイクポイントがあるかスマホ幅と崩し方を明示

この前処理をしてからAIに渡すと、HTML構造、CSS設計、コンポーネント分割の精度が変わる。

🧾 AIに渡すときのプロンプト例

イラレデータをそのまま渡すだけではなく、補足情報を添えると安定しやすい。

このIllustratorデザインをもとに、HTML/CSSで実装してください。

前提:
- PC幅は1440px基準
- スマホは375px基準
- header / hero / service / cta / footer の構成
- ボタンは共通コンポーネントとして扱う
- 色はCSS変数で管理する
- 見出し、本文、注釈のスタイルを共通化する
- レスポンシブではカードをPC 3列、スマホ 1列にする

出力:
- セマンティックなHTML
- 保守しやすいCSS
- 共通パーツはクラス化
- 不明点は推測せず、コメントで残す

AIに「デザインを見ていい感じに実装して」と渡すより、構造・共通化・レスポンシブの判断材料を先に渡したほうが、使えるコードになりやすい。

📝 まとめ

イラレ案件をAIにコーディングさせるとき、精度を左右するのはAIそのものだけではない。渡すデザインデータに、どれだけ構造情報が残っているかがかなり大きい。

見るポイントはこの5つ。

チェックAIに効く理由
レイヤー名・グループ名HTML構造を判断しやすい
シンボル共通コンポーネント化しやすい
段落スタイル・文字スタイルCSS設計に落とし込みやすい
スウォッチCSS変数化しやすい
アートボードレスポンシブ設計しやすい

「もらったままAIに投げる」は、うまくいく時もあるけど外れた時の修正コストが大きい。最初に5分だけデータを見る。その5分で、あとから1時間助かるケースは普通にある。

一覧へ戻る