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

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

【2022年最新】 Offersで人気の副業・業務委託案件・求人!
  • 【1位】【リモート/自社サービス】上流から一気通貫で携わりたいデザイナー
    様々なユーザーが使いやすいデザイン・ユーザー体験の設計、業務委託からスタートOK
  • 【2位】HRTechの業務特性をベースにUX領域から事業を加速させるデザイナー
    時給3,500円~8,000円!働く人のキャリア形成とwell-beingを実現
  • 【3位】大手顧客案件で新しい技術にチャレンジしたいデザイナー(Figma)
    Asana、miro、Figmaを利用したスクラム開発となり、協力していただけるデザイナーを募集
  • 今すぐ副業求人・案件を探す!

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

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

    マテリアルデザインとは

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

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

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

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

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

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

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

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

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

    基本の概念を押さえよう

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

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

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

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

    色などのインク要素

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

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

    画面の奥行きと影

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

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

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

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

    FABボタンの使い方

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

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

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

    浮き出しボタンの使い方

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

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

    フラットボタンの使い方

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

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

    まとめ

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

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

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

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

    本業では経験できない、新しい環境/開発スタイルを経験しよう!



    この記事をシェア

    関連記事


    副業・フリーランス

    プログラミング

    インタビュー

    医療・介護系SaaSの開発組織をOffersで構築へ!エピグノが実践する業務委託の採用手法とは?

    医療・介護機関向け人材マネジメント領域において、「エピタルHR」「エピタク」「エピオペ」という3プロダクトを展開する株式会社エピグノ。2021年に資金調達を行い、同領域におけるデジタルトランスフ...

    3回の面談を経てTech Leadを採用!タレントプールとしてOffersを活用するサイカの採用術

    データサイエンスを駆使したマーケティングソリューションを提供するサイカ。2020年に「モノづくりビジョン」を定義し、時代や社会にインパクトを与えるプロダクトを生み出すべく、開発組織の構築を進めて...

    MLエンジニアを2名採用。1年間ずっと出会えなかった層にOffersですぐ出会えました

    SO Technologiesは広告会社支援SaaS「ATOM」や店舗集客支援サービス「ライクル」、ネット広告仕入・提案・ 運用支援サービス「AG Boost」、Webマーケティングのノウハウメ...

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

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

    デザイン

    お金

    採用・組織