Swiftにおける@3x画像と1ptの表示ピクセル数：Retinaディスプレイの謎を解く

はじめに (対象読者・この記事でわかること)

この記事は、Swiftを用いたiOSアプリ開発に携わる方、特にUIデザインや表示に関する細部にこだわりたいと考えている開発者を対象としています。本記事を読むことで、以下の点が明確になります。

@3x画像が、異なる画面解像度を持つRetinaディスプレイにおいて、1ポイント（pt）あたり具体的に何ピクセル（px）で描画されるのか。
SwiftのUIKitやSwiftUIにおける、画面解像度とポイント、ピクセルの関係性の理解を深めることができます。
UI要素のサイズ設計や画像アセットの準備において、より正確な判断を下せるようになります。

近年、スマートフォンのディスプレイは高解像度化が進んでおり、Retinaディスプレイの登場以降、UIの「ポイント」と実際の「ピクセル」の関係性は開発者にとって常に重要なテーマです。特に、Retinaディスプレイの「@3x」という接頭辞は、画像リソースの管理に不可欠ですが、それが画面上の「1pt」にどう結びつくのか、直感的に理解しづらい部分もあるでしょう。この記事では、この疑問に明確な答えを提供し、皆さんの開発効率とUI品質の向上に貢献することを目指します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

Swiftの基本的な文法
iOSアプリ開発におけるUI要素（View）の概念
点（Point）とピクセル（Pixel）の違いに関する基本的な理解

Retinaディスプレイにおける「ポイント」と「ピクセル」の基本

iOSデバイスの画面表示において、UI要素のサイズを指定する際には「ポイント（pt）」という単位が一般的に使用されます。これは、ユーザーが直接操作するUIの「見た目上の大きさ」を定義するための単位であり、デバイスの画面解像度に依存しない抽象的な値です。

一方、「ピクセル（px）」は、ディスプレイを構成する物理的な光点の最小単位です。解像度が高いディスプレイほど、同じ面積あたりに多くのピクセルが含まれます。

Appleは、高解像度ディスプレイ（Retinaディスプレイ）の登場に合わせて、「ポイント」と「ピクセル」の関係性を「解像度係数（Scale Factor）」という概念で定義しました。この解像度係数が、同じ「1pt」という値が、異なるデバイスで何ピクセルとして描画されるかを決定します。

標準解像度 (Scale Factor 1x): 1pt = 1px
Retinaディスプレイ (Scale Factor 2x): 1pt = 2px × 2px = 4px
より高解像度なRetinaディスプレイ (Scale Factor 3x): 1pt = 3px × 3px = 9px

このように、Scale Factorが2xであれば1ptは4ピクセル、3xであれば1ptは9ピクセルとして描画されることになります。これは、高解像度ディスプレイにおいて、より滑らかでシャープな表示を実現するために導入されました。

@3x画像と1ptの表示ピクセル数：Swiftにおける解釈

では、本題である「@3xのRetina displayで1ptの値はどう表示されますか？」について、Swift開発の文脈で掘り下げてみましょう。

@3x画像とは何か？

Swift（およびiOS開発全体）において、「@3x」という接頭辞は、画像アセットが「3倍の解像度係数（Scale Factor 3x）」を持つデバイスでの使用を想定して作成されていることを示します。

具体的には、あるUI要素が「100pt × 50pt」と指定された場合、開発者は以下のような画像アセットを用意します。

標準解像度 (1x): 100px × 50px
Retinaディスプレイ (2x): 200px × 100px
高解像度Retinaディスプレイ (3x): 300px × 150px

これらの画像は、ImageViewなどのUIコンポーネントに設定されます。iOSシステムは、現在実行されているデバイスの解像度係数に応じて、最適な解像度のアセットを自動的に選択して表示します。

1ptが@3xディスプレイで何ピクセルになるか？

ここで、ご質問の核心である「@3xのRetina displayで1ptの値はどう表示されますか？」について、改めて確認します。

前述の「解像度係数」の定義に基づくと、Scale Factorが3xのデバイスでは、以下のようになります。

1ポイント (pt) = 3 ピクセル (px) × 3 ピクセル (px) = 9 ピクセル (px)

つまり、@3xのRetinaディスプレイでUI要素のサイズを「1pt」と指定した場合、それは実際には 9ピクセル の領域に描画されることになります。

