マテリアルデザインとは？配色やボタンに関するガイドライン、具体例を紹介

これまでも、そしてこれからも揺蕩って移り行くデザインのトレンドのなかで、マテリアルデザインは、一際意義深い存在のように感じられます。というのも、ユーザビリティの向上に端を発して生まれたそのデザインを支持する声は非常に多く、そのニーズに応えるように実際のところ、Webサイトのいたるところで見受けられるからです。

しかし、意外とその全貌について明確に把握されている方は少ないようにも思います。たとえば、フラットデザインよりも立体的といった認識だけでは、マテリアルデザインが持つ本質的な魅力を知り得ないまま（対象のデザインに）接することになりかねません。無論、それでいいのかもしれませんが、ちょっと勿体ない気もします。

そういうわけで、背景にガイドラインがあることも含め実は一筋縄でいかないマテリアルデザインの世界を、配色やボタンに関するルール、具体例など交えつつ本記事にて紹介します。

マテリアルデザインの由来、定義、特徴

マテリアルデザインは2014年にGoogleによって提唱されました。元々はAndroidアプリの開発用ガイドラインでしたが、そのわかりやすさがユーザーにとって親切だと評価を受け、サイトデザインに推奨された経緯があります。また、当時はさまざまなデバイスや画面サイズに適応したサイトデザインの設計が求められ、丁度フラットデザインが台頭していた頃でした。が、そう年月も経たないうちに新たな潮流としてこのマテリアルデザインが浮上することになります。

マテリアルデザインは、直訳すると“物質的なデザイン”です。紙とインクの要素で画面を組み立てる手法が使われ、物質の重なりに連動した影、質量を感じさせる動きなどを組み込んだものが該当します。と、この情報だけではなかなかピンとこないかもしれません。（というわけで）あえて乱暴に述べると、マテリアルデザインは印刷物に近い形で提供されたデザインです。

こうした仕様であるため、たとえばフラットデザインよりもリアルな質感が生まれます。また、無意識の脳内補完による負担を抑える意味でもユーザーに対して優しいといえます。仮に普段見慣れたものとはかけ離れたアイコンであれば、戸惑いも含めて少なからず脳は疲れるはずです。パッと見て分かりやすいデザインであること。そもそもわかりにくいことで生じる負担を軽減すること。この2つの目線こそマテリアルデザインの基本概念であり特徴です。

マテリアルデザインのメリットとデメリット

マテリアルデザインの基礎知識をおさえるうえで、いうまでもなくメリット、デメリットの把握は必須です。

以下、それぞれ紹介します。

マテリアルデザインのメリット

現実世界の物理法則にしたがっているため、基本的にユーザーの直感的な判断で識別が可能です。能動的な操作で生まれるアニメーションやエフェクトといったアクションは、まさにマテリアルデザインが掲げるわかりやすさそのものだといえます。Webデザインにおいては過去から連なる課題としてサイト軽量化が挙げられますが、比較的読み込みスピードは速く、その点もまたユーザーにとって確実にメリットです。

マテリアルデザインのデメリット

デザイナー側にとっては、厳しいガイドラインはクオリティを担保してくれる一方で、覚える要素が多いのも事実です。そのため、マテリアルデザインを習得するにはある程度時間を要します。表現の縛りも少なからず存在し、状況によっては差別化が難しい側面は否めません。フラットデザインと比較した場合、ギミック的な要素やサイトの軽量化を含め、やや複雑に感じられることも少なくないでしょう。

配色に関するマテリアルデザインのガイドライン

Googleはマテリアルデザインに対してガイドラインを設けています。そのうちの一つが過剰な装飾を避けるための配色に関するガイドラインです。具体的には、以下の通り有彩色と無彩色の使い方が決められています。

メインカラー（プライマリーカラー）

メインカラーとはプライマリーカラーとも呼ばれ、サイト上で占める割合がもっとも多い色のことを指します。主にヘッダー部分のアプリバーで用いられることからも、いわばサイトの表象です。

Googleは、メインカラーに100番～900番で測れる明度（色の明るさを指し、番号が大きくなるほど暗くなる）のなかで｢500番｣の色を推奨しています。なお、エラーカラーの赤と色合いが近い場合は調節が必要です。

サブカラー（プライマリーバリアント）

サブカラーはプライマリーバリアントとも呼ばれ、メインカラーの補助的役割を担います。基本的にメインカラーの同系色から2種選びます。グラデーション効果が生まれ、メインカラーを際立たせる効果があります。

セカンダリーカラー（アクセントカラー）

セカンダリ―カラーはアクセントカラーとも呼ばれますが、より馴染み深いと思われる言葉だと、いわゆる“差し色”です。大抵の場合、メインカラーの補色（色相環では対面に当たる色）が用いられます。つい多用しがちな点は注意が必要です。あくまでマテリアルデザインはシンプルであることがコンセプトに据えられています。明度もGoogleの推奨は500番前後。こうしたマナーに基づいて取り入れるようにしましょう。

無彩色

黒、白、グレーの無彩色は自由に使うことが可能です。主にテキスト部分で用いられますが、当然、背景色によって選ぶ色は異なります。

