• HOME
  • デザイン
  • マテリアルデザインのボタンの使い方は?基本概念とともに紹介

マテリアルデザインのボタンの使い方は?基本概念とともに紹介

2014年にGoogleが定めたマテリアルデザインは、Webサイトやアプリのデザインにおいてスタンダードといえる存在です。マテリアルデザインとは何なのか、基本的な概念とよく使われるボタンについて解説します。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/デザイン組織を経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

マテリアルデザインについて知ろう

かつてはフラットデザインが流行しましたが、現在はマテリアルデザインが主流となっています。マテリアルデザインとはどんなものなのか、概要と特徴について解説します。

マテリアルデザインとは

マテリアルデザインとは、直訳すると『物質的なデザイン』です。その名のとおり、デザインを物質的・物理的にすることで、現実世界に存在する物質と同じように扱えることを目的としています。

例えばWebサイトやスマートフォンアプリに、影のついた立体的なデザインのボタンが配置してあれば、誰が見ても「これはボタンだ」と認識できます。これは現実世界に存在するボタンを私たちが知っているからです。

このように、すでに存在している物質をデザインに反映することで、誰が見ても直感的に意味が分かるよう意図したデザインがマテリアルデザインです

マテリアルデザインは2014年6月にGoogle社よりデザインのガイドラインとして発表され、現在ではGoogleが提供するサービスのほとんどに使われているほか、多くの企業でも採用されています。

マテリアルデザインの特徴

マテリアルデザインは色数を抑え、平面画面の上に立体を表示する表現を用いるのが大きな特徴です。

光や影のほか、重さなどの表現を平面のデザインに取り入れることで、フラットデザインのシンプルさに、ユーザーに向けた利便性を持たせることを意識しています。

例えばスマートフォンのアプリで二つの要素が重なって表示されたとき、下の要素に上の要素の影が入るようなデザインが、マテリアルデザインの特徴です。

なお、マテリアルデザインには厳密なルールが定められており、できるだけこのルールに則ったデザインを用いることが求められます。このルールによって自然とデザインの持つ意味が共通化され、ユーザーはデバイスやアプリが変わっても迷うことなく利用することができます。

\新しい環境/デザイン組織を経験するなら「0ffers」!/

Offersの詳細はこちら

基本の概念を押さえよう

マテリアルデザインは『紙』と『インク』の二つの要素で考えられ、これらの要素を使って平面上に物質的な立体感を持たせるデザインです。それぞれの要素について解説します。

ボタンやアイコンなどの紙要素

『紙要素』はボタンやアイコンなどを配置する土台を指し、現実世界の紙と同じように、重ねることによって厚みや影が発生するという概念を持っています。

また、紙要素は長方形か円形で表され、伸縮・回転・融合といった変形が可能ですが、多角形にすることはできません。下の要素が上の要素を貫通して表示されることもできません。基本的には現実世界の物理法則に従っている必要があります。

色などのインク要素

『インク要素』は紙要素の上に配置する文字や写真、動画などを指します。紙の上にインクを使って色や文字を表現するイメージです。

前述のとおり紙要素を多角形にすることはできませんが、インク要素で多角形を描くことで表現することができます。

画面の奥行きと影

マテリアルデザインは現実世界と同じように扱うことを目的としているため、平面上に奥行きや影を用いて3次元を表現します。

前の要素と後ろの要素がどれくらい離れているのか、距離感を影の表現で出すことで、現在どの要素がアクティブなのかを示すことが可能です。

ボタンの主な種類と使い方

マテリアルデザインにはさまざまなボタンがありますが、特に重要な3つのボタンについて解説します。

FABボタンの使い方

『FABボタン』はフローティング操作ボタン(Floating Action Button)の略で、主に重要な操作を行う目的で使われます。

FABボタンは重要であることを示すために画面の一番上に配置され、円形で影を付けることが定められています。また、直感的に操作ができるよう円の中央には文字ではなくアイコンを使います。

例えばメールやカレンダーアプリの右下に円形にプラスのアイコンで描かれたFABボタンがあれば、直感的に『新規作成ボタン』であることが分かります。

浮き出しボタンの使い方

『浮き出しボタン』は影を付けて立体感をもたせた長方形のボタンです。FABボタンほど重要ではないものの、確実にボタンであることを知らせる必要があるときに使われます。

例えばアプリのインストール画面で、アプリの説明など文字情報が多く並んでいる中に『インストール』と書かれた浮き出しボタンがあれば、ユーザーは迷うことなくインストールすることができます。

フラットボタンの使い方

『フラットボタン』は影の付いてない立体感のないボタンです。他のボタンのように目立たないため、他の要素に重ねて使うことに適しています。

ただし、ボタンであることを認識できないと周囲のテキストに埋もれてしまうおそれがあるため、色を変えるなどの工夫が必要です。

まとめ

ユーザーの利便性を重視したマテリアルデザインは現在の主流デザインであり、Googleを始め多くのサービスで採用されています。

Webサイトやアプリなど、さまざまなシーンでマテリアルデザインは活用できます。デザインを仕事にするのであれば、必ず押さえておきたいデザインだと言えるでしょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/デザイン組織を経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

シニアレベルを2名採用!現場の負荷を軽減した採用活動、その打ち手がOffersだった

700万ダウンロードを突破し、コスメの口コミアプリとして急成長を続ける「LIPS」。これまで正社員や業務委託問わず、各専門性をもったエンジニアが集うことでグロースを続けてきた。そんな同社のハイス...

インフラとフロントエンドの3名を採用! Hotspringが考える採用方針と旅行サービスの未来とは

旅行予約サービス『こころから』を運営するHotspringは、今後の旅行業界の変化を見据えたプロダクト開発を推進している。これまでリファラルやTwitter採用を行ってきた同社が、なぜOffer...

フロントエンジニアの採用に成功!複業採用の秘訣はコンシェルジュの伴走と、独特な1on1にあった

AIチャットボット市場で圧倒的なシェアを誇る「HiTTO(ヒット)」を展開するHiTTO株式会社。今後さらなる顧客満足の向上に向けて、自社プロダクトの強化を加速していく。そこで重要になるのが開発...

専任CSメンバーがサポート。わずか1ヶ月半で、採用難易度の高いリードクラス2名の採用に成功!

女性限定コミュニティに注力する株式会社SHEでは女性の「自分らしい生き方」の実現を目指し、クリエイティブスクール「SHElikes」に加え、美容領域「SHEbeauty」や金融領域「SHEmon...

デザイン

お金

採用・組織

グルメ