フォローしました本記事は、2019.03.24に個人ブログで公開したものを移行してきたものですソフトウェア、ハードウェアを関係なく、「解像度」というワードを様々なシーンで耳にする。そもそも「解像度」を調べたところ、かなり難しく複雑な感じになっていた。今回の記事では以下の2点を中心に調べたことをまとめてみた!・「解像度」って何もの?・「物理値」と「論理値」って何もの?「解像度」とは?解像度とは、ディスプレイなどが、画像などのオブジェクトをどれだけ細かく表現できるかを数値化したもの。「解像度」と一言で言っても表し方は2つある。1つ目は、絶対解像度(総量表示)。100px(高さ)のように表記される。100という場合もある。2つ目は、相対解像度(ピクセル密度表示)。1インチ(2.54cm)の中にピクセルがいくつあるかで解像度を表す。あと、ppiの計算方法が気になる方は、以下の記事が参考になる。三平方の定理がなつかしい...ディスプレイのppiを計算するディスプレイのサイズと縦横のピクセル数から、ppiを計算する方法を紹介します。www.h-fj.comこれを踏まえて、Apple公式サイトのiPhoneのスペックを見てみる。2,688となっている。相対解像度は458ppiとなっている。ちなみに、300ppiを超えると、人間の目では細かすぎて認識できない領域らしい。以下、Appleの表記は「高さ×幅」だが、本記事では「幅×高さ」の順番で統一ここで、こんな疑問を持つ、デザイナーやエンジニアがいるかもしれない。896じゃなかったっけ??と。物理値と論理値ここで2つの物理値と論理値という話しがでてくる。物理値と論理値の関係(ピクセル比)は1:1で、その状態をドットバイドットと呼ぶ。Plus(2014)」からは1:3になっている。Display対応で2倍、3倍のサイズで作りましょう!っていうのはここからきている。2,688という値のこと。896という値のことを指す。XS」のピクセル比は1:3、つまり3(高さ)×3(幅)つまり9つの物理ピクセルを1つの論理ピクセルとして扱う。この見かけの1ピクセルにするメリットは、小さいiPhoneに高画素密度なディスプレイを詰め込めること。1インチあたりのピクセル数は、先述のppiで表記される。ウェブやアプリに関わるデザイナーやエンジニアが普段から意識しているのは、論理値だった。それぞれに独自の呼び方があるので、そちらもメモしておく。ウェブ:ピクセル(CSSピクセル)ウェブだと、「ピクセル(CSSピクセル)」と呼び、CSS及びJavascriptなどが参照できる。iOS:ptiOSだと、CSSピクセルにあたるものが「ポイント」という単位で表される。ポイントだと、グラフィック(DTP)系の人だと、Illustratorで出てくるptと勘違いしそうだが、同じ名前だけど別物。DTPのポイント(pt)とピクセル(px)ついては以下の記事が参考になるので興味のある方は読んでみてください。Pixel(密度非依存ピクセル)という呼ばれ、デバイスピクセルを何個かのグループに分け、それに応じて倍率をいい感じにしてくれるそう。Developersdeveloper.android.comdpに関しては、今回の記事をまとめるにあたり、はじめて知った単位で、Androidアプリ向けのデザインファイルとかどう作ってるのかな...。〜・https://www.indetail.co.jp/blog/171208/・https://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays・https://www.dotproof.jp/2014/09/11/iphone-6-ppi/・https://aloerina01.github.io/blog/2016-12-27-1ダウンロード#iphone#Android#Retinaこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。デザインリニューアルの裏側とデザイナーの想いこの記事が入っているマガジンDesign|@yotaszkよーたのデザインブログ。上流からUI、サービスデザインのこと。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。