IllustratorからWeb用素材を一気に書き出す！アセットの収集と一括書き出し

IllustratorでWebデザインデータを作ると書き出すのが面倒？

ちょっと前までは、IllustratorからWeb用の素材を書き出そうと思うと、アートボード単位で書き出すか、またはひとつひとつ「スライス」を作成して書き出すかのどちらかでした。
「Web用に保存」は便利な機能ですが、高解像度画面用の素材の書き出しには対応しておらず、複数サイズの素材が必要な場合は手間がかかります。

スライスとWeb用に保存の詳しい使い方: Illustrator入門 | Webデザイン編 第6回 デザインから画像を書き出そう

最新のIllustrator CCでは、複数の素材書き出しが必要な場合でもまとめて書き出せる新しい機能が利用できます。また、アイコンのように頻繁に変更されるアセットの書き出しも楽になります。この記事では、以下の2つの機能を紹介します。

__
Illustrator CC体験版
ダウンロード

スクリーン用に書き出し…

「スクリーン用に書き出し…」を使うと、複数の形式とそのサイズ（倍率）の組み合わせを指定し、一度にまとめて書き出せます。アートボード単位、またはアセット単位のどちらかで、対象を指定して書き出します。

まずはIllustratorのメニューから、ファイル／書き出し／スクリーン用に書き出し…をクリックします。

ファイル／書き出し／スクリーン用に書き出し…をクリック

すると、スクリーン用に書き出しのダイアログが表示されます。その中には「アートボード」と「アセット」の二つのタブがあります。

アートボードとアセットの二つのタブが選択できる

アートボードタブを選択すると、書き出し可能なアートボードの一覧が表示されます。アートボードをクリックして、書き出すアートボードを選択または選択解除できます。
アセットタブを選択すると、「アセットの書き出し」パネルに収集されているアセットの一覧が表示され、書き出すアセットを選択または選択解除できます。

書き出すファイル形式とスケールを指定

このダイアログの便利な点は、複数の形式とスケールの組み合わせを指定し、一度にまとめて書き出せることです。
また、iOSやAndroidなどでよく使われる組み合わせがあらかじめ登録されているので、デバイス用素材の指定が簡単に行えます。

形式とスケールの選択

指定できる形式とスケールはそれぞれ以下の通りです。SVGとPDFではスケールが指定できません。

書き出す形式やスケールを追加する場合は、「+スケールを追加」をクリックして、必要なパターンを増やしていきます。

形式やスケールを追加する

アートボードを書き出す

アートボードタブを表示すると、アートボード単位で書き出せます。書き出すアートボードの選択は、一覧からクリックして選択または選択解除を行ったり、ダイアログの右側の「選択」から「すべて」または「範囲」を使って選択します。範囲には、例えば、「1, 2, 4-6」と指定すると、1、2、4、5、6 のアートボードが選択できます。
「ドキュメント全体」を指定して、Aiドキュメント全体をひとつの画像として書き出すよう指定することもできます。

書き出したいアートボードを選択したら、書き出し先を指定して、「アートボードを書き出し」をクリックするとファイルが出力されます。
その際に、「プレフィックス」を指定しておくと、生成されるファイル名の先頭に指定された文字列が追加されます。

アセット（アートワーク）を書き出す

アセットタブを表示すると「アセットの書き出し」パネルで収集したアートワークが表示されます。アートワークがまだ収集されていない場合は、代わりにアセットの書き出しパネルを開くボタンが表示されます。
メニューから、ウィンドウ／アセットの書き出しをクリックしても、アセットの書き出しパネルを開くことができます。
アセットの書き出しパネルにアセットを収集する方法は、次のセクションで説明します。

「アセット書き出しパネル」か、ウィンドウメニューの「アセット書き出し」から開く

とりあえずこのアートワークを書き出したい！という場合には、直接、アセットタブ内に追加する方法もあります。
書き出したいアートワークを選択したら、右クリックしてコンテキストメニューから選択範囲を書き出し…をクリックします（または、メニューからファイル／選択範囲を書き出し…）。すると、選択したアートワークがダイアログのアセットタブ内に表示されます。アートワークの下に表示されるラベルはファイル名に使われるので、クリックして修正します。

アセットを収集した状態のスクリーン用に書き出しダイアログ

