ウェブデザイナーが理解しておきたい「2つの解像度」（前編）

デザイン制作の中で「解像度」ということばを耳にすることがあると思います。よくわからない…なんとなく理解はしてるけど説明はできない…という方のために、ウェブデザイナーが理解しておきたい「2つの解像度」のうち、「ピクセルがいくつあるのか」という「画像解像度」についてご説明します。

ベクターとラスター

わたしたちが普段触れるグラフィックツールや画像ファイルは「ベクター」か「ラスター」どちらかになります。その違いはこんな感じ。

ベクターは「アンカーポイント」と呼ばれるポイントの座標を記録し、そのポイントを結んで線や塗りを描画します。ラスターはピクセル一つずつに色を塗って描画します。ベクターはアンカーポイントの場所や線や塗りの情報だけを記憶しているので、ファイルサイズは軽くなることが多く、ラスターはピクセルそれぞれに色があるため、ピクセルが多くなる・色数が多くなるとファイルサイズが重くなっていきます。

よく使うところで説明すると、Illustrator／Figma／XDは「ベクター」、Photoshopは「ラスター」のグラフィックツールです。

ウェブでよく利用する画像形式もベクター、ラスター、いずれかに分類できます。簡単に特徴をまとめました。

ウェブデザイナーが理解すべき「1つ目の解像度」とは？

ウェブデザイナーが意識すべき「1つ目の解像度」とは、「画像解像度」です。ここで言う画像解像度は「その画像はピクセルが縦横いくつあるのか」ということです。ラスター画像は、いわば規模の大きなドット絵なので、使えるピクセルがたくさんあれば、精細な表現ができます。

Photoshopで新規ドキュメントを作成する際、幅と高さを指定します。これが画像解像度です。

この画像解像度はラスターにのみ関係のある話です、ベクターの世界にはそもそもピクセルは関係ありません。

ピクセルの情報はとても失われやすい

ラスターはピクセルを一つずつ塗りつぶしている、というお話をしました。この「ピクセルを塗りつぶしている情報」はとても失われやすいです。例えば、Photoshopでカラーの写真をモノクロに変更するということは、カラーだったピクセルの色を全て白・グレー・黒に塗り替えているということで、「カラーの情報が失われた」とも言えます。他にも、サイズを変更することでもピクセルの情報は失われます。

一度失った情報は取り戻すことができません。そのため、Photoshopでは、調整レイヤーやスマートフィルターを使って「ピクセルの情報を保ったままフィルターをかけて白黒にする」といったことや、「スマートオブジェクト」を使って、サイズを変更してもピクセルの情報を失わない機能を備えています。

ベクターとラスターは別世界

「えっじゃあIllustratorやFigmaで画像をサイズ変更してるけど、あれってピクセルの情報を失っているの？」と慌てたみなさん、安心してください。

ベクターとラスターは全く違う別の世界です、ベクターツールであるIllustratorに、ラスターのPNGを配置して縮小したとしても、それは「ピクセルの情報を失った」ことにはなりません。
試しに、Illustratorに配置したPNG画像を縮小してみましょう。

リンクパネルを確認すると、画像解像度は変わらず、サイズを10％に縮小して表示させているだけ、ということがわかります。Illustratorのようなベクターツールにとってのラスター画像は、こんな感じの存在だと考えるといいと思います。

注）Illustratorでも「ラスタライズ」の機能を使って、画像解像度を変更することはできます。ここでは、バウンディングボックスやプロパティから「サイズを変更」しても画像解像度は変わらないということを書いています。

ここまでのまとめとしては、
・「画像解像度」とはピクセルがいくつあるのかということ
・「画像解像度」はラスターにしか関係ない
・「画像解像度」を変更できるのはPhotoshopのようなラスターツールだけ

ファイルの書き出し時の注意

Illustrator、Photoshop、Figmaなどで作成したデザインは、そのままウェブサイトやバナーに使用できませんので、ブラウザで表示できる画像形式に書く出す必要があります。冒頭で出てきたこちらの表を見てみましょう。

書き出す画像のファイル形式にも、ベクターとラスターがあります。例えばIllustratorで作成したバナーを書き出す場合は、「ベクターツールに配置したラスター画像をラスター形式として書き出す」といった頭がこんがらがりそうな状況になります。

IllustratorでデザインしたものをJPGやPNGで書き出したとき、文字などがガタガタ見える、と思ったことはないでしょうか？これはベクターツールのIllustratorからラスター画像として書き出したから起こることです。

ベクターツールで制作していると、ラスター画像で書き出す時のことが頭から抜けて、小さすぎる文字や写真を使ってしまうこともあります。ベクターツールには「ピクセルでプレビューする」機能が備わっていることがあるので、それを使って「ラスターで書き出した時の見え方」を確認しながら作成するのがおすすめです（重くなりがちなので確認時のみ推奨）。

「スマホ用に2倍で書き出して」で注意すること

スマートフォンやRetinaディスプレイなど、高解像度なモニターで表示させることが多くなった最近、「画像を2倍サイズで書き出して」という指示を受けることが多くなったと思います。この時、どのようなことに気をつければいいでしょうか。ここまで読んでくださった方ならもう理由はわかると思いますので、結論だけお伝えします。

Illustrator、Figmaなどベクターツールの場合は、配置した元のラスターの大きさが大事です。配置した画像をサイズ変更しても、画像解像度は変わりません（ピクセルは減りません）。2倍サイズで書き出す場合は、元のラスターの大きさを超えなければ問題ありません。

ラスターツールの場合は、そのままサイズ変更すると、それで画像解像度が変わってしまいます（ピクセルが減る）。Photpshopの場合、「スマートオブジェクトに変換）すると、元のラスター画像を保存しておいてくれるので、スマートオブジェクトをサイズ変更をしてもピクセルは減りません。書き出す際は、スマートオブジェクトに保存された元のラスターの大きさを超えなければ問題ありません。

ちなみに、2倍サイズで書き出す前提であれば、そもそも2倍サイズで作ればいいんじゃない？という考え方もありますが、わたしは下図で言うと（２）を選びます。なぜなら文字サイズなどが半分になることを想定して作るのが難しいと感じるからです。（１）でうまくいく方はそれでもOKだと思います。

次回に続く

かなり長くなってしまいましたので、前後編に分けることにしました。次回は「解像度（ppi）」について書きたいと思います。