Webデザインを制作する作業の中では、様々な拡張子のファイルを扱います。
拡張子とはファイル名の末尾にある「.」の後に続く文字列のことで、そのファイルがどのような種類のデータか、またどのソフトウェアで開けばよいかを示している英数字です。
それぞれの拡張子には特徴があり、用途に応じて使い分けることで作業効率や品質が大きく向上します。
この章では、デザイナーが覚えておきたい主要な拡張子について解説します。
画像形式の拡張子
デザインで使う画像ファイルは、「ラスター画像（ビットマップ形式）」と「ベクター画像」の2つのタイプに分けることができます。
ラスター画像とは、ピクセルと呼ばれる小さな点の集まりで表現された画像のことです。
例えば、写真を拡大していくと、四角い点（ピクセル）が集まっているのが見えます。
その点（ピクセル）が集まってできているのがラスター画像です。
拡大するとぼやけたりギザギザになるのが特徴で、写真やWeb用の画像でよく使われます。
一方ベクター画像は、点と点を線で結び、数式で形を表現している画像形式です。
拡大しても線がなめらかで、画質が劣化することはなく、ロゴやイラスト、アイコンなどのデザインに向いています。
（拡大したラスター画像とベクター画像の例）
これらの形式の特徴を押さえた上で、実際によく使われるファイル形式を学んでいきましょう。
JPEG (.jpg / .jpeg)
JPGは、写真やWeb画像で一番よく使われるラスター画像の形式です。
データを軽くするために圧縮をして保存する仕組みになっており、ファイルサイズが小さくなりやすいといった傾向があります。
ただし、一度圧縮すると画質が少し落ちてしまうため、編集をくり返す作業には向いているとは言えません。
また、背景を透明にすること（透過）ができないという特徴があります。
そのため、ロゴの背景を透けさせたいときなどには使えず透明な部分を含むデザインの制作には向いていません。
ただし画像の容量が次にご紹介するPNGと比較すると小さくなりやすい傾向にある為、写真の編集やバナーのようなWebデザイン制作ではJPEGが扱われるケースが多いです。
PNG(.png)
PNGは「背景を透明にできる」という、とても便利な特徴を持ったラスター画像の形式です。
ロゴやアイコンなど、背景を透けさせたいデザインに最適です。
またPNGは、画質を保ったまま保存できる「可逆圧縮」という方式を使っているため、繰り返し保存しても画質が劣化しません。
ただし、PNGは透過することはできるものの画像の容量が重くなりやすい傾向にあります。
GIF(.gif)
GIFは動く画像を作ることができるラスター画像の形式です。
静止画像としても使うことはできますが、使える色が256色までという制限があります。
扱える色数が少ない為、GIFは色数の少ないシンプルなイラストや短いアニメーション制作に向いています。
扱える色数が少ないこともあり、最近のWERB制作ではあまり使用頻度の高くない形式です。
SVG（.svg）
SVGはベクター画像に該当し、拡大・縮小しても画質がまったく落ちないという特徴があるベクター画像の形式です。
数式で図形を表現しているので、どれだけ拡大してもぼやけることはありません。
SVGはイラストやロゴ、アイコンなどの線でできたデザイン制作に適しています。
また、他の画像形式と比較するとファイルの容量がとても軽いというメリットがあります。
WebP( .webp)
WebPは、Googleが開発した比較的新しいラスター画像の形式です。
JPEGのように写真をきれいに保存でき、PNGのように背景を透明にできるという、どちらの良さも持ち合わせています。
WebPは同じ画質のJPEGやPNGに比べてファイルサイズが小さくなることがあり、最近ではWebサイトの表示速度を上げるために使われることが増えています。
デザインデータの拡張子
AI（.ai）
AIは、Adobe Illustrator(イラストレーター)という印刷物の編集を得意としているソフトで開いたり編集ができたりする形式です。
ロゴやイラスト、ポスターなどを作るときによく使われ、ベクター画像形式を主に扱います。
PSD（.psd）
PSDは、Adobe Photoshop(フォトショップ)という写真編集や画像の加工を得意としているソフトで開いたり編集ができたりする形式です。
写真の加工、合成、レタッチ(修正)などをするときによく使われます。
Webデザインではバナーの制作やLPの制作に使用するケースが多いです。
基本的にピクセルを扱うためラスター形式ですが、ベクター要素も扱うことができます。
ただし印刷用やロゴ制作などでは、ベクター形式を主に扱うAI形式がより適しています。
FIG（.fig）
FIGは、デザインツール「Figma」のファイル形式です。
Figmaはオンラインで複数人が共同作業ができることが人気で、最近では使っている人の多いデザインツールのひとつです。
Webサイトやアプリのデザイン、バナー、ワイヤーフレーム制作などに幅広く使われています。
XD（.xd）
XDはAdobeが提供していたUIデザインツールで、Webサイトやアプリの画面設計に使われます。
ファイルが軽く、共有もしやすいのが特徴です。
ただし、近年はFigmaに移行するデザイナーが増えています。
その他
TrueType(.ttf)
MicrosoftとAppleが共同で開発したフォントの形式のことです。
昔から使われている形式で対応している環境が幅広く、無料のフォントによく使われています。
OpenType(.otf)
AdobeとMicrosoftが共同で開発したフォントの形式のことです。
WindowsのソフトはOpentypeに対応していないことがあり、有料のフォントによく使われています。
PDF（.pdf）
PDFは「Portable Document Format」の略称で、持ち運べる文書形式という意味を持つ形式です。
WindowsでもMacでも、どのようなスマートフォンでも同じように見えることが最大の特徴です。
どの環境で見ても同じように見える為扱いやすい形式ですが、特別な編集ソフトを使わない限り基本的には中身を直接編集することはできません。
Webデザインの制作では、クライアントへの説明資料の制作時にPDF形式を使うケースがよくあります。
MP4(.mp4)
動画ファイルの定番の形式です。
Webデザインの制作時にデザイナーが直接MP4を編集することは基本的にありませんが、Webサイトへ動画を入れたい案件ではクライアントから提供されるケースがあります。
ZIP（.zip）
ZIPは、複数のファイルをひとまとめにして圧縮する形式です。（ひとまとめにすることを圧縮と言い、ひとまとめにされたzipファイルの中を開くことができる状態にすることを解凍すると言います。）
複数のファイルをクライアントに共有したい場合に一つ一つ共有するのではなく、zip形式にするとまとめて共有することができるので、複数ファイルを共有したい場合に扱います。
zip形式は解凍しなければ開くことができません。
注意点として、MacやWindowsの標準機能で圧縮や解凍をすると、ファイル名の文字コードの違いで文字化けすることがあります。
そのためたとえばMacユーザーが圧縮する場合はWindowsでの文字化けを防ぐために、圧縮するときに「DTP Zipper」のようなソフトを使ってどの環境で開いても文字化けしないように注意をする必要があります。