aiファイルから画像を書き出そう
コーディングを行うために、デザインデータから画像を書き出す必要があります。 画像の書き出し、素材化などとも呼ばれる工程で、Webページを構成する部品として使えるように、画像をそれぞれ個別のファイルにする作業です。
今回のようにデバイス幅ごとのデザインがある場合、どの幅でも使える画像は１つだけ切り出して使います。この場合は画像が最も大きく配置されている幅のデザインから、書き出しを行うと無難でしょう。 画像サイズや縦横比が大きく異なる場合は、別画像として切り出すこともあります。
今回のコーディングでは、上図のようにページトップの画像（キリンの画像）以外は共通して使います。 ページトップ画像だけ、スマホ・タブレット幅用とPC幅用の２パターンを用意する形です。
Adobe Illustratorで画像を書き出す方法
Adobe Illustratorでは「アセットの書き出し」機能を使って、オブジェクトを簡単に書き出すことができます。 今回はこの方法で素材を切り出してみましょう。
1.画像化するアイテムをピックアップする
1-1.アセットの書き出しパネルを開く
トップメニューのウィンドウから「アセットの書き出し」を選択。 アセットの書き出しパネルを開いてください。
1-2.アセットの書き出しにオブジェクトを追加
画像として書き出したいパーツを、アセットの書き出しパネルの上部にドラッグ・アンド・ドロップします。
下記アニメーションのように、アセットの書き出しパネルにリストアップされていれば成功です。
他にも画像として書き出したいパーツを、ドラッグ・アンド・ドロップしていきましょう。
今回の場合、イベントなどの写真はタブレット幅デザインのものが一番大きいです。 タブレット幅デザインから、アセットの書き出しパネルへ、どんどん追加していきます。
計9個のオブジェクト（画像として書き出したいアイテム）が並びました。
最後に、PC幅デザインからトップ画像をドラッグ・アンド・ドロップで追加します。
1-3.ファイル名をつける
アセットの書き出しパネルに追加したオブジェクトは、デフォルトで「アセット 1」のような名前になっています。 名前の部分をタブルクリックすると、文字を打ち替えが可能です。
それぞれ名前をつけておくと、書き出した後に分かりやすいでしょう。 書き出すアイテムが多いデザインの場合は、アセット追加しながら名前をつけていっても良いですね。
2.書き出しの実行・調整
2-1.書き出しを実行
トップメニューのファイルから、書き出し > スクリーン用に書き出し を開きます。
以下のキーボードショートカットでも、スクリーン用に書き出しのダイアログボックスを開けます。
- Windows：Alt + Ctrl+E
- Mac：Option + Command+E
スクリーン用に書き出しのダイアログボックスが開いたら、上部タブで「アセット」を選択してください。
右側ではファイルの書き出し形式、書き出す場所などを設定できます。 チェックしたいのは、以下の３箇所です。
- 書き出し対象のアセット
- ファイルの書き出し先（保存場所）
- 書き出すファイル形式とスケール
1の書き出し対象は、全てにチェック。 2の書き出し先は、ご自身でわかりやすい場所を設定してください。
問題は3、ファイル形式とスケールの設定です。 ここで複数設定があると、同じ画像がバリエーションのように複数枚書き出されます。例えば、下図のようになっていれば、1x（デザインデータと同じサイズ）、2x（デザインデータの2倍のサイズ）のPNG画像がそれぞれ書き出されます。
今回は、画像のサイズバリエーションは必要ありません。 複数設定が出ている方は、右の×でスケールを削除して1つにしてください。 以下のように設定します。
- 拡大・縮小：2x（2倍サイズ）
- サフィックス：そのままでOK
- 形式：PNG 8
書き出し先の下にある“サブフォルダーを作成”にチェックがあると「2x」フォルダが自動作成されます。 コーディングのときに面倒なので、外しておくのがおすすめです。
書き出しの設定ができたら「アセットを書き出し」ボタンで、書き出しを実行します。
【サフィックスとは】
サフィックスは命名規則のことです。
デフォルトではサイズ・形式に応じて、ファイル名の後に文言が追加されます。
今回の2倍拡大でPNG 8形式なら、書き出された画像は「ファイル名@2x-8.png」となります。
この表記が嫌！という方は、フォーマットの“サフィックス”欄を打ち替えれば変更できます。
2-2.ファイルを確認
書き出しが完了したら、書き出された画像ファイルを確認してみましょう。 汚く見えないか、ファイルサイズが大きくなりすぎていないかを合わせてチェックします。
今回書き出した画像では、トップ画像がどちらもサイズが大きいですね。 特に、PC用のトップ画像は1580KB=約1.5MBと、Webサイトで使うには問題のあるサイズになってしまいました。
画像サイズの目安は？
はっきりと決まってはいません。
かつてGoogleが速度の遅いモバイル回線も考慮して「ページ容量のトータルサイズ1600KB（1.6MB）以内を目指すべき」と発表したことがあります。その推奨容量に収まるサイズ、ということで画像1枚200KB以下が良い、などの説もあります。軽量なほど読み込みは早いので、ファイルサイズを抑えられる部分は抑えたいですね。
ただし、画質があまりにも悪いと、ユーザーエクスペリエンス（ユーザーが感じる印象、使いやすさなど）は低下します。一概に何KB以下と考えるのではなく画像ファイルの容量と画質を見比べて、妥協点を探すと考えた方が良いでしょう。
Web上で使える画像軽量化ツール（画像圧縮ツール）などもありますから、興味のある方は調べてみてください。
2-3.調整する
トップ画像だけ、設定を変えてもう一度Illustratorから書き出してみましょう。 拡大縮小の2xはそのまま、形式を「JPG 50」に変更してみます。
「アセットを書き出し」ボタンで、書き出しを実行。 ファイルサイズは、どちらもかなり小さくなりました。
画質も許容範囲内なので、トップ画像は JPG の方を第一候補にしましょう。 PNG画像の方は紛らわしいので削除しておくか、予備である（不要な場合は削除する）ことが分かるようにしておいてください。
◆実習
素材のデザインデータ（zooloppa-top.ai）から画像を書き出してみてください。
ファイル名やファイル形式などは、上の解説と別にしても構いません。 次回以降のレッスンでコーディングを行う際、ご自身の画像パスを指定できれば大丈夫です。
デザインデータがあれば、画像の書き出しは何回でも出来ます。
書き出した画像でコーディングをしてみて、上手くいかない場合も出てくるでしょう。 そうなっても、別の方法で書き出したり、画像を調整すれば大丈夫。悩みすぎず、まずはサクッと書き出してみましょう。