　パソコンでデザインをしているとき、解像度やdpiについて言及されるときがありますよね。
　だけど、その肝心のdpiがイマイチ理解できない…。

そもそも解像度とdpiってなんなのかまったくわからない！

今回はそんな方のために「デザイナーに必須知識！　dpiと解像度についてのまとめ」をお伝えします！

デザイナーに必須知識！　dpiと解像度についてのまとめ

解像度とdpiって何？
1. よく聞く「画素」って何？　実は画素とピクセルは同じ！
2. 　dpiとppiの違い
印刷に適した解像度
Photoshopでの設定変更
1. 制作途中でのdpi変更
ディスプレイの解像度とは？
まとめ

解像度とdpiって何？

　解像度とは、デジタル化された画像の「密度」や「精度」を表すものです。
　スマホやデジタルカメラで撮影した画像を、フォトショップなどで拡大すると、小さな四角い点で写真ができていることが確認できます。

　この四角の点が「ドット」と呼ばれるものです。
　そして、このドットが１インチあたり、どのくらい集まっているか？　を表したのが

「dot per inch（1インチあたりのドット数）」

　略して、dpi…解像度と呼ばれています。

　ちなみに、1インチ=25.4ミリほど。
　WEBデザイナーさんがよく使う、電子モニターやスマホなどで使う「72dpi」の解像度は、１インチあたり72個のドットが集まっていることになります。

　dpiは、数値が高くなればなるほど画像がなめらかになり、繊細な表現となります。

　しかしながら、モニターやディスプレイでは72dpi以上のイメージ表現はできませんから、それ以上のdpiデータで画像を作成してもあまり意味がないですので注意しましょう。

　また、「ドット」と似た言葉で、「ピクセル」というものもあります。

　「ピクセル」も「ドット」も、パソコンやスマホで表示できる一番小さな点のことを表しています。
　しかし、ドットはあくまで１つの点を指し、ピクセルは色や画像の情報を持った点のことを指します。

　ちょっとややこしいですね。

　よく、ドットは「ハードウェア」であり、ピクセルは「ソフトウェア」という言い方をします。

　もっとわかりやすくカンタンにいいますと、ドットで表現できるものの中に、ピクセルがある感じです。

よく聞く「画素」って何？　実は画素とピクセルは同じ！

　よく、スマホやデジカメのうたい文句で「○○万画素搭載！」といいますよね。

　なんだかすごい感じがするけど、その画素ってなんだろう…？　と不思議に思った人も少なくないはず。

　実は、画素とピクセルは同じものなんです。

　英語と日本語みたいなもので、１０万画素搭載、というは１０万ピクセルの画像を扱える、という意味です。

　タテ：２５０ピクセル
　ヨコ：４００ピクセル

　で、250×400＝10万画素と意味になるのです。

　dpiとppiの違い

　dpiのほかに、よくppiという言葉も聞きますよね。

　ppiは、「pixel per inch」といい、PhotoshopなどのAdobeソフトでは、このppiを使っています。

　dpiとppiの違いは、

dpiは印刷に使うもの。
ppiはWEBに使うもの。

　といったイメージです。　

　しかし、ppiはAdobe以外のソフトでは使いませんし、世の中でもdpiで浸透していますから、ppiでデザインを指定されることはほぼないでしょう。

印刷に適した解像度

　画像解像度が低いと、印刷物はどうなってしまう？

　WEBでは、主に72dpiの画像イメージが使われます。
　しかし、印刷時にはもっと密度の高いdpiを使用しなければなりません。

　画像のdpiが低いまま印刷物をつくると、Photoshopなどで画像を拡大したときのように、印刷物が荒く、ピクセルの部分がギザギザした表現でプリントされてしまいます。

　そのため、印刷物をつくるときは、かならずその表現媒体に見合ったものをつくる必要があります。

　各印刷物の必要dpi

表現媒体	必要dpi
WEB	72dpi
ポスター	200dpi
カラー印刷	350dpi
モノクロ印刷（グレースケール）	600dpi
モノクロ印刷（白黒２階調）	1200dpi

各印刷物の必要解像度

