ITエンジニア/デザイナ向けにオープンソースを毎日紹介

DPI loveはHTML/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

iPhoneのRetinaディスプレイ登場以後、PPIやDPIといった単語が随所で行き交うようになり、どういった単位でデザインを行うべきかが分かりづらくなっています。そこで任意のスクリーンサイズにおけるDPI/PPIを探し出せるDPI loveを使ってみましょう。


例。1920x1080の解像度における対角線の長さ13.3インチである場合、166ppiになります。


解像度は読み込んだブラウザのウィンドウサイズとして自動的に表示されます。


iPhone 5のサイズ。モックのサイズも自動的に変わるのがユニークです。

主にiPhone/MacについてのDPIも一覧になっていますので、探すのが簡単になりそうです。なお、iPhoneのRetinaディスプレイが有名でよく取り上げられますが、DPIだけを見ればHTC One(469DPI)、Samsung Galaxy S4(441DPI)と他のメーカーも着実に進化しているようです。

300DPIは網膜で認識できるぎりぎりの数値であると言われ、それ以上になると認識できないと言われています。ちなみにMacbook Pro Retina 13インチモデルは227DPIとなっています。十分奇麗とは感じつつも、iPhoneほどではないということです。

より高画質になればリソースの品質をあげないとかえってシャギーが目立つようになってしまいます。しかしサイズが大きくなるのは問題です。いかにサイズを小さいままに奇麗な画像にできるか、デザイナーの方にはそういった点にも今後は気を配る必要がありそうですね。

DPI love ♥ Easily find the DPI/PPI of any screen

LeaVerou/dpi

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2