みなさんは、用途に合った画像やデザインファイルの拡張子を使い分けていますか？
制作現場では「どの形式で納品すればよいか」「Web用にはどれが最適か」といった判断が頻繁に求められます。その際に最適な形式を選ばないと、画像がぼやけたり（低解像度）、透過ができなかったり、最悪の場合Web上で表示されないこともあります。
本記事では、Web制作の現場でよく使われる代表的な6つの画像形式と、3つの主要デザインツールで用いられる拡張子をわかりやすく整理します。
1. Web制作で使う画像ファイルの拡張子
Webデザインで最も頻繁に扱うのが画像ファイルです。
| 種類 | 用途 | 特徴 | 注意点 |
|---|---|---|---|
| JPEG（ジェイペグ） | 写真・背景画像・バナー | フルカラー対応。 非可逆圧縮で軽量化が可能。 | 圧縮時に画質が劣化する。 透過背景は不可。 |
| PNG（ピング） | ロゴ・アイコン・バナー・写真 | 透過対応・可逆圧縮で高画質。シャープな線や文字に強い。 | データ容量がやや重い。 |
| SVG（エスブイジー） | イラスト・ロゴ・アイコン・図形 | 拡大しても劣化しない。 コード編集も可能。 | 複雑なデザインは ファイルが重くなる。 |
| WebP（ウェッピー） | 高速表示用画像 | Google開発形式。 透過やアニメーションも可能。 | 一部ブラウザでは非対応 |
| GIF（ジフ） | 短いアニメーション | 画像を軽量で動画化が可能。 自動再生にも対応。 | グラデーションが苦手。 音声は非対応。 |
1-1. JPEG（ジェイペグ）
写真やグラデーションの多い画像に最適な形式です。
ファイルサイズを小さくできる反面、「非可逆圧縮」のため画質の劣化が生じる場合があります。
背景の透過はできないため、ロゴやアイコンよりも写真やバナーなどの装飾画像向きです。
1-2. PNG（ピング）
透過が必要な画像や、文字・イラストなどのくっきりしたデザインに適しています。
「可逆圧縮」により画質を維持できるのが強みですが、JPEGよりデータ容量がやや大きくなります。
Webサイトではロゴ・UIアイコン・スクリーンショットなどに多用されます。
1-3. SVG（エスブイジー）
ベクター形式の画像で、拡大・縮小しても画質が劣化しません。
主にロゴやアイコン、図形、イラストに使われ、CSSやJavaScriptでアニメーションをつけることも可能です。軽量かつレスポンシブ対応のため、最近のWebデザインでは積極的に利用されています。
2. デザイン制作で使うファイルの拡張子
デザイナーが制作段階で扱うファイルです。共同作業や納品時に形式を理解しておくとスムーズです。
| 種類 | 用途 | 特徴 | 注意点 |
|---|---|---|---|
| AI（エーアイ） | ロゴ・印刷物・イラスト制作 | Adobe Illustrator専用のベクターデータ形式。印刷・デザイン業界で標準。 | Illustrator以外のソフトでは編集不可。 |
| PSD（ピーエスディー） | 写真加工 | Adobe Photoshop専用形式。 レイヤー保持・透過対応で高い編集性。 | Web使用時はJPEGやPNGに書き出す必要あり。 |
| XD / FIG（エックスディー/フィグマ） | Web・アプリのUI/UXデザイン、プロトタイプ制作 | 画面設計・共有・プロトタイプ制作に最適。チームでの共同作業に最適。 | 納品時はPDF・SVG・PNGなどに書き出すのが一般的。 |
2-1. AI（エーアイ）
Adobe Illustratorの標準形式です。ベクターデータを扱うため、印刷物やロゴ制作に最適です。
編集できるのはIllustratorのみのため、納品時は「.pdf」や「.svg」に書き出して共有するケースが一般的です。
2-2. PSD（ピーエスディー）
Adobe Photoshopの形式で、レイヤーを保持したまま編集できるのが特徴です。
主に写真加工やバナー制作、合成デザインに利用されます。
Web用に使う場合は「.jpg」「.png」などに書き出して軽量化します。
2-3. XD / FIG（エックスディー/フィグマ）
UI/UXデザイン向けの形式で、Webサイトやアプリの画面設計に使われます。
チームでの共同編集がしやすく、プロトタイプ機能を使えば実際の操作感を再現できます。
納品時は「PDF」や「SVG」に書き出して共有します。
3. Web制作で使うその他の拡張子
Web制作では、画像以外にも動画・フォント・コード関連のファイルが欠かせません。
| 種類 | 用途 | 特徴 | 注意点 |
|---|---|---|---|
| WOFF / WOFF2（ウォフ） | Webフォント（ブラウザ表示用） | Web最適化されたフォント形式。軽量・高圧縮で高速表示が可能。 | 一部ブラウザで非対応の可能性がある。 |
| MP4（エムピーフォー） | 動画全般 | 軽量で高画質。ほとんどのブラウザ・デバイスで再生可能。 | 長尺動画はページ速度に影響する。 |
| HTML / CSS / JS | Webサイト構築 | Webサイト構築の基本3要素。 | 各ファイルが独立しているため、関係の理解が必要。 |
3-1. WOFF / WOFF2（ウォフ）
Webフォントの代表的な形式です。「.woff」「.woff2」はブラウザ表示に最適化されており、Google Fontsなどでも採用されています。他にも「.ttf」「.otf」は汎用的なフォント形式で、多くのOSやアプリで使用されています。
3-2. MP4（エムピーフォー）
Webサイトで動画を再生する場合は「.mp4」が主流です。
軽量で互換性が高く、どのブラウザでも再生しやすい形式です。
一方、短いループアニメーションでは「.gif」や「.webm」がよく使われます。
ただし、容量が大きいと表示速度を下げる原因になるため、圧縮や最適化が重要です。
3-3. HTML / CSS / JS
Webページを構成する基本要素です。
.html：ページの構造（テキストや画像配置）.css：デザイン（配色・レイアウト・装飾）.js：動きや機能の制御
これらが組み合わさることで、Webデザインが「静的な見た目」から「動的な体験」へと進化します。
まとめ
ウェブデザインにおける拡張子の選択は、見た目だけでなく品質・表示速度・互換性に大きく影響します。
JPEG、PNG、SVGといった画像形式はもちろん、AIやPSDなどの制作データ形式、HTMLやCSSなどの実装形式まで、すべてが連携してWebサイトを支えています。
拡張子の特性を理解すれば、ファイル容量の最適化やトラブル防止につながります。
今後の制作や納品の際は、ぜひ「どの拡張子が最も目的に合っているか」を意識して選んでみてください。