　Webなどのスクリーンでは、解像度は72dpiでキレイに表示することができます。
　ですが、画面上ではキレイに見えていても、印刷物向けではありません。

　むりに印刷をすれば、画像が粗くなり、仕上がりが妙にぼかしがかって美しくない表現になってしまいます。

　カラー印刷はおおよそ350dpiで設定します。
　ハガキやパンフレット、チラシなどもすべて350dpiです。

　しかし、同じカラー印刷でもポスターは別です。
　ポスターのdpiは200dpiと低め。

　理由は、ハガキやパンフレット、DMなどは実際に手にとれる距離の印刷物であるため、より美しくなめらかな表現が必要であるのに対し、ポスターは遠くから視認することがおおく、多少荒くてもキレイにみえるから、という理由があります。

　以外にもdpiの高さが必要なのは、モノクロ印刷です。

　モノクロ印刷は、パソコンの設定上、白と黒・グレーを含め256色しか指定できません。
　そのため、その256色でなめらかで美しいグラデーションを作成するには、１dpiのドット数を増やさないといけないことになります。

　実際に、256色以下に落としたgif・png画像をみるとイメージしやすいかもしれません。

　モノクロ2階調は白と黒の2色しかないので、グレースケール以上にドット数を増やすことで美しくみせなくてはならないのです。

　印刷サイズの計算方法

　実際に、印刷物をつくるさいの画像サイズを計算してみましょう。

　印刷物を作るときに適した計算式は、

ピクセル数（px） ÷ 解像度（dpi） × 25.4mm ＝ 印刷サイズ（mm）

　となります。

　例として、ハガキサイズの印刷物を作る場合、

例）
タテ　2039(px) ÷ 350(dpi) × 25.4 ≒ 148(mm)
ヨコ　1378(px) ÷ 350(dpi) × 25.4 ≒ 100(mm)

　のピクセル数が必要になります。

　WEB用画像の印刷物変換

　私たちがよく使う、Web用の72dpiの画像を印刷物用の350dpiへと変更する場合、ピクセルサイズが求められます。

Web用ファイル

72dpi：283x420 px

カラー印刷ファイル

350dpi：2039×1378 px

　ウェブ用画像をカラーの印刷物として作るには、約５倍のサイズが必要になります。

　大きめの画像でしたら、プリントしてもキレイに印刷されますが、小さい画像を使うとどうしても荒い画像になってしまうので注意しましょう。

印刷サイズ一覧表

印刷物	mm	350dpi (px)
ハガキ	100mm×148mm	1378px*2039px
A4	210mm×297mm	2894px*4093px
A5	148mm×210mm	2039px*2894px
A6	105mm×148mm	1447px*2039px
B4	257mm×364mm	3541px*5016px
B5	182mm×257mm	2508px*3541px
B6	128mm×182mm	1764px*2508px

印刷物とdpiのサイズ

Photoshopでの設定変更

　Photoshopで解像度を変更するやり方を見てみましょう。

ファイル→新規

　を選択します。

　赤枠の解像度の部分を、印刷物に合わせて変更しましょう。

制作途中でのdpi変更

イメージ→画像解像度

　を選択します。

　解像度を印刷物に合わせて変更して完了です。

ディスプレイの解像度とは？

　パソコンのモニターやディスプレイにも解像度が存在します。
　よく使う比率は、4:3や16:9などの比率で、この解像度はdpiではなく、画像サイズのことを指します。

　ここでは、WEBデザイナーさんがよく使う「解像度・サイズ」を学んでいきましょう。

解像度(サイズ)	タテ・ヨコ比率	名称
320×240	4:3	QVGA	旧Android
640×480	4:3	VGA	解像度名の基準
800×600	4:3	SVGA	windows95/98
1024×768	4:3	XGA	iPad 旧ディスプレイ
1280×720	16:9	HD	ハイビジョン一部Android/iPhone
1440×1080	4:3		地上デジタル
1600×1200	4:3	UXGA (Ultra-XGA)	Windows XP
1920×1080	16:9	2K/FHD(Full-HD)	現在のモニターで主流
3840×2160	16:9	4K/UHD	４K放送
7680×4320	16:9	8K/SHV	SHV スーパーハイビジョン