フローティングアクションボタン(FAB)はなぜ右下に設置されるのか？

画面の決まった場所に、常に表示されている「フローティングアクションボタン（FAB）」。スマホアプリやWebアプリにおいて、重要なアクションを担っています。

この記事では、フローティングアクションボタンの概要や、デザインするときのポイントなどを解説していきます。

ぜひスマホアプリやWebアプリをデザインするときの参考にしてください。

フローティングアクションボタン（FAB）とは

フローティングアクションボタン（FAB）とは、スマホアプリ等のインターフェース上に表示されるボタンのことです。最大の特徴として、画面をスクロールしても一定の位置に表示され続けるボタンであることが挙げられます。

フローティングアクションボタンは、そのアプリにおける重要な操作をユーザーが直感的に行えるように設置されています。たとえばGoogleマップにてフローティングアクションボタンを押すと、現在位置を確認したり、移動計画を立てたりすることが可能です。

画像からも明らかなように、フローティングアクションボタンは画面の右下に配置されることが多いです。では、なぜそのような配置になっているのでしょうか。以下で解説していきます。

フローティングアクションボタンはなぜ右下に設置されるのか？

▲出典：The Thumb Zone

この疑問を解決する鍵となるのが、スティーブン・ホーバー氏が著書『Designing Mobile Interfaces』で作った造語「Thumb Zone（親指ゾーン）」です。この親指ゾーンは、片手での使用に最適なタッチ領域をさします。

フローティングアクションボタンは先述のとおり、右下に配置されているのが一般的です。しかし世界人口の70〜90%が右利きであることを考えると、あまりタップしやすい位置とはいえません。

左側に設置すると、コンテンツの読みやすさを損ねる恐れ

親指ゾーンにのっとるなら、フローティングアクションボタンを左下に配置した方が使いやすいはずです。では、なぜ右下に配置されているのでしょうか。

答えはコンテンツの消費方法に隠されています。コンテンツを読む際、フローティングアクションボタンはすこし邪魔な存在であり、コンテンツがボタンの背後に隠れてしまうことがあります。

英語も日本語も、文章を左から右に読んでいきます。左側にフローティングアクションボタンを配置すると、文章がボタンに隠れて文の先頭が表示されず、読みやすさを損ねる可能性があるのです。

コンテンツの可読性をもっとも妨げないのが、右下

たとえコンテンツが画像や動画であっても、フローティングアクションボタンは右下に配置しましょう。画像や動画であっても、ユーザーは文字を追うのと同じように、左から右へ、上から下へ目を動かします。

つまりコンテンツの可読性をもっとも妨げない位置が、右下なのです。

ニールセン・ノーマン・グループによるアイトラッキング調査でも、人々は左からコンテンツを眺めることが指摘されています。詳しくは以下の記事をご覧ください。

フローティングアクションボタンの使用シーン

ここからは、フローティングアクションボタンの具体的な使用シーンを、事例とともに見ていきましょう。

シーン1. 重要度の高いアクションを提示したいとき

フローティングアクションボタンは、重要度の高いアクションのために利用しましょう。アプリの本筋と関わりの強い代表的な機能や、利用頻度の高い機能を強調するのにぴったりです。

たとえばSpotifyのスマホアプリでは、音楽アプリとしてもっとも利用頻度の高い「再生／停止」ボタンが、フローティングアクションボタンとして採用されています。Spotifyが音楽アプリであることを、ユーザーへ視覚的に訴えかける役割も果たしていますね。

シーン2. ウェイファインディングシステムとして活用したいとき

ウェイファインディング（Way-finding）とは、ユーザーをより円滑にゴールまで誘導するためのデザイン・構成を指す言葉です。

フローティングアクションボタンは「次に何をするべきか」をユーザーに直感的に伝える手がかり、すなわちウェイファインディングシステムとしても活躍します。

たとえ不慣れな画面でも、フローティングアクションボタンを操作すべきということは自然に分かりますよね。フローティングアクションボタンは、次のアクションへの道標として有効です。

たとえばTwitterの画面を見てみましょう。ツイートをするためのウィンドウを開くのに、フローティングアクションボタンが使われています。

フローティングアクションボタンでやってはいけないポイント

ここからは、フローティングアクションボタン設置の際にやってはいけないことご紹介します。

ポイント1. 不要なシーンでフローティングアクションボタンを設置してしまう

