資格道場 › レッスン一覧 › 情報メディア
情報メディア・1/5・13分

画素・色・解像度の計算とベクタ/ラスタの違い

ゴール

画素・色数・解像度からメモリ量やドット数を計算でき、16進数の色指定を読める。ベクタとラスタ(ビットマップ)の違いと、アンチエイリアシングなどのCG用語を見分けられる。

画像は「点の集まり」か「図形の設計図」のどちらかで記録されます。その違いとデータ量の見積りは、画像の容量やフォントの扱いを考えるときに必ず出てきます。計算問題は型が決まっているので、1つの型を覚えれば確実な得点源になります。

このレッスンで稽古する(用語チェック・過去問)

結論:画像は「点の数 × 1点あたりのビット数」

ディスプレイやデジカメの画像は、画素(ピクセル:色のついた小さな点)を縦横に並べたものです。必要なデータ量は 横の画素数 × 縦の画素数 × 1画素あたりのビット数 で決まります。このレッスンで扱う計算問題は、ほぼすべてこの1本の式で解けます。

たとえるなら、画像は方眼紙のマス目塗り絵です。マス目の数が解像度、1マスに使える色の種類が色数にあたります。

横の画素数縦の画素数1画素=nビット横 × 縦 × 1画素のビット数= 必要なデータ量
画像は画素のマス目でできていて、データ量は横の画素数×縦の画素数×1画素あたりのビット数で決まる。

色数とビット数の対応

1画素に何ビット使うかで、表せる色の数が決まります。nビットなら2^n色です。

1画素のビット数 色数 バイト換算
1ビット(2値) 2色(白黒) 1/8バイト
8ビット 256色 1バイト
16ビット 65,536色(2^16) 2バイト
24ビット(フルカラー) 約1,677万色(2^24) 3バイト

65,536色と書かれていたら16ビット=2バイトとすぐ読み替えます。問題文は「色数」で書くこともあれば「ビット数」で書くこともあります。

RGBと16進数での色指定

画面の色はR(赤)・G(緑)・B(青)の3色の光を混ぜて作ります。これを加法混色(光を足すほど明るくなる混ぜ方)といいます。フルカラーでは各色を8ビット(0〜255)で表すので、合計24ビットです。

0〜255は16進数(0〜9とA〜Fの16種類で数える表し方)では00〜FFの2桁になります。6桁の指定 RRGGBB は、左から2桁ずつ赤・緑・青の濃さです。

指定 意味
FFFFFF 3色とも最大 → 白
000000 3色ともゼロ → 黒
FF0000 / 00FF00 / 0000FF 赤 / 緑 / 青
FFFF00 赤+緑 → 黄
00FFFF 緑+青 → シアン(水色)
FF00FF 赤+青 → マゼンタ(赤紫)

青みを強めたいなら、最後の2桁だけを大きくします。909090なら9090C0です(16進のC0は10進で192、90は144)。

赤(R)緑(G)青(B)90909090909010進144144144青だけ大きく9090C09090C010進144144192左から2桁ずつ 赤・緑・青の濃さ
RRGGBBは左から2桁ずつ赤・緑・青の濃さで、909090の青だけを大きくすると9090C0になる。

メモリ量の計算は1つの型で解ける

ビデオメモリ(VRAM:画面に表示する画像を置いておくメモリ)の容量も、画像ファイルの容量も、同じ型で計算します。

  1. 画素数 = 横 × 縦
  2. 1画素のバイト数 = ビット数 ÷ 8
  3. 容量 = 画素数 × 1画素のバイト数
  4. 問題文の単位の約束に従ってMバイトなどに直す

単位の約束は問題ごとに違います。1Mバイト=10^6バイトとする問題もあれば、1Mバイト=1,024×1,024バイトとする問題もあります。約束と違う換算で計算すると答えが合わなくなるか、近い値で迷うことになります。計算の前に、まず問題文の約束に印をつけてください。

「表示に必要なメモリ量として最も少ないもの」と聞かれたら、計算結果以上の選択肢のうち最小のものを選びます。計算結果より小さい値では足りません。

ポイントとdpiからドット数を出す

dpi(dots per inch)は、1インチ(約2.54cm)の中に並ぶドットの数です。ポイントは文字の大きさの単位で、試験では1ポイント=1/72インチと問題文で与えられます。

手順は「ポイント → インチ → ドット」の2段階だけです。インチ = ポイント ÷ 72、ドット数 = インチ × dpi で求めます。

