はじめに

Xcodeで『.xib』や『Main.storyboard』で表示される画面を触っていて、ViewとSafe Areaの違いについて気になり、まとめました。

「Viewは画面全体を示しているのに、Safe Areaはなんで上下を除いた中央部分だけなのか？」

そんな疑問を解決するために、iPhoneの画面構造を「Safe Area」と「システム予約領域」、そしてそれらを正しく配置するための「Constraints（制約）」という3つのキーワードで整理しました。

1. iPhoneの画面は大きく2層に分けられる?

iPhoneの画面をレイアウトする際、Viewの「画面全体」を使えばいいというわけではありませんでした。画面にはiOSシステム専用の場所が最初から決まっていたからです。
私なりに調べて大きく2つに分けられていることに気がつきました。

システム予約領域（避けるべきハードウェア部分）

iOSが、時刻や電波状況を表示したり、ホーム画面に戻るためのスワイプ操作を受け付けたりするために、すでに使用不可なエリアです。

上部： ステータスバー、ノッチ、Dynamic Islandがあるエリア。
下部： ホームインジケーター（ホームに戻るための細い棒）があるエリア。

Safe Area（ユーザーが快適に操作できる安全な場所）

上下の予約領域を除いた部分であるSafe Areaが、**「アプリのコンテンツを安全に配置できるエリア」**のことです。Safe Areaがあることにより、ハードウェア部分との干渉を避けられ、もしiPhoneの形状等が変わったとしても、制作したアプリが崩れる心配がなくなります。

2. 図解で見る画面構造

言葉で説明するよりも、図で見ると一目瞭然です。

※Nano bananaで生成しております。

赤色のエリア（システム予約領域）： 既にiOSのための場所になっていて、ボタンやラベルの配置はできません。
緑色のエリア（Safe Area）： 私たちのアプリのための場所。ここにボタンやラベル等々を配置します。
一番外側の青枠（View / Superview）： 背景色や背景画像は、この全体に広げることで使用するアプリの世界観を感じられます。

3. コンテンツを固定する「Constraints（制約）」

これは私の戒めになりますが...
ラベルやボタン等(コンテンツ)を置いたら「必ず」制約をつける。
Xcodeでラベル（UILabel）を配置しただけでは、iPhoneの機種（画面サイズ）が変わった瞬間にレイアウトがおかしなことになりました。
崩れないレイアウトを作るための鉄則は、**制約（上下左右の配置を決める）**です。

どんなに小さなパーツでも、配置したら必ず制約を定義する癖をつけていきたいと思います。

まとめ

iPhoneレイアウトの基本は、この3つです。

予約領域（赤）：システム専用。文字やボタンの配置は禁止！
Safe Area（緑）：ナビゲーションバーなどの『システム要素』や『ハードウェアの物理的な形状』にコンテンツ（文字やボタン等々）が遮られない部分
Constraints（制約）：アプリが崩れないために配置（上下左右）を決める

今回は普段何気なく使用しているiPhoneの画面に色々なルールが設定されていることを
Swift学習を通して理解できた気がしました。これからも広く深く学んでいきます。

参考にした記事

https://developer.apple.com/documentation/UIKit/positioning-content-relative-to-the-safe-area