タブのUIデザイン

タブの型の選び方

タブの型は、「同じページの中で切り替えるのか、別のページへ移るのか」「項目の数と名前の長さ」「SPでどう見せるか」の3つで変わります。問い1で役割を決め、問い2で並べ方を選び、問い3でSPの見せ方を決めます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。

問い1：同じページの中で切り替えますか？別のページへ移りますか？

いちばん先に決める問いです。ここで、タブの役割（tab）で組むか、リンクで組むかが決まります。

問い2：項目はいくつで、名前はどのくらいの長さですか？

同じページの中で切り替える場合の、並べ方を決める問いです。

問い3：SPでは、どう見せますか？

狭い画面で、タブが1行に収まるかどうかで決めます。

タブの型の比較

すべての型に共通する設計の原則

タブの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。

• 同じページの中で切り替えるなら tablist・tab・tabpanel、別のページへ移るならリンクと aria-current で組む。見た目で決めない
• 選んでいる項目は、色だけでなく形や線でも示す
• キーボードでは、横に並ぶなら←→、縦に並ぶなら↑↓で移動し、Home・Endで最初と最後へ移る。切り替えが軽くすぐ終わるなら矢印で移動すると同時に表示を変え、読み込みや描画に時間がかかる場合はEnter・スペースキーで確定する方式も検討する
• 全員に読んでもらいたい内容は、タブに隠さない。最初のタブかタブの外に置く
• タブの名前は短くし、折り返さない数にとどめる
• SPで見た目を開閉式に変えたら、役割も aria-expanded の開閉ボタンに変える。内容のHTMLは1つにまとめる。tabpanel は、内容の先頭にフォーカスできる要素がない場合に tabindex="0" を付ける
• 内容は実際の情報に合わせる。決まっていない場合は「表示例」と明記する

組み合わせの例

• サービスのページ：セグメント型で法人と個人を分け、それぞれの中のサービスの詳細は上部タブ型で切り替える
• サービスが多い会社：PCでは縦タブ型、SPではSPアコーディオン化型の考え方で縦に並べる
• 会社案内：ページ切り替えタブ型で会社概要・代表あいさつ・沿革を行き来し、各ページの中の切り替えは使わない
• 料金に関わる切り替え：月額と年額など数字だけが変わる場合は月額／年額切り替え型 料金表を使う

よくある質問

タブは、どんなときに使うとよいですか?

同じ形の情報がいくつかあり、読み手が1つずつ読めば足りるときに向きます。全員に続けて読んでもらいたい内容は、タブに隠さずに縦に並べるほうが読まれやすいと考えられます。

タブとアコーディオンは、どう使い分ければよいですか?

項目を見比べながら1つずつ切り替えるならタブ、項目名の一覧から読みたいものだけを開くならアコーディオンが向きます。PCはタブ、SPはアコーディオンと切り替える方法もあります。

タブの中の内容は、検索エンジンに読まれますか?

最初に読み込まれるHTMLや、読み込み後に組み立てられたページの中にある内容なら、検索エンジンは処理できると考えられます。ただし、大切な情報はタブの中だけに閉じ込めず、最初のタブかタブの外に置いておくと安心です。

タブの見た目で、別のページへ移ってもよいですか?

移っても問題ありません。その場合は role=tab を付けずにリンクのまま組み、表示中のページに aria-current を付けます。