開くデザインデータ開くデザインデータ(Figma)の作り方デザインデータ(Figma)の更新をライブラリに適用する手順デザインレビューリソース共通設定の操作権限項目SmartHR基本機能の共通設定おける、操作権限を設定する項目のレイアウトパターンをまとめています。以下の要素で構成されています。タイトルエリアタイトルタイトルはブロックタイトルを使用し、操作権限の内容がわかるテキストを表示します。1つの項目に複数の操作権限がある場合、上位のタイトルにはブロックタイトル、下位のタイトルにはサブ・ブロックタイトルを使用して、抱合関係を示します。説明テキスト説明テキストは、操作権限について全体的な説明が必要な場合に、1行程度で簡潔に収まるテキストを挿入します。詳細な説明が必要な場合は、Iconの使い方を参照してヘルプページへのリンクの挿入を検討してください。コンテンツエリアコンテンツエリアは、背景色にCOLMUNを指定して各項目の範囲を明示します。内容は、以下の要素で構成されています。設定項目は、操作権限に紐づく設定内容を複数の選択肢から選択できるようにした項目です。状況に応じて、チェックボックスやラジオボタンを使い分けます。任意の数の設定項目を同時に有効・無効にできる場合は、チェックボックスを使います。複数の選択肢から1つを選択する場合は、ラジオボタンを使います。補足テキスト補足テキストは、設定項目について補足する必要がある場合に、余白の取り方に従ってエリア内に挿入します。詳細な内容の説明が必要な場合は、Iconの使い方を参照してヘルプページへのリンクの挿入を検討してください。アイコン(FaExclamationTriangleIcon)と補足テキストを設定項目の下部に表示しユーザーに注意を促すことで、意図しない選択状態になることを防ぎます。レイアウト基本的に余白の取り方にしたがって配置します。要素感の余白は以下のとおりです。設定項目間の余白は、設定項目同士の関係性を認識でき、誤操作とならない範囲で適切な余白を確保します。具体的な余白の値は以下の通りです。横並び時の要素間の余白は24px縦並び時の要素間の余白は16pxまた、操作権限項目の親要素(Baseなど)の幅が狭くなる状況では、設定項目に折り返しが発生します。折り返す際の余白も、それぞれ横方向は24px、縦方向は16pxとなります。コンテンツエリアの幅コンテンツエリアの幅は、基本的に中に含む設定項目などのコンテンツの幅にあわせて調節します。コンテンツの量に応じて、操作権限項目の親要素(Baseなど)の幅いっぱいに調整する場合もあります。同じ形式の操作権限項目が複数ある場合は、近接する操作権限項目にあわせて幅を揃えることを推奨します。横幅に十分なスペースがある場合は、基本的に横並びにすることで縦幅が長くなりすぎることを防ぎます。Do横幅に十分なスペースがある場合は、基本的に横並びにします。Don't縦並びにすると、親項目の幅に対して要素の配置が偏ってしまい、視認性が低下する恐れがあります。選択肢の文字が長くなる場合は縦並びを検討します。組み合わせが決まっている操作権限項目で、一部未対応の設定項目がある場合CRUDなど、設定項目の組み合わせが決まっている操作権限項目が連続して複数並ぶケースで、一部の設定項目が対応していない場合は該当の設定項目を非表示にします。その際、設定項目が表示されていた箇所はそのまま空白として残します。この場合のコンテンツ領域の横幅は、選択肢が存在しているときと同じ横幅になるように固定します。Do対応していない設定項目が表示されていた箇所は、そのまま空白として残します。Don't詰めずに配置すると、どの設定項目が対応していないのか把握しづらくなるため、空白が必要です。各機能ごとで状況に応じて、操作権限項目のバリエーションを定義します。タイトルは共通で、コンテンツエリアの表示パターンがそれぞれで異なります。複数選択パターン複数選択パターンは、1つの操作権限項目に対して複数の設定項目の有効・無効を個別に指定できる場合に使います。)操作の権限があります。CRUD操作の例CRUD操作は、SmartHR基本機能の大部分を占める、もっとも基本的な操作権限です。基本的に「閲覧」が許可されていない場合は操作できないため、「閲覧」が不許可の場合はDisabledで選択不可にします。依頼や承認など、ある機能に対して複数の操作権限を持つ場合、複数選択パターンを使います。設定項目の内容が異なる以外は、基本的なレイアウトはCRUDと同様です。単一選択パターン単一選択パターンは、1つの機能に対して複数の選択肢から1つの操作権限を選ぶ場合に使います。代表的なパターンとしては、「できる・できない」といった切り替え形式の権限があります。特定の操作権限に対して、「できる」または「できない」の2択で選択するパターンです。操作権限に条件や範囲指定を含める例あるオブジェクトに対する操作について、操作権限を条件や範囲で指定したい場合に使います。代表的な例としては、本人が作成したオブジェクトのみ操作可能としたい場合などがあります。複合権限パターン複合権限パターンは、ある操作権限の設定項目が別の操作権限に影響を及ぼす場合に使います。代表的なパターンとしては、CRUD操作の「閲覧」が許可されていない場合に有効化できない権限があります。CRUD操作の「閲覧」権限が他の権限に影響する例ある操作をする場合、前提としてCRUD操作の「閲覧」が許可されている必要があるケースがあります。以下の例では、操作権限2を操作できる条件として、操作権限1の「閲覧」権限が必要である場合を示しています。具体的な挙動は次のとおりです。操作権限2は選択可能のEnableとなる。操作権限2は選択不可のDisabledとなる。