タブUIとは?使いどころと選択中タブの見せ方、スマホでの扱いを解説

タブUIの基本

まずは、タブUIとはどんな部品で、どんな場面で使うものなのかを押さえましょう。

タブUIとは

タブUIとは、横に並んだ見出し(タブ)を押すと、その下に表示される内容が切り替わる部品のことです。

UI(ユーザーインターフェース)は、画面の中で人が見たり操作したりする部分のことで、タブはその部品の1つです。

デジタル庁デザインシステムは、行政機関などのWebサイトやサービスを、誰にとっても使いやすく作るためにデジタル庁が公開しているデザインのルール集です(デジタル庁デザインシステム)。使いやすさやアクセシビリティを踏まえて部品ごとの使い方が定められているので、この記事でもたびたび参考にします。

紙のファイルやノートの端に付いている「見出しの耳」がたとえになっていて、デジタル庁デザインシステムでも、クリアホルダーのインデックス用の見出しをたとえにした部品として説明されています(タブ – デジタル庁デザインシステム)。

タブは、押す部分の「タブ(タブラベル)」と、切り替わって表示される内容の「パネル(タブパネル)」の2つでできていて、パネルは一度に1つだけ表示されます。

Webの技術の標準を定めている国際的な団体W3Cが、Webの部品の作り方をまとめた資料「WAI-ARIA Authoring Practices Guide(APG)」でも、タブは「一度に1つのパネルを表示する、重なり合った内容のまとまり」と説明されています(Tabs Pattern – APG(英語))。

見本では、「概要」のタブが選ばれているので、パネルには概要の文章だけが表示されています。

「仕様」を押すとパネルの中身が仕様の説明に入れ替わり、ページを移動せずに同じ場所で内容を見比べられる、というのがタブの仕組みです。

タブの使いどころ

タブは、同じテーマの情報を、同じ階層の「観点」ごとに切り替えて見せたいときに使います。

タブは一度に1つのパネルしか見えないので、見る人が「今はこの観点だけ見たい」と思える内容でなければ、ほかのパネルの情報が見落とされてしまうからです。

たとえば、1つの商品についての「概要」「仕様」「レビュー」や、1つの料金プランについての「月払い」「年払い」のように、並べたタブが同じ重さで、どれから見ても話が通じる関係になっていることが条件です。

ここでいう「観点」とは、同じものを見るときの切り口のことです。「同じ階層」とは、どれかが親でどれかが子という上下の関係ではなく、対等に横に並ぶ関係のことです。「概要」「仕様」「レビュー」は、どれも同じ商品を別の切り口から説明した対等な情報なので、見たいものを1つ選んでじっくり読むタブの形と相性がよいのです。

反対に、次のような場面では、タブ以外の部品のほうが向いています。

やりたいこと	タブが向かない理由	向いている部品
複数の内容を同時に開いて見比べたい	タブは1つずつしか表示できない	アコーディオン、または全部を並べて表示
サイトの別のページへ移動したい	タブはページの中で内容を切り替える部品	グローバルナビなどのナビゲーション
手続きを順番に進めてほしい	タブはどれから見てもよい関係が前提	ステップ表示(進み具合を示す部品)
条件で一覧の項目を絞り込みたい	同じ内容を減らすのはタブの役割ではない	絞り込み(フィルター)のボタンやチェックボックス

アコーディオンは、見出しを押すとその下に中身が開いたり閉じたりする部品です。よくある質問のページで、質問を押すと答えが下に開くものが代表的な例です。タブは選んだ1つの中身が同じ場所で入れ替わるのに対し、アコーディオンは縦に並んだ項目を、いくつも同時に開ける作りにもできる点が違います(アコーディオンの使いどころやデザインのコツはアコーディオンメニューとは?で解説しています)。

この使い分けは、デジタル庁デザインシステムの「タブ」のページでも、同じ主題の内容を観点ごとに切り替える部品として、比較・サイトの移動・手続きの進行・絞り込みには別の部品を使うよう案内されています。

特に気をつけたいのが、ページの中で内容を切り替えるタブと、別のページへ移動するナビゲーションを、同じ見た目で混ぜてしまうことです(ナビゲーションの種類と現在地の示し方はナビゲーションUIとは?で解説しています)。

