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

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

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

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

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

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

フラットスタイルボタン

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

持ち上げ型ボタン

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

まとめ

マテリアルデザイン的なボタンを制作や利用をしようとしても、多様なボタンが存在します。
各々のデザインスタイルを持ったボタンは活用シーンがそれぞれ異なるので、ボタンの意味合いを把握し、 ユーザー にとって価値のある制作に活かしましょう。

このニュースを読んだあなたにおすすめ

Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ
全て無料！デザインの魅力をさらに引き立てる高品質PSDファイル60選
コミカルなデザインで活用したいマンガ風フォントまとめ