ラスタとベクタ:画像の2つの記録方式

画像の記録方式は2種類あり、試験ではこの違いが繰り返し問われます。ラスタ(ビットマップ)は点の集まりとして、ベクタ(ベクトル)は図形の設計図(始点・方向・長さ)として記録します。

たとえると、ラスタはモザイクタイルの壁画、ベクタは**「ここからこの方向にこの長さの線」という作図の指示書**です。タイル画を拡大するとタイルの角が見えますが、指示書は何倍の大きさでも描き直せます。

観点 ラスタ(ビットマップ) ベクタ(ベクトル)
記録のしかた 画素ごとの色 図形の座標・方向・長さ
拡大したとき ジャギー(ギザギザ)が出る 滑らかなまま
向いているもの 写真・自然な絵 図形・ロゴ・文字
ソフト ペイントソフト(筆で描くように塗る) ドローソフト(図形を部品として組み合わせる)
フォント ビットマップフォント アウトラインフォント(輪郭線で文字を記録)
表示速度 速い(点をそのまま出すだけ) 描画の計算がいる分、不利

アウトラインフォントが向いているのは「任意の倍率に拡大して表示する」ケースです。「高速に表示する」はビットマップフォントの長所なので、逆に選ばないよう注意してください。

ラスタ(ビットマップ)ベクタ(ベクトル)始点・方向・長さ拡大拡大ジャギー(ギザギザ)滑らかなまま
同じ斜めの線を拡大すると、ラスタは画素の角が階段状に出て、ベクタは設計図から描き直すので滑らかなまま。

アンチエイリアシングと紛らわしいCG用語(最頻出)

アンチエイリアシングは、斜めの線や図形の境界に出る階段状のギザギザ(ジャギー)を、境界の画素に中間色を塗って滑らかに見せる手法です。この分野では最も出題回数が多い知識です。問題文の「傾いた直線を滑らかに」「境界のギザギザを目立たなくする」「中間色を割り当てる」のどれかが見えたら、これが正解です。

選択肢には、他のCG(コンピュータグラフィックス)用語が並びます。どれも「境界を滑らかにする」技術ではありません。

用語 何をするか
アンチエイリアシング 境界のギザギザを中間色で滑らかに見せる
シェーディング 光の当たり方に応じて陰影をつける
テクスチャマッピング 物体の表面に模様や画像を貼り付ける
バンプマッピング 表面を凹凸があるように見せる
レイトレーシング 光線を追いかけて、反射や屈折をリアルに描く
モーフィング ある形を別の形へ滑らかに変化させる動画技法
クリッピング 表示範囲の外にはみ出した部分を切り取る
ジャギー(階段状)アンチエイリアシング線の画素中間色の画素背景線の両隣に中間色を塗ると滑らかに見える
アンチエイリアシングは、線の画素の両隣に中間色を塗って、階段状のギザギザを目立たなくする。
例題 1

ビデオメモリ容量(1,000×800ドット・65,536色)

表示解像度が 1,000×800 ドットで,色数が 65,536 色(2^16 色)の画像を表示するのに最低限必要なビデオメモリ容量は何 M バイトか。ここで,1 M バイト=1,000 k バイト,1 k バイト=1,000 バイトとする。

ア 1.6
イ 3.2
ウ 6.4
エ 12.8

出典:平成28年度 春期 基本情報技術者試験 午前 問12

解き方と答えを見る
  1. 単位の約束を確認する:1Mバイト=1,000kバイト、1kバイト=1,000バイト。つまり1Mバイト=10^6バイト。
  2. 色数をビット数に直す:65,536色=2^16色なので16ビット。
  3. バイトに直す:16ビット ÷ 8 = 2バイト/画素。
  4. 画素数を求める:1,000 × 800 = 800,000画素。
  5. 容量を求める:800,000 × 2バイト = 1,600,000バイト。
  6. Mバイトに直す:1,600,000 ÷ 10^6 = 1.6Mバイト。

答え:ア(1.6)

例題 2

必要なメモリ量のうち最も少ないもの(1,024×768画素・24ビット)

1 画素当たり 24 ビットのカラー情報をビデオメモリに記憶する場合,横 1,024 画素,縦 768 画素の画面表示に必要なメモリ量として,最も少ないものはどれか。ここで,単位は M バイトとし,1 M バイトは 10^6 バイトとする。

ア 0.8
イ 2.4
ウ 6.3
エ 18.9

