「上階層に戻る」リンク

一階層上のコンテンツに誘導する役割を持ち、メインコンテンツ間の階層構造を認知させるためのナビゲーションです。

構成

「上階層に戻る」リンクは、次の要素で構成されています。

  1. リンクテキスト
  2. アイコン

スクリーンショット:「上階層に戻る」リンクの構成

1. リンクテキスト

基本的に「{一階層上の画面名}に戻る」と表記し、リンクのテキストスタイルを用います。

パーマリンクなどで該当画面に直接遷移した際に、一階層上のコンテンツの類推が難しい場合には、下記のように「{一階層上の画面名}{一階層上のコンテンツの種類}に戻る」と表記することを検討します。

一階層上のコンテンツリンクテキスト
コレクション{一階層上の画面名}一覧に戻る「権限一覧に戻る」
(「権限に戻る」だけでは、上の階層に権限に関するどのコンテンツかを類推しにくいため)

2. アイコン

一階層上があることを認知させるために、リンクテキストの左側に「左矢印」アイコン(fa-arrow-left)を配置します。

アイコンの色は、リンクテキストの色に準拠してTEXT_LINKとします。

レイアウト

「上階層に戻る」リンクの余白やインデントは以下のとおりです。

スクリーンショット:画面パターン「A. ヘッダーのみ」のレイアウト

余白

画面タイトルとは24pxの余白をとります。 ヘッダーとの余白は、周囲のナビゲーションを考慮して以下から選択します。

画面パターンヘッダーとの余白画面例備考
A. ヘッダーのみ16px申請、給与明細
B. ヘッダー+AppNavi24pxプラスアプリヘッダー+AppNaviとは異なるグループであることを強調するため
C. SmartHR基本機能の共通設定22pxSmartHR基本機能の共通設定SmartHR基本機能のサイドナビゲーションとヘッダーの余白と揃えるため(画面例

インデント

基本的に、リンクテキストとメインコンテンツの左端を揃えます。

左矢印 アイコンとリンクテキストとの余白(4px)分だけ、メインコンテンツより左に飛び出して配置します。 これは「一階層上に遷移するリンクである」ことをユーザーに示し、認知を促すための装飾です。

ただし、以下の例外のように、左矢印 アイコンのインデント分の余白を十分に確保できない場合は、この限りではありません。

例外1. メインコンテンツにサイドナビゲーションが隣接する場合

SmartHR基本機能の共通設定のように、メインコンテンツにサイドナビゲーションが隣接する場合は、左矢印 アイコンをメインコンテンツの左端に合わせて配置します。

スクリーンショット:メインコンテンツにサイドナビゲーションが隣接する場合のレイアウトの例外

例外2. モバイルでの表示

モバイル(スマートフォン、あるいはタブレットの縦表示)での表示については、左矢印 アイコンをメインコンテンツの左端に合わせて配置します。 (参考:メディアクエリ

スクリーンショット:モバイル表示でのレイアウトの例外

© 2021, SmartHR, Inc.