ラスターとベクターの違いと使い分け｜ロゴがぼやける原因

もらったロゴを大きく使ったら、ふちがギザギザになった。
「もっと画質のいいデータをください」と言われたけれど、何を渡せばいいのか分からない。デザインの現場でいちばん最初にぶつかるトラブルです。

原因は画質でも解像度でもありません。その画像が「点の集まり」か「図形の設計図」かという、作りの違いです。前者をラスター、後者をベクターと呼びます。
この記事では2つの仕組みの違いと、どっちで作るべきかの判断を整理します。読み終えたら、ロゴがぼやける事故がなくなりますよ◎

ラスターとベクターは中身の作りが違う

同じ「画像」でも、データの中に入っているものがまったく違います。

• ラスター（Raster）：色のついた点をマス目状に並べて絵にする。中身は「1マス目は赤、2マス目は白…」という色の記録
• ベクター（Vector）：点と線と塗りの情報で絵にする。中身は「ここからここへ曲線を引いて、中を青で塗る」という設計図

ラスターはビットマップとも呼ばれます。ラスターイメージ、ビットマップ画像、点の画像。呼び方は違いますが、全部同じものです。ベクターも同じで、ベクターイメージ・ベクトル画像・パスデータはどれも同じ意味で使われます。

この作りの違いが、そのまま「拡大したときの見え方」に出ます。

ラスターを拡大すると、1つの点がそのまま四角く引き伸ばされます。点の数は増えないので、大きくするほどマス目が見えてくる。これがギザギザの正体です。ベクターは拡大のたびに線を計算し直すので、何倍にしてもなめらかなままです。

ラスターの特徴と得意なもの

ラスターが得意なのは色がなめらかに変わるものです。写真、絵の具でぼかしたイラスト、複雑な質感。1点ずつ色を持てるので、どんな色の変化でも記録できます。

身近な形式はJPEG・PNG・GIF・WebPで、スマホで撮った写真もスクリーンショットも全部ラスターです。PhotoshopやProcreate、Canvaで作ったものも基本はこちらです。

弱点は3つあります。

だから最初に作る大きさが大事になります。必要なピクセル数の出し方は解像度とdpiの決め方で計算式まで説明しています。

ベクターの特徴と得意なもの

ベクターが得意なのは輪郭がはっきりした図形です。ロゴ、アイコン、図解、グラフ、地図、文字。線と塗りで描けるものは全部こちらが向いています。

形式はSVG・AI・EPS・PDFなど。IllustratorやFigma、Affinity Designerで作ったデータがこれにあたります。

利点は大きく4つ。

ベクターは特別なソフトの中だけの話ではありません。WordやPowerPointで描いた四角や矢印も同じ仕組みで、どれだけ大きくしてもふちがなめらかなままです。スマホの地図アプリを拡大しても道路や文字が崩れないのも、同じ理由ですね。

弱点は、写真が扱えないことです。色が細かく変化するものを線と塗りで表そうとすると、形の数が爆発して逆に重くなります。空の色のグラデーションや、人の肌の質感はベクターには向きません。

違いを表で整理する

	ラスター（ビットマップ）	ベクター
中身	色のついた点の集まり	点と線と塗りの設計図
拡大	ギザギザ・ぼやける	何倍でもなめらか
得意	写真・質感のあるイラスト	ロゴ・アイコン・図解・文字
容量	点が多いほど重い	形が単純なほど軽い
あとからの修正	形の変更が難しい	色も形も何度でも直せる
主な形式	JPEG・PNG・GIF・WebP	SVG・AI・EPS・PDF
主なソフト	Photoshop・Canva・Procreate	Illustrator・Figma

覚え方はひとつだけで足ります。写真はラスター、ロゴと文字はベクター。ここから外れる場面はほとんどありません。

作るものごとの使い分け

実際の制作では、この判断を毎回します。迷いやすいところをまとめました。

迷ったときの基準は「あとで大きく使う可能性があるか」です。可能性が1%でもあるものはベクターで作る。あとからラスターをベクターに戻すのは、手で描き直すのとほぼ同じ手間になります。

1枚の作品にどちらも混ざるのは普通のことです。バナーなら、背景の写真はラスター、上に乗せるロゴと文字はベクター。それぞれ得意なほうで作って、最後に1枚に書き出します。書き出す形式の選び方は画像形式の選び方にまとめています。

アウトライン化：文字を図形に変える

ベクターの話でセットで出てくるのがアウトライン化です。文字（フォント）を、図形に変換する操作を指します。

なぜ要るのか。データを開いた相手のパソコンに同じフォントが入っていないと、文字が別の書体に置き換わるからです。デザインが崩れて、文字数の多いところは配置までずれます。アウトライン化しておけば、文字はもう図形なので、フォントの有無に関係なく同じ形で表示されます。

