グラフィックスの基本概念

ラスター vs ベクター (Vector)

以下のデモを通じて、ピクセルグリッドと数学的パスの本質的な違いを体感してください。

ズーム倍率: 1.0x
スライダーを動かして詳細を確認
ラスター (Raster)
本質:ピクセルのグリッド
ベクター (Vector)
本質:数式で定義されたパス

ラスター画像の詳細

  • 構成原理:

    「ピクセル」と呼ばれる色のついた正方形のグリッド。各ピクセルは特定の色情報(RGB)を持ちます。画質は解像度(DPI/PPI)に直接依存します。

  • 色の表現:

    複雑なグラデーション、陰影、細部の表現に優れています。写真写実的な絵画には唯一の選択肢です。

  • 一般的な形式:
    JPG PNG GIF TIFF WEBP

ベクター画像の詳細

  • 構成原理:

    数式(点、線、曲線)に基づきます。例えば、円を描くときはピクセルを記録するのではなく、中心座標と半径 `r` を定義します。そのため、無限に拡大しても劣化しません。

  • ファイル特性:

    ファイルサイズは通常非常に小さく(命令のみを保存)、寸法に依存しません。写真のような複雑な色の変化を表現するのは苦手です。

  • 一般的な形式:
    SVG AI EPS PDF
比較次元ラスター (Raster)ベクター (Vector)
解像度依存
依存する (Dependent)
独立している (Independent)
ファイルサイズ
大 (高解像度時)
極小 (単純な図形時)
変換難易度
ベクター化は困難 (トレースが必要)
ラスタライズは容易
最適な用途
写真、複雑な絵、テクスチャ
ロゴ、アイコン、タイポグラフィ
ヒント:現代のWebデザインでは、Retina画面での鮮明さを保つためにアイコンにはSVGを使用し、写真の背景にはWebP/JPGを使用するのが一般的です。