開くデザインデータ開くデザインデータ(Figma)の作り方デザインデータ(Figma)の更新をライブラリに適用する手順デザインレビューリソースページレイアウトビューポート内にどのような要素をどのような順序で配置するかをページレイアウトと呼びます。SmartHRプロダクトの基本的なページレイアウトのパターンをまとめています。基本的な考え方SmartHR全体で一貫性のあるページレイアウトを提供することで、ユーザーはレイアウトを都度学習することなく経験に基づいてUIを予測しながらアプリケーションを利用できます。適切なページレイアウトの設計には、ユーザーの業務とオブジェクトモデルの理解が必要です。ユーザーの利用目的に沿って、オブジェクトの関係性や重要度を表すように設計してください。構成要素エラー画面を除き、SmartHRが提供する画面ではヘッダーをビューポート最上部に配置します。それぞれの要素同士をどのようにグルーピングするかについては、視覚的グルーピングの基準(WIP)を参照してください。コンテナ領域の幅ヘッダーを除いたコンテナ領域の幅は、基本的に1120pxとします。次のような場合には画面いっぱいにコンテナ領域を広げることもできます。余白の取り方に従います。代表的なページレイアウトの種類は以下の通りです。モーダルなページについてはモーダルなUIを、エラー画面についてはErrorScreenを参照してください。コレクション(テーブル)シングル(1カラム)シングル(2カラム)シングル(ベースのある見出し領域)サイドナビゲーションとコンテンツの2カラムコレクションとシングルの2カラムコレクション(テーブル)よくあるテーブルを用いてオブジェクトを一覧表示するパターンです。オブジェクトを一覧表示するページで利用します。オブジェクト同士を属性情報で比較するユースケースがある場合に有効です。見出し領域とよくあるテーブルで構成されます。利用例シングル(1カラム)オブジェクトの情報を「任意のまとまり(セクション)」に分類し、1カラムで表示するパターンです。オブジェクトを詳細表示するページで利用します。オブジェクトの情報がすべて並列な関係にある場合に利用してください。見出し領域と複数のセクションで構成されます。利用例シングル(2カラム)オブジェクトの情報を重要度やユースケースによって「主情報」と「副情報」に分類し、2カラムで表示するパターンです。オブジェクトを詳細表示するページで利用します。主情報と副情報の情報量・重要度に大きく差がある場合に有効です。確認しながら、書類を閲覧・操作したい従業員の基本的な情報(名前や部署など)を閲覧しながら、蓄積された過去の情報(経歴やスキル情報など)を閲覧したい見出し領域と副情報のセクション、主情報のセクションで構成されます。主情報を表示する領域の横幅は副情報を表示する領域の横幅の2倍以上の幅としてください。利用例シングル(ベースのある見出し領域)ベースのある見出し領域でコンテンツ領域との境界を明確に示すパターンです。オブジェクトを詳細表示するページで利用します。見出し領域とコンテンツ領域の境界が余白だけではわかりづらい場合に有効です。見出し領域とコンテンツ領域で構成されます。利用例サイドナビゲーションとコンテンツの2カラム「サイドナビゲーション」と「選択されたコンテンツ」を2カラムで表示するパターンです。設定画面など、AppNaviのドロップダウンではサイドナビゲーション項目を十分に表示できない場合に利用します。ナビゲーションがAppNaviのドロップダウンでは収まらない場合ナビゲーション同士を頻繁に行き来する場合ナビゲーションが階層構造になっている場合サイドナビゲーション領域とコンテンツ領域で構成されます。コンテンツ領域はコレクションかシングルのレイアウトをとります。利用例[WIP]コレクションとシングルの2カラム「オブジェクトの一覧」と「オブジェクトの詳細」を2カラムで表示するパターンです。一覧と詳細が別画面であると不都合がある場合に利用します。オブジェクトを頻繁に切り替える場合オブジェクトの見出し領域とコレクション領域、シングル領域で構成されます。シングル領域はシングルのレイアウトを取ります。