なお、薄い背景に黒色の文字を乗せる場合は、数値にして不透明度87%が推奨されています。

ボタンに関するマテリアルデザインのガイドライン

Googleが設けているマテリアルデザインのガイドラインは配色だけではありません。

本章ではボタンに関するガイドラインを紹介します。

フローティングアクションボタン

フローティングアクションボタンとは、GUI（グラフィカル・ユーザ・インターフェイスの略で、コンピューターの画面上に表示されるウィンドウ、アイコン、プルダウンメニュー……等々、マウスに代表されるポインティングデバイスで操作できるインターフェース）にて定位置に表示されるボタン要素です。アルファベットの頭文字を取って“FAB”とも呼ばれます。マテリアルデザインを説明するうえで象徴的なボタンといってもいいかもしれません。

基本的に、画面中の他のリソースとは独立したレイヤー上に位置しています。コンテンツをスワイプあるいはスクロールしても常に同じ位置に留まるため、迷わずに所定の操作を行える仕様です。

基本的には円型で影が入り、浮き上がっています。典型例は、追加の｢+｣やお気に入りの｢星マーク｣などです。ボタンが何を指すのかはっきりさせることが求められるため、状況に応じてアイコンやテキストを用いることもあります。セオリーとしては、スマホは前者、パソコンやタブレットは後者です。

戻る、メニューなどツールバーにあるべきアクションやアラートは避けるべきものとして扱われます。また削除といったネガティブな要素もNGです。

なお、1ページ1個の仕様が推奨されています。その他、ページによってアクションが異なることは特に問題視されていません。

レイズドボタン

俗に持ち上げ型に分類されるボタンです。タップでは波紋のように広がったり、ホバー操作では浮かび上がったりといったアクションにつながります。フローティングボタンと比較すると、1ページ内での使用回数は1度に限りません。他方、ボタンが何を意味するか明確にさせることは共通のルールです。テキストでしっかり伝えましょう。典型例は｢インストール｣や｢購入｣などが挙げられます。なお、立体仕様であるためカード上では使えません。

フラットボタン

色が変化するフラットボタンは、基本テキストで表示されるため“テキストボタン”と呼ばれることもあります。主に｢Yes/No｣「OK」｢キャンセル｣などで使用されるボタンです。枠線はなく、余白と文字色を変えるだけで成り立ちます。文字通りフラットで立体的な変化こそ見られませんが、それゆえにカード上に配置することが可能です。

アウトラインボタン

アウトラインボタンは、一般的に薄いグレーの線で囲まれたボタンを指します。そこまで目立たせる必要はありません。フラットボタン同様、カード上に設置できます。

トグルボタン

ON/OFFの切り替えに代表されるボタンです。システム設定や環境設定の変更によく用いられます。あくまで持続的に有効化させる機能です。一時的なものにまで適用しないようにしましょう（その場合、チェックボックスをおすすめします）。

カードやアイコンに関するマテリアルデザインのガイドライン

マテリアルデザインでは、サイト内で同じ要素や項目があると1つのカードにまとめるのが一般的です。ユーザーの内容理解や比較を手助けしてくれる一方で、正しく提示する必要があります。

まず、テキストがはみ出してはいけません。またスクロールできるのは縦のみです。

カードを重ねていくこともユーザー体験を損ねる原因になります。当然、推奨されていないため注意しましょう。

続いてアイコンです。斜め上から見た立体的なものではなく、あくまで真横か真上からの視点で以て表現しましょう。無機質な対象に表情をつけキャラクター化することも推奨されていません。

マテリアルデザインが用いられている具体例

マテリアルデザインの例を挙げる場合、やはり参考になるのはGoogleが提供するサービスでしょう。無論、それ以外でも、思わず唸りたくなるものは存在します。

以下、取り上げるアプリやサイトもまた、普段何気なく接しているかもしれませんが、マテリアルデザインが巧妙に使われています。

Google マップ

地図アプリ「Google マップ」は、ボタンをタップして広がる波紋や、スワイプでの地図移動、画面下にあるエリア最新情報の引き上げなど随所でマテリアルデザインが見られます。各エフェクトは決して単なる装飾に堕することなく、ユーザーにとって便利なものとして機能している点が秀逸です。

YouTube

YouTubeでは、サイドメニューやボタンなどが見やすく整理されていますが、これらはまさにマテリアルデザインです。1ページ内に多くのコンテンツが集まっているからこそ、機能的に作用していると考えます。

Rentberry

不動産サイト「Rentberry」では、訪問スケジュールの確認や決定ボタンの配置にマテリアルデザインが用いられています。実際に使ってみるとわかりますが、ストレスなく操作できるお手本のような仕様です。

マテリアルデザインに興味を持った方へ

そもそもすべてのデザインが本来そうあるべきですが、マテリアルデザインはユーザーの利便性や操作性を追求しています。ガイドライン上の細かな既定からも頷けるように、試行錯誤の末に生まれた進化したデザインといっても過言ではありません。

拙稿でお伝えした内容は、あくまで知識に振り切っていますが、実践を通じてより理解は深まるはずです。

機会があればぜひ、自身で制作してみてください。