ボトムメニューの形

一言で「ボトムメニューを置く」といっても、実はいろいろな形があります。ボトムメニューの基本的な形について考えてみましょう。

1. ボトムタブ (iOS)

original.jpg
self-screenshot on April 3rd

iOSアプリでよく見られる形ですが、最も基本的なボトムメニューの形は*「ボトムタブ」*と呼ばれるタブ形式のメニューです。
例えば、Facebookアプリであれば「ニュースフィード」「友達リクエスト」「通知」といったさまざまなメニューをワンタップで切り替えることができます。

しかし、ボトムタブに設置できるのは、多くとも5つです。
それ以上のメニューの設置は、アイコンのサイズが小さすぎてユーザビリティの低下を招いてしまいます。
Facebookアプリのようにそのほかのメニューを開く場合に一番右にハンバーガーメニュー＋右ドロワーを設置するのも一つの方法でしょう。

2. FAB (Android)

components_buttons_fab.png
▲ Source: Google

*「FAB(Floating Action Button)」*はAndroidにおけるマテリアルデザインパーツのことで、右下に設置された「＋」マークや「☆」マークなどの丸いボタンのことです。
その名の通り、「浮いている」アクションボタンで、親指で押しやすい位置にあるのが特徴です。

ボタンを押すことで、縦に実行可能なメニューが並びますが、あくまでも親指で押しやすい位置にあることがポイントです。
tumblrアプリのFABのように、親指の伸ばしやすい位置に弧を描くように配置しているのもユーザビリティ向上の工夫と言えるでしょう。

プロトタイピング時に気をつけておきたいこと

Adobe XDやProttなどのプロトタイピングツールはどうしてもパソコンでレイアウトを考えるので、親指での使い勝手に関しては忘れてしまいがちです。
多くのユーザーが親指をマウスがわりに使っていることを考慮すると、以下の点に気をつけておきたいものです。

1. どのボタンをどの指で操作するかを考える

ボタンを設置する際に、デザイン面やユーザーインタラクションにばかり目が行きがちですが、そのボタンの設置場所に関しても、本当にそこでいいのか、そこがベストポジションなのかを考えてみましょう。

もちろん、左手で握って、右手のあらゆる指を使って操作する場面もありますが、ほとんどの場合は親指のみの操作になっているはずです。
ですので、モバイルアプリケーションにおけるメニューは最低限サミングスポットに置いておきたいものです。

2. スクロールするとボトムタブが隠れる挙動を取り入れる

ボトムタブは、親指で押しやすい位置にあるため便利ではあるのですが、画面を占有してしまうというデメリットもあります。
特に、5インチ以下の小さいサイズ(iPhone5やiPhone SEなど)でアプリを開くと、フィードなどの閲覧したい情報を表示するエリアが狭まって見にくくなってしまいます。

FacebookアプリやSafariなどをはじめとして、多くのアプリでは、下スクロールをしてコンテンツを閲覧している最中は、ボトムタブが隠れる挙動を取り入れています。
ボトムタブを表示したい場合には、逆側に少しだけスクロールすれば、ひょっこりと現れます。

このようにすれば、小さい画面サイズのアプリでもコンテンツの閲覧に集中することができるので、結果的にUXが向上します。

3. 左上ハンバーガーメニュー＋左ドロワーは絶対に避ける

最も避けたいデザインは、左上にハンバーガーメニューボタンを置いて、それを押すと左からドロワーメニューが表示されるようなデザインです。

これはそもそも左上にハンバーガーメニューボタンがあるということは、右利きの親指を使っているユーザーに届きにくい位置にあるので、押しにくい上に、左からのドロワーメニューも扱いづらいという欠点があるからです。

ハンバーガーメニューを設置したい場合には、アプリ画面上側ではなく下側に置くほうがユーザーのためになります。
左利きのユーザーのことも考えれば、実はボトムメニューの真ん中にハンバーガーメニューを置くのがベストですが、それに違和感がある場合でも下側に置いたほうがよいでしょう。