デザイン

デザイン

PR

【おさらい】知らないと恥ずかしい!解像度とは何?

20,082 views

読了時間 : 約2分29秒

Retinaディスプレイや8Kテレビなど、高解像度ブームはいつまでも続いています。ppiやptやdpiなど聞き慣れない言葉も増えてきましたが、iPhoneやiPadを例に、分かりやすくおさらいしておきたいと思います。

そもそも解像度とは何なのか?

 

解像度は一般的にppiという表示がよくされます。意味は「ピクセル パー インチ」。1インチ(2.54cm)の中にどれだけピクセルが含まれているかの単位です。初代Macは72ppiでした。十分多いような気もしますが、こんな感じです。

 

Mp1

画像引用元:http://www.mac512.com/

 

なかなか粗いですね。懐かしい感じがします。

それからテクノロジーは急速に進化していくことになります。今は一般的なコンピュータでも115~160ppiはあります。そんな時、2010年にAppleが発表したRetina ディスプレイは大きな革命を起こしました。

 

1-1JSLE91qr1gnWrkuO_XSpg@2x

 

上図では違いがはっきり分からないのですが、どれくらい変わったのかは下図を見ると一目瞭然です。

 

1-rRg_kWDs0C7goRnuaG7Xcw@2x

 

Retinaではそれまでの2倍ピクセルが細かくなっています。格段に解像度が上がったおかげで、グラフィックデザイナーは今までのアイコンに加えて、Retina用のアイコンを設計する必要があったそうです。

Retina登場以降の解像度について

 

Retinaが完成したことによってApple社内ではppiの呼び方も変わったそうです。それまでは「アイコンを44ピクセルの大きさにしておいて」と伝えていたものが、Retinaでは大きさが半分になってしまうため使えません。そこで新しい呼び方として「ポイント(pt)」を導入しました。Retinaに(2x)と書かれているのは、ptを2倍にするという意味らしく、「アイコンを44ptの大きさにしておいて」は、Retinaではその2倍分のピクセルを使うという意味をもちます。iPhone6 plusは(3x)のRetina ディスプレイとなっています。

 

もちろん、Googleが開発するAndroidも解像度という意味では負けていません。彼らはptを使わずに「dp」を使っているそうですが、考え方はptとほとんど同じです。Androidでも2xや3xという表現がされています。

そうなると気になるのは、両者のピクセルの違いですよね。実際、ptとピクセルには一定の関係性はないそうで、デバイスによってその値は変わってきます。つまり、iOSは1ptは132~163ppiと変動します。Androidの場合は1dpは160ppiで固定されているそうです。

 

ちなみに、Androidに関して言うと、今はなんと6種類のディスプレイがあるそうです(Appleは3種類)。

 

1-KoThhkOfTrDtYy3JnDuAgw@2x

 

それぞれに違うグラフィックを用意することになるので、その労力は相当なものでしょう。

 

最後に、iPadとiPhoneのデバイス間のピクセルに関する違いをご紹介します。

iPad(Retina)は264ppiでiPhone(Retina)は326ppiです。つまり、iPadの1つ1つのピクセルはiPhoneよりも大きく、実はピクセルの密度も低くなっています。

 

1-AklkNFVQyH2uTXwRZHUwBA@2x (1)

 

しかしそのままでは画質が悪くなったように感じますよね。そこで、インターフェースの調整が行われます。iPadのアイコンはiPhoneのアイコンよりも大きいのにお気づきでしょうか。iPhoneで60×60ptで表現されているアイコンはiPadでは76×76ptで表現されているのです。つまり、アイコンを表現するピクセル数の差はこの作業により抑えられます。

 

1-KWwhml9JOdkN7t4vkRT8Ww@2x

 

ちなみに、デバイス間の違いに関してはAndroidデバイスはそのような調節を行っていないそうで、Apple担当のグラフィックデザイナーはAndroid担当よりも格段に面倒な作業をすることになるとのことです。

 

以上になります。グラフィックデザイナーはデバイスの性能に大きく左右されるお仕事。みんな知らないところで頑張っているんですね。

 

(※この記事は「Pixel Density, Demystified」を翻訳・参考にしています。また2017年5月19日に加筆・修正しています)

おすすめ新着記事

おすすめタグ