Safe Area
よみ: せーふえりあ
スマホ画面のノッチ（カメラの切り欠き）や、画面下のホームバー、四隅の丸角などに、Web サイトの文字やボタンが被らないようにするための「安全な領域」のことです。現在、iOS・Android 問わず、スマホサイトを制作する上で必須の考慮事項となっています。
Web 担当者が知っておくべき「実機確認」の重要性
パソコン上のデザイン案（カンプ）では綺麗に見えても、実際のスマホで見ると事故が起きていることが多々あります。
これらは、実機（またはブラウザの開発者ツール）で確認して初めて発覚するため、テストアップ時の入念なチェックが不可欠です。
制作者とすり合わせる実装のポイント（設計上の論点）
制作会社やエンジニアに対しては、以下の対応が漏れていないか確認しましょう。
- CSS での余白調整：
env(safe-area-inset-*)関数を使い、セーフエリアの外側に十分な余白（パディング）を設けているか。 - 設定タグの記述：上記を効かせるための
<meta name="viewport" content="viewport-fit=cover">が HTML に指定されているか。 - 横画面への対応：スマホを横に持った際、左右のノッチで画面が欠けないか。
よくある落とし穴（注意点）
- 最新機種への対応遅れ：iPhone の「Dynamic Island（画面上部の黒い浮かぶ島）」など、新機種が出るたびに仕様が変わるため、情報収集を怠ると表示崩れを起こします。
- Android 特有の UI：iPhone だけでなく、Android の「ジェスチャーナビゲーション（画面端からのスワイプ操作領域）」とボタンが干渉しないかも確認が必要です。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
- ディレクター
会話上での使用例
iPhone実機で確認したらCTAボタンがホームバーと重なっていた場面
-
Web担当者
iPhoneの実機で見ると、画面下に固定している問い合わせボタンがホームバーと重なって押しにくいんです。
-
コーダー
Safe Areaの対応が抜けていました。下側にenvでパディングを足して、さらに16pxほど余裕を持たせます。あわせてviewport-fitの指定も入れておきますね。
横画面でメインコピーがノッチに隠れていた場面
-
Web担当者
iPhoneを横向きにすると、メインコピーの左端がノッチに重なって読めなくなります。
-
デザイナー
横画面のSafe Areaの左右insetを取って、コンテナの左右マージンを確保します。横向きのときはメインコピーを中央寄せにする方向で、レイアウトを組み直しますね。