Webイロハ
「よーし、俺様のサイトをオープンしちゃうぞ!」と作ってはみたものの、どこからみてもシロートまるだし。「あれ?こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。
デザインも内容もテクニックも、めざせバージョンアップ!
shirokuma 白熊 吾郎   GORO SHIROKUMA
Web & 映像業界で生きる(モーション)グラフィックス屋。マスコミインハウスからフリーに。
■バックナンバーへ
基礎の基礎を復習(2)
手軽に「シロート臭さからの脱却!」をめざすこのコーナー、第2回は「基礎の基礎を復習(2)」画像についてです。画像は画面がカラフルになる反面、技術とセンスが問われる分野ですから使い過ぎに気をつけましょう。「ちょっと控えめかな?」ぐらいがちょうどいいのです。
009. 画像の形式を使い分ける!
写真だけでなく、タイトルロゴやボタンやバナーと、画像は必須のアイテム。見た目がカラフルになったり、イメージづくりに効果大ですが、うまく作らないとただの重たいサイトの出来上がり。ブロードバンドが普及したとは言え、いまだダイアルアップユーザーがいるのも事実。あくまでサイトは軽くするよう心掛けましょう。
サイトで使う画像ファイルには、GIF、JPEG、PNGがありますが、たいていはGIFとJPEGで足りますが、うまく使い分けないと逆効果にも。
覚え方は簡単。「写真はJPEG、写真以外はGIF」と覚えておけば、だいたいOK。特にタイトルやボタンなど、文字が含まれている画像や、イラストのように同じ色の部分がベタっとつづく画像にはGIFが最適です。もしJPEGにしてしまうと、モザイク状の汚れが目立ってしまいます。

(左)JPEG形式で、(右)GIF形式で保存したもの。写真にはJPEGを。

capture09-1 capture09-2
capture09-3 ←JPEG形式で保存したもの。
capture09-4 ←GIF形式で保存したもの。
  写真以外にはGIFを。
【理由】 GIF、JPEGに得手不得手があるため。
【注意】 ごくまれに写真にGIFを使っていたり、タイトルにJPEGを使っているサイトがありますが、「画像が汚いサイトだな」と思われるどころか「こいつ何にも知らないな」と失笑を買うことになりますので気をつけて。
010. 元のデータをキープしておく
サイトに使う画像データはGIFやJPEGに変換しますが、その変換前の元画像を必ず保存しておくこと。保存するときは001で作った「素材用フォルダ」へ入れておく習慣をつけましょう。
たとえばデジカメで撮ってPCに取り込んだ画像はそのまま保存しておき、サイトに使うときにはコピーしてから加工して別のファイルにします。
またIllustratorやPaintorなど、他のアプリケーションで作った画像も、そのアプリケーション固有のファイル(Illustrator形式やPaintor形式など)で保存しておくことを忘れずに。
【理由】 元画像を保存しておけば何度でも1から修正ができるが、いったんGIFやJPEGに変換してしまった画像では、再度修正すると汚くなってしまう。
【注意】 特にJPEGファイルは、何度もJPEGで圧縮するとどんどん劣化してしまうので注意。