「解像度が高い（＝画素数が多い）画像データを支給してください。」と、お願いされたことは、ありませんか？
印刷もWEBでも、制作現場では、画像データを扱う際に、「解像度」に配慮します。ご支給いただくデータは、高解像度であるほど加工しやすく、解像度が不足した画像は、ボヤけた印象の写真になり、人物や文字などが認識できなくなってしまうことがあります。どんな解像度で写真データを用意すればよいか、本記事でご案内します。
解像度の単位とその意味
画像データは、「ピクセル」という点の集まりです。ピクセルは画素と呼ばれ、画像データの最小単位です。解像度とは、画像の面積中にピクセルが何個並んでいるかで決まる、画像データが持つ情報量の多さです。
カラー印刷用途に最適な解像度は、300 dpi （ディー・ピー・アイ）から 350 dpi とされています。この dpi （ディー・ピー・アイ）が、解像度の単位です。
dpi は、” dots per inch “の頭文字で、１インチ（ 2.54センチ ）の中に、「ドット＝（画素）」が、何個並んでいるかを表します。300 dpi であれば、縦横 2.54 センチ（１インチ）角で印刷される、縦 300 ピクセル × 横 300 ピクセル ＝ 9万 ものピクセルが並んでいる写真画像が持っている解像度です。
一方、WEB制作では、スマートフォンや、高解像度やワイドなスクリーンも登場するなど、印刷と違ってあらかじめ設定したサイズでの制作ができません。ですから、これといった解像度設定の決まり手がありません。これに近い表現として ppi（ pixcel per inch ＝ ピー・ピー・アイ）という単位を使うことがあるのですが、この ppi の方は、PCやスマートフォンのスクリーンで何画素でできているかといった、ハードウエアスペック上の解像度です。
実際のWEB制作の現場では、画像データを、ppi という解像度で確認することは、ほとんどありません。後ほどご説明します、レスポンシブデザインという手法を用いて、スクリーンサイズ別に、何ピクセルで見せたらきれいに見えて、容量負荷もかからず最適なのかで、画像の大きさ＝ピクセル数を設定します。
解像度設定における間違いやすいポイント
印刷でもWEBでもデザインするソフトウエア（Adobe社製のアプリケーション）では、大きさを自由に配置できます。もともと写真画像が持つ最適な解像度での「配置サイズ」が決まります。写真データの容量だけで解像度設定はできないことが、解像度設定における間違いやすいポイントです。
例えば、５センチ角で 300 dpi の写真データがあったとします。この写真を、10センチ角に引き伸ばして紙面にデザインしたとすると、写真の解像度は、半分の150dpi になってしまい、最悪の場合、写真がボケて見えます。WEBサイト用画像データも同様で、元画像が 300ピクセル角の画像を600ピクセル角で書き出すことができ、データ容量も増えますが、もともと300 ピクセル角分の色情報が増えるわけでなく、同色の１ピクセル分がコピーされて大きく見えるだけで、これを 600 ピクセル角で表示した場合にもボヤけ問題が起きる可能性があります。
つまり、印刷でもWEBでも、「最終的なサイズ／ピクセル数」で、画像の精度が決まるのがポイントです。元のデータの解像度が不足している場合は、写真がボケることなどを了承していただかなければなりません。
また、印刷の手法によって最適な解像度が異なります。上記の300 dpi 以上といった解像度の設定は、カラーのオフセット印刷のデザインデータでの説明でした。無版のオンデマンドデジタル印刷、ポスター印刷など大判サイズの印刷では、それほど解像度を必要としていません。オンデマンド印刷機はメーカーによって推奨解像度が異なり、一概にいえませんが、150 dpi 程度でも十分な品質が得られます。
また、ポスターなど大判の印刷では、数メートルの距離から見て認識するもので、一例として、B0 サイズ程度のポスターでは、120 dpi 〜 200 dpi でも十分です。高品質に印刷したいと解像度を高めに設定したとしても、データ容量が巨大化して出力スピードも遅くなり、納期に影響を及ぼすほど逆効果です。事前に、担当者に確認しておくとよいでしょう。
Windows PCでピクセル数を確認する方法
ご存知の方も多いかと思いますが、Windows マシンで画像の画素サイズを確認する簡単な方法をご紹介します。
Windows のデスクトップ上の画像ファイルをマウスの右クリックで選択すると、コンテキストメニューが表示されます。コンテキストメニューの「プロパティ」を選択します。下図の様なダイアログボックスが出ますので、スクロールしながら、「イメージの大きさ、高さ、幅」でピクセル数が確認できます。（「解像度」は、画面表示での目安ですので、印刷する際の解像度ではありません。）
印刷に適した解像度
先ほどの通り、印刷で最適な 300 dpi の解像度では、１インチ（ 2.54 センチ）に300個の画素が並んで表現されます。300 dpi では、最小単位の１ピクセルが、約 0.085 ミリという、とても小さな点の集まりですので、自然な階調に見えます。仮に、解像度不足した写真データを印刷した場合は、製版工程で自動的に補正がかかりますが、ボヤけた写真の仕上がりになってしまいます。
解像度が高いほど、その写真データの容量は増えます。例えば、L サイズ( 127 x 89 mm )の画素数は、 1.5 メガピクセルで、データ容量は、約 18 MBです。JPEG 形式では、サイズが圧縮されますので、実際にはかなり小さくなりますが、使用サイズや種類が多くなった場合、メール添付では送付できないことがわかります。
WEBに適した解像度は「ピクセル数」で設定
WEBサイト制作では、解像度の考え方は、少々複雑です。というのも、PCやスマートフォンのスクリーンサイズも高解像度化・多様化しているため、一定画質での表示が難しいからです。スクリーンサイズが異なること、つまり、同じ画像でもスクリーンサイズによって大きくも小さくもなります。そこで、WEB制作では、PCやスマホのスクリーンサイズの「最大公約数」から、できるだけ多くのお客様にとって最適な画像サイズをターゲットにWEBページをピクセル単位でデザインします。
ちなみに、自社のホームページに訪れたユーザーのスクリーンサイズは、Google Anarytics 等のアクセス解析ツールで計測できます。
現在主流のPCやテレビなどのディスプレイの画素数は、フルハイビジョンと呼ばれる、横 1,920 × 縦 1,080 ピクセル。WEBサイトの場合、表示したい大きさのピクセル数で画像を制作するのが最適です。解像度が高い写真の画像データでも、スクリーンの画素数以上の細かさでは表示されません。したがって、無駄に解像度が高い写真画像は、表示に時間がかかったり、余計なデータ量の通信が発生してしまいます。
「レスポンシブデザイン」では画像サイズが変化
WEB制作では、「レスポンシブデザイン」というスクリーンサイズに応じて画像サイズが最適化される技法を使います。レスポンシブデザインでは、同一のWEBページの画像であってもPC向けとスマホ向けの２種類を用意して、ブラウザがスクリーンサイズに応じてどちらかを表示します。
さらに、WEB制作の解像度設定を複雑化させているのが、iPhone にも採用されているApple 社のRetinaディスプレイです。Retinaディスプレイは、2,880×1,800ピクセルと、フルハイビジョンサイズの２倍近くの解像度で画像を表示できる高精細なディスプレイです。
スマートフォンユーザーの半数以上が iPhone ユーザーといいますから、スマートフォンユーザーをターゲットにするWEBサイト制作では、iPhone 向けに二倍の解像度を持った画像を用意して、最適化させる必要があるのです。Retinaディスプレイで、解像度が不足した画像を表示すると、少しボヤけた印象になってしまい、商品の写真などはその画像のピクセル数には配慮が必要です。
「解像度について」のまとめ
最適な解像度設定も重要ですが、それだけでは、画像品質を担保できないことがおわかりいただけたでしょうか。以下、簡単おまとめます。
- 「最終のアウトプットサイズ」で解像度が変化する
- カラーのオフセット印刷向けには、「300 dpi 以上の解像度」が必要
- PODや大判印刷など「印刷方式」によっても最適な解像度は異なる
- WEB制作では、スクリーンサイズに最適な「ピクセル数」を設定する
- iPhone ユーザーに向けた商品画像は、「二倍の解像度の画像」が必要
以上 最後まで読んでいただき、ありがとうございます。