見出し画像

個人的に実践しているWebデザインガイドライン④ 画像編

TAK / Web Creator.

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# 共通事項

画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透かしの残った画像、画質が粗すぎる画像の利用は禁止。

画質は統一する。画像によって解像度が違いすぎるようなことは避ける。

ロゴやアイコンなどのプリミティブな素材は可能な限りSVGで作成する。

写真のトーンは適切に補正する。撮影したままの写真は極力使わない。

有料素材サイトの画像を使用する場合は、ライセンス面で大きな影響がある場合があるので要件をディレクターに確認しておく。

フリー画像を使用する場合はライセンスに注意する。ライセンス表記が必須なサイトもあるので注意。

人物写真は目線や表情がメッセージ性やユーザーの視線誘導に影響を与えることを考慮する。例えばUberは写真の男性の目線を利用してスムーズにテキストに視線を誘導するようにWebデザインを改善している。

ファイルサイズと画質に応じた画像フォーマットを利用する。

画像には「ラスタ形式」と「ベクタ形式」の2種類あり、使い分けが必須。

使用する画像は必ず圧縮する。各画像は可能なら圧縮ツール（JPEGとPNGはTinyPNG、SVGはSVGOMGなど）で圧縮する。

画像の容量はページの表示速度、離脱率、SEO・LPOなどにも影響を与えることに留意する。

# GIF

昭和62年から存在する由緒ある画像フォーマット。アニメーションが使えることで有名。「ジフ」と読む。

GIFは256色しか使えないので色数の多い画像には不向き。特に写真とはミスマッチ。

GIFの持つメリットはアイコンなどのシンプルな画像の場合にサイズを軽くできるのと、アニメーション画像が実装できるところ。

反面、デメリットは色指定にアルファチャンネル(RGBA指定)が使えない。抜き色指定が1色のみなど。

後述するPNG8でフォーマットした方がサイズが軽くなる場合が多い。

GIFアニメーションも実はMP4などの動画フォーマットでやった方が圧縮率が優れることが多い。

個人的にはWebサイトで率先的に使うことはない画像フォーマット。GIFで実装できる画像はPNG8、色数の少ない・単色面の広いシンプルなロゴやイラスト、アイコンなどはベクター形式のSVGで実装するのがベスト。

# JPEG

読み方は「ジェイペグ」

拡張子は.jpgと.jpegの2つがあるが基本的には.jpg。2つの拡張子に機能面の差は無い。

JPEGはフルカラー(1677万色)を表現することが可能で、主に写真のフォーマット形式として利用する。

JPEGの特徴はGIFとは違いグラデーション部分が多ければ多いほど画像サイズが小さくなる点。一度圧縮してしまうと元に戻せない「不可逆圧縮」という特徴から画質を下げると画質を上げることが不可能になる点。圧縮するほど画質が落ちる点など。

色の分かれ目がハッキリした画像の場合は色と色の境目が明確に区別されにくい仕様上、ややボヤけた曖昧な表現になってしまう。

背景の透過はできない。

JPEGは色数の少ない・単色面の広いシンプルなロゴやイラスト、アイコンなどには不向きで、専らグラデーション要素の多いイラストや写真向けのフォーマット形式だと言える。基本的に写真はJPEGでOK。

注意点として、デジタル機器(スマホやデジカメなど)で撮影した写真のJPEGデータにはExif情報が含まれている場合がある。Exif情報を残したままだと個人情報などのプライバシー漏洩に繋がることがあるので必ず削除するように。

クライアントから頂いた写真を利用する際は特に注意。Photoshopの「Web用に保存」で書き出すとExif情報は消える。Exifの有無はメタデータパネルで確認可能。

# PNG

読み方は「ピング」

PNG8、PNG8(alpha)、PNG24、PNG32の4種類がある。

PNG8 → GIFと同じ256色制限でサイズが非常に軽い
PNG8(alpha) → PNG8でアルファチャンネルが使える
PNG24 → JPEGと同じくフルカラー使える
PNG32 → 24にアルファチャンネルが使える

