Dictionary

役割と種類

コンテンツを特定の条件で分類し、個々にラベルを付けて、ユーザーが選択した項目に紐付くコンテンツのみを表示します。

コンテンツを特定の軸で分類し、Tabコンテンツとして切り分けることで、表示領域の肥大化を抑制します。また、特定の軸でコンテンツを区分することで、タブ項目を参照するだけでコンテンツ全体の概要を把握でき、必要な情報への到達が容易になります。

コンテンツの分類

コンテンツの分類は、すべての項目が互いに関連性を持ち、かつ並列の関係となるようにします。

ラベル

ラベルは短く明瞭で、内包する情報をユーザーが容易に推測できるものにします。これにより、非選択項目のコンテンツ推測や全体像の把握が容易になります。

基本的には、ラベルとコンテンツの見出しを一致させることで、コンテンツの切り替わりを関連付けて理解しやすくなります。ラベルが長くなる場合は、略称の使用や3点リーダーによる省略も可能ですが、コンテンツの内容を推測できる範囲内に留めてください。

項目数

項目数が増えすぎると、項目およびコンテンツの確認・操作の負荷が高まります。コンテンツの表示領域幅に収まる範囲で、できるだけ少ない数に抑えてください。

配置

項目はコンテンツの最上部に一列で配置し、見出しとしての役割を持たせます。また、項目は折り返さず一行で配置する必要があります。項目の折り返しは、分類したコンテンツに階層構造があると誤認される恐れがあるためです。

いつ使うべきか / 使わないべきか

Navigation関連のコンポーネントを使用したほうがよい場合

別画面への遷移が必要な場合は、Tabではなくnavigation関連のコンポーネントを使用してください。Tabは同一コンテキスト内で表示内容を切り替える目的で使用します。

Paginationを使用したほうがよい場合

恣意的な優劣関係を持つコンテンツを並列に配置すると、ユーザーはその意図を推測する必要が生じ、予測可能性が低下します。分類した項目に明確な序列（順序）が存在する場合は、Paginationの使用を検討してください。

Interaction

初期状態

いずれかのタブ項目が選択状態になっており、選択状態のタブ項目に紐付くコンテンツが表示されます。

タブ項目のホバー

非選択状態のタブ項目

ホバー時に装飾的な変化を示します。例えば、カーソルがポインターに変わる、タブ項目の背景色が変化する、ボーダーが表示される、色が変わるなどの変化が発生します。

選択状態のタブ項目

ホバー時の装飾的な変化は発生しません。

タブ項目の選択

非選択状態のタブ項目を選択すると、その項目が選択状態となり、他の項目は非選択状態に変化します。選択状態のタブ項目に紐付くコンテンツが表示されます。

コンテンツのスワイプ

コンテンツを左右にスワイプして表示を切り替える実装もありますが、InhouseのTabでは提供していません。

Web環境における左右スワイプは、ブラウザの履歴操作（戻る・進む）と強く結びついているため、誤操作を誘発する可能性があります。情報量が多く、コンテンツ上部のTabにアクセスしにくい場合は、「Tabの固定」を検討してください。

Tabの幅がコンテンツ幅を上回る場合

まず、Tabが過度に幅を取らないよう簡潔な命名を心がけてください。モバイル環境などで幅がはみ出る場合は、overflow-xによる横スクロールで対応します。

画面のスクロール

画面をスクロールした際、タブは画面上部に固定されるか、画面外に移動します。非固定をデフォルトとしますが、固定パターンも使用可能です。

Style

外観

Outlined

すべてのタブ項目にborderまたはbackground-colorによる装飾を施します。アクティブな項目とそれ以外の項目を明確に区別し、タブとしての視認性を高めます。

Transparent

アクティブなタブ項目にのみ形状の変化を適用します。タブとしての存在感は控えめになりますが、イディオムとして定着した表現です。視覚的に情報量が多い場面に適しています。

ラベル

テキストのみ

Tabにおけるデフォルトです。

アイコン + テキスト

アイコンがテキストの補足情報として有効な場合に使用します。配置は左寄せと中央寄せの2パターンがあり、審美性や視線移動の負担などを考慮して選択してください。

ステート

タブ項目の形状ごとに以下のステートを用意します。

Default

タブ項目が選択されていない通常の状態です。

Hover

タブ項目にマウスカーソルが重なっている状態です。

Active

タブ項目が選択されている状態です。