DPI設計者ガイド–実世界サイズへの変換

開示: あなたのサポートはサイトの運営を維持するのに役立ちます!このページで推奨する一部のサービスについては、紹介料を稼ぎます.


Webでは、DPIは1インチあたりの密度ピクセルを表します。 PPIは単に1インチあたりのピクセル数を表します。 (DPIは印刷業界で生まれたものですが、最新の定義により、Web上のPPIの代わりに使用されることがよくあります。)

どちらのイニシアチブでも、ウェブサイトやアプリをデザインしている場合、DPI設定がグラフィックスが画面に表示される方法にどのように影響するかを理解する必要があります.

Webのグラフィックデザインの非公式な標準は72 DPIです。これが、最初のMacコンピュータである128K当時のPhotoshopの標準DPI設定でした。 (128Kのピクセル密度とiPadのピクセル密度の優れた比較を以下に示します。)

72 DPIを使用することで、印刷の信頼性が向上しました。そして、72 DPIが私たちに、正しいか間違って立ち往生しています.

実際には、私たちが使用するデバイスの多くは72よりもかなり高いDPIを持っているため、多くの課題が生じます。幸い、デザインを開発する際に役立つ既知の規則があります。.

画面解像度が重要な理由

同じ物理サイズの2つのデバイスがあるとします。デバイス1の画面表示は72 DPIです。デバイス2には144 DPIのディスプレイがあります。.

72 DPIで画像をデザインする場合、画像は72 DPI画面で意図したサイズで正確に表示されます。しかし、144 PPI画面では、ディスプレイには2倍のピクセルがあるため、意図したサイズの半分になります。.

覚えておいてください。物理的なサイズはDPIにまったく影響しません。ただし、小さい画面の方が製造コストが安いため、大きい画面よりもDPIが高くなる傾向があります。今日のデバイスでは、同じようなサイズのデバイスであっても、DPIには大きなばらつきがあります。

  • Apple Cinema Display:99
  • Microsoft Surface:148
  • Amazon Kindle Fire 7″:170
  • Apple 12″ MacBook:226
  • BlackBerryパスポート:453
  • Samsung Galaxy S7:576
  • ソニーXperia Z5 Premium:801.

(画面のDPIを即座に確認して、比較方法を確認できます。)

デザインでこれを修正しなかった場合、Sony Xperia Z5 Premiumでは72 DPIのグラフィックは非常に小さくなります。これが、ピクセル解像度の大きな違いに対処する方法を知る必要がある理由です.

一貫した方法でディスプレイの解像度を説明するために、ブランディングやマーケティングに依存しないでください。たとえば、AppleのRetinaブランドは、見ているデバイスに応じて、さまざまなディスプレイ密度を説明しています。最小のRetinaディスプレイは218 DPIで、最大は400以上です。.

一貫した設計を開発するには、別のアプローチが必要です.

単純なスケーリングのためのDpとポイントの使用

iOSとAndroidの測定単位を理解したら、デザインのピクセル測定を完全に無視できます。.

代わりに、仮想ピクセルまたはCSSピクセルの概念を使用できます。

これは、AndroidとiOSでは少し異なります。

  • dpは、デバイスに依存しないピクセル、または密度に依存しないピクセルを表します。 Androidで使用されています。 1 dpは1/160インチ.
  • ポイントはiOSと同等です。 1ポイントは1/163インチ.

密度には微妙な違いがありますが、システムは非常に似ています.

Androidアプリのレイアウトにdp測定を使用して設計する場合、そのレイアウトを表示するすべてのデバイスの測定値を正確に知る必要はありません。デバイスは独自の乗数を知っており、それをdp値に適用するため、意図したサイズでデザインが自動的にレンダリングされます。これについては、Android開発者向けドキュメントをご覧ください。.

iOSのポイントを使用して設計する場合、知っておく必要があるのは、ポイントを1ピクセルの正方形として表示するデバイス、4ピクセルの正方形としてポイントを表示するデバイス、9ピクセルの正方形として表示するデバイスなどです。つまり、ポイント測定には、iOSデバイスに必要な画面解像度に合わせて、1、2、または3の乗数が適用されます。.

Android画面密度修飾子の使用

すべてのAndroidデバイスは、画面密度に応じてカテゴリまたはバケットに分類されます。世の中には何千もの異なるデバイスがあるため、このコンセプトは、イメージを作成するために必要なデバイスを絞り込むことにより、設計者の準備作業を簡素化するのに役立ちます.

アプリアイコンのようなAndroid用の画像を作成する場合、知っておく必要のある6つの修飾子があります。

  • 低(LDPI):最大120 DPIのデバイス、0.75の乗数
  • 中(MDPI):120〜160 DPI、乗数1(基本密度)
  • 高(HDPI):160〜240 DPI、1.5の乗数
  • 超高(XHDPI):240から320 DPI、2の乗数
  • 超高解像度(XXHDPI):320〜480 DPI、3の乗数
  • 超超超高(XXXHDPI):480から640 DPI、4の乗数.

アプリの画像やアイコンを作成するときは、作成したバケットに従ってフォルダに配置するだけです。作成したレイアウトのdp測定とともに、Androidはジョブに最適な画像を自動的に選択します.

タッチのためのデザイン

DPIパズルには最後のピースが1つあります。それが、タッチスクリーンと通常のディスプレイの違いです。 DPIとは直接関係ありませんが、検討することをお勧めします.

グラフィックは、画面の解像度が同じであれば、タッチスクリーンでも非タッチスクリーンでも明らかに同じように見えます。しかし、非常に重要な違いがあります。人々は同じようにナビゲートしないのです。指のタップは、マウスポインターよりもはるかに正確ではありません.

タッチターゲットは、iOSでは44x44pt、Androidでは48x48ptの正方形です。間違いの可能性を回避するために、すべてのナビゲーションを大きくし、その周りの間隔を広げる必要があります.

資源

  • DPからPPIへの変換:Android開発者Webサイトからのガイド
  • Pixplicity DPからPPIへのコンバーター:優れた計算機およびコンバーター
  • 設計者のためのヒント:Androidの密度修飾子とdp計算の詳細
  • タッチターゲットサイズに関するBBCモバイルアクセシビリティガイドライン:この記事では、HTMLでアクセシブルなモバイルレイアウトを設計するための優れたベストプラクティスのヒントを提供します。
  • iOS設計ガイドライン:解像度、ダウンサンプリング、アイコン、タイポグラフィ、標準レイアウトコンポーネント、自動アイコン効果をカバー.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map