• 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」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

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

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



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

Rubyエンジニア2名の爆速採用に成功!2ヶ月で30倍の事業拡大を支える農業ITスタートアップの複業活用法

野菜や米、果物などの生産者と消費者を繋ぐオンライン直販所『食べチョク』を運営するビビッドガーデン。在宅時間をより充実させたい消費者が集まり、事業が急成長している。そこで課題となったのがエンジニア...

オンライン面談のみでテックリードクラスを複数採用!注目ベンチャー企業のwithコロナ時代に向けた採用術とは

日本で唯一のeKYC対応のデジタル身分証アプリを提供するTRUSTDOCK。今後、身分証がデジタルに置き換わるであろう不可逆な未来を実現するためにもエンジニアが必要だった。同社にはコロナ禍にも関...

mrubyを採用したソフトウェアを広げた第一人者・松本亮介が、面倒を感じながらもC言語を愛する理由とは?

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことを中心...

エンジニアとして、社会に新しい価値を提供し続けたい。カンカク志甫氏が考える本業と副業のバランス術

本業と数々の副業を両立させてきた志甫氏。副業を受ける決め手や本業と副業を両立させるコツ、これからのエンジニアのチャンスの掴み方について伺った。

デザイン

お金

採用・組織

グルメ