これは、開発者が画像アセットを準備する際の基準となります。もし、1pt × 1pt の小さなアイコンをデザインする場合、@3xディスプレイでシャープに表示するためには、30px × 30px の画像を用意する必要がある、ということです。

Swiftコードでの例:

SwiftUIやUIKitにおいて、frame()やsize()といったプロパティでpt単位でサイズを指定すると、システムは自動的にデバイスの解像度係数に基づいてピクセル計算を行い、描画します。

Swift

// SwiftUI の例
Text("Hello")
    .font(.system(size: 14)) // フォントサイズはpt指定
    .frame(width: 100, height: 20) // フレームサイズもpt指定

// UIKit の例 (UIView の場合)
let myView = UIView()
myView.frame = CGRect(x: 0, y: 0, width: 100, height: 20) // CGRectのwidth/heightはpt指定

これらのコードで指定された 100 や 20 という値は、自動的にScale Factorに応じたピクセル数に変換されて画面に描画されます。例えば、@3xディスプレイでは、width: 100 は 300px、height: 20 は 60px に相当します。

なぜこのような仕組みになっているのか？

この「ポイント」と「ピクセル」の分離、そして解像度係数によるスケーリングは、以下の目的のために導入されました。

UIの互換性維持: 開発者は、デバイスの画面解像度を意識せずに、統一された「ポイント」単位でUIのレイアウトを設計できます。これにより、異なる解像度のデバイス間でも、UIの見た目の大きさが大きく変わることを防ぎます。
滑らかな表示: 高解像度ディスプレイでは、より多くのピクセルを1つのポイントに割り当てることで、テキストや画像のエッジが滑らかになり、視覚的な鮮明さが向上します。
後方互換性: 新しいデバイスが登場しても、既存のアプリがそのまま（あるいは最小限の修正で）表示されるように考慮されています。

画像アセットの命名規則と自動選択

iOSでは、画像アセットのファイル名に「@1x」「@2x」「@3x」といったサフィックスを付けることで、システムが自動的に適切な解像度の画像を選択します。

例えば、icon.png という名前の標準解像度画像がある場合、Retinaディスプレイ用に icon@2x.png、さらに高解像度ディスプレイ用に icon@3x.png を用意します。XcodeのAssets Catalogにこれらの画像を追加すると、システムは実行環境に応じて正しく画像を選択します。

もし、これらのサフィックスを付けずに画像を追加した場合、システムはそれを「@1x」として扱い、必要に応じて拡大・縮小して表示しようとしますが、これは画質の低下を招く可能性があるため、推奨されません。

開発者が注意すべき点

画像アセットの準備: @3xディスプレイをターゲットにする場合、デザイン通りの品質を保つためには、必ず3倍の解像度で画像を作成し、@3xサフィックスを付けてAssets Catalogに追加しましょう。
テキストのフォントサイズ: フォントサイズもpt単位で指定されます。高解像度ディスプレイでは、より多くのピクセルが割り当てられるため、文字がより滑らかに表示されます。
カスタム描画: draw(_:)メソッドなどでカスタム描画を行う場合、context.scaleBy(x: y:)などのメソッドを利用して、解像度係数を考慮した描画処理を行う必要があります。UIKitのUIGraphicsBeginImageContextWithOptionsやSwiftUIのGraphicsContextは、この解像度係数を自動的に考慮してくれるため、適切に利用することが重要です。

まとめ

本記事では、Swift開発における@3x画像とRetinaディスプレイ、そして1ポイント（pt）の表示ピクセル数との関係について、詳細に解説しました。

@3xディスプレイにおいて、1ポイント（pt）は9ピクセル（px × px）として描画されます。
これは、iOSが「解像度係数（Scale Factor）」を用いて、UIの見た目上の大きさ（pt）と物理的な表示領域（px）を抽象化・スケーリングしているためです。
開発者は、画像アセットの準備において、@1x、@2x、@3xといったサフィックスを適切に使用することで、あらゆるデバイスで高品質なUI表示を実現できます。

この記事を通して、Swift開発における画面解像度とUI要素の表示に関する理解を深め、より洗練されたユーザーインターフェースを持つアプリケーション開発に繋がることを願っています。今後は、高解像度ディスプレイにおける画像圧縮や、WebPなどの新しい画像フォーマットの活用についても記事にする予定です。

Swiftにおける@3x画像と1ptの表示ピクセル数：Retinaディスプレイの謎を解く📱