出典:基本情報技術者試験 科目A免除 修了試験 20250608 実施分 問10

解き方と答えを見る
  1. 単位の約束を確認する:1Mバイト=10^6バイト。
  2. 1画素のバイト数:24ビット ÷ 8 = 3バイト。
  3. 画素数:1,024 × 768 = 786,432画素。
  4. 容量:786,432 × 3 = 2,359,296バイト。
  5. Mバイトに直す:2,359,296 ÷ 10^6 ≒ 2.36Mバイト。
  6. 「必要な量のうち最も少ないもの」なので、2.36以上の選択肢のうち最小の2.4を選ぶ。0.8では足りない。

答え:イ(2.4)

例題 3

1Gバイトのメモリに記録できる画像の枚数(1,600×1,200画素・24ビット)

横 1,600 画素,縦 1,200 画素で,24 ビットのカラー情報をもつ画像が撮影できるディジタルカメラがある。このカメラに 1G バイトの記録用メモリを使用すると,何枚の画像が記録できるか。ここで,1G バイトは 10^9 バイトとする。また,メモリの全容量を画像の記録に利用できるものとし,画像は圧縮しないものとする。

ア 21
イ 173
ウ 520
エ 1388

出典:基本情報技術者試験 科目A免除 修了試験 20161211 実施分 問11

解き方と答えを見る
  1. 単位の約束を確認する:1Gバイト=10^9バイト。圧縮はしない。
  2. 1画素のバイト数:24ビット ÷ 8 = 3バイト。
  3. 画素数:1,600 × 1,200 = 1,920,000画素。
  4. 1枚の容量:1,920,000 × 3 = 5,760,000バイト(5.76×10^6バイト)。
  5. 枚数:10^9 ÷ (5.76×10^6) ≒ 173.6。
  6. 途中まで書いた画像は使えないので、端数は切り捨てて173枚。

答え:イ(173)

例題 4

96dpiで12ポイントの文字は何ドットか

96 dpi のディスプレイに 12 ポイントの文字をビットマップで表示したい。正方フォントの縦は何ドットになるか。ここで,1 ポイントは 1/72 インチとする。

ア 8
イ 9
ウ 12
エ 16

出典:平成31年度 春期 基本情報技術者試験 午前 問11

解き方と答えを見る
  1. 約束を確認する:1ポイント=1/72インチ。
  2. ポイントをインチに直す:12 ÷ 72 = 1/6インチ。
  3. インチをドットに直す:96ドット/インチ × 1/6インチ = 16ドット。

答え:エ(16)

例題 5

ビットマップフォント8,192文字分の容量(48×32ドット・2値)

1 文字が,縦 48 ドット,横 32 ドットで表される 2 値ビットマップのフォントがある。文字データが 8,192 種類あるとき,文字データ全体を保存するために必要な領域は何バイトか。ここで,1 M バイト = 1,024 k バイト,1 k バイト = 1,024 バイトとし,文字データは圧縮しないものとする。

ア 192 k
イ 1.5 M
ウ 12 M
エ 96 M

出典:平成25年度 秋期 基本情報技術者試験 午前 問11

解き方と答えを見る
  1. 単位の約束を確認する:1Mバイト=1,024kバイト、1kバイト=1,024バイト。つまり1Mバイト=1,048,576バイト。
  2. 2値なので1ドット=1ビット。1文字=48 × 32 = 1,536ビット。
  3. バイトに直す:1,536 ÷ 8 = 192バイト/文字。
  4. 全体:192 × 8,192 = 1,572,864バイト。
  5. Mバイトに直す:1,572,864 ÷ 1,048,576 = 1.5Mバイト。

答え:イ(1.5M)

要点(試験直前に読む)

  • 容量 = 横 × 縦 × 1画素のビット数 ÷ 8。65,536色は16ビット=2バイト、24ビットは3バイト。
  • 単位の約束(10^6か1,024×1,024か)は問題ごとに違う。計算の前に問題文で確認する。
  • 6桁16進はRRGGBB。青みを強めるなら最後の2桁を大きくする。赤+緑=黄。
  • ドット数 = ポイント ÷ 72 × dpi(12ポイント・96dpiなら16ドット)。
  • 拡大しても滑らか=ベクタ(アウトラインフォント・ドローソフト)。点の集まり=ラスタ(ビットマップフォント・ペイントソフト)。
  • 「傾いた線を滑らかに」「境界に中間色」=アンチエイリアシング。

