モバイルレイアウト

モバイル対応をする基準と、その対応方法を定義します。

SmartHRにおいて、従業員のモバイルからの利用は全体の7割以上を占めます。業種や業態によっても異なりますが、業務中にデスクトップを使わない利用者も多いためモバイルの考慮は必須です。

モバイルレイアウトの定義

「モバイルレイアウト」とは、スマートフォンなどのモバイルでの利用を想定したUIを指します。

メディアクエリのセマンティックトークンのうち SCREEN_SMALL に一致する環境である場合、その環境はモバイルと判定しモバイルレイアウトの適用対象とします。

本ドキュメントでは以下のように使い分けます。

モバイルはデスクトップと比べて、移動中や空き時間のような短い時間で利用される傾向があります。デスクトップ向けに設計されたUIをレスポンシブに再レイアウトするだけでなく、情報の取捨選択や簡潔な表現の徹底が求められます。

モバイルにおける従業員向け機能では、基本的に1画面で複数の操作をさせるべきではありません。デスクトップ向けに最適化されたUIをレスポンシブデザインで対応するには限界があるため、アダプティブに設計する必要があります。

モバイルでは画面の幅が小さいことから、パディングの一部を小さく設定することで、より多くのコンテンツを表示できるようにします。余白の取り方を参照してください。

コンポーネントごとの使い方は、各コンポーネントのページの「モバイル」のセクションを参照してください。

useEnvironmentフックを使ってmobileを取得し、必要に応じてコンポーネントに割り当ててください。各プロダクトでユーザーエージェントの判定を実装する必要はありません。

SmartHR UIのコンポーネントはレイアウトやスタイルが自動的に切り替わるよう順次改修予定です。