「よくあるテーブル」

SmartHRに頻出する、表形式で一覧表示するUIのパターンまとめています。

SmartHRでは、表形式で一覧表示するUIを「よくあるテーブル」と呼びます。
OOUIにおけるコレクションと、コレクションに関連するアクションやフォームをまとめた総称を指します。

構成

よくあるテーブルは、次の要素で構成されています。必須項目以外は任意の表示項目です。

1. テーブル
   • オブジェクト名（必須）
   • オブジェクトの情報
   • オブジェクトの操作
2. タイトルエリア
3. テーブル操作エリア
4. 一時操作エリア

1. テーブル

よくあるテーブルは、多くの場合「1項目1行の1次元リスト」のテーブルを含みます。

オブジェクト名

オブジェクトの名前を指します。行を識別するために必須要素として設定します。

移動リンクのスタイル

オブジェクトの詳細ビューへ移動する場合、オブジェクト名にリンクを設定します。 テキストリンクによる移動は「オブジェクトの操作」にはあたらないため、アクションボタンは使いません。

オブジェクトの情報

オブジェクトごとに表示する情報を指します。
テーブルにはオブジェクトの持つすべての情報を表示する必要はありません。 ユーザーが、それぞれのオブジェクトを識別・比較できる情報を検討して表示します。

オブジェクトの情報量および表示領域の幅

各機能のユースケースや仕様によって異なるため、オブジェクトの情報量（列数）および表示領域の幅には制限を設けません。

ただし、情報量が多いと表示領域を圧迫し、ユーザーの認知負荷を高めることになります。表示する情報量（列数）を十分に検討し、情報量に応じて表示領域の幅を適切に設定してください。

横スクロール

表示する情報が多く、どうしても省略できない場合には、コレクションエリア内を横スクロールすることを許容します。
ただし、横スクロールは情報の一覧性を下げるため、可能な限り横スクロールを必要としない設計を心がけてください。

情報の省略

情報を指定幅以上に表示したい、またはセル内で情報を複数行で表示させたくない場合、LineClampなどを使ってセル上の情報に三点リーダーをつけて省略します。 省略した情報は、マウスオーバーした際にTooltipを表示し、すべての情報を示してください。

ステータス

ステータスは、テーブル上でオブジェクトの状態を伝えやすくする目的で使用します。
たとえば、タスクを完了するために複数のアクション（例：依頼、提出、承認）が必要な場合、ステータスを表示すると、現在どの段階にあるのかが伝えやすくなります。

テーブルのヘッダー部分はステータスと表記します。
例外として、同じテーブル上に表示されるオブジェクトが複数のステータスを持ち、明確に呼び分ける必要がある場合は〇〇状況と表記します。（例：依頼状況、確認状況、送信状況）
状況や状態と表記すると、何の状況や状態を指すのかが曖昧なため避けましょう。

ステータスラベルの使い方は、StatusLabelを参照してください。

オブジェクトの操作

オブジェクトに対して「編集」「削除」などの操作をする場合、アクションボタンを設定します。
ユーザーの視線導線に合わせ、基本的にオブジェクト名より右側に設置します。

単一のオブジェクト操作

単一のオブジェクトに操作をしたい場合、アクションボタンをオブジェクト（行）それぞれに設置します。

ボタンは1つのオブジェクトに対して、最大3つを上限とします。それ以上設置する必要がある場合は、ドロップダウンメニューボタンにアクションを格納することを検討しましょう。

複数のオブジェクト操作

複数のオブジェクトに対して、一括で同時に操作する場合は、テーブル内の一括操作を参照してください。

2. タイトルエリア

よくあるテーブルの見出しと説明テキストを含むエリアです。

画面タイトルがよくあるテーブルの見出しを兼ねる場合は、タイトルエリアを省略できます。

A. 見出し

よくあるテーブルの見出しです。

