それでは、冒頭で述べた通り、「コーディング」に適した書き出しを行います。「スライス」というのは、画面上にデザインされたレイアウトを、そのまま区画ごとに分ける作業のことを言います。グループ化されたものはひとつの区画になります。背景画像が必要なければ、この時点で削除して構いません。

方法はシンプルです。まず、「Ctrl(command) + Aキー」ですべてのオブジェクトを選択します。続けてメニューバーの「オブジェクト」から「スライス」を選び、「作成」をクリックします。すると、レイアウトが区画ごとにスライスされました。

スライスを作成

スライス完了

それでは、いよいよフィナーレの書き出し作業です! 前回「ボタン」を保存した時と同様に、メニューバーの「ファイル」から「Web用に保存」をクリックし新しいウィンドウを開きます。

Web用に保存

「名前」隣のプルダウンメニューから「PNG-24」を選択し、高さ、幅が整数値であることを確認しましょう。「画像サイズ」の欄では「アートボードサイズでクリップ」にチェックを入れるのを忘れないでください。

この後の作業は、使用しているIllustratorのバージョンにより異なります。

<CS6の場合>
「Web用に保存」ウインドウ左下の「プレビュー」を押し、ブラウザでプレビュー画面下に表示される「HTML」を全文コピーし、メモ帳などのテキストエディタに貼り付けてファイル拡張子を「.html」として、HTMLファイルを作成します。

HTMLソースコードをコピー

その後、「Web用に保存」の続きに戻り、保存を完了します。保存するとスライスされた画像が入った「images」フォルダが作成されます。同じフォルダの中に先ほどのHTMLファイルを入れておきましょう。

作成されたフォルダ内

<CS6以前のバージョンの場合>
「保存」をクリックした後、「画像のみ」と表示されたプルダウンメニューを「HTMLと画像」に変更して同様のファイルを保存できます。

※書き出しまで終了した後、さらにデザインの修正を重ねることはよくあることですので、上記の書き出しのほか、「aiファイル」も必ず保存しておきましょう！

IllustratorをWebデザインに活用するという視点で進めた本連載でしたが、いかがでしたでしょうか。ぜひこれを機会に、Illustratorの使い方にも慣れていってくださいね！ありがとうございました。

紘太郎
福岡県出身。玉川大学芸術学部パフォーミング・アーツ科卒業後、エディトリアルデザイン、イラストレーターとしての活動を開始。書籍のイラストカットやイベントの広報物制作を請け負う傍ら、2010年にはTEDxYouth@Seedsにデザインチームの一員として参加。その後も、輸入アイスクリームの公式サイトデザイン、キャラクター制作など活動の幅を広げている。