初心者でもわかる!デザインでよく使われるファイル形式

ブログ

2019.05.15 Webデザイン

初心者でもわかる!デザインでよく使われるファイル形式

今回は『初心者でもわかる!デザインでよく使われるファイル形式』についてご紹介したいと思います!

前提として、すべての画像はベクター画像とビットマップ画像のどちらかに分けられます。

写真やイラスト、図形もこの2つのどちらかに分けられるので、
まずはベクターデータとビットマップデータの違いについてご説明いたします!

 

ベクターデータとビットマップデータの違い

ベクターデータは、ポイント(点)・ライン(線)・ポリゴン(面)の
3つの要素で表現したもので、数値データをもとに演算によって再現する方式です。

ビットマップデータよりも容量が小さく、拡大・縮小しても画質が損なわれず、
変形処理が自由自在という利点があります!

欠点としては、写真のような複雑な輪郭線や配色を持つ図形などには向いていません。

ビットマップデータは、画像を色のついたドットと呼ばれる点の羅列・集合として表現するデータ再現方式で
無圧縮のままファイルを生成するので画質の劣化がないという利点があります!

しかし、拡大・縮小等の編集を行うと画質の劣化が生じてしまうという欠点があるので気を付けてください。

 

AI【Adobe Illustrator】

AIファイルとは、Adobe Systems社のグラフィックスソフトで制作された画像ファイル形式の一つです。

Adobe Illustrator(アドビ・イラストレーター)の頭文字を取って【AI】。
拡張子は「.ai」になります。

Illustratorの標準ファイル形式であり、ソフトの編集情報をそのままの形で保存することができます!

ソフトの内部は基本的にはベクター形式で、曲線を使って線と面で描く図形を扱うことができ
文字組やレイアウトの作成、様々なサイズで使用するロゴやイラストの作成などに向いています!

 

PSD【Photoshop Document】

PSDファイルとは、Adobe Systems社の「Adobe Photoshop」で利用される画像ファイル形式の一つです。

Photoshop Document(フォトショップ・ドキュメント)の略で【PSD】。
拡張子は「.psd」になります。

Photoshopの標準ファイル形式であり、レイヤーやパス、解像度、埋め込みテキストなど
編集情報をそのままの形で保存することができます!

Photoshopはドットの集まりでできているビットマップ画像が特徴的
写真の加工をしたり素材を作成することなどに向いています!

PSDファイルの他に、PSBファイルというあまり聞き慣れない形式がありますが、
こちらはビックドキュメント形式と書かれてあります。

・ファイルサイズが2GB以上
・縦幅または横幅が30000px以上
・HDRや32bit / チャンネルの画像

上記の条件を満たすとpsd形式では保存できなくなるので、その際にpsb形式で保存することになります。

 

EPS【Encapsulated PostScript】

こちらは聞き慣れない方も多いのではないでしょうか?

EPSファイルとは、Adobe Systems社が開発した「PostScript」というプログラミング言語を基盤とした
ベクターデータとビットマップデータの両方を含む画像ファイル形式です。

Encapsulated PostScript(エンキャプサレイティッド・ポスト・スクリプト)の頭文字を取って【EPS】。
拡張子は「.eps」になります。

PostScriptは文字や図形、画像などをレイアウトして印刷できるページを記述することができますが
EPSはこのページを画像化したものをファイルに記録する形式を定めています。

構成要素としてベクター形式の文字や図形・図表など、ビットマップ形式の画像の両方を含めることができて
ベクター形式の要素は質を損なわずに拡大・縮小することができるので非常に便利です!

 

SVG【Scalable Vector Graphics】

SVGファイルとは、JPEGやPNGのようなWebでよく見かけるビットマップ画像と違い
拡大・縮小しても画質が損なわれないベクター形式の画像ファイル形式です。

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で【SVG】。
拡張子は「.svg」になります。

SVGを使うメリットとしては、1つのファイルでスマホ画面やRetina画面に対応でき
専用の画像ソフトを使わなくても、CSS上でサイズや色を変更できることです!

また、アニメーションや透過なども扱うことができます!

SVGファイルは拡大や縮小しても画像が荒れず、あとからサイズや色の編集もできるので
Webサイトのロゴやアイコンなどで画像を表示する場合非常に便利なフォーマットです!

 

おわりに

いかがでしたでしょうか?

制作会社などでは、技術者以外はあまり扱ったことのないデータの受け渡しなどが必要なこともあります。
提出ファイルの形式を指定された際に、基本的な知識を知っておくことで意思疎通や作業がスムーズになると思いました!

この他にもデザインの場ではたくさんのファイル形式があるので、今後も少しずつご紹介していきます!

 

弊社では、魅力的で且つわかりやすさを追求したWebサイトをご提供いたします!
是非お気軽にお問い合わせください!

🐧 SPCへのお問い合わせはこちら

 

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら