タブ（tabs）とは、並んだ選択肢のうちから1つを選び、その内容だけを表示する部品である。ほかの内容は、選ぶまで隠れる。
たとえば、商品のページである。「説明」「仕様」「レビュー」の3つのタブが並んでいる。「仕様」を押すと、仕様の表が現れる。同じページの中で、見たい内容だけを、切り替えて見られる。
4つの部分
ニールセン・ノーマン・グループ（NN/g）の記事（2024年更新）によると、タブは、次の4つでできている。
- リスト。使えるタブの並びである。ふつうは横に並ぶ。
- ラベル。内容を短く表す名前である。
- パネル。選んだタブの内容を表示する部分である。
- 選択中の目印。どのタブが開いているかを示す。
2つの種類
同じように見えても、働きが違うタブが、2つある。
- ページ内のタブは、同じページの中で、関連した内容を切り替える。切り替えは、一瞬で終わる。利用者は、同じページにとどまる。
- ナビゲーションのタブは、サイトの別のページへ移動する、案内の役目をする。内容の範囲が広く、互いに関係が薄い。少し、読み込みを待つ。
この記事で扱うのは、画面の中にあるタブで、ブラウザの上のタブではない。
1つのタブの並びに、2つの種類を混ぜてはいけない。一部のタブだけ、別のページへ移ると、利用者は混乱する。同じ並びのタブは、見た目も動きも、そろえる。ページ内とナビゲーションを同じ画面で使うなら、見た目を変えて、動きの違いを伝える。
向く場面
- 長い内容が、はっきりしたまとまりに分かれているとき。
- まとまりが、少ないとき。タブが多すぎると、リストがはみ出す。隠れたタブは、見つけにくい。
- 内容の重要度に、差があるとき。最初に開くタブは、注目される。ほかのタブは、補足の内容にする。
- ラベルを、短く書けるとき。短いラベルは、横幅を節約できる。
- 利用者が、別のタブの内容を、同時に見る必要がないとき。見比べる必要があるなら、1つのページに全部を置く。
タブとアコーディオン
画面が狭いスマートフォンでは、アコーディオンのほうが向く。パソコンの画面では、アコーディオンを閉じると、ページが空に見えることがある。タブは、アコーディオンより長い内容や、複雑な配置も扱える。
見た目の目安
- 選択中のタブを、目立たせる。目印は、2つ以上使う。たとえば、下線と、文字の太さである。タブが2つしかないときは、比べる相手が少ないので、特に必要である。
- 選ばれていないタブも、はっきり見せる。薄すぎると、押せるものだと気づかれない。
- タブとパネルを、近くに置く。つながりが分かる。
- ふつうのサイトでは、タブの列は、1段にする。2段に積むと、選んだタブを手前の列へ動かすことになり、並びの位置を覚えにくくなる。目印の線も、どのタブの下か、分かりにくくなる。
- ページ内のタブは、パネルの真上に置く。横や下に置くと、タブの存在が見落とされる。
中身の目安
よく使う内容を、最初のタブにして、最初に開いておく。ラベルは、利用者が、開く前に内容を予想できる、ふつうの言葉にする。自社だけの呼び名は、避ける。
中身を、利用者の使い方に合わせて、まとめる。まとまりが見つからないなら、タブは向かない。小見出しを付けた、1つのページにする。
出典
- Nielsen Norman Group「Tabs, Used Right」（2007年にヤコブ・ニールセンが書いた記事の更新版）