後はアートボードのときと同じ要領で書き出すことができます。

この方法で選択したアートワークは、自動的にアセットの書き出しパネルにも追加されます。そのため、2回目以降は、アセットの書き出しパネルを開くだけでも書き出し作業ができます。

アセットの書き出しパネル

スクリーン用に書き出しダイアログと異なり、アセットの書き出しパネルは、デザイン作業をしながら、そのままパーツの収集や書き出しが行えます。

パネルにアセットを収集

書き出したいアートワークは、まず、アセットの書き出しパネルに登録します。パネルに登録しておくことで、アセットひとつひとつにスライスを設定しなくても、必要なものを即座に書き出せるようになります。特に、頻繁に更新されるアセットは、この機能を使うと便利です。

パネルへの登録は、アートワークを選択してパネルにドラッグするか、選択した状態でパネル内の追加ボタンをクリックします。必要なロゴ、アイコン、画像などを順次追加しましょう。不要なアセットは、選択してゴミ箱アイコンをクリックすると、パネル内から削除できます。
アセットの下のラベルはファイル名として使われます。必要に応じてクリックして修正します。以上でアセットの登録は完了です。

アセットパネルに直接ドラッグ＆ドロップするか、新規アセット追加ボタンでアセットを収集する

パネルからアセットを書き出す

登録されたアセットを書き出す際は、まず、パネルの中から対象のアセットをクリックして選択します。ShiftキーやCmd/Ctrlキーを押しながら選択すると複数のアセットを選べます。
次に、書き出し設定の欄に、スケールと形式を指定します。選択可能なオプションは、スクリーン用に書き出しのダイアログと同じです。
最後に、「書き出し…」をクリックして、書き出し先のフォルダーを指定すると、実際にアセットが書き出されます。

書き出し先を事前に指定したり、ファイル名のプリフィックスを指定したい場合は、パネル下のアイコンをクリックすると、スクリーン用に書き出しダイアログが表示されます。ダイアログ内には、アセットの書き出しパネルに登録したすべてのアセットが一覧表示されます。

ちょっと便利な「アセット書き出しテクニック」

アセットに登録した「アセット名」を自動で読み込ませる

アートボードの書き出しでは「アートボード名」がベース名になりますが、アセットの書き出しパネルに登録したアートワークの名前は、「アセット *（番号）」になります。そのまま書き出すと名前からどのアセットなのか判別できなくなるので、アセット名を手作業で指定しなおす必要があります。

ところが、Adobe Creative Cloud Libraries（CCライブラリ）を活用すると、アセットの書き出しパネルに追加時に使われるアセット名を事前に指定できるようになります。

手順

  1. 登録したいアイコンやロゴなどをライブラリパネルに登録
  2. ライブラリの「アートワーク名」に適当な名前を設定
  3. ライブラリからアートワークをドキュメント内に配置
  4. ドキュメント内に配置したアートワークをアセットの書き出しパネルに収集

以上の手順で、ライブラリパネルで指定した名前が、自動的にアセット名として適用されます。

マスクした画像を「余白を切り取ったサイズ」で書き出す

現在の仕様では、アセットの書き出しを使うと、マスクをかけた画像はマスクのサイズではなく元の画像のサイズで書き出されます。その結果、マスクサイズと画像サイズとの差異が余白として画像の周囲にできます。このままではアセットとして利用できません。

こちらもライブラリを活用することで解決できます。手順はほぼ同じです。

手順

  1. マスクされた画像をライブラリパネルに登録
  2. ライブラリから画像をドキュメント内に配置
  3. ドキュメント内に配置したアートワークをアセットの書き出しパネルに収集

以上の手順でマスクサイズの画像を書き出すことができます。

書類の塗り足し設定が原因で、書き出し時に余白ができることがあります。この手順でも余白が残った場合は、塗り足しの設定を0に変更してみてください。

書き出し形式のオプション設定

設定は「スクリーン用に書き出しダイアログ」か「アセット書き出しパネル」のオプションから開く

書き出すアセットの形式ごとに、細かなオプションを設定できます。

設定を行うダイアログは、スクリーン用に書き出しダイアログの「詳細設定」アイコンをクリック、またはアセットパネル右上のオプションから「形式の設定」をクリックすると現れます。