制作の依頼をデザイナーの方にするときに、デザインの知識があるのとないのとでは、話の進むスピードが異なります。
また、これからデザイナーを目指す方にとって、商売道具でもあるAdobeなどのツールの使い方はもちろん、デザインに関係する基礎知識の学習は必要不可欠です。

今回は、デザインに関する基礎知識として知っておきたい、ベクタ形式とラスタ形式の違いについて解説します。

ベクタ形式とは

ベクタ形式とは、画像や文字などの2次元情報を数値化して記録している形式のことです。
主に、アイコンや地図、平面的なイラストなどを作成するときにはベクタ形式が採用されています。

画像をアンカーと呼ばれる点の座標と、セグメントと呼ばれる線、面の方程式、塗りつぶしなどの特殊加工などによって構成されています。
主に、Adobe Illustrator、Canvas、CorelDRAW、Inkscape、OmniGraffleなどのドローソフトでは、ベクタ形式が採用されています。
画像フォーマットは、以下の通りに出力されます。

・esp
・pdf
・svg
・wmf

メリットとデメリット

メリット

  • 拡大や縮小が簡単

ベクタ形式で作成された画像は、数値で構成されているので、拡大をしたり縮小をしたりしても画質が崩れることなく再現できます。

例えば、以下の画像のような半径が200pxの円を描くとします。

2

データ上では、この画像は以下のような数値で表されています。

3

データ上の数値を変更するだけで、画像を美しいまま拡大や縮小を行うことができます。

  • 解像度を気にしなくてもよい

画像の解像度が大きくなったとしても、数値を変更するだけなので要領にはさほど変化はありません。

デメリット

  • 複雑な画像には向いていない

写真などの細かい画像をベクタ形式で描くためには、数多くの数式が必要となるため困難です。

  • パソコン上で表記するためには変更が必要

一般的にパソコンのディスプレイは、以下で解説するラスタ形式で表現されています。
ベクタ形式で作成された画像をそのままラスタ形式のディスプレイで表示することはできないので、ディスプレイで表示する際はラスタ形式に変換する必要があります。
これを「ラスタライズ」と言います。

単純な図形の場合は、ラスタライズ処理も簡単に行えます。画像が複雑になればなるほど、ラスタライズ処理も増えるため、処理時間も増えます。

ラスタ形式(ビットマップ画像)とは

ラスタ形式とは、画像を色のついた点を集めて表現しているデータのことです。
ラスタ形式で作成された画像は、ビットマップ画像と呼ばれることもあります。
主にデジタルカメラやスマートフォンから取り込んだ写真の加工や、立体的な加工を行う際には、ラスタ形式が採用されます。

Adobe Photoshopやパソコンにデフォルトで入っているペイントツールは、主にラスタ形式を採用しています。
画像フォーマットは多岐にわたりますが、主に以下の通りです。

・bmp
・gif
・jpeg
・png
・tiff
・xpm

メリットとデメリット

メリット

複雑な画像や写真に適している

色のついた点のみで表現しているので、複雑な図形であっても簡単に表示されることができます。

  • パソコンにかかる不可が少ない

ラスタ形式で作成された画像を表示するために必要な処理量は少ないもので、パソコンにかかる負荷を小さくすることができます。
そのため、一般的なパソコンではラスタ形式で表示されています。

デメリット

  • 拡大や縮小に適さない

ラスタ形式で作成された画像は点で表現されているため、拡大をすると画質が崩れてしまったり、縮小をすると情報が失われてしまったりします。

例えば、以下の画像のような半径が1.5センチの円を描くとします。

2

この画像を拡大すると、以下のように画像が崩れてしまいます。

６

イラストで見てみると以下のようになります。

拡大前

拡大後

拡大後のイラストでは、全体的に画像が崩れてしまって、輪郭がガタガタしてしまっているのが分かります。

まとめ

今回は、ベクタ形式とラスタ形式の違いについて解説しました。
ホームページ上で表示させる場合は、ラスタ形式にする必要がありますが、作成過程ではどちらの形式がいいのか、違いは理解できましたでしょうか。
デザイナーでなくても、デザインの基礎知識を押さえておくことでやり取りが円滑になります。

細かい部分までは把握しないにしても、基本的な知識はできるだけ身につけておきましょう。

このニュースをよんだあなたのオススメ

ホームページ制作で画像を表示させる方法
【非デザイナー必見！】知っておくべきデザインの基礎法則６つ
ノンデザイナーでも一定レベルのデザインができるようになる基礎知識・サービスまとめ

このニュースに関連するカリキュラム

ホームページ制作で画像を表示させる方法

ホームページ制作で画像を表示させる方法

ホームページはたんなる文書ではありません。適切に画像も配置し、顧客とのコミュニケーションツールまで高めたいものです。画像を配置するにはそもそも画像データを用意し、それをIMGタグで配置します。