micomia株式会社の井上です。今日はON/OFFの判別が難しいSafe Areaについて解説していこうと思います。%3Cbr%3E%3Cbr%3E%3Cbr%3E1. Safe Areaとはスマホには、ノッチ（画面上の黒い部分）やステータスバー（時間や電池残量のところ）など、画面の一部が使えない場所があります。Safe Areaを使うと、こういった部分と重ならないように、画面の表示位置を自動で調整してくれます。%3Cbr%3E2. Safe Areaを使わなかったらどうなるのか？Safe AreaをOFFにした時にどうなるのかを見てみましょう。%3Cbr%3E%3Cbr%3EこちらはiPhone 14Proのサイズですが、画面上部のノッチと被ってしまっています。この画面はマイページに当たりますが、この状態だとアイコンが見えにくいですよね。また、今回はflutterflowのデフォルトのNavBarを使用していますが、オリジナルのNavBarを使用すると、NavBarの下に謎の空白ができています。これを解決できるのが今回のSafe Areaです。%3Cbr%3E%3Cbr%3E3. どんな時にONにしてどんな時にOFFにするのかでは実際、どんな時にONにしてどんな時にOFFにするのかについてです。結論から言うと、私としては特別な仕様でない限りSafe AreaはONで良いという考えです。Safe AreaをONにすることで・ノッチやホームバーにUIが隠れない・様々な画面比率の端末に対して適切に表示できるようになります。「特別な仕様」と言うのは動画や地図など画面いっぱいに背景や画像を広げたい時です。逆に、SafeAreaをOFFにするのは、・スプラッシュ画面やランディングページ（背景を端まで見せたい）・地図や動画など、没入感を出したいコンテンツこのような場合にSafe AreaをOFFにすることで余白のないデザインになります。実際、普段使用している地図アプリや動画視聴アプリなどは端まで表示されていると思います。%3Cbr%3E%3Cbr%3E4. 最後に実機での見え方を確認すると安心FlutterFlowにはエディタ上でSafe Areaを非表示にする機能があります。非表示にすることで、実際の画面が端までどう表示されるかを確認することができます。デフォルトでONになっているShow Safe AreaをOFFにすることができます。先ほどの画像と比べると上下の余白がなくなっていることがわかります。これで実機での見え方を確認できます。非表示にした状態でボタン等が隠れていたりしないようであれば、安全に実装できていると判断して良いです。逆に、NavBarの下に不必要な余白があるなどの違和感がある場合はSafe AreaをONにして調整することでミスなく実装できます。%3Cbr%3E%3Cbr%3E5. まとめSafe AreaのON/OFFの判断としては、・基本的にはON・画面全体(端まで)表示させたい場合はOFF・エディタ上でSafe Areaを非表示にしてみてUIの問題がなければOKこの3つを基準に判断すると良いです。Safe AreaのON/OFFに関しては少しややこしい部分でもあるので、実機での見え方もしっかり確認しながら実装していきましょう。