Illustrator入門 | Webデザイン編 第6回 デザインから画像を書き出そう
IllustratorでWebデザインをはじめよう！
前回までで、Illustratorを使ってWebサイトのデザインカンプを完成させました。今回は、完成したデザインからそれぞれのパーツを画像として書き出します。スライスを使った基本的なWeb用の書き出しとあわせて、アートボードを利用した書き出しやSVGの書き出しなど、スライス以外の書き出し方法についてもいくつか紹介します。
スライスでデザインを切り分けて書き出す
「スライス」とは、Webサイト向けにデザインカンプをパーツに分割して、画像を書き出すための機能です（PhotoshopやFireworksにも同様の機能があります）。Illustratorでスライスを作成する方法はいくつかありますが、そのうちの主なものを解説します。
サンプルファイルのillustrator-web-design-06-sample-before.aiを開いてください。これは、前回までの作業で完成させたデザインカンプです。このデザインカンプをもとに作業していきましょう。
※Illustratorは最新版を使用してください（執筆時のバージョンはCC 18.0.0）。記事ではMac OS Xでの操作を基本に解説します。ショートカットは「command（Ctrl）」のように、Windowsの場合の操作を括弧内で並記しています。
オブジェクトからスライスを作成する 1
画像として書き出したいオブジェクトを選択した状態で、［オブジェクト］メニュー→［スライス］→［選択範囲から作成］を選択すると、選択中のオブジェクトの境界に合わせたスライスが作成されます。
この方法で作成したスライスは、元になったオブジェクトを移動したり、サイズ変更しても、スライスはそのまま残ります。
オブジェクトからスライスを作成する 2
画像として書き出したいオブジェクトを選択した状態で、［オブジェクト］メニュー→［スライス］→［作成］を選択しても、スライスが作成されます。
この方法の場合、複数のオブジェクトを選択していると、オブジェクトごとに個別のスライスが作成されます。複数のオブジェクトをまとめて1つのスライスにしたい場合は、あらかじめグループ化してから［作成］を実行してください。
この方法で作成したスライスは、元になっているオブジェクトを編集すると、その内容に合わせて、スライスの位置やサイズも変更されます。
［スライスツール］でスライスを作成する
［ツール］パネルから［スライスツール］を選択し、ドキュメント上でスライスとして切り分けたい領域をクリック＆ドラッグすると、新しくスライスを作成することができます。
ユーザー定義スライスと自動スライス
スライスを作成すると、「ユーザー定義スライス（自分で作成したスライス）」の他に、薄い色で領域分けされたスライスも同時に作成されます。これは「自動スライス」というもので、アートボード上でスライスとして定義されていない領域に自動的に割り振られるものです。画像書き出しの段階で、ユーザー定義スライスと一緒に自動スライスも画像として書き出すか、あるいは省略するかを選択できます。
作成したスライスを調整する
作成したスライスを移動したり大きさを変更したりするには、［スライス選択ツール］を使います。対象のスライスをクリックして選択し、移動したり、境界線をドラッグして大きさを変更します。
また、選択中のスライスは、［変形］パネルで通常のオブジェクトと同様に位置や大きさを確認・変更できます。同時に、作成したスライスは［レイヤー］パネルの項目としても表示されるので、ここから他のオブジェクトと同じように、選択して移動したり削除したりできます。
※前述の「オブジェクトからスライスを作成する 2」で作成したスライスの場合は、位置や大きさが作成元のオブジェクトに依存するため、このような調整はできません（［レイヤー］パネルの項目としても表示されません）。書き出す画像に余白が必要だったり、サイズの細かい調整が必要な場合は、「オブジェクトからスライスを作成する 1」の方法か、［スライスツール］を使ってスライスを作成してください。
スライスの名前を変更する
作成したスライスには、それぞれに名前を付けることができ、この名前が画像として書き出す際のファイル名になります（拡張子を除く）。
※［レイヤー］パネルのスライスのレイヤーにも名前（レイヤー名）を付けることができますが、そのレイヤー名とここでのスライスの名前とは別物です。
スライスに名前を付けるには、ドキュメントでスライスを選択した状態で［オブジェクト］メニュー →［スライス］→［スライスオプション］を選択し、［スライスオプション］ダイアログボックスの［名前］に入力します。
ただし、この方法だと複数のスライスを設定する場合、いちいちメニューを選ばないといけないので少し手間がかかります。スライスの数が多い場合は、［Web用に保存］ダイアログボックスを活用すると、効率よく設定することができます。
［ファイル］メニュー→［Web用に保存］を選択して、［Web用に保存］ダイアログボックスを開きます。［Web用に保存］ダイアログボックスは、command（Ctrl） + option（Alt） + shift + S キーでも開きます。
［Web用に保存］ダイアログボックスの左側にある［スライス選択ツール］を選択し、スライスをダブルクリックすると、［スライスオプション］ダイアログボックスが開きます。ここで、各スライスの名前を書き出したいファイル名に変更します。
画像の種類を設定する
スライスをどのような種類の画像として書き出すかを、スライスごとに設定することができます。［Web用に保存］ダイアログボックスでスライスを選択し、右側にある［プリセット］で書き出す画像の種類を選択したり、そのプロパティを設定します。
例えば、メインビジュアルにしているイラスト部分などは、画像の種類を「PNG-24」とし、［透明部分］にチェックを入れ、透過PNGになるようにします。メニュー写真などは「JPEG」にして［画質］で圧縮率を調整したりします。このように、スライスした箇所のアートワークに合わせた画像フォーマットを適宜調整してください。
画像を保存する
スライスの名前と画像の種類の設定が完了したら、書き出すスライスの範囲を決めて画像を保存します。
作成したスライスのすべてを一度に書き出す場合は、［Web用に保存］ダイアログボックスの右側にある［書き出し］で「すべてのユーザー定義スライス」を選択します。
任意のスライスのみを書き出したい場合は、［書き出し］を「選択したスライス」にして、［スライス選択ツール］で対象のスライスを選択します（複数のスライスを選択したい場合は、shiftキーを押しながらそれぞれのスライスをクリックしていきます）。
※［書き出し］で「すべてのスライス」を選択すると、自動スライスも含めて書き出されます。
最後に［保存］ボタンをクリックすると、［最適化ファイルを別名で保存］ダイアログボックスが表示されます。ダイアログボックスでは画像を保存するディレクトリを選択して、［保存］をクリックします。選択したディレクトリ内に「image」フォルダーが作成され、その中に画像が保存されます。
※［保存］の代わりに［完了］を選択すると、スライスの名前やプリセットなどの設定を保持した状態で、［Web用に保存］ダイアログボックスを終了できます。
※第5回までで使用していた Illustrator CC 17.1.0 では、［Web用に保存］ダイアログボックスでの［スライス選択ツール］の挙動に不具合があることが確認されています。2014年6月にリリースされたIllustrator CC 2014（バージョン 18.0.0）では解消されていますので、Illustrator CC 2014へのアップデートを行った上で作業することをおすすめします。
サンプルファイルのillustrator-web-design-06-sample-after_slice.aiは、デザインカンプの各パーツにスライスを設定したものです。このファイルをもとに、スライスの書き出しを試してみてください。
アードボードを活用して画像を書き出す
デザインカンプからの画像の切り分けと書き出しは、［スライスツール］を使用するのが一般的ですが、アートボードを活用してもWeb用に最適化した画像の書き出しが可能です。
デザインによりますが、最終的に書き出したい画像の種類がPNG-24になるものがほとんどを占める場合などは、アートボードを使った方法が効率的な場合もあります。また、近年利用が増えてきているSVGフォーマットのイメージ書き出しも、アートボード単位で行えます。
切り出したいパーツのある箇所にアートボードを作成する
画像として書き出したい各パーツの箇所に長方形オブジェクトを作成し、［オブジェクト］メニュー→［アートボード］→［アートボードに変換］で、アートボードに変換します。
PNGとして書き出す
アートボードをPNGとして書き出す場合は、［ファイル］メニュー→［書き出し…］を選択し、［書き出し］ダイアログボックスを開きます。
※2016年6月にリリースされたIllustrator CC 2015.3では、［書き出し…］が［書き出し形式…］に変更されています。
保存先を指定し、［ファイル形式］は「PNG（png）」を選択してください。さらに、［アートボードごとに作成］にチェックを入れると、書き出す対象のアートボードを指定できるようになります。
［範囲］のラジオボタンをチェックし、アートボード番号で書き出したいアートボードを指定します。複数のアートボードを指定する際はカンマ区切り、連番になっている場合はハイフン繋ぎで指定できます。アートボード番号は、［アートボード］パネルで確認できます。
書き出される画像のファイル名は、このダイアログボックスで設定できる［名前］が接頭辞になり、アンダースコア繋ぎで各アートボード名が後ろにつく形になります（例 vol6_sample_window.png、vol6_sample_logo.png）。アートボードの名前はあらかじめ［アートボード］パネルなどで設定しておいてください。
指定が完了したら［書き出し］ボタンをクリックすると、［PNGオプション］ダイアログボックスに切り替わります。［解像度］が72dpiになっていることを確認し、透過PNGにしたい場合は［背景色］を「透明」にして、［OK］をクリックすると、指定のディレクトリに各アートボードでクリップされた画像が書き出されます。
その他の画像（JPEG, PNG-8, GIF）として書き出す
アートボードをその他の種類の画像として書き出す場合は、［ファイル］メニュー→［書き出し…］ではなく、［Web用に保存］を使います。スライスを設定していない状態で、対象のアートボードを選択して［Web用に保存］を行うと、選択されたアートボードごと画像として書き出されます。
［Web用に保存］ダイアログボックスで、選択中のアートボード以外の領域が見えている場合は、［アートボードサイズでクリップ］オプションにチェックが入っているか確認してください。
SVGとして書き出す
アートボードをSVGとして書き出す場合は、［ファイル］メニュー→［別名で保存］を選択して、［別名で保存］ダイアログボックスを開きます。［別名で保存］ダイアログボックスは、command（Ctrl） + shift + Sでも開きます。
PNGでの［書き出し］ダイアログボックスと同じように、保存先や対象のアートボードなどを選択します。また、［ファイル形式］は「SVG（svg）」としてください。
［別名で保存］ダイアログボックスで［保存］をクリックすると、［SVGオプション］が開き、SVGで書き出す際の諸設定ができます。Web用のSVGを作成する際は、基本的に以下のようにします（詳細オプションが見当たらない場合は、左下の［詳細オプション］ボタンをクリックしてください）。
- ［SVGプロファイル］を「SVG1.1」にする。
- 書き出す領域内にテキストが含まれる場合は、［フォント］の［文字］は「SVG」または「アウトラインに変換」にし、「SVG」の場合は［サブセット］を「なし（システムフォントを使用）」にする。
- フォントは埋め込まない。
- フォントを保持した状態での見た目が必要であれば、アウトライン化する。
- ［CSS要素］は「スタイル要素」にする。
- ［エンコーディング］は「UTF-8」にする。
- ［ <tspan> エレメントの出力を制御］および［パス上テキストに <textPath> エレメントを使用］にチェックを入れる。
※2016年6月にリリースされたIllustrator CC 2015.3では、詳細オプションのうち上記に関連しない項目が一部変更されているため、ダイアログボックスの表示内容が一部異なります。
設定が完了したら［OK］をクリックすると、SVGが書き出されます。
※SVGには、保存元になったアートボード上にかかっているオブジェクトがすべて一緒に書き出されます。デザインカンプで背景色として敷いていたオブジェクトや、非表示にしているものも含まれるので、そういったものを除きたい場合は、デザインカンプを作成した領域外に別途アートボードを作成し、書き出したいオブジェクトを配置して書き出すとよいでしょう。
書き出した画像のエリアが1pxずれたりアートワークのエッジがボケる場合は
このような症状が起きる場合、その多くは、作成したデータがピクセルに整合してないことに起因します。オブジェクトの配置や大きさだけでなく、画像切り出しのためのスライスやアートボードについても、ピクセルに整合しているかをまずは確認してみてください。
サンプルファイルのillustrator-web-design-06-sample-after_artboard.aiは、デザインカンプの各パーツにアートボードを設定したものです。このファイルをもとに、アートボードの書き出しを試してみてください。
Layer Exporterアドオンを使用してパーツ画像を書き出す
最後に、画像の書き出しに便利なアドオン「Layer Exporter」を紹介します。このアドオン（拡張機能）はAdobe Add-onsから無料で入手できます。
※執筆時より新しいバージョンのIllustratorでは、このアドオンは正常に動作しない可能性があります（執筆時のバージョンは Illustrator CC 18.0.0）。そのかわりに2016年6月にリリースされたIllustrator CC 2015.3（20.0.0）では、アセットの書き出し機能が追加され、アプリケーション本体の機能で実現できるようになりました。詳しくはこちらの記事をご覧ください。
Layer Exporterを利用すると、Photoshop CCの「画像アセット機能」と同じように、レイヤーやオブジェクトごとにルールに沿った名称にするだけで、アートワークを任意のフォーマットの画像として書き出すことができます（SVGの書き出しも可能です）。
パーツごとにスライスやアートボードを作成する必要がなく、レイヤー（またはオブジェクト）単位で画像を書き出せます。表示状態やオブジェクトの重なりを考慮しなくてもよいため、細かなアイコンなどのパーツを書き出す際にも便利です。詳しい使用方法は Layer Exporter のサイトや作者のリポジトリ（GitHub）で Readme を参照してください。
以上のように、Illustratorには作成したデザインを、Webなどのデジタルコンテンツに適した画像フォーマットで出力できる機能が多く備わっています。連載の序盤でも解説しましたが、まずはピクセルに整合したデータ作りに気を配って進めましょう。そうすれば、書き出しエリアのズレやエッジのボケなどの諸問題は充分に回避できますし、同時にIllustratorがWebデザインのツールとして力不足と思われていた原因の多くを解消できます。
この連載で紹介できた内容はほとんどが基本的なものです。Illustratorはその多機能さゆえに複雑に感じられることもありますが、そのぶんデザイン表現の広がりや使い勝手の工夫しどころも非常に多いです。また、［CSSプロパティ］パネルなどのWeb制作を補助するツールも徐々に進化してきていますので、今後さらにデジタルデバイス向けの制作との相性が高まっていくツールとして期待されます。この記事とIllustratorが、Webデザインをますます充実させる手助けになれば幸いです。