Notch — 基本、画面切り欠きへのインターフェース適応

Notchとは？

Notch（切り欠き）は、スマートフォン画面の上部にある領域で、フロントカメラ、イヤピーススピーカー、近接センサー、環境光センサー、そしてiPhone X以降では赤外線Face IDカメラ、ドットプロジェクター、フラッドイルミネーター（TrueDepthカメラシステム）が配置されています。ノッチは、必要なすべてのセンサーを維持しながら、使用可能な画面領域を増やすために導入されました。上部ベゼルの代わりに、ディスプレイが切り欠きの周りを上方に拡張します。

寸法：標準的なiPhoneのノッチは、幅約~34mm（6.1インチモデルのポートレートで約~209pt）、高さ約~5mm（約~30pt）です。ノッチの両側には「耳」— 切り欠きの左右にある小さな画面セクションがあります。右の「耳」は通常、時刻、バッテリーインジケーター、Wi-Fiを表示し、左はキャリアとステータスを表示します。ランドスケープ方向では、iOSはステータスバーの全幅にわたって黒いバーでノッチを隠します。コンテンツは切り欠き領域に表示されません。

iPhoneだけではない：ノッチの概念は多くのAndroidメーカーに採用されました。Google Pixel 3 XL、OnePlus 6、Huawei P20、Xiaomi Mi 8 — すべてに切り欠きがありました。一部のメーカーはさらに進化しました。水滴型ノッチ、パンチホールカメラ（画面の穴）、スライダーカメラ（格納式モジュール）。現代のAndroidフラッグシップ（Samsung Galaxy S23+、Google Pixel 8 Pro）はパンチホールを使用しています。画面上部にカメラ用の最小限の穴で、広い切り欠きはありません。

iOSのSafe Area: safeAreaInsets

Safe Areaとは、ビュー内の長方形領域で、システムインターフェース要素（ノッチ、丸い画面の角（corner radius）、Home Indicator、タブバー、ナビゲーションバー）によって確実に重ねられない領域です。Safe Areaの寸法は、UIView.safeAreaInsetsプロパティを通じて返されます。top、left、bottom、rightの値を持つUIEdgeInsetsです。ノッチ付きiPhoneの場合、top inset = ~44 pt（ポートレート）、または~0 pt（黒いバー付きランドスケープ）です。

// コンテンツ配置のためのsafeAreaInsetsの使用
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Safe Areaマージンの読み取り
        let safeArea = self.view.safeAreaInsets

        // デバッグ用の値のロギング
        print("Top inset: \(safeArea.top)")    // ~44 pt（ノッチあり）
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt（Home Indicatorあり）

        // Safe Areaを使ったタイトルの配置
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Safe Area変更の処理（回転、Multi-Tasking）
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // レイアウトの再計算
    }
}

Auto LayoutとSafe Area：Interface Builderでは、「Superview」の代わりにアンカーターゲットとして「Safe Area」を使用します。プログラムによるレイアウトには、safeAreaLayoutGuideを使用します: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor)。iOSは、デバイスの回転、iPadのSplit Viewへの移行、キーボードの表示/非表示、方向の変更時にsafeAreaInsetsを自動的に更新します。すべての標準UIKitコントローラー（UINavigationController、UITabBarController）は既にSafe Areaを考慮しています。カスタムビューとコントローラーは、明示的にsafeAreaInsetsを使用する必要があります。

AndroidのNotch: DisplayCutoutとWindowInsets

DisplayCutoutは、API 28（Android 9.0）で追加されたAndroid SDKクラスで、画面上の切り欠き領域を記述します。WindowInsets.displayCutout()を介して取得できます。このクラスは、boundingBoxList（切り欠きを記述する矩形のリスト）とsafeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight（安全なコンテンツ表示のための最小マージン）を返します。Androidは様々な切り欠き構成をサポートしています。中央（iPhoneのような）、側面（角にあるカメラ）、二重（2つのカメラ）、パンチホール。

// ActivityでのDisplayCutout向けインターフェース適応
class NotchAwareActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 切り欠き領域でのコンテンツ表示を許可（必要な場合）
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // WindowInsetsを介したDisplayCutoutの取得
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // 上部コンテンツのマージン設定
            headerView.updatePadding(top = safeTop)
        }
    }
}

表示モード（layoutInDisplayCutoutMode）：ALWAYS — コンテンツは切り欠き領域に表示可能（フルスクリーンアプリ、ビデオ、ゲーム用）；NEVER — コンテンツは切り欠きを決して重ねず、システムがマージンを追加；SHORT_EDGES — コンテンツは短い端でのみ切り欠き領域に表示（上部ノッチ付きポートレートアプリ用）。デフォルトモードはSHORT_EDGES（Android 12以降）。パンチホールカメラの場合、切り欠きは小さく、多くのアプリは画面使用を最大化するためにALWAYSを使用します。

Notchの進化: iPhone XからDynamic Islandへ

