ベクター画像とビットマップ画像とは

基本的にWebデザインの作成には、ベクター画像と呼ばれる画像が使われます。Sketch のツールを用いて描く画像はベクター画像ですが、デザインの世界にはビットマップ画像と呼ばれる画像タイプも存在しますので、それぞれの特徴と用途を簡単に解説します。

ビットマップ画像

代表的なファイルの拡張子は .jpg .png .gif 等です。

主に写真などに使用され、ピクセル単位で色調補正が可能であったり、色数を減らしてファイルサイズを軽減することもできます。

合成処理や滑らかな色調に強いですが、ピクセルの集合体であるため、画像サイズが大きければファイルサイズも肥大化します。また、記録時点で有効な画素数が決まっているため、原寸以上に拡大すると画像のクオリティが低下します。

Sketch のツールでビットマップ画像を作成することはできませんが、ビットマップ画像を読み込んだり書き出したりすることは可能です。

ベクター画像

代表的なファイルの拡張子は .svg .ai .eps 等です。

点と線で描画された図形の集合です。イラストやアイコンなどに利用されることが多く、最大の特徴は拡大縮小しても画像が劣化しない点です。 どんなに拡大しても滑らかな曲線をキープしてくれますので、Webやアプリ制作と非常に相性が良いです。

インターネットから無料のアイコンをダウンロードすることもあるかと思いますが、ぜひ.svgなどのベクター画像を選択してみてください。.pngや.gifよりも柔軟にデザインを進めることができると思います。

ビットマップとベクターの比較

下記の2つの画像は、Sketchから書き出した60pxの画像になりますが、見比べると一目瞭然です。ベクター画像の方は拡大しても画質に影響がありません。

ビットマップ画像

ベクター画像

さらにベクター画像を拡大してみても曲線の美しさは失われません。
このような単純な図形であればデータ容量はビットマップ画像より格段に小さくなります。

---

とはいえ、ビットマップ画像が良くないという話ではありません。 写真をベクター画像で再現しようとすると、今度はベクター画像のファイルサイズが肥大化しますし、滑らかな色調の再現はできませんので、適材適所で使い分ける必要があります。

Webサイトは、様々なデバイスサイズ・スクリーン解像度に対応する必要があります。下記のような要素にはなるべくベクター画像を使用するようにしましょう。

• ロゴデザイン
• アイコン
• イラスト
• 画像を使う必要があるボタン等
• リピートさせる背景画像