スマホアプリのUX改善に役立つフローティングボタンの活用方法5選

マテリアルデザインの重要な要素であるフローティングボタンは、適切に使うことでUXの改善に大きく貢献します。特にスマートフォンをはじめとするモバイル機器のUI/UX向上には欠かせません。

今回は、スマホUIにおけるフローティングボタンの活用方法をご紹介します。

フローティングボタンとは？

フローティングボタンとは、UI上に表示された円形のアイコンのこと。形状や位置、色を少し変えるだけで、可視性が上がったり下がったりする、とてもデリケートなパーツです。

フローティングボタンの条件は次の3つです

• 丸い形状であること
• 真ん中にアイコンがついていること
• 他のデザイン要素より目立つように影を用いること

フローティングボタンは、Googleのマテリアルデザインと共に2014年頃から広がりました。現在に至るまで、さまざまなWebデザインやモバイルデザインで採用されています。

Androidアプリでのフローティングボタンの例

フローティングボタンの活用例

ここからは、実際にどのような使い方をすれば、スマホのUI/UXを向上させられるのかご紹介します。

1. 主要なアクションにのみ使用する

フローティングボタンは主要な機能か、頻繁に使用されるアクションを強調して表示するのが理想的です。アプリ内の機能をピラミッドにたとえたとき、一番上の層に含まれる機能を表示させるために使いましょう。

このとき、入念な情報設計が求められます。

たとえば、音楽アプリのフローティングボタンには「再生と停止」を示するアイコンがデザインされており、このUIが「音楽を操作できるもの」であると伝わります。

しかし、フローティングボタンは初見のユーザーにとってはネガテイブなものだと主張する人もいます。押すまでどんな機能が隠れているかがわかりづらいためです。

とはいえ、UIをすっきりとさせ、タスクを効率的に進められるフローティングボタンの効果は尊大だといえるでしょう。

2. ボタンの意味を表示する

フローティングボタンは、次に取るべきアクションをユーザーに伝え、ゴールまで導く役割も担います。

Googleの調べでは、使ったことのないアプリを開いたユーザーのほとんどがフローティングボタンを頼りに行動しているとか。

3. 関連した項目を表示する

3つ以上6つ以下のオプションを提供したい場合には『Evertnote』のようなデザインが適切でしょう。

フローティングボタンを押すと、更に具体的で細分化された機能を提示します。表示、非表示を切り替えるボタンも含めて、フローティングボタンは6つ以内になるようにデザインします。

サービスの主な機能かつ、表示された機能同士に関連性がある機能を表示してください。

画像内のメニュー構成を見てください。位置情報はこのアクションの並びに関連性がありません。このような表示の仕方は、あまり好ましくありません。

4. わかりやすい前後関係を意識する

機能の前後関係を正しく保ちましょう。たとえば、Google+はユーザーストリームに参加している状態とそうではない状態の表示が違います。

このデザインは、次のような想定の元に作られています。

「ユーザーがユーザーストリームをスクロールするとき、ユーザーは”観覧したい”と考えているはずで、スクロールを止めると”投稿したい”と考えているはずだ」

5. 2つの状態を切り替える

フローティングボタンは、画面遷移をシームレスに行う方法でもあります。アニメーションで状態を切り替え、ユーザーへ現在の操作状態を伝えています。次のふたつの例では、変更や変化を切り替えのアニメーションを使用して表現しています。

Ehsan Rahimi / Dribble

John Schlemmer / Dribbble

まとめ

フローティングボタンを採用したデザインは増え続けており、ユーザーにとってすっかりおなじみのUIになりました。より機能を認識してもらいやすくなったからこそ、正しいデザインでその効果を増強させたいものです。

あなたのスマホアプリやサービスにも、取り入れてみてください。

（翻訳：Yuri Tanaka）