「基本機能」の共通設定の操作権限項目

SmartHR基本機能の共通設定おける、操作権限を設定する項目のレイアウトパターンをまとめています。

操作権限項目を使用する実際の画面としては、主に共通設定の「権限」「アクセストークン」が該当します。

構成

操作権限項目は、以下の要素で構成されています。

タイトルエリア
コンテンツエリア

1. タイトルエリア

タイトル

タイトルはブロックタイトルを使用し、操作権限の内容がわかるテキストを表示します。

1つの項目に複数の操作権限がある場合、上位のタイトルにはブロックタイトル、下位のタイトルにはサブ・ブロックタイトルを使用して、抱合関係を示します。

説明テキスト

説明テキストは、操作権限について全体的な説明が必要な場合に、1行程度で簡潔に収まるテキストを挿入します。
より詳細な説明が必要な場合は、Iconの使い方を参照してヘルプページへのリンクの挿入を検討してください。

2. コンテンツエリア

コンテンツエリアは、背景色にCOLMUNを指定して各項目の範囲を明示します。内容は、以下の要素で構成されています。

A. 設定項目
B. 補足テキスト

A. 設定項目

設定項目は、操作権限に紐づく設定内容を複数の選択肢から選択できるようにした項目です。
状況に応じて、チェックボックスやラジオボタンを使い分けます。

任意の数の設定項目を同時に有効・無効にできる場合は、チェックボックスを使います。
複数の選択肢から1つを選択する場合は、ラジオボタンを使います。

B. 補足テキスト

補足テキストは、設定項目について補足する必要がある場合に、余白の取り方に従ってエリア内に挿入します。
より詳細な内容の説明が必要な場合は、Iconの使い方を参照してヘルプページへのリンクの挿入を検討してください。

影響する範囲が複雑な場合など特殊な条件が含まれる設定項目には、警告アイコン（FaExclamationTriangleIcon）と補足テキストを設定項目の下部に表示しユーザーに注意を促すことで、意図しない選択状態になることを防ぎます。

レイアウト

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

設定項目間の余白

設定項目間の余白は、設定項目同士の関係性を認識でき、誤操作とならない範囲で適切な余白を確保します。
具体的な余白の値は以下の通りです。

横並び時の要素間の余白は24px
縦並び時の要素間の余白は16px

また、操作権限項目の親要素（Baseなど）の幅が狭くなる状況では、設定項目に折り返しが発生します。
折り返す際の余白も、それぞれ横方向は24px、縦方向は16pxとなります。

コンテンツエリアの幅

コンテンツエリアの幅は、基本的に中に含む設定項目などのコンテンツの幅にあわせて調節します。
コンテンツの量に応じて、操作権限項目の親要素（Baseなど）の幅いっぱいに調整する場合もあります。
同じ形式の操作権限項目が複数ある場合は、近接する操作権限項目にあわせて幅を揃えることを推奨します。

設定項目の並び順

横幅に十分なスペースがある場合は、基本的に横並びにすることで縦幅が長くなりすぎることを防ぎます。

横幅に十分なスペースがある場合は、基本的に横並びにします。

Don't

縦並びにすると、親項目の幅に対して要素の配置が偏ってしまい、視認性が低下する恐れがあります。

ただし、選択肢の文字が長くなる場合は縦並びを検討します。

組み合わせが決まっている操作権限項目で、一部未対応の設定項目がある場合

CRUDなど、設定項目の組み合わせが決まっている操作権限項目が連続して複数並ぶケースで、一部の設定項目が対応していない場合は該当の設定項目を非表示にします。その際、設定項目が表示されていた箇所はそのまま空白として残します。
この場合のコンテンツ領域の横幅は、選択肢が存在しているときと同じ横幅になるように固定します。