「基本機能」の共通設定

SmartHR基本機能の共通設定のレイアウトパターンをまとめています。

種類

共通設定のレイアウトパターンには大きく以下のバリエーションがあります。
構成やレイアウトはそれぞれの項目を参照してください。

一覧ビューはオブジェクトを一覧形式で表示します。
OOUIではコレクションのビューと呼ばれる画面で、基本的によくあるテーブルを含みます。

構成要素は次のとおりです。
構成要素の必須項目以外は任意の要素です。機能によって使用有無を判断してください。

一覧ビューの画面タイトルです。タイトルの付け方はHeadingのライティングを参照してください。

機能の説明や操作に関する補足テキスト、ヘルプセンターへのリンクなどを配置します。

直後に続く、独立したコンテンツを並列に表示する場合にTabBarを使います。
絞り込みなど、表示状態を切り替える機能としては使わないでください。

表形式で一覧表示するUIをよくあるテーブルと呼びます。次のような要素を持ちます。

画面タイトルとよくあるテーブルの見出しが同一で、冗長と判断した場合はよくあるテーブルのタイトルエリアを省略できます。

要素間の余白は以下のとおりです。詳細は余白の取り方を参照してください。

要素内やコンポーネント内の配置や余白は以下を参照してください。

詳細ビューはオブジェクトの詳細情報を表示します。OOUIではシングルビューと呼ばれる画面です。
一覧ビューのよくあるテーブルの移動リンクから移動する画面を想定しています。

構成要素は次のとおりです。
構成要素の（必須）項目以外は任意の要素です。機能によって使用の有無を判断してください。

一階層上のコンテンツに誘導するためのリンクです。詳細は、UpwardLinkを参照してください。

一覧ビュー（オブジェクトの一覧）に戻ることを想定しています。

詳細ビューの画面タイトルです。多くの場合{オブジェクトのインスタンス名}を表示します。

詳細ビュー全体に対するアクションをまとめたエリアです。このエリアは画面タイトルの右側に配置します。

主要なアクション以外は、基本的にドロップダウンメニューボタンでまとめて配置します。これは画面タイトルの横幅の領域を十分に確保するためです。

また、アクションが1つだけになった場合（例：オブジェクトの削除のみ）でも、他の詳細ビューとの一貫性を保つために、あえてドロップダウンボタンの中に配置することがあります。

ここに配置される典型的なアクションボタンの例は以下のとおりです。
以下に限らず、扱う機能やユースケースによって、必要なアクションボタンを配置できますが、詳細ビュー全体に対するアクションエリアであることに留意してください。

操作名	ボタンのラベル例	役割・動作
オブジェクトの削除	`権限を削除`	オブジェクトを削除するアクションです。「`{オブジェクト名}`を削除」と表記します。破壊的なアクションであるため、基本的に一覧ビューではなく詳細ビューの画面アクションエリアに配置します。押すと、オブジェクトの削除ダイアログを表示します。
オブジェクト名の編集	`権限名を編集`	オブジェクト名を変更するアクションです。「`{オブジェクト名}`名を編集」と表記します。押すと、オブジェクト名の編集ダイアログを表示します。
オブジェクトのプロパティの編集	`対象期間を編集`	オブジェクトのプロパティを変更するアクションです。多くは「`{プロパティ名}`を編集」と表記します。押すと、プロパティを編集するダイアログなどを表示します。

詳細ビューの説明や操作に関する補足テキスト、ヘルプセンターへのリンクなどを配置します。

詳細ビューのコンテンツです。よくあるテーブルや詳細情報などを含みます。