PPIとは何か？DPIとの違いとWeb・アプリ開発における高密度ディスプレイ対応の実践ガイド

2025年11月22日 最終更新日時 : 2025年11月22日 エバープレイ編集部

イントロダクション — 「PPI」とは何か

PPI（pixels per inch、ピクセル毎インチ）は、ディスプレイや画像の解像度を表す指標の一つで、1インチあたりに並ぶピクセル数を示します。ITやデザイン、ウェブ開発において「画面の細かさ」「画像の見え方」「スケーリング」などを論じる際に頻繁に出てくる重要な概念です。本稿ではまずPPIの定義と計算方法、DPIとの違いを明確に説明した上で、現実のデバイス例、ウェブやアプリ開発における実務的な扱い方（高DPI対応、CSSや画像配信のポイント）、測定方法、最終的な設計上の考慮点までを詳しく解説します。

PPIの定義と計算式

PPIは「1インチ（2.54 cm）あたりに並ぶピクセル数」を表します。画面の横・縦のピクセル数（ピクセル解像度）と画面の対角線の長さ（インチ）から求めます。計算式は次の通りです。

PPI = √(幅(px)² + 高さ(px)²) / 対角線長さ(inch)

例：フルHD（1920×1080）を24インチのモニタで表示した場合
PPI = √(1920² + 1080²) / 24 ≈ 91.8 PPI

PPIとDPIの違い（スクリーン vs 印刷）

  • PPI（Pixels Per Inch）: ディスプレイ上のピクセル密度。画面の物理サイズとピクセル数から算出。
  • DPI（Dots Per Inch）: 主に印刷領域で使われる指標で、プリンタが1インチに印刷できるドット数を示す。印刷物の印字密度を表す。

実務上は混同されることもありますが、スクリーン向けにはPPI、印刷向けにはDPIを使うのが適切です。またOSやプラットフォームの「ピクセル概念」はさらに別（論理ピクセルやポイント）であり、開発者はそれらの違いを理解する必要があります。

物理的な見え方と「Retina」「高密度ディスプレイ」

人間の視力や視距離を考慮すると、ある閾値を超えたPPIでは個々のピクセルを識別できなくなり「滑らか」に見えます。Appleが打ち出した「Retina」という概念は、特定の視距離において個々のピクセルが認識できない（＝十分高密度）ことを目安にしたマーケティング用語です。ハンドヘルド機器の場合、概ね300 PPI程度が「個人の通常の視距離でピクセルを識別しにくい」目安としてよく引用されます（デバイスや視距離に依存します）。

実例：デバイス別のPPI（目安）

  • 一般的な24インチフルHDディスプレイ：約92 PPI
  • ノートPC（13.3インチ × 1920×1080）：約166 PPI
  • 高解像度ノート（13.3インチ Retina 2560×1600）：約227 PPI
  • スマートフォン（高密度ディスプレイ）：約300〜550 PPI（モデルによる）

これらはあくまで代表例で、同じ解像度でも画面サイズが違えばPPIは変わります。PPIが高いと細かな表示が可能ですが、UIの要素が小さくなり過ぎるためOSやブラウザはスケーリング（ポイントや論理ピクセルの概念）で調整します。

Web / アプリ開発におけるPPIの実務的意味

開発者がPPIを意識すべき場面は主に次の通りです。

  • 画像の提供方法：高DPI（高密度）ディスプレイ向けに2x/3x画像、または幅ベースのレスポンシブ画像を用意する
  • アイコンやUI素材：ビットマップではなく可能な限りSVGやフォントアイコンを採用して拡大縮小に強くする
  • CSSと論理ピクセル：CSS上の「px」は必ずしも物理ピクセルと一致しない（devicePixelRatioやOSスケーリングを理解する）

ブラウザ・プラットフォームでの扱い方（実践テク）

  • window.devicePixelRatio：物理ピクセル / CSSピクセルの比。高DPI端末では2や3になる。JavaScriptで判定し、適切なリソースを読み込む判断材料にできる。MDN等でAPIが提供されています。
  • srcset / picture 要素：HTMLのsrcset属性で2xなどを指定したり、幅（w）記述子でブラウザに最適画像を選ばせる。例：
    <img src="img-1x.jpg" srcset="img-2x.jpg 2x, img-1x.jpg 1x" alt="..."></code>
  • SVG利用：アイコンやロゴは可能な限りSVG化し、解像度に依存しないベクターで提供する。
  • CSS image-set / image-resolution：背景画像に高解像度版を指定する手法がある（ブラウザ対応は要確認）。
  • Viewport meta の設定：モバイルでは等で論理ピクセルとレイアウト幅を制御する。

AndroidおよびiOSの密度管理（実務上重要）

  • Androidは密度バケット（ldpi/mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi）を用いて、開発者はdp（density-independent pixel）単位でUIを設計する。mdpiを160dpiの基準とする慣習がある（例：xhdpi=320dpiはmdpiの2倍）。
  • iOSはポイント（pt）という論理単位を使い、Retinaディスプレイでは1ポイント＝2×2物理ピクセル（DPR=2）や3×3（DPR=3）になることが多い。実際の物理PPIは機種ごとに異なるが、開発時はポイント単位でスケール対応する。

画像を作る・配布する際の実務ポイント

  • ラスタ画像（PNG/JPEG等）は標準解像度(1x)と高解像度(2x/3x)を用意する。Webではsrcsetで指定、モバイルアプリではプラットフォーム別のアセットフォルダに配置する。
  • アイコン類はSVG（Web）やベクターアセット（Android Vector Drawable、iOS PDFベクタ）を使うと管理が容易。
  • デザインツール（Figma/Sketch/Adobe XD等）でデザインを作る際は、出力スケール（1x/2x/3x）を先に決めておく。余裕を持った解像度で書き出すこと。

ユーザー体験（UX）への影響

高PPI対応を怠ると、次のような問題が生じます。

  • 画像やアイコンがぼやける、ジャギーが目立つ
  • UIスケールが不適切でボタン等が小さすぎる/大きすぎる
  • パフォーマンスの悪化（過剰に大きな画像を読み込むなど）

逆に過剰に高解像度の画像ばかり用意すると、帯域やメモリ負荷が増えるため、レスポンシブ配信とブラウザによる最適選択（srcset/w コンセプト）を組み合わせてバランスを取ることが重要です。

測定方法とツール

  • 計算式を用いて手動で算出（解像度と対角インチが分かっている場合）
  • Web上のPPI計算ツールやスマホアプリを利用する
  • デザイン環境でのプレビュー（デバイスプレビュー機能）や実機確認が最終判断として重要

注意点とまとめ

PPIは「物理的密度」を示す客観的数値ですが、実際の見え方は視距離、視力、OSのスケーリング、実装（SVGかラスターか）など多数の要素で決まります。開発者は以下を実践してください。

  • 画像はSVGか複数解像度で用意し、ブラウザ/OSに最適なものを選ばせる（srcset/pictureなど）
  • UIは論理ピクセル（dp/pt/CSSピクセル）で設計し、物理ピクセルは抽象化された値（devicePixelRatio）で扱う
  • 実機での視認性とパフォーマンスを常に確認する

参考文献

カテゴリー
IT
前の記事
ビリー・アイドルのレコード完全ガイド：おすすめアルバムとコレクション術New!!
2025年11月22日
次の記事
KISSの魅力を徹底解剖：プロフィール・代表曲・名盤・ライブ演出・ブランド戦略と影響New!!
2025年11月22日