セーフエリア
Safe Area
別名: 安全領域
ライブデモ
説明
一言で説明
スマートフォンのノッチ（切り欠き）やホームインジケーターなどのシステム部品と重ならない、コンテンツを安全に表示できる領域。
いつ使う？
全画面表示のアプリやWebサイトのデザイン。OSのUIによってコンテンツが隠れるのを防ぐために考慮が必要。
💡 日常の言い方
「スマホのカメラの出っ張りとかに文字が被らない、安全な表示エリア」
似ている用語との違い
セーフエリア vs ビューポート
ビューポートは画面全体の表示領域。セーフエリアはその中の『部品に邪魔されない有効な領域』のこと。
AIへの指示例
iPhoneのノッチに対応したセーフエリアを設定して。ヘッダーのパディングを env(safe-area-inset-top) を使って自動調整して。