タブバーのデザイン事例と、ユーザー思いなUI作り 10の秘訣

モバイルにあるインターフェイスデザインには、似たようなナビゲーションのタブが並んでいますよね。どのタブも大抵、ユーザーが画面切り替えをしやすい位置に置かれ、アプリ内を回遊する手助けになります。

そこで、今回は、「どんなデザインがユーザーの心をつかむのかわからない」「UIデザインを改めて勉強したい」という方に向けて、ユーザーに気に入ってもらうためのヒントをご紹介します。

タブバーを使ったアプリ 6事例

1. tenki.jp

登録した地域の天気や地震情報を確認できるアプリです。画面様々な箇所にタブメニューバーが設置されています。

• 下部にある4つの項目が付いたバーが（最上位）
• 上部の地域名が書いているバー
• 今日」「明日」の切り替え

「自治体名」が上にあることで、違和感のないよう視線を誘導できます。

2. メルカリアッテ

フリマアプリのメルカリアッテも、3つのタブメニューバーが設置されている例です。商品を洗濯すると一番したのタブのみが残るようにデザインされています。

3. SmartNews

ニュースのカテゴリ別にタブが用意されています。カラフルなデザインで、見分けがつきやすいのがいいですね。

4. Peatix

Peatixは、イベント検索・予約のツールです。下部にタブバーがあり、上部には検索機能の一部を補うナビゲーションバーがあります。

5. LINE LIVE

ストリーミング配信サービスのLINE LIVE。ページ上部にあるタブバーは、視聴者として使う機能、下部にあるバーは配信者として使う機能、というように分かれています。

6. YouTube

動画再生アプリのYouTube。上部のバーは、下部の「急上昇」の中から、詳細なカテゴリを表しています。

メニューバーデザインのポイント3つ

▲Mariusz Onichowski / Dribbble

1:必要な情報を、直感で選べるようにする

タブバーをはじめとするめメニューは、画面切り替えや目的のコンテンツに辿り着きやすい位置にしましょう。また、ユーザーが自分自身にとって必要な情報を即座に判断し、アクセスしやすいデザインにしてください。

2:コンテンツを自明にする

タブバーやビゲーションバーや、行きたいページに行くための橋渡しの役割を担っています。なので、ユーザーが複数のページを行き来することを念頭に、どのタブにどのような内容が入っているのか容易に予測できるようデザインしてください。

3:内容を一貫させる

コンテンツ内容に優先順位をつけることもデザインにおける重要なポイントです。タブの内容は関連あるものでまとめ、ユーザーが、アプリをどのように使えばいいのか即座に判断できるようにしてください。

ナビゲーションバーとタブバーの違いとは？

▲Afraz / Dribbble

ナビゲーションバーとタブバーは、よく混同されがちですが、両者には次のような違いがあります。

• タブバー：異なるタスクやカテゴリーを切り替える場合に使う。
• ナビゲーションバー：情報の階層を上下に移動するときに使う。「戻る」ボタンや、メニューボタンが含まれていることが多い。

ユーザー思いのタブ表示形式とは？10のポイント

▲Vitaly Rubtsov / Dribbble

タブ内の情報を見比べなければならない状況をつくらないようにしましょう。タブをあちこち行き来しなければならなくなってしまうと、その負荷によって、ユーザビリティが低くなってしまう可能性があります。

▲Paresh Khatri / Dribbble

1. タブは同じコンテキストの中で、表示内容を切り替えるために利用しよう！

ユーザーが複数のタブを開いて、ほかの情報と比較検討しなければいけない場合、タブを使用すると、ユーザーの短的記憶に負荷がかかり、混乱を巻き起こしてしまいます。

また、複数のタブを使用すると、すべてのコンテンツを大きな1ページに入れたデザインよりも、ユーザビリティが低くなってしまうのも理由の一つです。

2. コンテンツは論理的なかたまりに分けて、そのそれぞれにタブを付ける！

特に、ユーザーが、類似性のあるタブを設定し、コンテンツ内容を、容易に予測できるようにするよう設定を行うのがポイントです。その際、カードソーシングを使うのもおすすめです。

3. タブにはハイライトを付けて、ユーザーに分かりやすく！

ハイライト以外にも、選択中のタブを際立たせるには、サイズや太字ラベル、アイコン、あるいはほかのタブの手前にあるように見せるといったやり方もあるので、いろいろためしながら適切なデザインを導いてください。

4. タブバーの数は極力少なめに！

タブを1列以上追加してしまうと、ユーザーが情報を見落としてしまう可能性があるからです。各タブの制御範囲はビジュアルデザインからわかるようにしてください。

5.機能には一貫性を持たせるようにしよう！

タブの外観や機能に一貫性を持たせることで、4つの重要な効果をユーザーに発揮することができます。

認識のしやすさ

大切な機能の見え方が常に一定なら、アプリのどこにいても、何を探せばいいかがわかり、タブを見つけた場合にも、それが何を示しているのかるかがわかる。

予測のしやすさ

アプリ内にある機能が、いつも決まった動き方をしてくれれば、ユーザーは、それに働きかけると何が起こるのかすぐさまわかる。

行動の明確化

利用可能なすべての機能についての過去の知識を利用できれば、ゴールに達成するためにどのような行動をすればよいのか、自分自身が撮るべき一連の行動を容易に組み立てることができる。

機能の把握

新しいことを学んだり、不明確で、一貫性のない機能に気をもんだりする時間を省き、アプリを効率よく使用できる。

6. タブバーは、パネルの最上部に設置しよう！

タブバーは、一番下よりも、トップにもってくるのがいいと言われています。というのも、人はコンテンツを見るとき、必ず上から順に内容を見ていくので、スクロールをしなくても、見える範囲内にメニューを配置することで、構成や目次を見やすくするためというのが、その根本にあります。

7. アクティブ状態のタブを目立たせる！

▲Sergey Kamashkin / Dribbble

ユーザーが現在地を把握できるよう、色を付けたり、アンダーラインを引いたりして、使用中のタブを目立たせましょう。サイズを変えたり、アイコンを付け足したり、ほかのタブの手前にあるように見せるといったやり方もあります。

8. タブのサイズは、できる限り大きく！

Charles Patterson / Dribbble

タブは、ユーザーの使いやすさを考慮して、できるだけ大きいサイズに設定しましょう。タブの幅の平均を割り出せば、1頁にいくつのタブを記載できるかもわかります。選択中のタブと選択されていないタブの見分けやすくするのもポイントです！

そうすることで、ほかにも選択肢があることにユーザーが気づいてもらえるのです。また、ユーザーが、なんども機能を探索することを考え、サブメニューも見つけやすくしておくのも忘れないようにしましょう。

9. タブに記述する言葉は最低限に！

▲Brian Benitez / Dribbble

よく、画面の面積を考えず、タブバーに余分な説明文やボタンの設定を行っているアプリがありますが、それはやめたほうがいいでしょう。タブ内のワードが２行以上になってしまうと読みづらいです。

10. 1タップで目的地に辿り着けるように。

▲Nahid hossain / Dribbble

ユーザーの約50%が一回のクリックで目的地に辿り着けるように設計しましょう。たとえば、Facebookの重要な機能はすべ一て、タブを1度タップするだけで、行きたいところにいけます。ユーザがどの場所にいても、トップ層のページに戻り、やり直しがしやすくしておくのもいい点ですね。

一番下に記載するタブは、使用頻度が高いタブを置き、カラーはアプリ内の配色に合わせ、項目を3から5つ以内に収めるのもポイントです。

コンテンツを上手にまとめる手法

▲Anne Caroline Michel / Dribbble

ナビゲーションに求められる機能は、ユーザーに特定のページに置いて、行いたい行動を、迷わず行わせることです。例えば、予約アプリの場合、予約ページが、コンテンツにおける一種のインターフェイスになります。なので、そこできちんとユーザーに、このページで何ができるのか、示し、ユーザーが求める行動に導いてあげるデザインをしてください。

ドロワー機能

▲Emmanuel Torres / Dribbble

コンテンツの多いブラウジング中心型のアプリの場合、タブを整理して表示する手法のひとつに、ドロワーという機能がよく採用されています。見えないところにしまいこんでいたタブを、まとめて表示させるのです。アンドロイドのアプリ一覧にも使われている手法です。

スクロールで表示する形式

▲Mazursky / Dribbble

下にスクロールをするとタブが隠れ、上にスクロールするとタブが現れるというUIを見たことがあるでしょう。コンテンツを表示するスペースを確保できるので、多くのデザイナーが採用しています。

しかし、タブがどこにあるかわからなかったり、そのタブの機能を認識してもらいづらいこともあります。

タブバーにおけるUIデザインの重要性

▲Tomas Måsviken / Dribbble

タブは、インタフェースデザインの中でも、地味で面白みのない一面のように見えるかもしれません。しかし、きちんとデザインすることによって、ユーザーの混乱を防ぎ、アプリの機能を使いやすくなります。

（翻訳：Yuka Uchiyama）