iPhone X（2017） — ノッチを備えた最初のAppleスマートフォン。切り欠きにはFace ID用のTrueDepthカメラ（赤外線カメラ、ドットプロジェクター、フラッドイルミネーターのシステム）が含まれていました。切り欠きの寸法：約34 mm × 5 mm。iOS 11で、Appleはアプリ適応のためのSafe Areaを導入しました。ユーザーは意見が分かれました。一部はFace IDに必要なものとしてノッチを受け入れ、他の人は「切り取られた」画面として批判しました。

iPhone 13（2021） — Appleはスピーカーを上部ベゼルに移動することでノッチを20%縮小しました。これが最後のクラシックなノッチでした。iPhone 14と14 Plus（2022）は縮小されたノッチを維持しました。iPhone 14 ProとPro MaxはDynamic Islandを導入しました。これは、カメラとFace IDセンサーを組み合わせた楕円形の切り欠きで、動的に形状を変え、システム通知（タイマー、音楽、AirPods接続）を表示します。Dynamic Islandは独自のAPI（ActivityKit、Live Activities）を持つソフトウェアプラットフォームになりました。

Dynamic Islandは単なる切り欠きではなく、インタラクティブなインターフェース要素です。AirPodsを接続すると、アイランドが拡張してアイコンとステータスを表示します。タクシーを呼ぶと（Uber）、到着時間が表示されます。アプリを最小化すると、タイマーがアイランドに表示されます。Dynamic IslandはiPhone 14 Pro/Pro Max、iPhone 15/15 Pro/15 Pro Max、iPhone 16/16 Pro/16 Pro Maxで利用可能です。Dynamic IslandのSafe Area：top inset = 54 pt（クラシックノッチより10 pt大きい）。

切り欠きのあるインターフェースのデザインルール

ノッチの後ろにコンテンツを隠さないでください — 自動マージン計算にはSafe AreaまたはDisplayCutoutを使用してください。固定のマージン値（例：44 pt）を設定しないでください。デバイスや方向によって異なります。Safe Areaを読み取るには常にシステムAPIを使用してください：iOSのsafeAreaInsets、AndroidのwindowInsets.displayCutout。これにより、すべてのデバイスで正しい表示が保証されます：iPhone SE（ノッチなし）、iPhone 14 Pro（ノッチあり）、iPhone 15（Dynamic Island）、iPad（ノッチなし、ただしHome Indicatorあり）。

ランドスケープ方向 — 特別なリスク領域です。ランドスケープでノッチ付きiPhoneでは、iOSは自動的にステータスバーの全幅にわたって黒いバーを追加します（コンテンツはノッチの左右に表示されません）。これは、Safe Area inset = 0 top、ただし拡大されたleft/right insets（~47 pt）によって行われます。この動作を無効にしようとしないでください。App Storeはランドスケープでコンテンツに画面の「禁止」領域を使用するアプリを拒否します。フルスクリーンビデオには、自動的にコントロールをノッチ領域外に配置するAVPlayerViewControllerを使用してください。

背景とステータスバー：カスタム背景色を使用する場合、ノッチの後ろの領域を含む画面全体を塗りつぶす必要があります。ステータスバーの上にコンテンツを描画しないでください。Safe Areaを使用してください。ダークモードの場合、ステータスバーが読みやすいことを確認してください。背景スタイルに合わせてpreferredStatusBarStyleを設定します（明るい背景の暗いテキストには.default、暗い背景の明るいテキストには.lightContent）。

Notch適応のテスト

シミュレーターとエミュレーター：Xcodeはノッチ付きのすべてのiPhoneモデル（iPhone X–14）とDynamic Island（iPhone 14 Pro–15）のシミュレーターを提供します。Android Studioは様々な切り欠き構成（Google Pixel 3 XL、カスタム切り欠きエミュレーター）のエミュレーターを提供します。ポートレートとランドスケープ方向、キーボードありとなし、Split View（iPad）でテストしてください。すべてのコンテンツが読みやすく、隠れていないことを確認してください。

実機：シミュレーターと実機ではノッチが異なる場合があります。例えば、iPhone 14 ProシミュレーターはDynamic Islandを表示しますが、実際のインタラクティブ性（Live Activities）はありません。Androidの場合、パンチホールカメラは正確にエミュレートされない可能性があります。最善の方法は実機でテストすることです。最小セット：iPhone SE（ノッチなし）、iPhone 14（ノッチあり）、iPhone 15 Pro（Dynamic Island）、パンチホール付きAndroid、ウォーターフォール画面付きAndroid（Samsung Edge）。

ツール：iOSの場合、「Show Safe Area Insets」オプション付きのXcode View Debuggerを使用すると、Safe Areaの境界が視覚的に表示されます。Androidの場合 — Android StudioのLayout Inspectorで、AttributesパネルにWindowInsetsとDisplayCutoutが表示されます。Accessibility Inspectorも便利で、Safe Area内のすべての要素がVoiceOver/TalkBackでアクセス可能かどうかを確認できます。ノッチはないがHome Indicator（下部マージン約21 pt）と丸い角があるiPadを忘れないでください。