• Headingを使用し、適切な見出しレベルを設定してください。
• 多くの場合、{オブジェクト名}という表記を採用しています。
  • よくあるテーブルの見出しに「一覧」はつけない

B. 説明テキスト

よくあるテーブルの説明を表示できます。
説明テキストを省略する場合は、見出しをテーブル操作エリアと並べて表示します。

3. テーブル操作エリア

テーブルにオブジェクト（行）を追加したり、オブジェクト全体を一括で変更するなどの、データの追加・一括変更などに関わる操作をまとめたエリアです。

このエリアは、テーブルを含むBase外の右上（見出しの右側）に配置します。

• アクションボタンとして、Buttonや、類似する操作をまとめたドロップダウンメニューボタンを配置できます。
• ユーザーが操作に迷わないように、ボタンは最大3つを上限とします。

アクションボタンの例

ここに配置される典型的なアクションボタンの例は以下のとおりです。
以下に限らず、扱う機能やユースケースによって、データの追加・一括変更などに関わるアクションボタンを配置できます。

4. 一時操作エリア

テーブルの検索やフィルタリングなど、テーブルのデータには影響しない一時的な操作をするためのボタンやフォームをまとめたエリアです。

このエリアは、テーブルを含むBase内の上部、およびBase外の下部に配置します。

Base内の上部に配置する操作の例

このエリアに配置される典型的な操作の例は以下のとおりです。
以下に限らず、扱う機能やユースケースによって、一時的な操作に関するボタンやフォームを配置できます。

Base外の下部に配置する操作の例

レイアウト

基本的に余白の取り方に従って配置します。
要素間の余白は以下のとおりです。（コンポーネント内の余白は省略）

種類

テーブルに表示するオブジェクトの数（行数）に応じて、よくあるテーブルのバリエーションを定義します。
それぞれで各要素（テーブル、タイトル、テーブル操作エリア、一時操作エリア）の表示パターンが異なります。

初期表示

オブジェクトの登録数が0件である初期状態の表示パターンは以下のとおりです。

1. テーブル
   • テーブルヘッダー（thead）は表示したままとします。
   • オブジェクトのエリアには、{オブジェクト名}はまだ登録されていません。というメッセージと、オブジェクト追加を促すボタンを上下左右中央に表示します。
     • オブジェクト追加を促すボタンは、基本的にSecondaryボタンのサイズ小を使います。
2. タイトル
   • 表示の制約はありません。
3. テーブル操作エリア
   • オブジェクトがないと成立しないアクションボタン（並べ替え, 一括更新（CSV））は非表示とします。
4. 一時操作エリア
   • 操作対象のオブジェクトが存在しないため、一時操作エリアは非表示とします。
   • テーブルのページ送りも非表示とします。

検索結果なし

オブジェクトの検索結果や絞り込み結果が0件であった場合の表示パターンです。 検索結果のオブジェクト数は0件ですが、オブジェクト自体はテーブルに存在しています。

1. テーブル
   • テーブルヘッダー（thead）は表示したままとします。
   • オブジェクトのエリアには、お探しの条件に該当する{オブジェクト名}はありません。<br />別の条件をお試しください。というメッセージを上下左右中央に表示します。
2. タイトル
   • 表示の制約はありません。
3. テーブル操作エリア
   • 表示の制約はありません。
4. 一時操作エリア
   • 一時操作エリアは表示したままとします。
   • テーブルのページ送りは非表示とします。

1ページ未満

オブジェクトの登録数が1ページに収まる（Paginationがない）場合の表示パターンは以下のとおりです。

1. テーブル
   • 表示の制約はありません。
2. タイトル
   • 表示の制約はありません。
3. テーブル操作エリア
   • 表示の制約はありません。
4. 一時操作エリア
   • テーブルのページ送りは非表示とします。

状態

［WIP］並べ替え（ドラッグアンドドロップ）

WIP

関連リンク

• 検索結果に何も参照できないときに表示する文言｜UIテキストとプロダクト用語定義｜DocBase