こんにちは！デザイン部責任者の平野です。
今回は「拡張子」というものの解説をしていきます。
といのもデザインの依頼をするにあたってデータのやり取りは必須になってきますが、どういった特徴やメリット／デメリットがあるのかを実は知らない…。なんて事もあるのではないでしょうか？
拡張子とはコンピューターがデータ処理をしやすくするための文字列が「.（ドット）」の後ろについてくるものですね。
ここでは弊社媒体で使用されることの多い3つの拡張子を解説します！
JPG「.jpg」
特徴
拡張子：.jpg
読み方：ジェイペグ
ひと言で言うと「軽くて綺麗」な特徴を持っていて、色の表現を大体1677万色程度使えるので細かいグラデーション色の表現が得意なので、写真やバナーで多く使用されます。ちなみに「.jpeg」となる拡張子もあったりしますが、その特徴や性能に違いはありません。
メリット
圧縮率が高いので「軽い」のが特徴で、高画質かつ低容量でのデータの保存に向いています。また一般的に最も普及している画像拡張子なので、あらゆるものと互換性が高く、アプリケーションやブラウザによって使用できない…。なんて事が少ないのもメリットと言えます。
デメリット
「軽い」メリットの反面、非可逆圧縮というデータの圧縮方式なので、繰り返しの上書き保存や、小さくしたデータを大きくすることで画質が粗くなってていきます。よく女性キャストのお写真をヘブンネットのプロフィールから使用してほしいという依頼があったりしますが、元データがある場合は必ず元データをデザイナーにお送りすることを強くお勧めします。
というのも本来の元データだと数千ピクセルあるはずなのですが、WEBの表示速度を上げるために表示サイズに圧縮、ヘブンネットのプロフィールの場合390px×520pxされているので、バナーのサイズに使用すると粗く汚い状態のバナーになってしまうからです。（上図参照）
ただし使用しようとしているサイズが圧縮されたサイズよりも小さい場合は問題なく使用できます。粗くならないように使用をしようとするとどうしてもデザイン・写真の使用方法に制限がかかってくるという事をご理解ください。
PNG「.png」
特徴
拡張子：.png
読み方：ピング
細かく話すとPNGの中でも「PNG-8」「PNG-24」「PNG-32」という種類があります。後ろの数字はビット数（情報量）に関わってくるもので前の2つは「2の8乗＝256色」「2の24乗＝大体1677万色」を使える形式で、「PNG-32」はこの「24bitの色数 + 8bitの透明」約1,677万色と、256段階の透明度を利用できるという形式になります。
色々ややこしく書きましたが、弊社媒体でよく使用している透過されたPINGは「PNG-32」のことですので、下記の解説は「PNG-32」についてだと思っていただいて構いません。
こちらはひと言で言うと「綺麗で透過可能」な特徴を持っていますね。
メリット
JPGとは違い、背景を透過する事が可能なのが大きなメリットです。（上図参照）
弊社媒体ではメニューロゴの画像などで使用することが多いですね。さらにJPGとは違い、可逆圧縮なのでデータを圧縮・展開の処理を経たあとでも同じ状態に戻すことが可能です。複数の担当者間でデータのやり取りなどをしても劣化しないというのは便利ですね。
デメリット
可逆圧縮で劣化しないという事は、逆に言うとデータは重くなりやすい傾向にあります。データの送信に時間がかかったり、不必要な範囲でPNGをWEBサイトなどで使用するとページの表示速度が落ちてしまったりする可能性があるので、必要な範囲のみでの適切な使用をお勧めします。
GIF「.gif」
特徴
拡張子：.gif
読み方：ジフ
ひと言で言うと「軽くて透過・アニメーションが可能」な特徴を持った拡張子で、風俗業界のバナーには多い傾向がありますね。
「PNG-8」と同様で8ビット（256色）までの表現になるので、基本的には容量が軽くて、透過が可能なため、ロゴやイラストに向いている拡張子です。
アニメーションが可能ではありますが、肝に銘じておきたいのが動画フォーマットではなく「画像フォーマット」であるという点です。動画をGIFアニメーションに変換したり、複雑な動きや色数が多くなると、重く・画質の汚い画像になってしまう傾向があります。
メリット
アニメーションが可能なのが一番のメリットです。動画に比べ軽いため通信環境による影響が少ない事、動画では不可能な自動再生が可能な事、利用可能なソフトウェアの対応幅も広いのもメリットです。アニメーションを利用することで面積以上の情報量を含ませることが可能になります。
ただしアニメーションと言ってもパラパラ漫画的なイメージなので、複雑な動きに適したフォーマットでないことはご理解ください。
デメリット
動画（MP4）
2.36MB
画像（GIF）
2.82MB
色の表現幅が256色しかないため、複雑なグラデーションが必要なものには不向きです。特に「写真」においては表現が苦手なので、画質が汚い状態になってしまいます。上図の空とか、背景の緑がわかりやすいですね。さらに動画をGIF化した場合、汚いにも関わらず容量は動画より重くなってしまいます。
さらに弊社媒体では容量（重さ）の制限があるため規定サイズに収めようとすると、画質が悪くなるデメリットが顕著に出てきてしまいます。
まとめ
弊社媒体ではシステムによってサイズや形式・容量を自動的に適切化しますが、そういったシステムが働かないところ、例えばオフィシャルHPなど、拡張子が適切でないためページの表示が極端に遅い、挙動が重たいなどは注意が必要です。
特に今はいつでも気軽にWEBにアクセスできる情報過多の時代なので、人は自分にとって必要な情報のページなのかを「3秒」で判断するようです。
「とりあえずGIFアニメーションで動きのある感じで！」みたいな形でページが重くなり、せっかくのユーザーが離脱してしまわないよう、ぜひ拡張子や容量にも注意してみてください。
また弊社では指名にてデザイナーを選ぶことが可能ですので、まずは在籍デザイナーをチェックしてみてください！
それでは！
