【超入門】デザインでよく使う拡張子一覧と解説
みなさんは用途に合った画像のファイル形式を選べていますか？
制作現場にいると、納品する画像のファイル形式を問われたり、特定の用途に適したファイル形式を判断することが必要になってきます。
最適なファイル形式を選択しないと、画像の解像度が悪くガビガビになってしまったり、Webに対応していない画像をアップしても何も表示されない…など、予期せぬトラブルを起こしてしまう場合があります。
今回はデザインを始めたての人や、デザインに携わるノンデザイナーのために、制作現場でよく使われる代表的な6つのファイル形式と、3つのデザインツールの拡張子をご紹介します。
ファイル形式を理解すると、画像の適切なサイズや必要な品質が分かり、Webの場合表示速度の向上にもつながるので、ぜひ活用してみてください。
目次
拡張子とは
拡張子（かくちょうし）とは、コンピュータファイルの名前の末尾に付けられる、「.」から始まる通常3文字の文字列のことです。
拡張子にはそのファイルの種類や形式を示す役割があります。
コンピュータは拡張子を通じて、どのアプリケーションでそのファイルを開くかを判断します。
例えば、”.docx”ファイルはMicrosoft Wordで開かれ、”.jpg”ファイルは画像ビューアで開かれます。
ビットマップ画像とベクター画像
画像は大きく2種類に分けることができます。
拡大縮小すると劣化する「ビットマップ画像」と、拡大縮小しても劣化しない「ベクター画像」です。
画像の用途によってどちらが適切か選択していきましょう。
ビットマップ画像
ビットマップ画像の大きな特徴は「ピクセル」と呼ばれる色の情報を持つ小さな粒のようなものを集めてグラフィックスを表現することです。
ピクセルにより細かいディティールを表現することが可能となり、写真や繊細なイメージ画像を再現できます。
しかし画像を拡大したり縮小してしまうと画質が劣化する特徴があるので、大きなポスターや印刷物に使用する際は画質に問題がないか注意が必要です。
ベクター画像
ベクター画像の大きな特徴は、図形を数学的な式やパスで表現することにより、拡大・縮小しても画質が劣化しないところです。
無限に拡大はできますが、写真のような複雑なイメージやグラデーションの表現は苦手で、複雑になればなるほどファイルサイズが大きくなるのでロゴや図形を作成する際に使用することをおすすめします。
デザインでよく使うファイル形式（拡張子）一覧
ここからは実際にデザイン制作現場でよく使われる6つのファイル形式をご紹介します。
それぞれのファイル形式に得意不得意なことやおすすめの活用法があるのでぜひ試してみてください。
JPG（.jpg）【読み方：ジェイペグ】
JPGは写真やリアルなイメージを効果的に圧縮*し、比較的小さいファイルサイズで1,677万色を表現できます。
基本的には静止画像で、透過やアニメーションはサポートしていません。
※圧縮とは不要な情報や過剰な部分を取り除いてデータを小さくし、効率的に表現する技術のことです。デジタルデータ（テキスト、画像、音声、ビデオなど）を扱う際に使われます。
PNG（.png）【読み方：ピング】
PNGはアルファチャンネルという透明度を表現する情報を持っており、画像の背景や一部を透過することができます。
主にWeb上でのロゴや図形などに使用されます。
GIF（.gif）【読み方：ジフ】
最大で256色でしか表現できないという制限がありますが、簡単なアニメーションやシンプルなグラフィックスに適しています。
色数の制限がある分ファイルサイズは比較的小さくなります。
WebP（.webp）【読み方：ウェッピー】
Googleが開発した画像フォーマットで、高い圧縮率と高品質を両立させます。
主にウェブページの表示速度向上を目的としています。
Squooshなどのオンラインサービスを使えば、Photoshopを持っていない人でもJPGやPNGをWebPに簡単に変換できます。
参考ページ：Squoosh
SVG（.svg）【読み方：エスブイジー】
SVGはベクター画像の1つで、サイズを変えても画質が劣化しません。
Webページに直接組み込んで使えるため、グラフィックス、アイコン、図形、地図などに広く利用されます。
TIFF（.tiff）【読み方：ティフ】
劣化が少なく、色数が豊富で発色に制限がないため、写真集などの印刷物に適しています。
ファイルサイズが他の拡張子と比べて格段に大きく、Web上での表示には対応していません。
ファイル形式（拡張子）の違いまとめ
これまでの各ファイル形式の特徴をまとめると下記のようになります。
デザインツールの拡張子
画像ファイル以外にも様々なファイルやツールに拡張子は付いています。
デザインする際でよく見かけるデザインツールの拡張子3つをご紹介します。
.psd（ピーエスディー）
Adobe Photoshopで作成された画像編集のためのファイル形式です。
すべての Photoshop 機能（レイヤー、効果、マスクなど）を保持します。
.psb（ピーエスビー）
Adobe Photoshopで作成された2GB を超える大規模な画像やプロジェクトファイルは、拡張子が「.psb」となりビッグドキュメント形式になります。
.ai（エーアイ）
Adobe Illustratorで作成されたファイル形式です。
AIファイルは拡大や縮小を行っても画質が劣化せず、IllustratorまたはAdobe Acrobatで使用できます。
ただし、Illustratorのバージョンが古いと互換性がなく展開できないか正しく表示されない場合があるのでバージョンは最新版を心掛けましょう。
.xd（エックスディー）
Adobe XDで作成されたファイル形式です。
Webサイトやアプリのワイヤーフレームやデザインカンプの作成、そしてプロトタイプの作成などができるUI/UXデザインツールです。
動作が軽くワイヤーフレームを作成するディレクターにとっても使いやすいソフトウェアです。
画像のポテンシャルを最大限に引き出しましょう！
ここまでご紹介した事柄はファイル形式の基本的な特徴になります。
ファイル形式の特性や向き不向きを知ることで、制作物のより高いクオリティを目指すことができ、Webの場合ファイルの大きさを改善すると表示速度の向上にもつながります。
もっと深堀していくと、JPGは画質を細かく設定できたり、SVGは実際にはテキストデータでテキストエディター上で調整ができるなど、まだまだたくさんの機能があります。
画像はクリエイティブにおいてとても重要な視覚的な情報なので、画像のポテンシャルを最大限に発揮できるよう、ベストな選択と活用をしていきましょう！
※この記事の内容は作成時点（2023年9月）の情報にもとづいて作成しています。
