ネットショップの配色が上手くいかない人、これから始めようという人のが1から色彩を学べる情報サイト
ネットショップの配色が上手くいかない人、これから始めようという人のが1から色彩を学べる情報サイト
ウェブサイトの画像として使用できるJPEG、GIF、PNGの色について、簡単にまとめています。画像の作り方は、ウェブ制作の書籍やソフトのヘルプなどを参考にしてください。
ウェブサイトでは主にJPEG（ジェイペグ）形式、GIF（ジフ）形式、PNG（ピング）形式の3種類の画像を使うことが出来ます。それぞれに特色があり、状況に応じて使い分けなければ、きれいに画像を表現することが出来ませんので、最低限の知識を持っておく必要があります。
JPEG形式は16,777,216色全てを使うことが出来る画像形式です。そのため、色数が多い写真の表現などに向いています。
逆に色数の少ないイラストでは、にじんだように見える事もあります。このような場合には、GIFあるいはPNGの画像を使う方がよいでしょう。
こちらがGIF形式の画像になります。輪郭もしっかりと見え、文字の内部の色が荒れていないのがおわかりいただけるでしょう。
GIF形式は16,777,216色中の256色（あるいはそれ以下）の色を使って画像を表現します。
この写真は先程と同じ物ですが、GIF形式で作られたものです。光によって生まれた微妙な陰影を少ない色数で十分に表現することが出来ていないのがわかるかと思います。写真にはGIFはあまり向かず、主に色数が少ないイラストやボタンのような小さめのパーツ、アイコンなどで使われます。
またGIFでは背景を透明にすることが出来るので、背景の色とGIF画像を重ね合わせることが出来ます（透過GIF）。重ね合わせる場合、画像を作る時に背景の色を指定しておく必要があります。これをやっておかないと予想もしない汚い縁取りが出来てしまいますので注意が必要です。
| JPEG 透過機能がない |
GIF 透過していない |
透過GIF 透過色に白を指定 |
透過GIF 透過色に#6396C0を指定 |
|---|---|---|---|
 |
 |
 |
 |
またGIF形式では、パラパラ漫画のようなアニメーション機能があります。ネットショップでは新着情報のところの「NEW」などのアイコンで使われているのをよく見かけます。
PNG形式は比較的新しい画像形式で、最近多く用いられるようになってきました。PNGではJPEGのような1,677万色の表示とGIFのような256色の表示の両方が可能で、なおかつ背景を透明にすることも可能です。ただし、透明のPNGはInternet Explorer6では正しく表示することは出来ません。またGIFのようなアニメーション機能はありません。
ではそんなに高機能ならアニメーション以外は全てPNGで画像を作ればよいのではないかと思いますが、写真の場合は多くの場合JPEGよりもファイルサイズが大きくなります。256色以下の場合には、本来はファイルサイズはGIFよりも小さくなるはずですが、画像処理に慣れていないと逆に大きくなる場合もあるので注意が必要です。ネットショップでは画像が多いため、ファイルサイズが大きくなることで、表示が遅くなるのが心配です。
この写真の場合は、先程のJPEGに比べると17倍ほどのファイルサイズになっています。つまりこの写真1枚を読み込む間に、17枚の写真が読み込みるのです。しかし、見かけはJPEGのものとあまり代わりありません。となれば、ここでは本来JPEGを使うのが正解となります。
基本的には写真はJPEG、色数の少ないイラストなどはGIF、JPEGでにじんだりする場合にはPNGと使い分けるのが無難でしょう。
元ウェブデザイナーの経験から、操作が必要なもののカラーコーディネートを得意としております。ウェブカラーに関する講演や執筆も多数あります。写真は飼い猫のぶるたんです。
アクセシビリティ カラーピッカー グレア コメント サービス，活動 ツール テキストリンク トラックバック トーン ユーザビリティ リンク 取材 可読性 坂本邦夫 執筆 彩度 明度 書籍 有彩色 無彩色 画像 純色 色の三属性 色の考え方 色指定 色相 色相環 著作権 補色 講演 配色 類似色相 GIF JPEG PNG RGB値
この記事をTwitterでつぶやく
