画像等の書き出しについて
- 構成を考える（どこまでが画像、どこまでがCSSか）
- 画像が必要な部分を書き出す
前回のレッスンで、画像化する部分・CSSで再現する部分を考えました。 今回は必要な画像を、Illustratorから書き出してみましょう。
書き出しを行う際には、文字部分を非表示にするなどの操作も行います。
デザインデータのレイヤー構成等によっては、渡された時の状態に戻すのが大変なこともあります（特にレイヤー等の整理がしっかりされていない場合）。
ですので、画像を書き出すときには、書き出し用に複製したものを使いましょう。元のファイルには触りません。
基本はアセットの書き出し
WEBサイト制作実践講座（前編）ではスライスツールを使用して、画像の書き出しを行いました。
この方法も間違いではありませんが、単純なオブジェクトであれば、もっと簡単に書き出しが行なえます。
手間と時間を省くために、最も簡単な画像の書き出しを行ってみましょう。
基本操作1-アセットの収
デザインデータ内にあるオブジェクトは「アセットの書き出し」機能を使って一気に書き出すことが出来ます。
まず「アセットの書き出し」パネルを用意しましょう。
ウィンドウ > アセットの書き出しからパネルを表示させます。
↓
書き出したいファイルを、アセットの書き出しパネルにドラッグしていきます。
書き出しリストのような形で、ストックされていきますね。
クリッピングマスクがかけられた画像も同様に、書き出しパネルにドラッグすると、マスクが適用された状態で書き出しが行えます。
また、書き出す際のファイル名も付けることが出来ます。
基本操作2-アセットの書き出し
書き出したい画像を追加し終わったら、画像を書き出します。 パネルからでも行なえますが、たくさんあると見にくいので、ダイアログを開きましょう。
書き出しの設定を行います。
サフィックスはパネル上で設定したアセット名の後ろにつける文字列なので、あまり気にしなくて良いです。特に必要がなければデフォルトのままいきましょう。
書き出すファイルを選択して「アセットを書き出し」ボタンをクリック。
指定した保存先に書き出されます。
合体させたい場合
オブジェクトが分かれていると、上記の方法でひとつの画像として書き出すことは出来ません。
例えば、下記部分の数字とアイコンを1つの画像にしたい時。 ドラッグアンドドロプするだけだと、2つのアセットとして認識されてしまいます。
ひとつの画像として書き出したいときは、以下の方法で行います。
１. まとめたいオブジェクトを選択
２. 右クリック
３. 書き出しに追加 > 単一のアセットを選択
マスクされていない画像の場合
複雑な画像、デザイナーの作り方に寄っては少し注意が必要な場合もあります。
例として、下図のヒーロー部分を一枚の画像として切り出してみます。 （※実際はパーツ分けしますが、ややこしくなるためです）
ドラッグで範囲選択して、選択範囲を書き出してみましょう。 ※選択範囲を書き出しでアセットに追加されるため、結果としては「単一のアセット を選択」と同じになります。
追加したアセット23の上下に、妙な余白が入っていますよね。 実際に書き出しを行っても、この余白が込みの状態で画像が作成されます。
実はここ、背景色が白のためかマスクされていないんですね。 ですので、矢印の先までが書き出されてしまうわけです。
書き出した画像を、黒背景の上に載せてみると一目瞭然。
このような場合、不要な部分を無くす方法は３つあります。 どの方法でも構いませんので、やりやすい方法を使ってください。
- スライスツールを使って必要部分のみ切り出す
- 自分でクリッピングマスクをかける
- 一旦書き出してから、要らない部分を削除する（トリミングする）
書き出した画像の容量を確認する
Illustratorのアセット書き出し（スクリーン用に書き出し）は便利ですが、弱点もあります。それはスライスを使った書き出し（Web用に保存）ほど細かく、画質やファイル容量を設定出来ないという点です。
このため、特にヒーロー画像のような大きい画像だと、ファイル容量がとても大きくなってしまう場合があります。アセットの書き出しを使用する場合は、書き出した画像のファイル容量を確認しましょう。
マスクされていない画像の場合、で書き出した画像は490KBでした。 ちょっと軽量化したほうが良さそうです。
ファイル容量はどこまで？
Webページに使用するファイル容量は、特に規定はありません。 読み込みに時間がかかりますが、数MBの画像でも表示させようと思えば出来ます。
一応、ファイル容量の目安としては「Googleが1ページの容量として推奨している1.6MB」が使われています。ただし、これは3G回線でストレス無く閲覧できることがを基準に発表されたそうですから、5G時代の現在はもう少し重くても大丈夫かもしれません。
1ページ1.6MBを目標に考えると、画像は大きいものでも概ね200KB～250KB以内が好ましいとする向きが多いです。1.6MBの中にはhtml,css,Javascriptなども含まれますので、画像だけに1.6MB使えないですしね。
ただし、Googleの基準は3G回線であり、あくまでも目安です。
画像は汚く見えない範囲で極力軽くする、くらいに考えておきましょう。200KBにおさめようと、画質を下げて汚い状態にするのは避けましょう。
画像の最適化（軽量化）はどうする？
jpg画像の容量を小さくする（軽くする）にはphotoshopを活用するのが無難です。
方法は、軽量化したい画像を選んで「Web用に保存」を選択。
ダイアログボックスでプレビューを見ながら、画質を下げていきます。
画質を下げていくと、画像がはっきりと荒れてきます。
上のように汚く見えないところが落としどころですね。
photoshop以外にも画像軽量化・最適化を行えるアプリケーションは色々あります。 オンライン上で手軽に使えるものもありますので、必要があれば調べて使ってみても良いでしょう。
ちなみに、コーディング途中に「画像差し替えて」なんて事も結構あります。 デザインデータから書き出してすぐに最適化していると、二度手間・三度手間になってしまいますよね。 コーディングに害がなければ、画像最適化は納品前に行っても良いと思います。
実習
前レッスンのデザインデータ（aiデータ）のトップページデザインから、画像として使用する部分を書き出してみましょう。
- アイコンや文字を含む部分は、きれいに見えるようにsvgで書き出します。
- 写真やスクリーンショットはMacのRetinaDisplayでもぼやけないように、2倍（2x）で書き出して下さい。
ポイント1
デザインフォントなど、CSSで再現不能な文字は画像化する必要があります。 （※クライアントがライセンス料を支払い、Webフォントとして使用しない場合）
今回のデザインデータでは、見出し上の英語部分や数字が該当します。
ポイント2
今回、下図の２箇所に関しては赤線で囲った範囲内を、1つの画像として書き出してください。
どちらも「CSSでできそうな部分」と思った方もいらっしゃるでしょう。 CSSで配置せずに画像化する理由は、下記のようなものがあります。
- 納期が近く、スピード重視の案件である
- cssで設定すると、崩れる危険がある
- cssで設定すると、作業量や納期が報酬と見合わなくなる
例えば、グラフィックソフトでは簡単に見える文字の円弧配置は、Webページで作ろうと思うとかなり手間がかかります。