「よくわからないけれど、いつもこの設定で使っている」という方も多いのではないでしょうか。実は印刷物やWebにおいて、画面解像度を間違って設定してしまうとデザインが台無しになってしまう可能性があります。そこでこの記事では用途に合わせて正しい画面解像度を設定できるように、画像解析度の基礎知識や用途に合った解像度、設定時の注意点をご紹介します。最後までご覧ください。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。画像解像度とはデジタルデータ化して表示している画像の精密さのことであり、1インチ(2.54cm)の中のピクセル数をdpi(ドットパーインチ)、またはppi(ピクセルパーインチ)という単位で表示します。パソコンで画像を表示して、限界までズームアップしてみてください。小さい四角形が無数に並んでいるのが確認できるでしょう。画像はピクセルと呼ばれる小さい四角形(ドット)が集まって構成されており、1つの画像の中に含まれるピクセルの数によって画質が左右されます。ピクセル一つひとつが大きければ荒い画像になり、小さいピクセルで構成されていれば密度が上がり精密な画像として表示されるのが特徴です。この画素数は画像解像度ではなく、ピクセルと同じものを指しています。1200万画素のカメラの場合、1200万個のピクセルが並んでいる画像が撮れます。ピクセルが詰まっていれば詰まっているほど精密な画像になりますが、ピンボケをした写真の場合も鮮明ではありませんが画素数は変わりません。ボケた写真=画素数が低いというわけでないため注意が必要です。画像サイズとは、縦横それぞれに並ぶピクセル数で示している大きさのことをいいます。400×300という画像サイズの場合、横に400ピクセル・縦に300ピクセルが並んだ画像です。「ピクセルがどれだけ詰まっているかという密度=画像解析度」によって画像サイズが決まっています。解像度が高ければ鮮明な画像になるからといって、大きな数字を設定していればいいというわけではありません。上記の3つに分けて、それぞれの用途に最適な解像度とその理由をご紹介します。Webのみで利用し、印刷する必要がないデータの場合は72dpiで問題ありません。これは解像度の高い画像であっても、実際にはパソコンやスマホのディスプレイの解像度に依存することから、72dpiの画像と変わらないためです。72dpiでは印刷した際に十分な解像度ではないため、Web用の画像を印刷に流用することはおすすめできません。印刷物の中でも、ポスターのように遠くから見られる画像の場合は200dpiで問題ありません。ポスターは大きく印刷されることが多く、画像サイズが非常に大きい場合もあります。解像度を高くするとデータサイズが膨大になってしまい、作業の効率が著しく落ちてしまうため200dpi程度の設定がおすすめです。印刷物の場合、フルカラー印刷は350dpi〜400dpiが最適です。モノクロ印刷の2階調モードの場合は白と黒の2色で表現するため、350dpiでは輪郭が滑らかにならずギザギザになってしまいます。モノクロ2階調モードで印刷する際は、さらに高い1200dpiの解像度がおすすめです。印刷物の解像度はあくまでも目安であり、印刷の質を保証するものではありません。印刷物の用途や今後の展開に合わせて、最適な解像度を選んでください。Photoshopでデザインを新規作成する際や、すでに作成しているファイルの画像解像度の設定方法をご紹介します。メニュー内の「ファイル」から「新規」を選択すると、新規ドキュメントの設定が表示されます。ここで画面の右側に表示されているプリセット詳細の「解像度」が画面解像度です。Web用のデザインを制作するなら72、印刷物の場合は350以上の数字を設定しましょう。Web用に72dpiで制作しているデザインファイルを、印刷用に350dpiに変更しなければならないとします。メニュー内の「イメージ」から「画像解析度」を選択すると、解像度の詳細情報が表示されます。「解像度」と表示されている数値が、現在のデザインファイルの解像度です。先ほど開いた解像度の詳細情報画面で数値を変更します。印刷用の350と入力すると、画像サイズも合わせて変化します。同じ画像であっても、画面解像度が高くなればデータサイズが大きくなることも確認できるでしょう。OKボタンをクリックすれば解像度の変更完了です。画面解像度を設定するときに注意してほしい点を2つご紹介します。解像度が高いほど、画像の中に含まれるピクセル数が増えてデータサイズが大きくなります。そのためデザインファイルのサイズが大きくなり、デザイン編集・印刷といった作業において負担になる可能性があるため注意が必要です。Webのみで利用する画像の場合、画像のデータサイズが表示速度にも影響します。画像サイズを小さくするといった対応を検討してください。解像度は非可逆性といって、一度解像度を低くした画像から高い解像度の画質に戻すことはできません。数字上では350dpi→72dpim→350dpiと変更可能ですが、実際に最初の350dpiだった状態に戻すことはできませんのでご注意ください。Web専用の画像であれば影響はありませんが、印刷物の場合はデザインが台無しになる可能性もあります。設定変更をする際には十分にご注意ください。WebデザインコースならWebデザイナーになるのに必要なスキルが身につく当メディアを運営しているCodeCampでは、マンツーマンで現役エンジニアから学べるWEBデザインコースを提供しています。画像解像度とは、Webや印刷物といったデザインの利用用途に合わせて設定する大切な要素です。このようにどのように利用するデザインなのか、全体の設計を確認して最適な数値を設定してください。2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。Ltd.CodeCampusテクノロジーの「学ぶ・働く」を知るメディアプログラミングWEBデザインテクノロジーアプリ開発ビジネススキルキャリア学習ガイドtwitterLINE。