タブ

定義

タブは、互いに関連するいくつかのコンテンツを一か所にまとめておき、ラベルを押すことで その中の一つだけを切り替えて見せる仕組みです。画面の上部に複数の見出しが横並びになり、 その下には今選ばれているタブの内容だけが表示されます。新しいページに移動せず同じ場所で 中身だけが入れ替わるので、ユーザーは文脈を見失わないまま、軽やかに情報を行き来できます。 商品詳細の「説明 / レビュー / 配送情報」のように、一つの対象についての複数の側面を分けて 収めたいときに特によく合います。紙のファイルの見出しインデックスから来た比喩なので、 初めて見る人でも、何を押せば何が変わるのかを自然に想像できます。

なぜ重要か

一つの画面に載せる情報が多いとき、タブはそれを無理に一度に並べず、ユーザーが必要な部分 だけを選んで見られるようにしてくれます。おかげで画面が短くなってスクロールの負担が減り、 各タブが一つの明確なテーマを持つので情報構造もはっきりします。何よりページを読み込み直さ ないため切り替えが即座で、あれこれ見比べながら確認するときの心理的なハードルが低くなります。 同じ対象をいくつもの角度から眺めたい場面で、この軽さは大きな利点になります。ただしタブは 選んでいない内容を隠す構造なので、ほかのタブの中に何があるのかを前もって知りにくいという 弱点も併せ持ちます。だからこそ、どの情報をタブの裏に隠し、どれを常に見えるようにしておくか を慎重に選ぶ必要があります。

よくある間違い

• 互いに関連のない内容を一つのタブのまとまりに無理やり詰め込んでしまうことです。タブの中 の項目は同じ対象の別の側面であってこそ自然なのに、粒度がばらばらだと、ユーザーは何を 基準に分けたのか戸惑い、目当ての情報がどのタブにあるのかを毎回推測する羽目になります。
• タブを作りすぎることです。数が増えるとラベルが窮屈になったり横スクロールが生まれたりして、 奥のタブはまったく目に入らず、ユーザーは目当ての項目を探して迷います。画面の外へ押し出さ れたタブは、ないのと同じです。
• 今どのタブが選ばれているかの表示が弱い場合です。現在位置があいまいだと、ユーザーは自分が どこを見ているのか確信が持てず、同じタブを何度も押したり、内容が変わっていないと勘違い したりします。

実務のヒント

• 今選ばれているタブは、下線や色ではっきりと強調しましょう。タブはふつう2〜5個くらいが ちょうどよく、それより多くなるならドロップダウンや縦のリストなど別の方式も併せて検討する のがよいです。数を減らすこと自体が、よい整理になります。
• タブのラベルは短く、予測しやすい言葉で書きましょう。中に何が入っているか、名前を見ただけ で想像できてこそ、ユーザーは無駄なクリックをせず目当てのタブへまっすぐ進めます。あいまいな 言葉より、具体的な名詞がいつでも勝ります。
• いちばん大切な、あるいはよく見る内容を最初のタブに置きましょう。開いたときに既定で見える タブなので、ここに核心を配置すれば、ほとんどのユーザーが追加の操作なしに必要な情報に出会えます。

関連概念