ベクターとビットマップ画面表示形式の違い／Illustrator 使い方

イラストやデザインのコンペなどを見ていると、
「納品はillustrator形式であること」といった条件を見ることがあります。

中には「ソフト縛りするなんてヒドイ」と思う人もいるかもしれませんね。

実はそれはソフト縛りというよりは、illustrator形式でないと用途が満たせないという事が理由なのです。

それがなぜかといえば、illustratorは代表的なベクター(ドロー)系グラフィックソフトだからなのです。

セッジさん、こんにちは。
グラフィックソフトってどれを使っても同じ様なモノが描けますよね？
なんでソフト縛りみたいな事があるんですか？

おはようございます！
デザイン講師ブロガーのセッジです！
ソフト縛りというかですね…イラレじゃないと対応できない案件があるんですよ！

実はこのお話は「パソコンでお絵かき」でお話した内容とかぶっています。
あなたがパソコンでお絵かきをご覧になっているようでしたら、おさらいがてらお読みいただければさいわいです。

【この記事は2018年11月14日に更新されました】

コンピュータの画像表示形式は2つある

コンピュータの二次元の画像表示形式は二種類あり、一つはビットマップ、
もう一つをベクターと言います。

一般的にはビットマップ形式を利用したグラフィックソフトが多く、AdobeのソフトではPhotoshopがその代表、ベクターの代表はIllustratorとFlashになります。

文章による説明だけだと少し判りにくいと思いますので、
また以前作成したクマくんを使います。

まず下の画像を見て下さい。
左がビットマップによるもの、右がベクターです。

特に違いはわからない？ですよね。

100％のサイズでは何が違うのかはわからないと思います。
では、拡大してみたらどうなるでしょうか。

600％まで拡大してみます。

この様に拡大してみると違いがわかります。
ビットマップはモザイク状になっていますが、ベクターは拡大してもキレイな曲線のままです。

ものすごくシンプルに言うと、ビットマップは拡大縮小に弱く、ベクターは拡大縮小に強い、ということになります。

拡大しても荒れないなんてスゴイ！
それなら全部Illustratorにすれば良いんじゃない？

そう考えちゃいますよね(^_^;)

ここまでで説明が終わったとすると、たしかにそう言う印象になってしまいます。
そこで、もう少し説明を加えたいと思います。

ビットマップとは点を縦横に並べた画像

拡大画像でわかるようにビットマップはピクセル＝点を並べた画像の事を指します。

コンピュータの画面は言ってしまえば非常に細かい方眼の様なマス目になっていて、そこに点を並べることで文字を形作ったり、絵や写真を形作ったりといったことを可能にしています。コンピュータ以外ではデジタルカメラなどもこの方式です。

下にイメージ図を置いておきますが、ピクセルを置く数と密度を上げることによって精密な画像を表示することもできます。

※概念を説明するためにピクセルを丸くしています。

左側はピクセルの数が少なく荒い印象、右側はピクセルの数が多くなり元のクマくんの絵に近くなってきています。
このピクセルの数をさらに増やしていけば元のベクターのクマくんと見た目は変わらないものになります。

先程、拡大縮小に弱いというデメリットがあると書きましたが、実はもう一つあります。
これもシンプルに言いますとピクセルの数＝データ容量なので、精密な画像を保存しようと思うとかなり大きなファイルサイズになってしまいます。

デメリットばかりのようですが、ピクセルそれぞれが個別に色を持つことができるため、写真や水彩、油絵のような複雑な配色を持った画像を扱えるという大きなメリットがあります。

ベクターは点と線、面で構成する画像

ビットマップと違い、ベクターの場合は点を並べていくのとは違います。

まず頂点がどこにあるのか、頂点が複数ある場合はその頂点同士を直線で結ぶのか、あるいは曲線で結ぶのか、また、線がつながっていって図形になった場合に内側に面（塗り）を作るのかどうかなど、全てが情報によって構成されています。

情報によって構成されているというのは、ざっくり言うと「直径10cmの円、線の太さは1mmで黒、中の色は赤」という様なことです。

持っているのは情報だけですので、データ量としては非常に少なくて済みます。

これをビットマップで表現しようとすると、直径10cmを埋められるだけのピクセルを用意することになりますので、データ量は多くなってしまいます。

以下、クマくんを構成している点と線を見るモード、Illustratorでの【表示】メニューにある【アウトライン】と呼ばれている表示モードで見てみます。

選択してみると、四角い点（＝アンカーポイント）とその点同士を結ぶ線（＝パス）で構成されているのがわかるかと思います。

持っているデータが「絵を構成する情報」なので、常にその状況に応じて最適な表示をしようとする性質があるため、拡大縮小に強いというメリットがあるのです。

反面、グラデーションなど特定の範囲内の色の変化などはできるものの、ビットマップに比べると複雑な配色を扱うのが苦手という弱点があるため、写真などの様な複雑な配色用途には不向きです。

したがって、拡大縮小して使う可能性のあるロゴやマーク、文字、図面や輪郭のはっきりしたイラストなどで使うということが多いと思います。