Webの使いやすさ(ユーザビリティ)を長年調査・研究しているアメリカの専門機関、Nielsen Norman Groupも、ページ内で切り替えるタブと別のページへ移動するタブを1つの並びに混ぜると、見る人が混乱すると指摘しています(Tabs, Used Right(英語))。

タブUIのデザインのコツ

ここからは、タブを実際にデザインするときのポイントを見ていきます。

「選択中のタブをはっきり見せる」「数と文字を短くまとめる」「スマホで崩れないようにする」の3つが中心です。

選択中のタブは2つ以上の違いで見せる

選んでいるタブは、色だけでなく、太さ・下線・背景など2つ以上の違いを組み合わせて、ほかのタブと区別します。

今どのタブを見ているかが分からないと、見る人はパネルの中身がどのタブのものか判断できず、ほかのタブを押せることにも気づきにくくなるからです。

Nielsen Norman Groupも、選択中のタブには少なくとも2つの目印(下線・太字・色・大きさなど)を使うことを勧めています。

色の違いだけで区別すると、色の見え方が人と違う人には伝わらないことがあるので、色に頼らない見せ方も組み合わせましょう(詳しくは色だけに頼らないデザインの記事で解説しています)。

NGの見本では、選んでいる「仕様」とほかのタブの差が文字色のわずかな濃さしかないため、どのタブが選ばれているのかを読み取るのに時間がかかります。

OKの見本では、太字と下線という2つの違いがあるので、ひと目で「今は仕様を見ている」と分かります。

選択中を示す下線のような「状態を伝える線や形」は、Webのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)の国際的なガイドラインであるWCAG 2.2で、隣り合う色とのコントラスト比(2つの色の明るさの差を表す数値)を3:1以上にすることが求められています(WCAG 2.2 達成基準1.4.11 非テキストのコントラスト・WAIC日本語訳)。

基準の名前にある「非テキスト」とは、下線や枠線、アイコンなど文字以外のもののことです。要するに、選んでいるタブの下線が薄い色だと、視力の弱い人や、明るい屋外でスマートフォンを見ている人には線が見えにくく、今どのタブを選んでいるかが分からなくなる、ということです。

たとえば白い背景に明るい水色の下線を引いても、コントラスト比が足りず見えにくいので、OKの見本では下線に濃い青(白い背景とのコントラスト比5.69:1)を使っています(コントラスト比の測り方はコントラスト比とは?で解説しています)。

選択中以外の状態も、次のように描き分けておくと、押せることと今の状態が伝わりやすくなります。

ホバー時の変化は「押せそう」と伝えるための控えめな変化にとどめ、選択中の見た目と間違えないように差をつけておくのがコツです。

フォーカス時の枠線は、マウスを使わずキーボードで操作する人が「今どこを選んでいるか」を知るための目印なので、消さずにはっきり見えるようにしましょう。

タブの数は少なく、文字は短くする

タブは、1行に収まる少ない数にとどめ、タブの文字は短い言葉にします。

タブの数が多すぎると1つひとつの文字が詰まって読みにくくなり、どのタブに何があるのかを覚えておけなくなるからです。

Nielsen Norman Groupは、タブの文字を1〜2語程度の短くて分かりやすい言葉にすること、タブを2段以上に積み重ねないことを勧めています。

2段に積み重ねると、どの段のどのタブを選んでいるのかが分かりにくくなり、「さっきのタブはどこだったか」も覚えにくくなるためです。

NGの見本では、6つのタブに長い文字が並んで2段に折り返し、どこまでが1つのタブなのかも読み取りにくくなっています。

OKの見本では、「概要」「仕様」「レビュー」の3つに絞り、短い言葉にしたことで、1行にすっきり収まっています。

タブの数に決まった上限はありませんが、「1行に収まり、全部のタブの文字がひと目で読めるか」を目安にし、収まらないときは、タブにする内容そのものを見直しましょう。

スマホでは横幅に収まるかを先に確かめる

スマートフォンでタブを使うときは、まず、すべてのタブが画面の横幅に収まるかを確かめます。

パソコンでは1行に並んでいたタブも、画面の狭いスマートフォンでは文字が小さくなったり、折り返したり、画面からはみ出したりしやすいからです。

収まらない場合の対応には、主に次のような方法があります。

• タブの数を減らす・文字を短くする
  一番おすすめの方法で、パソコンでもスマートフォンでも同じ形で使えます。
• タブを横にスクロールできるようにする
  はみ出したタブを指で横に動かして選ぶ形です。
  右端のタブを途中で切れた状態で見せるなど、続きがあることに気づける工夫が必要です。
• アコーディオンに切り替える
  スマートフォンでは、見出しを押すと中身が開く「アコーディオン」の形にして、縦に並べる方法もあります。

横スクロールは手軽ですが、Nielsen Norman Groupは、画面の外に隠れたタブは見つけにくくなり、操作の手間も増えると指摘しています。

見本では、画面の端でタブが途中で切れて見えているため、「横に動かすとまだタブがある」と気づくきっかけになります。

反対に、ちょうどタブの切れ目で画面の端がそろってしまうと、続きがないように見えてしまうので注意しましょう。

コーディングするときのHTML要素

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る場合は、「タブは並び・タブ・パネルの3つでできている」と考えておけば、開発する人と話がしやすくなります。

HTMLにはタブ専用の要素がないため、普通の要素に「この部分はタブの並び」「これはタブ」「これはパネル」という役割(WAI-ARIAのrole属性)を付けて作ります。

<div role="tablist" aria-label="商品の情報">
  <button role="tab" aria-selected="true">概要</button>
  <button role="tab" aria-selected="false">仕様</button>
</div>
<div role="tabpanel">概要の内容</div>

aria-selectedは、どのタブが選ばれているかを、画面の読み上げソフトなどにも伝えるための属性です(MDN: ARIA: tab ロール)。

APGでは、タブの並びの中は左右の矢印キーで移動できるようにすることなど、キーボードでの操作方法も示されています。

タブの切り替えにはJavaScript(Webページに動きを付けるプログラミング言語)が必要になるので、実際の作り方は今後のJavaScript入門シリーズで扱う予定です。

実践のポイント

タブUIで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 大事な情報をタブの奥に入れてしまい、最初に表示されるパネルしか読まれないことがあります。
  全員に必ず読んでほしい情報は、タブに入れず最初から見える場所に置きましょう。
• 見比べたい情報をタブに分けてしまい、行ったり来たりしないと比べられないことがあります。
  比べる情報は、表などで同時に見えるようにしましょう。
• ページ内の切り替えのタブと、別のページへ移動するメニューを同じ見た目で並べてしまうことがあります。
  押したあとに何が起きるかが変わるものは、見た目でも区別しましょう。
• 選択中のタブを、色の違いだけで示してしまうことがあります。
  太字や下線などを組み合わせ、2つ以上の違いで見せましょう。
• パソコンの画面だけで確認し、スマートフォンでタブがはみ出していることに気づかないことがあります。
  実際のスマートフォンで、全部のタブが見つけられるかを確かめましょう。

よくある質問

• Q. タブとアコーディオンは、どう使い分ければいい?
  A. 一度に1つの観点だけを見ればよい内容ならタブ、複数を同時に開いて見たい可能性がある内容ならアコーディオンが向いています。
  また、タブは横に並べるので数が少ないとき、アコーディオンは縦に並べるので項目が多いときに使いやすい、という違いもあります。
• Q. 最初はどのタブを選んだ状態にすればいい?
  A. 基本は、一番左(先頭)のタブを選んだ状態で表示します。
  そのため、多くの人が最初に知りたい内容を先頭のタブに置きましょう。
• Q. スマホアプリの画面下にあるメニューもタブ?
  A. 画面の下に並んだメニュー(「ホーム」「検索」「通知」「マイページ」など)は「タブバー」や「ナビゲーションバー」と呼ばれ、押すと画面そのものが別の画面に切り替わる、アプリの中を移動するためのナビゲーションです。
  名前は似ていますが、この記事で扱った「同じ画面の中で内容を切り替えるタブ」とは役割が違うので、デザインするときも分けて考えましょう。

まとめ

タブUIとは、横に並んだタブを押すとパネルの内容が切り替わる部品で、同じテーマの情報を同じ階層の観点ごとに切り替えて見せたいときに使います。

選択中のタブは色だけでなく太字や下線など2つ以上の違いで見せ、タブは1行に収まる数と短い言葉にまとめ、スマートフォンで収まらないときは数を減らすか、続きがあると分かる形にすることがポイントです。

まずはネットショップの商品ページなどでタブを1つ見つけ、選んでいるタブがどんな違いで示されているか、スマートフォンではどう表示されているかを確かめてみてください。