デザインデータの作り方（印刷との違い）

データの基本設定

カラーモード：RGB
解像度：72ppi
グラフィックソフトの環境設定：単位を全てpxで設定
ファイル・フォルダ名：半角英数字（全角はNG）

Web用画像

ブラウザが対応している主な形式は下記になります。

• JPEG・・・写真やバナーなど色数が多く長方形（または正方形）の画像（約1670万色）
  
  
• GIF・・・色数の少ないアイコン、画像の形は自由（256色 / 背景透過可）
  
  
  
• PNG-32・・・色数が多く自由な形の画像（PNG-8はGIFと同等の圧縮 / PNG-24はJPEGと同等の圧縮 ）
  
  
  
• SVG・・・Web言語で表現されるベクターデータ（Illsutratorで作られるものと同等のデータ）

ブラウザ上で拡大・縮小をしても画像が劣化せず、プログラム側（CSSはJavascript / jQuery）から色や形・大きさなの各種プロパティを操作できる画像となります。

IllustratorによるSVG画像の書き出し方法

https://helpx.adobe.com/jp/illustrator/how-to/export-svg.html

アセットによる画像書き出し

参考データ：image-sample.psd

レイヤーからの画像アセットの生成

https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

Photoshop画像アセットの生成ルールまとめ

https://note.com/karakara_web/n/n4e20e41dcc64

数値について（サイズ・位置・余白）

Webサイトを表示するモニターやスマートフォンなどのデバイスは1pxを最小の値とするため、小数点を用いたサイズや位置指定は行うことができません。

そのためデザインデータを作る際にオブジェクトやテキストのサイズ、位置、余白などは必ず整数の値で作る必要があります。

Retinaディスプレイ対応について

一般的なディスプレイに向けて作った画像データを、Retinaディスプレイで表示すると画像がぼやけて見えてしまいます。
Retinaディスプレイは従来のディスプレイのおよそ倍の解像度を持つため、対応させるためには倍のサイズで書き出した画像をCSSで1/2のサイズに指定します。
そうすることで画像がぼやけることなく表現することができます。
（例：幅200pxで表示する画像の場合は400pxで書き出し、CSSで200pxで表示させる）

ただし大きな画像を扱うことになるため、画像の枚数によっては読み込み速度などが多少遅くなることもあります。
クライアントとの打ち合わせ段階で「Retina対応が必要か」を話し合って、必要な場合のみ対応させると考えます。
（ターゲットユーザーがMacユーザー / iPhoneユーザーの場合対応）
参照：Retinaディスプレイ