イラストレーターでの画像の書き出しをやってみた！

2025年9月27日 2025年9月27日

kshino

ケースとしては少ないと思いますがデザインカンプがイラストレーターのデータ(aiデータ）で提供される場合があります。

私もイラストレーターの学習した経験がなかったので、コーディングで必要な画像の書き出しについて、簡易に備忘録ついでにまとめました。

1.概要

データはテキストフォントを抽出するための通常のイラストレーターのデータと、デザイナーがアウトライン化してくれたデータの2つを提供されます。

アウトライン化とはフォントデータを画像化（ベクター化）したものです。

画像で書き出すオブジェクトを「オブジェクトの選択」で選択します。

複数のオブジェクトを選択する場合は、Shiftキーを押しながら選びます。
※グループ化されていて、必要な選択ができない場合はグループ解除して行います。

複数のオブジェクトを一つの画像として書き出したい場合は右クリックして、「書き出し用に追加」⇒「単一のアセットとして」を選択します。

すると、「スクリーン用書き出しパネル」の「アセットの書き出し」に追加されます。

書き出したい画像をどんどん追加していきます。

複数のオブジェクトを一つの画像ではなくそれぞれ単独で利用したい場合は「書き出し用に追加」⇒「複数のアセットとして」を選択します。

「アセットの書き出し」のパネルで必要なアセットを選択して、「倍率」と「ファイル形式」を選択して「書き出し」ボタンを押します。

保存する「フォルダを選択」すれば「◯◯の書き出しが正常に完了しました」というメッセージが出て保存ができます。

現在、収集されているアセットは、メニューの「ファイル」⇒「書き出し」⇒「スクリーン用に書き出し」の「アセット」のパネルで確認できます。

◯「イラストレーターで作られたWebデザインをHTMLコーディングしてみました！」
by ひとり社長の上杉です
https://www.youtube.com/watch?v=b1sbhSKK0nk