クリエイティブなタブバー型ナビゲーションを考える

モバイルナビゲーションの基本パターンを選ぶときに、プロダクトデザイナーは２つの選択肢から選びます。ハンバーガーメニューとしても知られるドロワー型か、タブバー型です。どちらのナビゲーションにも長所と短所があります。

タブバー型 vsドロワー型。イメージ画像： Google

この記事はそのうち、タブバー型に関するものなので、ドロワー型を上回るタブバー型の利点から話しましょう。

• ユーザーの現在地がひと目でわかる。アプリの中で自分がどの位置にいるのかをメニューを開いて確認する必要がありません。ひと目で知ることが可能です。
• 見つけやすさ。ユーザーはトップレベルのナビゲーションオプションを最初から見ることができます。
• 指の届く範囲にある。タブバーは届きやすい場所（画面の１番下）に位置しています。ユーザーは指を伸ばして選択する必要がありません。

しかし、タブバー型にはいくつかの欠点があります。

• ナビゲーションに載せる選択肢の数が限られる。タッチ箇所が小さくなりすぎないように、配置可能なナビゲーションオプション数は５～７つです。
• タブバーが画面の一部を占領してしまう。良いナビゲーションは常に表示されているべきであるため、貴重な画面の一部を使ってしまいます。

この記事では、興味深いタブバー型ナビゲーションのコンセプトを３つ紹介します。ソースリンクも載せますのでプロジェクトで活用してください。

１. ナビゲーションオプションの格納

上記で述べた通り、タブナビゲーションの最大の欠点はオプション数が制限されている点です。モバイルの場合、タブバーに最大７つのトップレベルのナビゲーションオプションを配置することが可能です。この制限は大半のモバイルアプリでは問題になりませんが、アプリによってはより多くのオプションを提示するために、準備が必要になる場合があります。

以下は、オプション制限への対策として使えるコンセプトです。ユーザーがフォルダアイコンをタップすると、さらにいくつかのオプションが同じ場所に表示されます。フォルダアイコン（他アイコン３つの親の役割を果たす）の大きさが、ユーザーにこのオブジェクトが他より多くのオプションを含んでいることを表します。

利点

同じ場所により多くのオプションを表示できます。

欠点

• アニメーション効果のために余分な開発時間が必要になるでしょう。
• 高いインタラクティブコストがかかります。格納されたオプションを表示するために、ユーザーは余分にタップしなければなりません。

イメージ：Hoang Nguyen

２.アクティブなタブボタンをタブバーから分離させる

通常タブバーはトップレベルのナビゲーションを表示しているため、バーの各オプションは独立した行き先として機能します。以下で実演されているコンセプトは、選択中のものを視覚的に分離させる試みをしています。

このアニメーションの作成者であるKetan氏は、アニメーション化されたタブバーReact Native Tabbar Interactionのソースコードを提供しています。FAB Tabbar — Concept to Realityという記事でこのタブバーの作成過程を詳しく解説しています。

利点

画面の視覚的な移り替わりが素晴らしく、ソースと目的地が明確に分かれています。

欠点

アニメーションが少し遅く感じます。アプリの操作で頻繁にタブを切り替えなければいけない場合には煩わしく感じるかもしれません。

イメージ：Ketan

３. タップにアニメーション効果を施す

モバイル開発者が１番重要なゴールとして掲げているのは、ユーザーに良い第一印象を与えることです。平均的なアプリがインストール後に80%のユーザーを失っている事実を考えると、良い印象を与えることでこの割合低下につながるでしょう。

このゴールを達成する１つの方法は、ユーザーの記憶に残る経験を作ることです。デジタル商品を利用したとき、ユーザーはすべての行程を覚えているわけではありません。通常、ある特定の部分のみを詳しく覚えています。面白いマスコットや鮮やかな色、良くできたアニメーションのようなシンプルなものを覚えているのです。そのためデザイナーは何度も何度もこの言葉を繰り返し言います

細部をあなどってはいけません。細部が組み合わさってデザインとなるのです。（Charles Eames氏）

以下のコンセプトで使用される滑らかなアニメーション効果で、記憶に残る初めての体験を作り出すことができます。このコンセプトの作成者であるRamotion氏は、アニメーションのソースコードを提供しています。

利点

良い第一印象を与える手助けをします。

欠点

一般的なユーザーにとっては煩わしく感じるかもしれません。ユーザーがアプリを使うたびに、毎回このような効果を目にすることを想像してみてください。

イメージ：Ramotion