背景
Material Design Componentsいっぱいあるけどガイドライン的にはどんな時に使うのがいいの？ 逆にどんな時には使っちゃダメなの？ がわからなくなるのでまとめてみました。
まずはよく使うFABから進めて、今後他のComponentについても記事にしていこうと思っています。
floating action buttonとは
floating action buttonで通称FAB。
主に画面の右下に設置され、画面の主要なアクションを表しています。
有名なアプリではTwitterのツイート作成ボタンがこれだったりします。
どんなときに使うの？ どんなときに使っちゃダメなの？
| 良い例 | 悪い例 | 解説 |
|---|---|---|
|
 |
基本的に1画面に1個まで（重要なアクションが2つある場合には2個設置してもセーフ）。悪い例では特に重要なアクションでもなく、通常のボタンのような扱いをしているのがアウト！ |
 |
 |
FABの前にバッジやその他要素を重ね合わせるのはアウト！ FABは文字通りfloatingなので、画面の中で最もelevationが高く配置されるようにする |
|
 |
FABのアイコンに曖昧な図像を使うのはアウト！ 誰もがわかるアイコンを使うべし |
|
 |
通常のFABにテキストを配置するのはアウト！ 後述しますが、テキスト用のExtended FABがあるのでそちらを使ってください |
 |
 |
主要な・ポジティブなアクションに使用してください。逆にマイナーなアクション、ボタンから複数のメニューへの遷移、何かを削除するようなアクションには使用しないでください |
 
|
 
|
主要アクションに関連したアクションを表示させることができます（画像例は共有ボタンを押したら共有先が関連アクションとして表示されている）。ただし、関連アクションは3~6個までとなっています |
Extended FABもあるよ
アイコンだけではどうしてもその先のアクションを説明できない......
かと言って不明瞭なアイコンをFABにいれるわけにも......
そんな時にはExtended FABを使用することで、アイコン+文字のFABを設定することができます。
| 画像 | 解説 |
|---|---|
 
|
アイコンを入れる際には左から右へ表記する言語の場合は左側に、右から左へ表記する言語の場合は右側に配置します（テキストのスタート手前にアイコンが置かれる） |
 |
アイコンなし、テキストオンリーでもOK！ |
 |
逆にアイコンだけはアウト！ 大人しく通常FABを使いましょう |
 
|
テキストをどうしても短くできない場合は短縮してもOK（上画像）。ただし折り返して2行以上で表示させるのはアウト！（下画像） |
形に決まりはない......けど
ボタンの形は色々あります。丸以外はあまり見慣れないかもしれませんが、どんな形にしても問題ありません。
ただし、ユーザーの操作に悪影響があるもの（ボタンがやたら大きく操作に邪魔、ボタンが細いor小さくてうまくタップできないetc...）にはしないようにしましょう。
Material Design 3でのデザイン変更
| Material 2 | Material 3 | 解説 |
|---|---|---|
 |
 |
デフォルトのボタンデザインが角丸の四角になっています |
 |
 |
Extended FABも同じく角丸の四角デザインに。また、FABとExtended FABの高さが等しくなっています |
終わりに
アプリで見かけることの多いFABについてまとめました。
制約が多いように感じるかもしれませんが、逆にガイドラインを守ることで使用場面の明確化や管理のしやすさに繋がっていくと思います。
こちらの記事はMaterial Design公式ページの説明を参考にしていますので、興味のある方や他のComponentsも待ちきれないぜという方はぜひ下記参考リンクからご参照ください。