アウトライン化すると、その文字はもう打ち直せません。だから必ず、アウトライン化する前のデータを別名で残してください。「ロゴ_編集用.ai」と「ロゴ_入稿用.ai」の2つを持つのが現場のやり方です。

印刷所への入稿では、アウトライン化が条件になっていることがほとんどです。誤字を1文字直すだけでも編集用データが要るので、残し忘れに気をつけてくださいね💡

ミニ実践：ロゴを拡大して差を見る

説明を読むより、1回自分の目で見たほうが早いです。5分で終わります。用意するのはブラウザだけ。

1. 好きな企業サイトを開いて、左上のロゴを右クリックし「画像をコピー」または「名前を付けて保存」を選ぶ。保存先の拡張子が.svgならベクター、.pngや.jpgならラスターです
2. PNGで保存できたロゴを、パソコンの標準の画像ビューアで開く
3. 表示を800%まで拡大して、文字のふちを見る。四角いマス目が並んでいるのが見えます
4. 次にブラウザに戻り、SVGのロゴがあるサイトでページ全体を拡大（Windowsは Ctrl と ＋、Macは command と ＋）する
5. 500%まで拡大しても、SVGのロゴだけふちがなめらかなままです
6. 2つを並べて見比べる。同じ「ロゴ画像」でも中身が違うと分かります

余裕があれば、PNGのロゴをそのまま縮小してみてください。縮小はきれいにできます。ラスターが苦手なのは拡大だけです。この非対称さを知っておくと、素材を受け取るときに「大きめでください」と言えるようになります。

確認できたか、チェックしてみましょう。

• 手元のロゴがラスターかベクターか、拡張子で判別できた
• ラスターを拡大したときのマス目を自分の目で見た
• ベクターは何倍でも崩れないことを確認した
• 縮小はラスターでも問題ないと分かった

やってしまいがちな失敗

小さいロゴを引き伸ばして使う

幅200pxのPNGロゴを、幅800pxのバナーいっぱいに広げる。これがギザギザの原因の9割です。
直し方は、ロゴをもらう時点でベクター（AIかSVG）も一緒に依頼すること。相手が持っていないなら、使う最大サイズを伝えてPNGを作り直してもらいます。

写真をベクターに変換しようとする

自動変換の機能はありますが、写真に使うと形の数が膨大になり、開けないほど重いデータができます。
直し方は、写真はラスターのまま扱うこと。ベクター化が向くのは、白黒のロゴや手書きの線画くらいです。

アウトライン化したデータしか残していない

誤字が見つかったときに、その1文字だけ直せません。作り直しになります。
直し方は、編集用と入稿用を別ファイルで残すこと。ファイル名の末尾に「_ol」を付けて区別すると分かりやすいです。

よくある質問

ラスターレイヤーとベクターレイヤーのどちらがいいですか？

描くものによります。線をあとから調整したい下描きやペン入れはベクターレイヤー、塗りや質感を出す工程はラスターレイヤーが向きます。
1つの作品で両方を使い分けるのが普通です。線画だけベクター、色はラスター、という分け方が扱いやすいですよ。

ベクターレイヤーの欠点は何ですか？

3つあります。線の数が増えると動作が重くなること、ぼかしや水彩のような柔らかい表現ができないこと、そして塗りつぶしやフィルターなどラスター向けの機能が使えないことです。
細かい質感を出したい絵だと、ベクターの利点より制約のほうが大きくなります。

PDFのベクターとラスターの見分け方は？

いちばん簡単なのは、PDFを開いて800%まで拡大する方法です。文字や線がなめらかならベクター、マス目が見えたらラスターです。
もう1つは文字を範囲選択してみること。ドラッグで文字が選べるならベクターの文字、選べないなら画像として貼られています。
PDFは1つのファイルの中にベクターとラスターが同居できるので、ページごとに違うこともあります。

ラスターをベクターに変換できますか？

変換の機能はありますが、元どおりにはなりません。輪郭を読み取って形を作り直すので、細かい部分は必ず崩れます。
白黒のロゴや線画なら実用になります。写真や複雑なイラストは、変換より描き直したほうが早くてきれいです。

次に学ぶこと

最後に整理します。

• ラスター（ビットマップ）：色のついた点の集まり。写真向き。拡大に弱い
• ベクター：線と塗りの設計図。ロゴ・文字向き。何倍でも崩れない
• 迷ったら「あとで大きく使うか」で判断する
• アウトライン化は文字を図形に変える操作。編集用データを必ず残す

仕組みが分かったら、次はデザインデータの基本へ。レイヤーの分け方と、用途別の書き出し方を扱います。データの受け渡しでつまずかなくなりますよ。

もらった素材を安心して使えるかどうかは著作権と肖像権の基礎で確認してください。全体の並びはデザイン基礎コースの目次から見られます。