「どの拡張子にしますか？」「pngでお渡しします」と言われても、
いったいどれを選べばいいの？何が違うの？
そう思ったことはありませんか？
画像やデザインデータには「拡張子」と呼ばれる種類があり、
用途によって最適な形式が違います。
この記事では、WEB制作やデザインでよく使われる
代表的な拡張子について現役デザイナーがわかりやすく解説します。
1. 拡張子とは？
まず最初に
拡張子とは、
ファイルの種類を示す名前の最後の部分です。
この後ろの「.jpg」「.png」などが拡張子です。
拡張子によって
・画質
・ファイルサイズ
・透明背景の有無
・編集できるかどうか
などが変わります。
2. 画像には2種類ある
そもそも画像データには大きく分けて２種類が存在します。
それが
・ラスター画像
・ベクター画像
この違いを知ると、
拡張子の違いがとても理解しやすくなります。
ラスター画像とは
ラスター画像とは、
小さな点（ピクセル）の集まりでできた画像です。
写真を拡大すると、
四角い粒のようなものが見えることがありますよね。
あれがピクセルです。
＜代表的な拡張子＞
jpg・png・psd
＜特徴＞
・写真に強い
・拡大すると画質が荒くなる
・WEB画像によく使われる
主な用途
ベクター画像とは
ベクター画像とは、
数式（線や図形の情報）で作られている画像です。
そのためラスターのような四角い粒々は発生せず、どれだけ拡大しても画質が劣化しないのが最大の特徴です！
＜代表的な拡張子＞
ai・svg
＜特徴＞
・拡大しても劣化しない
・ロゴやアイコンに向いている
・印刷物にも強い
3. 拡張子ごとの特徴
⚫︎jpg
最も一般的な画像形式です。
メリット
・ファイルサイズが軽い
・写真の表現に強い
・ほとんどの環境で表示できる
デメリット
・画質が少し劣化する（圧縮されるため）
・背景透過できない
・編集向きではない
向いている用途
・WEBサイトの写真
・ブログ画像
・SNS投稿画像
⚫︎png
WEBデザインでよく使われる画像形式です。
メリット
・背景透過ができる
・劣化が少ない
・ロゴや文字がきれい
デメリット
・jpgよりファイルサイズが大きい
向いている用途
・ロゴ
・アイコン
・バナー
・背景を透過した画像
⚫︎svg
ベクター形式の画像データです。
メリット
・拡大しても劣化しない
・ファイルサイズが軽い
・WEBで使いやすい
デメリット
・写真には向かない
・古い環境では表示できない場合がある
向いている用途
・WEBロゴ
・アイコン
・図形
⚫︎
PDF
文書や印刷物でよく使われる形式です。
メリット
・レイアウトが崩れない
・印刷に向いている
・誰でも開ける
デメリット
・基本は編集できない
・デザインデータとしては使いにくい
向いている用途
・チラシ入稿
・カタログ
・資料共有
⚫︎ai / psd
◾️ai
llustratorというデザインソフトの編集データです。
メリット
・完全編集データ
・拡大しても劣化しない
・印刷に最適
デメリット
・Illustratorがないと編集できない
・一般の人は開けない場合が多い
向いている用途
・ロゴ制作
・印刷物デザイン
・入稿データ
◾️psd
Photoshopの編集データです。
メリット
・レイヤー情報が残る
・画像編集に強い
デメリット
・ファイルサイズが大きい
・Photoshopが必要
向いている用途
・画像加工
・バナー制作
・写真合成
4. よくある質問
⚫︎pngとjpgどっちがいい？
用途によって使い分けるのがおすすめです。
写真などの画像は、ファイルサイズが軽い jpg がよく使われます。
一方で、ロゴや文字が入った画像は png の方がきれいに表示されます。
また、pngは背景を透明にできる（透過）という特徴があります。
そのため、ロゴやアイコンなどはpng形式で使われることが多いです。
まとめると次のような使い分けになります。
写真 → jpg
ロゴ・文字・透過画像 → png
⚫︎aiデータって開けないけど大丈夫？
はい、大丈夫です。
aiデータはデザイナーが使う Illustrator（イラストレーター） というソフトの編集データです。
そのため、Illustratorを持っていない場合は開けません。
aiデータはロゴの元データ（編集データ）として保管しておくものなので、
普段の使用では必ずしも開く必要はありません。
実際にロゴを使うときは
png（透過ロゴ）
jpg（画像用）
などの形式を使うことが多いです。
aiデータは、将来ロゴを修正したり、印刷物に使ったりするときのために
大切に保管しておくデータと考えておくと安心です。
⚫︎画像は拡大できますか？
jpgやpngなどの画像は、拡大すると画質が荒くなることがあります。
これは画像が「ピクセル」という小さな点でできているためです。
そのため、ロゴを大きく印刷したい場合などは
aiやsvgなどのベクター形式のデータが必要になります。
ロゴ制作では、将来の用途を考えて
ベクターデータ（aiなど）を保存しておくことが大切です。
WEB画像は必要に応じたサイズで作成することが重要になってきます。
まとめ
画像データで使用される拡張子についてお伝えいたしました。
用途によって拡張子は使い分けする必要があります。
心配であれば何に使用するか（「SNSで使用したい」「ロゴで将来名刺などの印刷物も作成予定」など）をお伝えいただければ「これがおすすめです」というピッタリの拡張子をお伝えいたします。
また用途別のおすすめ拡張子は次の記事でもご紹介しているのこちらもご覧いただければと思います。
.png)
.png)
