Safe Area
よみ: せーふえりあ
スマホのノッチ(切り欠き)・ホームバー・丸角・ステータスバーなどで、コンテンツが隠れたり押しにくくなる領域を避けた「安全領域」。iPhone X 以降の iOS 端末で必要性が認知され、現在は iOS / Android の最新機種で考慮必須。CSS の env(safe-area-inset-top / bottom / left / right) 関数で各方向の inset 量を取得して、要素配置を調整する。
本書のスタンス(Lesson 1-6 / 4-4)は「担当者は実機(または開発者ツールのデバイスエミュレータ)で必ず確認する範囲」。デザインカンプ上では問題なく見えても、実機で画面下端の CV ボタンがホームバーと重なって押しにくい、ノッチに隠れて KV のテキストが見切れる、といった事故は実機テストでしか見つからない。
設計の論点:フルスクリーン背景の上下に env(safe-area-inset-*) でパディングを追加、画面下に sticky 配置する CTA は safe-area + 16px 程度の余裕、ヘッダ固定時のステータスバー領域(viewport-fit=cover の指定が必要)、横画面時のノッチ(左右)対応、Android のジェスチャーナビ領域も考慮。古い端末(iPhone 8 以前 / Android 8 以前)では safe-area 値が 0 なので、フォールバックも問題ない。
落とし穴は、viewport-fit=cover を <meta> に指定し忘れて env() 関数が効かない、画面下の CTA がホームバーと重なって押せない、フルスクリーンの KV がノッチに隠れて文字が切れる、横画面でノッチ側だけ画面が欠ける、Android のジェスチャーナビと干渉、デバイスエミュレータでは再現できない実機固有の問題、新機種(Dynamic Island など)の登場で対応が後手に。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
- ディレクター
会話上での使用例
実機チェックで画面下の CTA がホームバーと重なっていた場面
-
Web 担当者
iPhone 実機で見ると、画面下の sticky な問い合わせボタンがホームバーと重なって押しにくいです
-
コーダー
Safe Area 対応が抜けてました。padding-bottom: env(safe-area-inset-bottom)を追加 + 16px の余裕を確保します。viewport-fit=cover の指定も追加で
横画面で KV のテキストがノッチに隠れた場面
-
Web 担当者
iPhone を横画面で見ると、メインコピーの左端がノッチに重なって読めません
-
デザイナー
横画面のSafe Area 左右 inset で、コンテナの margin-left / right を確保します。横画面時はメインコピーをセンタリングする方向で再設計します