フローティングアクションボタンは、インターフェースからやや逸脱した存在です。目立つボタンだからこそ、促進したいアクションのためだけに利用してください。

たとえばGoogleフォトのスマホアプリにおけるギャラリー画面を見てみましょう。スクロール時を除き、Googleフォトにはフローティングアクションボタンが存在しません。

ギャラリー画面に置いて、ユーザーがしたいのは「写真を見ること」です。そのため、フローティングアクションボタンにてアクションを誘導する必要がなく、むしろ存在が邪魔になる可能性があります。

設計の初期段階で主要なアクションを洗い出すのが難しい場合、まずはタスクを簡略化し、インターフェイスにフローティングアクションボタンが必要かどうかを考えてみましょう。

5分経っても主要なアクションが出てこないなら、その画面にフローティングアクションボタンは必要ありません。

ポイント1. ミステリーミートナビゲーションを作ってしまう

「ミステリーミートナビゲーション」とは、見ただけでは次のアクションが予測できず、次のアクションを知るにはタップ操作をする必要があるナビゲーションのことです。That Suckの創始者であるビンセント・フランダース氏がこの言葉を作ったとされます。

フローティングアクションボタンはアイコンだけのボタンなので、デザインによってはアクションが理解しにくいことが課題です。

たとえば以下の画面にあるボタンを押すと、どのようなアクションができるか推測出来ますか？

タップするまで、どのような機能なのか分かりにくいですよね。このボタンが、まさにミステリーミートです。

「タップすればわかることだ」と、この問題を軽視する人もいます。しかしユーザーがアイコンの意味を覚える必要がでてくるため、認知的負荷がかかってしまいます。

ポイント2. フローティングアクションボタンを1画面に2つ以上設置してしまう

フローティングアクションボタンは非常に人目を引くので、使用する場合は原則1画面につき1つまでにしましょう。

複数あるとデザインを損ねるだけでなく、ユーザーを混乱させる恐れがあります。

なお複数の相関／類似のアクションを処理する必要がある場合は、フローティングアクションボタンを2つ使うケースもあります。

ポイント3. ネガティブアクションや使用頻度の低いアクションを設定してしまう

フローティングアクションボタンはユーザーがもっとも使用するであろうボタンのため、基本的にポジティブなアクションに使います。

そのため、以下のようなアクションには使わないようにしましょう。

• 「削除」「アーカイブ」などのネガティブアクション
• 「警告（アラート）」などの通知アクション
• 「テキストのコピー」など、使用シーンの限定されたアクション
• 「音量」の操作など、本来はツールバーにあるべきアクション
• その他の曖昧なアクション

フローティングアクションボタンでのアニメーション活用

フローティングアクションボタンは、たびたびアニメーションと組み合わせられることがあります。

選択肢の増減やボタンの変形など、いくつか事例を見ていきましょう。

アニメーション1. ボタンの数を増やす

ひとつのフローティングアクションボタンから、新たなアクションを示すボタンを展開させたり、戻したりできます。フローティングアクションボタンは、画面上を大胆に移動しても違和感がないのが魅力のひとつです。

しかし、ここに並べるアクションは主要なものであり、それぞれに関連性がなければいけません。また展開されるフローティングアクションボタンの数は、3～6個に収めると美しいです。

▲出典：UX Planet

アニメーション2. 大胆に変形する

フローティングアクションボタンそのものが、プレビュー画面や設定画面へと変化することがあります。これはユーザーの画面遷移を楽にするためです。

以下のアニメーションのように、ユーザーの感覚を導き、画面上で新たな展開までの因果関係をわかりやすく示せるようになります。

▲出典：Ehsan Rahimi

アニメーション3. スクロール中にフローティングアクションボタンを消す

ユーザーがコンテンツを見るのを邪魔しないように、スクロール時にはフローティングアクションボタンを非表示にすると親切です。

アンドロイド向けの中規模アプリでは、一度隠れたフローティングアクションボタンが、スクロールの終点までいったときに再表示されるといったテクニックをよく利用しています。ユーザーがボタンを使いたいタイミングを見極めましょう。

▲出典：Juliane Lehmann

おわりに

フローティングアクションボタンの特徴や、効果的な使い方などをご紹介しました。

導きたいポジティブアクションがある場合、フローティングアクションボタンはとても有効です。アプリ設計の現場で、ぜひ実践してみてください。

（執筆：Kazunari Mino、Nakajima Asuka　編集：Kimura Yuumi、Uchida Kazuyoshi）