マテリアルデザイン風のボタンを作成するときに気をつけるべきポイント

ferret編集部

2016年4月1日

5,202

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
　　
>> 著者詳細はこちら

今、話題になっている Google のデザインガイドライン「マテリアルデザイン」を注目している方も多いのではないでしょうか。
どんなデバイスでも均一に、洗練されて統一感があるデザインはユーザーにとっても利用しやすいため、多くのサービスで導入されています。
マテリアルデザインを制作しようとするとき、いくつか気をつけなければいけない点が出てきます。

今回は、マテリアルデザイン風のボタンを作成するときに気をつけたいことをまとめてご紹介します。

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

「フローティングアクションボタン」とは、表示画面の中に最前面に浮かんでいる強調されたボタンのことを指しています。
強調させたいボタンとして利用することが多く、最重要ボタンとしてカラーも色調が強いもので作られていることが特徴です。
マテリアルデザイン的にはボタンに影を持たせることによって、より立体的にビジュアルに訴えています。
そのため、通常1ページに対して1つの使用とされていることが多いです。
Google mapやカレンダーに実装されているので、「フローティングボタン」と言えばマテリアルデザイン、という観念が出来上がってきています。

実装に関しては、下記サイトで入手が可能になり、コードも記載されているので簡単に実装が可能になります。
https://github.com/makovkastar/FloatingActionButton

フラットスタイルボタン

「フラットスタイルボタン」は、フローティングボタンのように画面に浮かず固定されるので1ページに複数個配置されるケースが多くあります。

持ち上げ型ボタン

持ち上げ方ボタンは「Raised Button」とも言われていて、マテリアルデザイン的には枠とシャドウがなく、テキストだけのボタンでデザインされています。フラットデザインではシャドウ効果を取り入れているケースもあるので、持ち上げ型ボタンとは一線を画しています。
また、利用頻度は一般的にフラットボタンの次に多いとされています。