実技 WEBデザイン実習②
今日のテーマ
コーディングの準備をしよう
制作のポイント
実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。
WEB用画像とは？
Web用画像には、 主に「jpg」「gif」「png」「svg」が昨今のWebサイトで使われます。 その特徴と違いを確認しておきましょう。
高画像で大きいものを使用すると、WEBサイト上が重くなってしまうのでサイト自体が好まれなくなってしまう。なるべく軽くて小さいものを使用する。
制作のポイント
ファイル名の命名規則は管理しやすいようにしっかりと考えて付けましょう。
ワンポイント
「jpg」「gif」「png」「svg」について、まず悩んだら「jpg」透過表現を必要とすなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」複雑な画像は重たくなるので、条件次第で使う。と良い出よう。
講義のメモ
(1) GIFGIF（ジフ）
Graphics Interchange Format の略称で、拡張子は、gif が使用されます。256 色までの色が使用でき可逆圧縮型式の保存形式です。背景の透過やアニメーション画像を使用することができます。
(2) JPEGJPEG（ジェイペグ）
Joint Photographic Experts Group の略でJPEGという画像形式を作った組織そのものの名前からきています。拡張子は、jpg または jpeg です。JPEGは、フルカラー（1677 万色）を扱うことができ圧縮率を指定することができます。写真などに適していますが非可逆圧縮型式のため圧縮率の指定値によっては大幅な画像劣化が発生することがあります。
JPEG の画像比較は、高画質（画質優先）、中画質、低画質（ファイルサイズ最小）で実施しました。
(3) PNG-8PNG（ピング）
Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-8 は、256 色までの色が使用でき GIF と同様の仕様です。
(4) PNG-24PNG（ピング）
Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-24 は、フルカラー（1677 万色）の可逆圧縮型式を採用しているため色数が多くても画像の劣化はありません。背景の透過設定も使用することができます。単に PNG というと、こちらを保存形式を示します。
- ・アニメーション・・・GIF
- ・背景を透過・・・PNG-24 ,PNG-8 , GIF
- ・色数が少ないイラスト画像・・・PNG-8 , GIF , PNG-24
- ・色数が多いグラデーション画像・・・JPEG（画質優先）
- ・写真・・・JPEG（適切な圧縮率）
- ・画質を優先・・・PNG-24 色数が多い場合は、ファイルサイズが大きくなるので注意が必要です。
- ・ファイルサイズを優先・・・JPEG（サイズ優先） 画質劣化が発生しますので、必ず、元画像を保管しておいてください。