ひっかけ

  • ビットをバイトに直す(÷8)のを忘れると、答えが8倍(枚数なら1/8)になる。その値が選択肢に紛れ込んでいる。
  • 単位の約束を読み飛ばして、問題と違う換算(1,000と1,024)で計算する。答えが合わないか近い値で迷うので、まず問題文の約束を確認する。
  • 「必要なメモリ量のうち最も少ないもの」で、計算結果より小さい選択肢を選ぶ。足りない量は不正解で、計算結果以上の最小値を選ぶ。
  • 16進の色指定で、中央の2桁(緑)を変えた選択肢や、青を小さくした選択肢を選ぶ。青は最後の2桁で、強めるなら大きくする。
  • アウトラインフォントの長所に「高速表示」を選ぶ(高速なのはビットマップ)。アンチエイリアシングの代わりに、シェーディングやテクスチャマッピングなど質感表現の用語を選ぶ。

用語(16)

画素 がそ(ピクセル)
画像を構成する、1つの色を持つ最小の点。
⚠ ドットとほぼ同じ意味で使われる。試験ではどちらも「点1個」と読めばよい。
解像度 かいぞうど
画像や画面を横×縦いくつの画素で表すか(または1インチあたりの点の数)を示す値。
⚠ 色数(1画素に使える色の種類)とは別物。容量は解像度と色数の掛け算で決まる。
dpi dots per inch
1インチの長さに並ぶドットの数。
⚠ ポイントは文字の大きさの単位(1ポイント=1/72インチ)。ポイント→インチ→ドットの順に換算する。
ポイント ぽいんと
文字の大きさを表す単位で、試験では1/72インチとして与えられる。
RGB Red, Green, Blue
赤・緑・青の3色の光の強さで色を表す方式。
⚠ 6桁16進ではRRGGBBの順。青は最後の2桁、緑は中央の2桁。
加法混色 かほうこんしょく
光の色を重ねるほど明るくなる混ぜ方で、RGBを全部最大にすると白になる。
⚠ 絵の具の混ぜ方とは逆。赤+緑は黄、緑+青はシアン、赤+青はマゼンタ。
フルカラー ふるからー(24ビットカラー)
RGB各8ビット、合計24ビット(3バイト)で約1,677万色を表す方式。
⚠ 16ビット(65,536色・2バイト)と混同しない。
ビデオメモリ びでおめもり(VRAM: Video Random Access Memory)
画面に表示する画像データを一時的に置いておくメモリ。
ラスタ形式 らすたけいしき(ビットマップ形式)
画像を画素ごとの色の集まりとして記録する方式。
⚠ ベクタ形式は図形の座標・方向・長さで記録する。拡大でジャギーが出るのはラスタの方。
ベクタ形式 べくたけいしき(ベクトル形式)
画像を大きさと方向をもつ線や図形の集まりとして記録する方式。
⚠ 拡大・縮小しても滑らかなのはベクタ。ラスタは拡大でギザギザになる。
ビットマップフォント びっとまっぷふぉんと
文字の形をドットの並びとして記録したフォント。
⚠ 表示は速いが、拡大するとギザギザになる。拡大向きなのはアウトラインフォント。
アウトラインフォント あうとらいんふぉんと
文字の輪郭線を座標と曲線で記録し、表示の大きさに合わせて描くフォント。
⚠ 「任意の倍率に拡大」ならこちら。「高速表示」はビットマップフォントの長所。
ドローソフト どろーそふと
線や図形を部品として扱い、組み合わせや変形で絵を作るベクタ系の描画ソフト。
⚠ ペイントソフトはマウスを筆のように動かして塗り、ビットマップ画像として保存する。
ペイントソフト ぺいんとそふと
画面上を筆で塗るように描き、結果を画素の集まり(ビットマップ)として保存するソフト。
⚠ 図形を部品として扱うのはドローソフト。
ジャギー じゃぎー
斜めの線や曲線の境界に現れる階段状のギザギザ。
アンチエイリアシング あんちえいりあしんぐ(anti-aliasing)
境界の画素に中間色を塗って、ジャギーを目立たなくする手法。
⚠ シェーディング(陰影)、テクスチャマッピング(模様貼り)、バンプマッピング(凹凸)、モーフィング(形の変化)、レイトレーシング(光線追跡)、クリッピング(はみ出しを切り取る)はどれも別の技術。

このレッスンの過去問

このレッスンで稽古する