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

Illustrator

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

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


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

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

解像度とdpiって何?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 タテ:250ピクセル
 ヨコ:400ピクセル

 で、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
WEB72dpi
ポスター200dpi
カラー印刷350dpi
モノクロ印刷(グレースケール)600dpi
モノクロ印刷(白黒2階調)1200dpi
各印刷物の必要解像度

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

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

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

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

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

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

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

 実際に、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

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

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

印刷サイズ一覧表

印刷物mm350dpi (px)
ハガキ100mm×148mm1378px*2039px
A4210mm×297mm2894px*4093px
A5148mm×210mm2039px*2894px
A6105mm×148mm1447px*2039px
B4257mm×364mm3541px*5016px
B5182mm×257mm2508px*3541px
B6128mm×182mm1764px*2508px
印刷物とdpiのサイズ

Photoshopでの設定変更

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

ファイル→新規

 を選択します。

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

制作途中でのdpi変更

イメージ→画像解像度

 を選択します。

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

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

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

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

解像度(サイズ)タテ・ヨコ比率名称
320×2404:3QVGA旧Android
640×4804:3VGA解像度名の基準
800×6004:3SVGAwindows95/98
1024×7684:3XGAiPad
旧ディスプレイ
1280×72016:9HDハイビジョン
一部Android/iPhone
1440×10804:3地上デジタル
1600×12004:3UXGA (Ultra-XGA)Windows XP
1920×108016:92K/FHD(Full-HD)現在のモニターで主流
3840×216016:94K/UHD4K放送
7680×432016:98K/SHVSHV スーパーハイビジョン
解像度サイズ

まとめ

  • dpiとは、1インチあたりの中にあるドットの数を表す
  • 転じてdpiとは画像がどれだけなめらかで精密かを表す
  • ピクセルと画素はおなじもの
  • WEBのdpiは72・カラー印刷は350・モノクロは600~1200dpi
  • 印刷サイズはWEB画像の約5倍
  • ピクセル数(px) ÷ 解像度(dpi) × 25.4mm = 印刷サイズ(mm)

 ここまでお読みくださり、ありがとうございます!

 ポッケモッケイラスト研究所では、Adobeソフトやクリスタの使い方など、デザイン制作に役立つ小ネタを提供しております。

 これからもみなさんの御役に立てる情報を提供していきますので、よろしければフォローなどしていただければ嬉しくおもいます!

タイトルとURLをコピーしました