セーフエリア
ノッチや角丸、システム自身のUI要素に隠されないことが保証された画面領域。
画面が長方形でなくなった時点で、この概念が必要になった。iOS 11でsafeAreaLayoutGuideが導入され、Webでもenv(safe-area-inset-bottom)のようなCSS変数が用意されている。タップさせたいコンテンツはこの内側に置き、背景は外側まで広げて画面全体を埋めてかまわない。
これを怠ると、ボタンがホームインジケーターの下や角丸の部分に入り込み、押しにくくなる。領域は向きや端末によっても変わるため、固定値で書かず実行時に取得しなければならない。モバイルレイアウトで最もよくある初心者のミスの一つだ。