PNGはJPEGとは違い「可逆圧縮」という特徴を持ち、低画質で保存しても元の画質に戻すことが可能。透過も可能で万能な画像フォーマットではあるが、その代償としてサイズはめちゃくちゃ大きい(PNG24,32)。

写真はPNGではなくJPEGを使うのが基本。

実はPNGでもアニメーションは実装可能。APNGと呼ばれる形式で、当初はFirefoxでのみサポートされていたが、2019年10月現在ではIEとEdge以外のモダンブラウザでサポートされている。LINEスタンプはAPNGで作られている。

# SVG

比較的最近利用され始めた画像形式だが、実は2001年の頃から存在していた。

SVGのメリットは以下の通り。

1. 画像の情報(アンカーや線など)を数値化して出力している関係でサイズが軽く、変形などの編集がしやすい。
2. 拡大縮小するたびにデータが書き直されるため、拡大や縮小をしても劣化することなくクオリティを保つことができる。レスポンシブやRetinaに強い。
3. SVGはXMLで定義されているのでHTMLにインラインで書くことができ、HTTPリクエストの削減につながる。
4. インラインで書かれたSVGはCSSやJSのアニメーションも適用が可能。

SVGは画像として使うだけでなく、フィルター効果、マスキング、クリッピングといった用途でも利用が可能。

SVGのデメリットとしては以下の通り。

1. 写真やグラデーションの強いイラストなど、色や形状が複雑なオブジェクトはベクタ形式では表現しきれないため不向き。
2. あまりにも複雑なオブジェクトを表示させようとすると動作速度が遅くなったり、メモリーの使用量が大きくなってしまう。
3. IEではSVGにwidthとheightが指定されていないとサイズが小さくなったりするバグが発生する場合があるのでサイズ補正が必須。
4. IE9とAndorid 4.2以下はSVGの1.1規格に対応してない。IE8以下はSVGそのものが非対応。

レガシーブラウザを考慮する場合は留意。

# WebP

Googleが開発した新規格の画像フォーマット。読み方は「ウェッピー」

圧縮率が高く(PNGの26%、JPEGの34%ほどの軽さ)、アルファチャンネルもアニメーションも利用可能。まさにJPEGとPNGのいいとこ取り。

有名どころではMicrosoftやDELL、NikeやGAPなどが自社サイトにWebPを取り入れている。

WebPは2019年10月現在、IEは当然のことながらSafariでもサポートされていない（何気なくEdgeは対応している）。未対応ブラウザを考慮して、利用する際は従来の画像と共存させる必要がある。

基本的には.htaccessで制御するやり方が主流。.htaccessを利用した振り分け方、またWebPファイルの作り方は以下の記事を参考に。

# その他留意点

抜き色指定したGIFやAlpha無しのPNG8はジャギになる部分を目立たないようにする。Photoshopの場合はマットカラーを背景色に合わせると背景となじませやすい。

写真の構図は三分割法を用いると美しく見えやすい。

写真はトリミング必須。

万が一画質の悪い写真を使用しなければいけない時は、細かいドットやストライプのレイヤーを画像に被せることで粗さを目立たなくさせる効果が期待できる。

レンダリングが遅くなることがあるのでパターン画像を使う箇所は絞る。

背景画像は視差効果・フォーカス・前後関係・立体感などを意識すると効果的。

スプライトやインラインイメージを使用するとHTTPリクエストの削減に繋がる。

CSSで実装できる範囲は画像を使わない。一つ一つの画像がデカすぎたり、画像の数が極端に多すぎるページ構成はデバイスや通信環境によっては表示しきれない。

なんでもそうだけど、文章より画像のほうが印象に残りやすい。百聞は一見にしかず。

# 参考記事

# 参考文献

---

次回「テキスト編」はこちら↓


いいなと思ったら応援しよう！

TAK / Web Creator.
愛と平和