アイキャッチ・サムネイル画像作成に役立つデザインの基礎知識

9月 23, 2021

dpi、RGB、jpg、png…何となく知ってるつもりでも、実はよく分からないまま画像を作っていませんか？解像度やファイル形式など、デザイン・制作に必要な色と画像の基礎知識をまとめてみました。

画像のファイル形式

JPGやPNGなど様々なファイル形式があり、目的や用途に合わせて使い分けています。 Webサイトで主に使用するのはjpgファイルとpngファイルです。

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

画像は主に「ビットマップ画像」と「ベクター画像」（ベクトル画像）に分けられます。大まかに言うと、写真は「ビットマップ画像」で、ロゴやイラストの作成には「ベクター画像」が適しています。

ビットマップ画像

色のついた点（ピクセル）の集まり。滑らかな色の描写などが得意。
拡大すると画質が劣化する。

ベクター（ベクトル）画像

点と線（パス）の情報をコンピュータが処理して再現しているため、拡大・変形しても画質が劣化しない。

	ビットマップ画像（写真など）	ベクター画像（ロゴ・イラストなど）
画像の再現方式	ラスタ形式。ピクセルと呼ばれる、色の付いた点が集合して画像を構成している。	ベクタ形式。形を構成する「点」の座標と、それらを結ぶ線の情報を記憶して画像を再現している。
利点	グラデーションのような、複雑な色調変化の表現が可能。	拡大・縮小・変形しても画質が劣化しない。（一般的にビットマップ画像よりも）データ容量が軽い。
欠点	拡大・縮小・変形により画像が劣化する。データ容量が重くなる。	写真のような複雑な描画や色彩表現には適さない。
ファイル形式	JPEG・GIF・PNG ・ TIFF など	SVG・AI・EPS など

Webで使用できるファイル形式

JPG

一般的に、写真など複雑な色の階調を持つ画像の保存に適している。圧縮率が高い非可逆圧縮形式で、ファイルサイズを縮小できる。画質に応じた圧縮率を選ぶことができる。

PNG

Webで広く利用されている。透明部分の保持や、透過率の指定を行うことができる。写真の場合、JPEGと比較するとファイルサイズが大きくなる傾向がある。

SVG

ベクター形式なので画質が劣化せず、web上でCSSやJavaScriptを使ったアニメーションなど複雑な表現も可能だが、~~現状対応ブラウザに制限がある。~~※
※2023現在全ての主要ブラウザは対応済み

GIF

色数の上限があり、256色までしか再現できない。透明部分を保持できる、アニメーションにできる、などの特徴があるが現在あまり使われていない。

画像を書き出す際に圧縮率を上げるとファイルサイズを軽量化できますが、その分画質は劣化してぼやけてしまいます。

PNG画像は部分的に透明にすることができるので、写真や色のついた背景の上に配置するデザインが可能になります。

編集可能なデザインデータのファイル形式

共同編集する時など必要になります。
静止画の場合、一般的にはPSDファイルやAIファイルのことを指します。

PSD

Adobe Photoshopの基本的なファイル形式。テキストやレイヤー、各エフェクトなどの設定を編集可能な状態で保存できる。
※ 作業用データなので、このままではWebサイトで使用できない。JPGやPNGなどのファイル形式に書き出す必要がある。

Adobe Illustratorの基本的なファイル形式。テキストやパス、レイヤーなどの設定を編集可能な状態で保存できる。
※ 作業用データなので、このままではWebサイトで使用できない。JPGやPNGなどのファイル形式に書き出す必要がある。

Photoshop、Illustratorいずれもテキストの扱いには注意が必要です。
使用されているフォントが自分の環境に無い場合は、ファイルを開く際に別のフォントに置き換えられてしまい、デザインを正確に再現できず、編集もできません。そのため、特殊なフォントを使用している場合などは、該当するテキスト部分をアウトライン化し、文字データではなくシェイプオブジェクトとして扱えるようにしておく必要があります。

画像の解像度

dpi(ドット・パー・インチ)※で表される、1インチの中に含まれるピクセルの数値です。数値が大きいほど密度が高く、鮮明な画像になります。 Webサイトで使用する画像は一般的に72dpiです。印刷物は高解像度の画像を使用しており、一般的に350dpi以上必要になります。 ※ppi（ピクセル・パー・インチ）とも表記される

画像をリサイズする場合、拡大すると画質が劣化するため（拡大の程度にもよりますが）実質拡大して使用することはできません。
解像度を上げる処理（例：72dpi→350dpi）も同じことです。
そのため、写真の場合は予め用途に合わせたサイズの画像を手配する必要があります。
※ベクターデータの場合は元のサイズに関係なく拡大・縮小できます。

色について

色の表現方法は大まかに言うと『光の色』と『印刷の色』に分けられます。『光の色=RGB』は光の3原色であり、『印刷の色=CMY』は色料の3原色です。それぞれ3つの原色を混色して様々な色を再現しています。

RGB（モニターなどの色）

R（レッド）
G（グリーン）
B（ブルー）

RGBをそれぞれ100%で混色すると白になる。

CMY（印刷物などの色）

C（シアン）
M（マゼンタ）
Y（イエロー）

CMYをそれぞれ100%で混色すると黒*になる。

* 理論上は黒になるが、実際の印刷では綺麗な黒を再現できないので、もう1色『K（ブラック）』のインクを追加して『CMYK』として使用するのが一般的。

主な色表記

webサイトや動画、印刷物など、媒体が違うと色の指定方法も異なります。Webの場合はHEX値、またはRGB値で色を指定します。

RGB

RGBの値を左から順に並べて表記する。
例：(70, 190, 0)

HEX

6桁の16進数で色を表現する。Webで一般的に使用される。
例：(#6259ff)

CMY+K

印刷物などに使用されるプロセス色分解。CMY+K（ブラック）の値を左から順に並べて表記する。
例：（C:0 M:50 Y:100 K:0）

特色

印刷物において、CMYKで表現できない色を特別なインクで指定する。
例：（DIC-50）*
*DICカラーとはDIC株式会社の色見本

RGBの画像ファイルを使用して印刷用データを作成する場合、カラープロファイルを変換（RGB→CMYK）すると、色が置き換えられてしまうので注意が必要です。（特に青緑の領域はくすんでしまう傾向がある）

（2022.06.01追記）
本格的な印刷用データを作成する場合は、Photoshopなどで近似色に色補正をする必要があります。
さらに蛍光色などの特殊な色はCMYKでは表現できないため、特色と呼ばれるCMYK以外のインクを使用することになります。
いずれにせよ正確な色表現にこだわった印刷用データの作成にはPhotoshop、Illustratorなどの使用が前提になるため、家庭用プリンターなどで簡易印刷する場合には『モニターの色をそのまま印刷で正確に再現することはできない』ということだけ覚えておきましょう。