
マテリアルデザイン風のボタンを作成するときに気をつけるべきポイント
今、話題になっているGoogleのデザインガイドライン「マテリアルデザイン」を注目している方も多いのではないでしょうか。
どんなデバイスでも均一に、洗練されて統一感があるデザインはユーザーにとっても利用しやすいため、多くのサービスで導入されています。
マテリアルデザインを制作しようとするとき、いくつか気をつけなければいけない点が出てきます。
今回は、マテリアルデザイン風のボタンを作成するときに気をつけたいことをまとめてご紹介します。
フローティングアクションボタン
「フローティングアクションボタン」とは、表示画面の中に最前面に浮かんでいる強調されたボタンのことを指しています。
強調させたいボタンとして利用することが多く、最重要ボタンとしてカラーも色調が強いもので作られていることが特徴です。
マテリアルデザイン的にはボタンに影を持たせることによって、より立体的にビジュアルに訴えています。
そのため、通常1ページに対して1つの使用とされていることが多いです。
Googlemapやカレンダーに実装されているので、「フローティングボタン」と言えばマテリアルデザイン、という観念が出来上がってきています。
実装に関しては、下記サイトで入手が可能になり、コードも記載されているので簡単に実装が可能になります。
https://github.com/makovkastar/FloatingActionButton
フラットスタイルボタン
「フラットスタイルボタン」は、フローティングボタンのように画面に浮かず固定されるので1ページに複数個配置されるケースが多くあります。
持ち上げ型ボタン
持ち上げ方ボタンは「Raised Button」とも言われていて、マテリアルデザイン的には枠とシャドウがなく、テキストだけのボタンでデザインされています。フラットデザインではシャドウ効果を取り入れているケースもあるので、持ち上げ型ボタンとは一線を画しています。
また、利用頻度は一般的にフラットボタンの次に多いとされています。
まとめ
マテリアルデザイン的なボタンを制作や利用をしようとしても、多様なボタンが存在します。
各々のデザインスタイルを持ったボタンは活用シーンがそれぞれ異なるので、ボタンの意味合いを把握し、ユーザーにとって価値のある制作に活かしましょう。
このニュースを読んだあなたにおすすめ
Photoshop初心者必見!Photoshopを使いこなすために知っておくべき情報まとめ
全て無料!デザインの魅力をさらに引き立てる高品質PSDファイル60選
コミカルなデザインで活用したいマンガ風フォントまとめ
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング