アプリのUIデザイナーをやってる池内（@KD6JOE）と言います。最近Tab Barにアクションを置いているアプリが多いですね。おそらくInstagramがこのUIを広めるきっかけになったと思います。この記事ではTab Barにアクションを置くことのメリットとデメリットを考察します。

Tab BarはiOSでの呼び名で、Androidでは画面下部に置いたナビゲーションコンポーネントのことをBottom Navigationと呼びます。この記事ではOSに依らない文脈の場合どちらもTab Barと呼びます。

そもそものTab Barの用法

まずはガイドラインを復習します。
・iOS Human Interface Guidelines - Tab Bars
・Material Design - Bottom Navigation

iOS Human Interface Guidelines（以下iOS HIG）ではこう書かれています。

通常、Tab Barを用いてアプリの情報を整理します。Tab Barは、情報の階層をフラットにし、複数の同等の情報カテゴリまたはモードへのアクセスを提供するのに良い方法です。

Tab Barは、アプリ上のたくさんの情報を分類し、それにすばやくアクセスするためのアプリ横断のグローバルナビゲーションと言えます。

さらに、iOS HIGではTab Barにアクションは置かないよう明確に記載されています。iOS HIG上ではTab Barにアクションを置くのはガイドライン違反と言えます。

Tab Barはナビゲーションに使いましょう。Tab Barボタンを使って、アクションを実行しないでください。もしあなたが現在のビューで操作を提供する必要があるなら、代わりにツールバーを使いましょう。

Material DesignではTab Barにアクションを置くことを否定も肯定もされていません。Floating Action Button（以下FAB）が画面下部のバーに置かれることはありますが、それはBottom App Barであり、Bottom Navigation上でFABを置くことはMaterial Design上では定義されていません。

Tab Barにアクションを置くことは、ガイドラインからは外れて独自に発展してきたUIといえます。

Tab Barにアクションを置くことのメリット

アプリでやるべきアクションが明確になる
最近なにかと話題のメルカリとPayPayを見てみましょう。

メルカリでは「出品」、PayPayでは「支払う」というアクションがTab Barに置かれています。このようにTab Barにアクションを置くことで、メルカリでは「出品すること」、PayPayでは「支払うこと」がそのアプリでの主要アクションだと表現できます。このアプリで何をやればいいのかをUI上で示唆でき、且つアクションまで迷わず進んでもらうことが期待できます。

主要アクションへのステップが少なくなる
Tab Barというグローバルナビゲーション上に置くことで、どの画面からもすばやくアクションを行うことができます。

Tab Barにアクションを置くことのデメリット

アクションの対象がわからない
たとえば、Google Driveアプリで、新規作成ボタンがTab Barにあればどうなるでしょうか？

新規作成のアクションが強調されるUIになりました。ですが、もしマイドライブの下層フォルダを見ている時に新規作成ボタンを押したら、どこにファイルやフォルダは作成されるか予測できますか？

新規作成ボタンを押すまでどこに作成されるかはわかりません。ユーザーは疑心暗鬼の中で新規作成ボタンを押すか、怖くて押さないかもしれません。特にソーシャル機能や共有機能があるアプリは、対象を間違うと破壊的なダメージがあるため、恐れは増大します。

このように、Tab Barにアクションを置くと、アプリによっては暗闇の恐怖の中にユーザーを放り込んでしまいます。文脈に応じたコンポーネントとしてアクションを配置すれば、そういう問題は起こりません。

ユーザーが期待した動作を一定割合で裏切る
これは先述の「アクションの対象がわからない」と表裏の問題です。

Google DriveのTab Bar上に新規作成のアクションを置いた場合、グローバルナビゲーションであるTab Bar上のアクションなので、マイドライブの最上階層に作成されるのが正しいように思えます。そのような実装にしたと仮定します。

マイドライブの最上階層に新規作成されることを期待したユーザーにとっては、期待通りの動作でいいでしょう。しかし今見ている階層に新規作成されることを期待したユーザーを裏切ることになります。

では逆に文脈を引き継ぐようにしましょう。今見ている階層に新規作成されることを期待したユーザーにとっては、期待通りの動作でいいでしょう。しかし最上階層に新規作成されることを期待したユーザーを裏切ることになります。

アプリによってはTab Bar上にアクションを置くことでこうしたジレンマを抱えなければいけません。アクションボタンを押した後、ウィザードで対象を選択させることもできますが、それは同じ画面を2つ作ることになり、UIの複雑姓や開発工数を増大させます。文脈に応じたコンポーネントとしてアクションを配置すれば、そういう問題は起こりません。

Tab Barにアクションを置かない場合の代替策

Tab Barにアクションを置くことのメリットよりデメリットが大きいと判断した場合、どういう代替手段を取ればいいでしょうか。実はiOS、Androidともに文脈に応じたアクションのコンポーネントが用意されています。以下のコンポーネントを使いましょう。

・Navigation Barにボタンを置く（AndroidはTop App Bar）
・Tool Barにボタンを置く（AndroidはBottom App Bar）
・FABを（Tab Bar上ではない）コンテンツ上に置く

標準コンポーネント以外にもいくらでもオリジナルの手段は考えられるでしょう。

以上です。