Web・印刷に合った画像解像度は?Photoshopの設定方法も紹介


Web・印刷に合った画像解像度は?Photoshopの設定方法も紹介

あなたはPhotoshopやIllustratorを使ってデザインを制作する際、画面解像度を理解して設定していますか? 

「よくわからないけれど、いつもこの設定で使っている」という方も多いのではないでしょうか。 

実は印刷物やWebにおいて、画面解像度を間違って設定してしまうとデザインが台無しになってしまう可能性があります。 

そこでこの記事では用途に合わせて正しい画面解像度を設定できるように、画像解析度の基礎知識や用途に合った解像度、設定時の注意点をご紹介します。 ぜひ最後までご覧ください。

目次
  1. 画像解像度とは? 
  2. 画像解像度と間違いやすい画素数とは 
  3. 画像サイズとは? 
  4. Web・印刷に最適な解像度とは 
  5. Webに最適な解像度=72dpi 
  6. ポスターに最適な解像度=200dpi 
  7. 印刷物に最適な解像度=350dpi 
  8. Photoshopで解像度設定の方法 
  9. 新規作成時に設定する場合 
  10. 解像度をあとから変更する場合 
  11. 画像解像度設定時の注意点 
  12. 1.解像度が高いほどファイルサイズが大きくなる 
  13. 2.解像度を低くした画像は元に戻せない 
  14. 用途に合わせた解像度を設定しましょう 

画像解像度とは? 

画像解像度とはデジタルデータ化して表示している画像の精密さのことであり、1インチ(2.54cm)の中のピクセル数をdpi(ドットパーインチ)、またはppi(ピクセルパーインチ)という単位で表示します。 

パソコンで画像を表示して、限界までズームアップしてみてください。 小さい四角形が無数に並んでいるのが確認できるでしょう。 

画像はピクセルと呼ばれる小さい四角形(ドット)が集まって構成されており、1つの画像の中に含まれるピクセルの数によって画質が左右されます。 

ピクセル一つひとつが大きければ荒い画像になり、小さいピクセルで構成されていれば密度が上がり精密な画像として表示されるのが特徴です。 

画像解像度と間違いやすい画素数とは 

スマートフォンやカメラのスペックで「画素数」という言葉を聞いたことがありませんか? 

この画素数は画像解像度ではなく、ピクセルと同じものを指しています。 

例えば1200万画素のカメラの場合、1200万個のピクセルが並んでいる画像が撮れます。 

ピクセルが詰まっていれば詰まっているほど精密な画像になりますが、ピンボケをした写真の場合も鮮明ではありませんが画素数は変わりません。 

ボケた写真=画素数が低いというわけでないため注意が必要です。 

画像サイズとは? 

画像サイズとは、縦横それぞれに並ぶピクセル数で示している大きさのことをいいます。 

例えば400×300という画像サイズの場合、横に400ピクセル・縦に300ピクセルが並んだ画像です。 

つまり、「ピクセルがどれだけ詰まっているかという密度=画像解析度」によって画像サイズが決まっています。 

Web・印刷に最適な解像度とは 

解像度が高ければ鮮明な画像になるからといって、大きな数字を設定していればいいというわけではありません。 

  • Web
  • ポスター
  • 印刷物 

上記の3つに分けて、それぞれの用途に最適な解像度とその理由をご紹介します。 

Webに最適な解像度=72dpi 

Webのみで利用し、印刷する必要がないデータの場合は72dpiで問題ありません。 

これは解像度の高い画像であっても、実際にはパソコンやスマホのディスプレイの解像度に依存することから、72dpiの画像と変わらないためです。 

しかし72dpiでは印刷した際に十分な解像度ではないため、Web用の画像を印刷に流用することはおすすめできません。 

ポスターに最適な解像度=200dpi 

印刷物の中でも、ポスターのように遠くから見られる画像の場合は200dpiで問題ありません。 

ポスターは大きく印刷されることが多く、画像サイズが非常に大きい場合もあります。 

解像度を高くするとデータサイズが膨大になってしまい、作業の効率が著しく落ちてしまうため200dpi程度の設定がおすすめです。 

印刷物に最適な解像度=350dpi 

印刷物の場合、フルカラー印刷は350dpi〜400dpiが最適です。 

しかしモノクロ印刷の2階調モードの場合は白と黒の2色で表現するため、350dpiでは輪郭が滑らかにならずギザギザになってしまいます。 

モノクロ2階調モードで印刷する際は、さらに高い1200dpiの解像度がおすすめです。 

印刷物の解像度はあくまでも目安であり、印刷の質を保証するものではありません。 

印刷物の用途や今後の展開に合わせて、最適な解像度を選んでください。 

202106キャンペーン

Photoshopで解像度設定の方法 

Photoshopでデザインを新規作成する際や、すでに作成しているファイルの画像解像度の設定方法をご紹介します。 

新規作成時に設定する場合 

image 

メニュー内の「ファイル」から「新規」を選択すると、新規ドキュメントの設定が表示されます。 

ここで画面の右側に表示されているプリセット詳細の「解像度」が画面解像度です。 

Web用のデザインを制作するなら72、印刷物の場合は350以上の数字を設定しましょう。 

解像度をあとから変更する場合 

例えばWeb用に72dpiで制作しているデザインファイルを、印刷用に350dpiに変更しなければならないとします。 

1.現在の設定を確認する 

image 

メニュー内の「イメージ」から「画像解析度」を選択すると、解像度の詳細情報が表示されます。 

image 

「解像度」と表示されている数値が、現在のデザインファイルの解像度です。 

2.解像度を変更する 

image 

先ほど開いた解像度の詳細情報画面で数値を変更します。印刷用の350と入力すると、画像サイズも合わせて変化します。 

同じ画像であっても、画面解像度が高くなればデータサイズが大きくなることも確認できるでしょう。 OKボタンをクリックすれば解像度の変更完了です。 

画像解像度設定時の注意点 

画面解像度を設定するときに注意してほしい点を2つご紹介します。 

1.解像度が高いほどファイルサイズが大きくなる 

解像度が高いほど、画像の中に含まれるピクセル数が増えてデータサイズが大きくなります。 

そのためデザインファイルのサイズが大きくなり、デザイン編集・印刷といった作業において負担になる可能性があるため注意が必要です。 

Webのみで利用する画像の場合、画像のデータサイズが表示速度にも影響します。画像サイズを小さくするといった対応を検討してください。 

2.解像度を低くした画像は元に戻せない 

解像度は非可逆性といって、一度解像度を低くした画像から高い解像度の画質に戻すことはできません。 

数字上では350dpi→72dpim→350dpiと変更可能ですが、実際に最初の350dpiだった状態に戻すことはできませんのでご注意ください。 

Web専用の画像であれば影響はありませんが、印刷物の場合はデザインが台無しになる可能性もあります。 

設定変更をする際には十分にご注意ください。 

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

用途に合わせた解像度を設定しましょう 

画像解像度とは、Webや印刷物といったデザインの利用用途に合わせて設定する大切な要素です。 

  • Webから印刷物に利用することはないのか?
  • 印刷物の利用用途は?
  • ポスターのような遠くから見るものなのか? 

このようにどのように利用するデザインなのか、全体の設計を確認して最適な数値を設定してください。 

解像度を正しく理解し、あなたのデザイン制作に活かしてください! 


関連記事

今村真理子
この記事を書いた人
今村真理子
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp