メニュー

Webデザイナー速報

Web関連の勉強で面白いなと思ったことを配信していきます。
30代前半の未経験Webデザイナー。転職活動中。

1インチ vs 解像度 vs ppi vs dpi vs 画面解像度

|

今回のテーマは、「解像度」です。
「解像度」という単語1つで、たくさんの意味合いがあるようです。
しかし、技術書やWeb上の記事には、いろいろな場面で、いろいろな意味で転がっているように思います。
この統一感のなさが、ピクセルさんのことが気になって夜も眠れない原因になっているのかもしれません。
私は考えだしたらすぐ寝落ちしますがw

1インチ

インチinch、記号:in)は、ヤード・ポンド法の長さの単位である。」

「国際インチにおける1インチは正確に25.4ミリメートルと定められている。」

【フリー百科事典『ウィキペディア(Wikipedia)』】https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%83%81

1inch = 25.4mm = 2.54cm

日常で使われると、長さが想像できなくて少しモヤッとしそうですw
アメリカ人の親指の幅の長さが25.4mmだそうです。
親指をかざせば、立ちどころに長さを概算できてしまうそうです。

解像度

この単語は、IT業界の問題児だと思っています。
この単語は、人や立場によって意味が変わってくる感じの単語だと思っているからです。

「解像度(かいぞうど)とは、かんたんに言えば「表示の細かさ」の度合いのこと。」

「とりわけ、ディスプレイデジタル画像(ビットマップ画像)、印刷物などの、「画素の密度」を指す意味で用いられる。」

「「dpi」や「ppi」を単位として数値で示されることが多い。」

「「解像度が高い」は、dpi 等の数値が大きいことを指し、より細部まで密に描写されることを意味する。」

「基本的には解像度が高ければ高いほどクッキリとして鮮やかで美しくなる。」

【実用日本語表現辞典】https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%83%81

まず、全体をざっくりと解釈してみます。

解像度 = 画素(ピクセル)の密度

単位は、「ppi」もしくは、「dpi」

解像度が高い = 画像や文字がクッキリと鮮やかで美しく表示される。
ここの時点で違和感があります。

画素(ピクセル)の密度なのに、
単位で「dpi」(dは、ドット)が使われている・・・。
なんだか気持ち悪いです。

しかし、
前回の復習ですが、
「ピクセルさん」と「ドット」は文脈から空気を読んで意味合いを汲み取る必要がありそうな単語でした。

そして、「解像度」という単語は、
ディスプレイ、印刷物、どちらでも使われるようなので、
文脈的に空気を読んで、
「ppi」「dpi」、
どちらでも使っていいことにしておきますw

解像度が高いほど、画像や文字がクッキリと鮮やかで美しく表示される点では
どちらも同じだから問題はなさそうです。

dpi

「フルスペル:Dot Per Inch

「dpiとは、1インチあたりに集まっているドットの密度を表す単位のことである。」

プリンタの印刷精度スキャナにおける読み取り精度ディスプレイにおける表示性能など、一般に解像度が用いられる際の尺度として使用される単位である。」

「この値が高いほど、解像度が高く美しい表現が可能となる。」

【IT用語辞典バイナリ】https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%83%81

dot per inch(ドット パー インチ)の略語。

1インチあたりにどれぐらいのドットが敷き詰められているのか?、を表す密度。

解像度の単位。

先に説明した「解像度」と同じ意味です。

でも、
前回の勉強の復習ですが、
「ドット」って単語は、印刷(DTP)業界でメインに使われる単語のようです。

dpiが高いと,画像や文字がクッキリと鮮やかで美しく表示される、
という意味は、
印刷した本の画像や文字がクッキリと鮮やかで美しく表示される、
ってことの意味合いが一般的なような気がします。

ただし、ややこしいので今はスルーでよいのですが、
デベロッパーさんたち(プログラマー)は、「dpi」をメインに使っている雰囲気があります。

これは、次回か次々回に説明しますが、
パソコンを作る際に、「参照ピクセル」というピクセルの概念を用いているからのようです。
参照ピクセルさんの単位は「dpi」のようでした。
そんな歴史的経緯から、
今でもパソコンを作る時には、「dpi」って単語を使っていたりするようです。

ppi

「フルスペル:pixel per inch

「ppiとは、画面解像度を表す単位で、1インチ内に画素がいくつ並んでいるかを示す単位である。」

主にディスプレイの解像度の指標として用いられる。

「ppiの値が大きければ大きいほど、より高密度に画素が並んでいることになる。」

「つまり、よりドットの目立たない細かい画面が表示できる。」

「なお、ppiは距離に対するピクセル数を示すものであり、単位面積当たりの数ではない。

dpiは印刷の分野で用いられることが多くプリンタスキャナの解像度、ビットマップ画像の解像度、あるいはオプティカルマウスのトラッキング解像度などを示す際に用いられている。

【IT用語辞典バイナリ】https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%83%81

「解像度」「dpi」と意味はまったく同じなので、割愛します。

区別するとしたら、

「ドット」→「ピクセル」になったこと。

印刷の分野で用いられることが多い、と明記されていること。

最後に、「ppiは距離に対するピクセル数を示すものであり、単位面積当たりの数ではない。
について、くしくも日本語だとイメージしずらいです。

そこでいろいろググってみます。

そしたら、
横:1インチ(2.54cm)、縦:1インチ(2.54cm)の正方形の中に、小さな四角いピクセルが綺麗に敷き詰められた画
像をよく見かけました。

きっとみなさん、この画像を用いて理解してるのでしょう。

では、少し頑張って、想像力を働かせてみましょう。

今、目の前にパソコンがあります。
もっと手軽に、iphoneにしますか。

今日、インスタ映えするナイスな写メを撮ったので、
周りの目を気にせず、満足げにその写真を眺めています。
iphoneの画面いっぱいに写真が写っています。

どうやら、そのiphoneの画面いっぱいに、
横:1インチ(2.54cm)、縦:1インチ(2.54cm)の正方形がいくつか詰まっているようです。
さらに、その正方形の中に、ピクセルさんがたくさん詰まっているみたいです。

文字や画像のデータって、この1インチの正方形がいくつか集まってできているようです。

縦横1インチの正方形の中に詰まったピクセルさんたちが見えましたか?

もしも見えてしまった人は、何かを開眼されたのかもしれません.

そんなiphone画面の一部分である、
横:1インチ(2.54cm)、縦:1インチ(2.54cm)の正方形をイメージしてみます。

横:1インチ(2.54cm)の中に、100個ピクセルが一行に並び、
縦:1インチ(2.54cm)の中に、100個ピクセルが一列に並んでいます。

この正方形の中にピクセルはいくつありますか?

100個×100個10,000個です。
文系で算数すら苦手な私でもなんとかわかりました。

ここでIT用語辞典バイナリさんのお言葉を思い出してみます。
1インチ内に画素がいくつ並んでいるかを示す単位
ppiは距離に対するピクセル数を示すものであり、単位面積当たりの数ではない

言い換えることができますか?

1インチ内にピクセルが100個並んでいることを示す単位。
ppiは、この100個のピクセル数を示すものであり、10,000個という数字ではない

この写真の解像度は、100ppiです、
と表現するみたいです。

この100ppiは、数ではなく、密度のことでした。
どれぐらいピクセルさんがギュッと詰まっているのか?ってことです。
そして、この数字が大きいほど、文字や画像がきれいに表示されるようです。

どれくらいのppiが、
高解像度」、「低解像度」っていうのか?
高画質」、「低画質」っていうのか?

自分の携帯やパソコンが気になる人は、
違う機種や機体のものと比較してみると勉強になります。

画面解像度

ディスプレイの場合は、多くの場合「1024×768ドット」のようにヨコ・タテに並んでいる数で表すされる(デ

ィスプレイはおおむね4:3の比率で設計されている)。」

「他方、プリンタスキャナでは単位面積あたりに含まれる総数として表され、このとき、dpi(dots per inch)と呼ばれる単位が用いられる。」

「ちなみに、写真印刷関係の業界ではドットに相当するものを「ピクセル」と呼んでおり、プリンタスキャナデジカメといった機器について解像度を表現する場合には、「ピクセル」が用いられることが多い。」

【IT用語辞典バイナリ】https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%83%81

人によっては、
「ディスプレイの解像度」「モニターの解像度」「Webの解像度」とも呼ばれています。

全部同じ意味のようですが、
ものは言いようですねw

Webを見るデバイスについては、「画面解像度」が使われる。
DTP業界では、「dpi」が使われる。
写真業界では、「ppi」が使われる。
人や立場によって、解像度の意味合いが違って来るらしいです。

・・・!?

1024×768ドットと書いてありますが、
そんな表記は見たことがありませんw

1024×768ピクセル」に訂正しておきます。

念のため断っておきますが、
100%信頼できるソースはこの世にはないと思っています。

「信頼あるソース」って言葉の意味は、
たくさんの人が閲覧する情報は、それだけ大きな責任があるから安心でしょう、
という視点で言われていたりするのが実情だったりするからです。

話を戻しますが、
どうやら、平たく言うと、
画面(ディスプレイ)の中にあるピクセルの個数らしいです。
そして、単純に個数で表すのではなくて、「縦×横」でピクセルさんの数を表現するみたいです。

先ほどの縦横1インチの正方形は、
画面のほんの一部分をイメージしたものでしたが、
今回は、単純に、iphoneの画面全体をイメージする必要がありそうです。

実際に例を挙げてみます。

私が使っているiphoneSE(第一世代)の画面の大きさは、4インチ。
画面解像度は、縦;1136pxx横;640px。
解像度は、326ppi。

「ppi」は画面解像度と画面の大きさ(インチ)が分かっていれば、計算できるようですが、
数学できますアピールをしてモテたい時以外、わざわざ計算する必要はありません。
その機種の公式ホームページに書いてありますのでw

つまり、画面全体に727,040個ものピクセルさんたちが敷き詰められているみたいです。
なんだかすごいって感じです。

ついでに、他のデバイスについても調べてみます。

MacBookPro16インチの画面解像度は、3,072px × 1920px。
画面全体に、5,898,240個ものピクセルさんたちが・・・(ry。

4Kの画面解像度は、3,840px × 2160px。
画面全体に、8,294,400個ものピクセルさんたちが・・・(ry。

ちなみに、私のパソコンの大きさは、14インチ。
画面解像度は、縦:1,920px × 横:1.080px。
画面全体に、2,073,600個のピクセルさんたちが敷き詰められています。
解像度は、157ppi。

上と比べて少ないですwレベルが違いますw
MacBookPro16インチ、切実に欲しいです・・・。

ここで、気づきます。

私のiphoneSE。
画面の大きさが、4インチ。
画面解像度が、縦;1136pxx横;640px
画面全体のピクセル数が、727,040個
解像度が、326ppi

私のパソコン。
大きさが、14インチ。
画面解像度が、縦:1,920px × 横:1.080px
画面全体のピクセル数が、2,073,600個
解像度が、157ppi

見比べてみて、直感的におかしいですw
画面解像度も解像度も、「解像度」という同じ意味ならば、画質の良し悪しを表しているはず・・・。

パソコンさんの画面解像度(縦:1,920px × 横:1.080px)> iphoneの画面解像度(縦;1136pxx横;640px

パソコンさんが勝っている。
それならば、ppiも大きい・・・と、
なんとなく思いませんか?w

しかし、パソコンさんの解像度(157ppi)< iphoneの解像度(326)

パソコンさんが負けていますw

なぜでしょうか。

そんな素朴な問いかけに、今度はNTTビズリンクさんが記事を書いてくれていました。

画面解像度縦横の画素を数値で表わすのに対し、解像度は表示領域(1インチ)に対する情報量の密度

dpi(dot per inch) ppi (pixel per inch)で表します。」

解像度は密度なのでモニターのサイズと比例しません。」

【引用元:NTTビズリンク】https://www.nttbiz.com/solution/column/2020/03/2266/

パソコンさんとiphoneの画面の大きさは全然違います。

iphoneさんは4インチで画面のサイズがとっても小さい。
(画面全体のピクセルさんの個数:727,040個

パソコンさんは14インチで画面のサイズがとっても大きい。
(画面全体のピクセルさんの個数:2,073,600個

iphoneのとっても小さい画面の中に、たっくさんのピクセルさんがギュッと詰まっているっていうイメージです。
パソコンさんにもピクセルさんがギュッと詰まっているようですが、
iphoneの方がもっとギュウギュウ詰めで押しつぶされそうって感じですw

iphoneの方が、ピクセルさんの密度(ppi)がとっても高そうなのは、直感的にイメージできます。

この時点で、なんだかややこしいです。

画面解像度が高いほうがいいのか?
解像度が高いほうがいいのか?

どちらでしょうか。

そんなややこしさに終止符を打つように、NTTビズリンクさんがコメントを残していました。

画素が高密度なディスプレイは高画質だと言えるでしょう

【NTTビズリンク】https://www.nttbiz.com/solution/column/2020/03/2266/

どうやら、解像度(ppi)が高いほうが、画像や文字がくっきりと見えるみたいです。
つまり、画質の良し悪しの基準は、どうやら解像度(ppi)が実権を握っているようです。

「画面解像度」は、
いっそのこと、「画面総画素数」という名称に変えても、特段問題ないような気もしてきます。
でも、きっと何か隠された真意があるのでしょう。

最後に、NTTビズリンクさんがこう締めくくられています。

「以上、画面解像度解像度画素数に合わせてディスプレイ自体の大きさが分かればモニターの基本性能が把握できます」

「ディスプレイ選びは奥が深いです」

【引用元:NTTビズリンク】https://www.nttbiz.com/solution/column/2020/03/2266/

画面解像度(1,920px × 1,080px)と画素数(ピクセルの数)は同じ意味なのですが、
なぜかNTTビズリンクさんは区別しています。
表現の仕方が違うからでしょうか。
そういえば、デジカメの広告では、画素数〇〇って表現がされてたりします。

これもまた、人、立場によって、いろいろな区別がされていたりするみたいです。
IT業界の用語に対するホスピタリティが向上してくれることを祈っていますw

ちなみに、Appleさんの公式ページを見てみたら、画面解像度のことを、「ピクセル解像度」って表現していまし

た。

もはや言葉遊びみたいですw
でも、もしかしたら何か隠された真意があるのかもしれません。

話を戻しますが、
どうやら、「画質(画像や文字がくっきりと見える具合)」ってやつは、
画面解像度(画素数)や解像度ディスプレイ自体の大きさをトータルで考えなくてはならないようです。

おっしゃる通り、奥が深いです。

まとめ

■「1inch = 25.4mm = 2.54cm」だよ!

■「解像度」は、1インチの中にどれだけピクセルさんが敷き詰められているか、の密度だよ!

■「解像度」が高い = 密度が高いと、画質がきれいになるよ!

■「ppi」「dpi」は、解像度の単位だよ!

■Web業界では、「ppi」を使うよ!

■「画面解像度」は、パソコンさんやiphoneの画面に敷き詰められたピクセルさんの数だよ!(1.920px × 1.080pxって表現するよ!)

■「画面解像度」が高い = ピクセルさんの数が高いと、画質がきれいになるよ!

説明するのがちょっと先になり、さらにややこしくなるので、今はスルーしますが、
解像度には、「OSの解像度」っていうのもあります。
これを含めて理解する時は、

Web業界では、
画面に表示されている文字や画像に対して、
根底に「OSの解像度」があって、
画質の良し悪しは「画面解像度」が全て担当している。
解像度」は、画面解像度とデバイスの大きさで計算された結果でしかない。

と考えると、良さげです。