px: 本質、モバイル開発における物理ピクセル

pxとは？

px（ピクセル、ピクチャエレメント） — ラスター画像またはディスプレイの最小アドレス可能要素。各ピクセルは、RGBモデル（赤、緑、青）でチャンネルあたり8〜10ビットの色深度で色情報を保存します。最新のモバイルデバイスのディスプレイには数百万のピクセルが含まれています：iPhone 15 Pro — 300万、iPad Pro 12.9" — 560万ピクセル。

ピクセルの物理サイズはディスプレイ密度（PPI）に依存します。326 PPI（iPhone 11）のデバイスでは、1ピクセルは約0.078 mmです。460 PPI（iPhone 15 Pro）のディスプレイでは — 0.055 mm。ピクセルの物理サイズが小さいほど、画像の鮮明度が高くなります。同時に、ピクセル密度はレンダリングパフォーマンスに直接影響します：ピクセルが多い = GPUへの負荷が大きい。

Appleによると、iPhone 15 Proのディスプレイ解像度は1179 × 2556 px、460 PPIです。比較すると、iPhone SE（第3世代） — 750 × 1334 px、326 PPI。総ピクセル数の差は約3倍で、ProモデルでのGPU要件の高さを説明しています。

ピクセルでの画面解像度

画面解像度 — 水平および垂直方向の物理ピクセルの数。幅×高さの形式で記述され、例：1179 × 2556 px。解像度はディスプレイの基本特性であり、プログラムで変更することはできません — ハードウェアとマトリックスレベルで固定されています。

ピクセル単位の解像度を画面の論理サイズ（iOSのptやAndroidのdp）と混同しないでください。例えば、iPhone 14の論理サイズは390 × 844 ptですが、物理解像度は1170 × 2532 px — スケールファクターが3のため、正確に3倍大きくなっています。

PPIとピクセル密度

PPI（1インチあたりのピクセル数） — ディスプレイの1インチあたりのピクセル数。計算式：PPI = √（幅² + 高さ²）/ 対角線。PPIが高いほど、個々のピクセルが小さくなり、画像が滑らかに見えます。Appleは、標準的な視聴距離でPPIが300を超えるディスプレイをRetinaディスプレイと見なしています。

デバイスカテゴリによって密度は異なります：Apple Watch — 326 PPI、iPhone — 326〜460 PPI、iPad — 264 PPI、MacBook Pro — 254〜264 PPI。AndroidデバイスはDensity Bucketsで密度を分類します：mdpi（160 dpi）、hdpi（240）、xhdpi（320）、xxhdpi（480）、xxxhdpi（640）。これらのバケットは、デバイスにどのリソース（画像、dimens）がロードされるかを決定します。

開発におけるPPIの影響：密度が高いほど、テクスチャや画像の保存により多くのメモリが必要になります。500 PPIのディスプレイの1ピクセルは、同じ論理要素サイズで320 PPIのディスプレイよりも2.5倍多くのGPUメモリを必要とします。特定の密度バケットに合わせたアセットの最適化は、Android開発の標準的なプラクティスです。

px vs 論理ユニット：pt、dp、sp

物理ピクセル（px）は論理ユニット（pt、dp、sp）とは異なり、ハードウェア解像度に結びついておりスケーリングされません。論理ユニットは逆に、開発者を特定のディスプレイから抽象化し、100 ptの単一の値が異なるデバイスで同じ物理サイズで表示されることを可能にします。

変換式：iOSの場合 — px = pt × scale（scale = 1、2、または3）。Androidの場合 — px = dp ×（dpi / 160）。コードでpxを直接使用すると、異なる密度のデバイスでインターフェースの見え方が異なります：高PPI画面では要素が小さすぎ、低PPIでは大きすぎます。

コードでpxが使用されない理由

モバイルアプリケーションのソースコードでpxを使用することは、異なるピクセル密度のデバイスでインターフェースが正しく表示されない原因となるアンチパターンです。最新のフレームワーク（UIKit、SwiftUI、Jetpack Compose、XML Layouts）は、ピクセルでのサイズ指定を禁止または推奨していません。

• iOS UIKit — すべてのframe、bounds、constraint constantsはptで設定されます。ピクセルはUIGraphicsImageRendererを介したラスタライズ段階でのみ現れます
• SwiftUI — pxでサイズを設定するAPIはありません。すべての値はFont、frame、paddingを介してptです
• Android XML — dimens.xmlでpxを指定すると、Android Studioはlint警告を表示します：「テキストサイズには`px`ではなく`sp`を使用してください」
• Jetpack Compose — テキストにはTextUnit、要素にはDp。コンパイラは型の混在を許可しません

コードでpxを使用する唯一の正当なケースは、ラスターを扱う場合です：Bitmapの読み込み、Canvasでの画像レンダリング、MetalやOpenGLでの作業。これらの場合、pxはターゲットバッファの物理ピクセルであり、正しいレンダリングのために考慮する必要があります。それ以外のすべての場合、論理ユニットが使用されます。

画像とアセットのピクセル

画像とアイコンはピクセルで保存されますが、画面タイプごとに異なるバージョンが提供されます。iOSはAssets.xcassetsで@1x、@2x、@3xの接尾辞を使用します。Androidはdrawable-mdpi（1×）、drawable-hdpi（1.5×）、drawable-xhdpi（2×）、drawable-xxhdpi（3×）、drawable-xxxhdpi（4×）フォルダを使用します。システムは画面密度に基づいて自動的に正しいファイルを選択します。

アセット提供ルール：ベクター形式（PDF、SVG）で画像を作成し、必要なサイズのラスターコピーにエクスポートします。ベクターアセットは品質を損なうことなくスケーリングでき、リポジトリの容量を節約します。Androidでは、VectorDrawableを介してベクターリソースを直接使用でき、複数のラスターコピーの必要性がなくなります。