はじめに
今回はマテリアルデザインのフローティングボタンについて学んだことをメモしたいと思います。
フローティングボタンとは？
1ページあたり1つまで
FABは基本的に1ページにつき1個だけ使うことが推奨されており、最重要な操作を行うためのボタンである。
※ フローティング操作ボタンはFAB（Floating Action Button）と略される
ボタンは基本円形
マテリアルデザインでは、ユーザーが重要なボタンだと直感的に判断できるように円形にすることが決められており、勝手にオリジナルの形に変更することは許されていない。（Extended FABは別）
Extended FAB
2018年にExtended FABというスタイルがガイドラインに追加され、ボタン内にアイコンだけでなくテキストを含めることができるようになった。
マテリアルデザイン公式↓
https://material.io/components/buttons-floating-action-button/#types-of-transitions
アイコンの書出し設定時の注意点
アイコンのサイズはマテリアルデザイン推奨の余白ありの24dpで用意すること。
ここで注意したいのは、マテリアルデザインの標準アイコンを使うのなら問題はないが、自作のアイコンの場合はアイコンの周りに必ず余白を設けること。
余白がないアイコンを設定してしまうと24dpいっぱいにアイコンが拡大されてしまい、アイコンがでかく見えてしまうという罠が…。 標準のアイコンはすべて余白込みの24dpなのでそのまま使用すればOK。
マテリアルデザインの標準アイコン↓
https://material.io/resources/icons/?style=baseline
失敗談
今回初めてフローティングボタンをデザインした訳ですが、何も分からずに作ったため背景の丸まで込みの画像素材を書出し設定してしまい、「ちがうやーん！」ってなりました。
ボタン一つでもきちんと概念を理解しなければきれいに作成できないので、とても勉強になりました。
--以上