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

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

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



この記事をシェア

関連記事


副業・フリーランス

プログラミング

デザイン

インタビュー

【Unity&バックエンド採用】Offersコンシェルジュを活用し、VPoE業務に集中できた恩恵とは

幼児や小学生の家庭学習の必要性が求められている今、企業や団体がICTを活用した学習コンテンツの開発に注目している。ファンタムスティックは子ども用の学習アプリやデジタル教育コンテンツの開発に強みを...

転職前提の複業オファーで、2ヶ月後に正社員へ!未来のCTOを採用した注目スタートアップの採用術

スニーカー市場は熱狂的なファンも多く、一次流通・二次流通ともに毎年拡大を続けている。そのような市場の中、スニダンことスニーカーダンク(SNKRDUNK)は市場の拡大を追い風に成長し続けてきたが、...

『実践TypeScript』の著者・吉井健文が考えるTypeScriptの魅力と可能性

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

ヤフーが実践するギグワーク活用がこれからの新しい採用手法に!?リモート環境で求められる人材とはーこれからの「強い組織の作り方」CEOセッションー

新型コロナウイルスで、働き方改革やデジタル・トランスフォーメーションの流れが急激に加速し、採用・育成・マネジメントの状況は大きく変化しています。 株式会社overflow、株式会社zenkig...

お金

採用・組織

グルメ