Blog
ブログで学ぶUX

今更聞けない!ピクセルとセンチ、解像度(dpi)の関係とは

WebデザイナーならPhotoshopなどでピクセルや解像度には多少馴染みがあるとは思いますが、いざ説明しようとすると難しいなんてことはないでしょうか。

この記事では、Web上でのピクセル・センチ(センチメートル)・dpiの関係について詳しく解説します。

現在では、MacのRetinaディスプレイなど高精細ディスプレイの登場で1ピクセル=1ドットとして成立しないケースも出てきましたが、まずは基本的な原則から見ていきましょう。

ピクセルとは

ピクセルとは、デジタル画像の最小単位のことを指します。デジタル画像(ラスター画像)を限界まで拡大すると、1つ1つの点で構成されています。

点を英訳するとドットですが、このドットに色情報を追加したものがピクセルです。デジタルカメラの性能を表現するのに、よく画素数という指標が使われます。この時に使用される「画素」というのが「ピクセル」を指しています。

つまり、画素数が高いということは、その分ピクセルがたくさん集まっていることになります。そして、ピクセルがたくさん集まって表現されている分、拡大にも耐えることができ、より緻密で画像の質が高い、ということになります。

ピクセルはセンチメートルで表現できるか

画像におけるピクセルは主に幅と高さを表現するときに使われ、画像の大きさを示します。ですが、それはあくまで画面の中の話です。

ではこの画像は実世界ではどういった大きさになるのでしょうか。

2016-08-08_10h53_59

上記ウィンドウに表示されている高さや幅を、例えばセンチメートルに変換するときはどうすればよいのでしょうか。

この場合、幅の4,000ピクセルというのは、ピクセルの点が横方向には4,000個あつまっているという意味なので、実世界の長さの単位であるセンチメートルとは関係がなく、これだけの情報では変換できません。

とは言え長さの計測は可能です。環境によって実世界の単位が異なってくるため、正確な実世界での長さの単位を知るには解像度(dpi)という数値を決める必要があります。

解像度(dpi)とは

ピクセルを物理的な長さで表現したいときに関わってくるのが、dpiです。dpiとはdots per inchの略で1インチ(2.54cm)にどれだけドットが含まれているかを表す単位です。dpiの数値が大きいほど解像度が高くなり、ピクセルがたくさん含まれることになり、より細かな描写が可能となります。

よって、解像度が分かれば、ピクセルをセンチメートルに変換することができます。例えば、解像度300dpiの100px×100pxの画像をセンチメートルに以下のように計算して変換すると、約0.85cm×約0.85cmの画像となります。

300dpiの場合の1ピクセル = 2.54cm ÷ 300ピクセル = 約0.0085cm

100ピクセルの画像の大きさ = 約0.0085 cm × 100ピクセル = 約0.085cm

まとめ

dpiは1インチあたりにどれだけドットが含まれているかをあらわす単位で、dpiが分かるとピクセルが物理的な長さで表現できるようになり、すなわちセンチメートルに変換することができます。

dpiは特に印刷物などをつくるときに意識されますが、そうでなくともPhotoshopなどの設定でも出てくる概念ですし、いずれにせよ覚えておいて損のない概念なので、きちんと抑えておきましょう。

ポップインサイトでは、インタビューなどで得た実際の声に基づき
情報設計、UX戦略、Webサイト改善をご支援しています

ポップインサイトは、専任UXチームがお客様の一員となって伴走支援し、ユーザー起点の意思決定に貢献する「UXデザイン伴走/内製化支援(UXRO)」をご提供しています。

ビジネスの目的にあわせ、最適な調査や分析手法を提案・実施し、課題解決までサポートします。WebサイトのUX改善に課題がある方はお気軽にご相談ください。

UXデザイン/UXリサーチについて相談する

サービス紹介資料を無料でダウンロードする

投稿日: 2016/08/26 更新日:
カテゴリ: Web制作