FloatArea

画面内に固定表示する領域のためのコンポーネントです。スクロール位置によらずフォーム送信ボタンや主要アクションを常時見せるときに使います。

主にモーダルなUIを作るために使います。

レイアウト

基本的な考え方

FloatAreaには、画面全体、もしくは画面の一部を対象としたボタンやテキストを置きます。画面内のどの部分が対象の領域なのかを視覚的に示すことを目指して、FloatAreaの位置や幅、レイヤー順序を調整してください。

レイアウト例

スクロール固定中

対象の領域の左右に0.5（8px）ずつはみ出し、画面の下辺から1.5（24px）の余白をとった位置に置きます。

スクロール固定解除後

対象の領域の下辺との間に 1.5（24px） の余白を取ります。

デザインパターン

モーダルなUIおよび共通設定のアクションビューを参照してください。

モバイル

モバイル環境は画面が狭いため、FloatAreaが常に画面の下部に固定されていると対象の領域の閲覧や操作の妨げとなってしまいます。

そのため、FloatAreaを画面の下部に固定せず、対象の領域の末尾に置くことを推奨します。 ただしユースケースに応じて必要な場合はFloatAreaを画面の下部に固定できます。

FloatAreaを画面の下部に固定する場合は、仮想キーボードの入力操作の妨げにならないよう、キーボード入力時（入力要素にフォーカス中）はFloatAreaの固定を解除することで、操作領域を確保します。

レイアウト

画面の下部に固定する場合

FloatAreaを画面の下部に固定する場合、左右の余白をなくし画面幅いっぱいに表示します。

Secondaryボタン（任意）とPrimaryボタンは横いっぱいに並べます。 また、Tertiaryボタン（任意）は、上記のボタン群の下部に配置します。

余白

FloatAreaを画面の下部に固定する場合の余白は以下のとおりです。

使い方チェックリスト

FloatArea

参照元：レイアウト > 基本的な考え方 「レイアウト > 基本的な考え方」の本文へ移動

• Must

  FloatArea は画面内のどの部分が対象の領域なのかを視覚的に示すことを目指して、位置・幅・レイヤー順序を調整する

参照元：レイアウト > レイアウト例 > スクロール固定中 「レイアウト > レイアウト例 > スクロール固定中」の本文へ移動

• Must

  スクロール固定中の FloatArea は、対象の領域の左右に 0.5（8px）ずつはみ出し、画面の下辺から 1.5（24px）の余白をとった位置に置く

参照元：レイアウト > レイアウト例 > スクロール固定解除後 「レイアウト > レイアウト例 > スクロール固定解除後」の本文へ移動

• Must

  スクロール固定解除後の FloatArea は、対象の領域の下辺との間に 1.5（24px）の余白を取る

参照元：モバイル 「モバイル」の本文へ移動

• Must

  モバイルで FloatArea を画面の下部に固定する場合は、キーボード入力時（入力要素にフォーカス中）に FloatArea の固定を解除して操作領域を確保する
• Should

  モバイルでは FloatArea を画面の下部に固定せず、対象の領域の末尾に置く

参照元：モバイル > レイアウト > 画面の下部に固定する場合 「モバイル > レイアウト > 画面の下部に固定する場合」の本文へ移動

• Must

  モバイルで FloatArea を画面の下部に固定する場合、左右の余白をなくし画面幅いっぱいに表示する
• Must

  モバイルで Secondary ボタン（任意）と Primary ボタンは横いっぱいに並べる
• Must

  モバイルで Tertiary ボタン（任意）は、Secondary・Primary ボタン群の下部に配置する

Props