マテリアルデザインという用語を聞いたことがありますか？
聞いたことはあるけど、具体的にどういうものなのか分からないという方も少なくないのではないでしょうか。
- マテリアルデザインの特徴
- マテリアルデザインのメリット
- マテリアルデザインのデメリット
について解説していきます。
マテリアルデザインとは？
マテリアルデザインは、現在Googleが推奨している新しいデザインの一種です。
二次元上の画面でのデザインでありながら、手法自体は
- 「現実に存在する物理法則を採用」
- 「紙とインクの要素を取り入れる」
- 「影を取り入れて、立体感を演出する」
- 「連続性のあるアニメーション」
など、三次元を意識した要素を取り入れているのが、従来とは異なる手法だと言えるでしょう。
ユーザーの行動を意識したデザインですので、UIデザインとしても優れていると評価されています。
加えて、Googleが推奨しているのでマテリアルデザインの公式ガイドなどもあり、デザイン未経験者でも比較的クオリティの高い作品が作りやすいのも、マテリアルデザインが注目される理由です。
＞＞Googleのマテリアルデザインのガイドラインはこちらから
マテリアルデザインの目的
マテリアルデザインの目的は、ユーザーが接する画面にマテリアル（物質）やメタファーを統一されたデザインを採用することで、デバイスの操作性も向上し、ユーザーファーストのWebページやサービスを提供することです。
ユーザーが使うデバイスは、スマートフォンやタブレットなど、さまざまなパターンが存在します。
マテリアルデザインの特徴
マテリアルデザインの特徴は、
- 現実世界の物理法則を取り入れる
- インクと紙の要素で組み立てる
- 配色数・文字の大きさを適切に
- 立体感を出すために影を活用する
- アニメーションを用いて連続性を演出
の5つが挙げられます。
現実世界の物理法則を取り入れる
マテリアルデザインでは、現実世界の物理的なルールを反映させます。
現実世界に存在する「光」や「影」にもデザインに取り入れることで、三次元の立体感に近づけていきます。
例えば、物の重なり方を際立たせる陰影や、質量感のある物の動きなどを、デバイスの種類を超えて利用できることが、マテリアルデザインの特徴の一つです。
ユーザーが、普段生活している「現実世界の物理法則」を自然な形で取り入れることで、現実世界とデジタル世界の差異を埋めることで、脳への負担が減ると効果があると言われています。
インクと紙の要素で組み立てる
マテリアルデザインでは、紙とインクの要素を取り入れて、現実世界の印刷物と同じような捉え方で、デザイン設計をします。
デザインの各パーツを物質として捉えているので、強調したい部分もユーザーの目に留まりやすくなり、複雑な解釈をしなくても直感的に捉えやすいデザインです。
色の濃淡や画像パーツ、動画や文字をインク要素として捉え、矩形、円形などを紙要素として見せ方を工夫して表現します。
実際の印刷物に近づけることで、ユーザーもリアルな感覚で画面の情報を捉えやすくなるというメリットがあります。
配色数・文字の大きさを適切に
マテリアルデザインでは、色の数を有彩色4色まで制限してシンプルなデザインを目指します。
4色の要素は
- 「メインカラー」
- 「サブカラー」
- 「アクセントカラー」
に加え、
- 「白」
- 「黒」
- 「グレー」
の無彩色を合わせて4色と考えられています。
メインカラーは、画面のテーマカラーなので1色、サブカラーはメインカラーと同系色の色で2色まで使用できます。
アクセントカラーは、他の色と違う系統の１色を選び、使用していきます
無彩色は、自由に利用できるので、全体のバランスを考慮しながら配置していきましょう。
加えて、文字の大きさや配列もメリハリをつけて、ユーザーが「テーマ」や「見出し」を意識しやすいようにするように心がけます。
立体感を出すために影を活用する
フラットデザインと異なる点は、マテリアルデザインを設計する際には「影」を意識することです。
陰影をつけることで、UIパーツがどのような役割をしているのかユーザーに意識させ、視覚からの情報により次の行動につなげやすくなります。
ただし、理論を理解しても実際のデザインに反映しているかは、作品を作り上げてみないと感覚がつかみにくいものです。
知識自体は簡単でも、感覚を身につけるには実践が必要になります。
自分の作品を作りながら、マテリアルデザインのメリハリの付け方を試行錯誤しながら学ぶことがオススメです！
アニメーションを用いて連続性を演出
マテリアルデザインでは、ユーザーの動作と連動したアニメーションを使います。
例えば、「特定のボタンをタップすると、次の画面に移る」「下の方にスワイプすると、新しい画面や要素が登場する」など、スマホやタブレットでの動作もその一つです。
自分の動作が、利用デバイスの画面にどのような影響を与えるのかアニメーションを利用すると、ユーザーも一連の動作の意味が理解しやすくなります。
マテリアルデザインの基本概念
ここからは、マテリアルデザインの基本概念を解説していきます。
- 紙要素
- インク要素
- アニメーション
- 影
- 厚み
- ボタン
- 分かりやすいインタラクション
- レイアウト
紙要素
マテリアルデザインでは、色や各種パーツを「紙要素」と「インク要素」に分けて考えます。
そのうち、紙要素は現実世界に存在する「紙」同様に、重ねて使用できます。
1dp単位での厚み、自由に伸縮できる、無色であるなどの特徴があります。
さらに、図形を用いる場合も「矩形」や「円形」などのシンプルな形を取り入れます。
三角形や多角形などの複雑なシェイプは、後述するように「インク要素」として分類され、紙要素に取り入れることはありません。
画面上のパーツとしては、画面上にある「ボタン」「バー」「リスト」などが紙で構成されるものとして捉えられています。
加えて、実際の「紙」の性質を踏まえて「紙を通り抜けられない」「Z軸への回転は、奥行きの概念上取り入れられない」「矩形の拡大縮小において等倍はNG」などの制約があり、ルールに従ったデザインをしなければなりません。
インク要素
インク要素は、画面上の色、写真、動画、文字などをインク要素として表します。
実際の印刷物でも、紙の上にさまざまなパーツが並びます。
Webデザインでも、それらに対応する要素を「インク要素」として扱うのが通例です。
そのため、紙要素と異なり色変更なども自由にデザインできます。
加えて、複雑なシェイプなどもインク要素として扱われ、紙要素の上に重ねる形で用いられます。
紙要素では、矩形や円形が基本であり、利用できる色も制限されますが、インク要素はこれらを自由にデザインできるのが特徴だと言えるでしょう。
さらに、文字なども色を工夫するだけではなく、文字の大きさや種類、装飾などを工夫することで、ユーザーが利用しやすい表現を追求するのも、現実の印刷物のデザインで用いられている手法といえます。
扱うフィールドは「Web」「デジタル」の世界でも、実際の印刷物にのせる「インク」を用いた手法と近いと概念だと言えるのではないでしょうか
アニメーション
アニメーションは、ユーザーの操作に対して感覚的な機能をサポートする役割を担います。
例えば、ユーザーがタップするとタップしたオブジェクトに対して、波紋のような動きが確認できる「リップル」というアニメーションがあります。
リップルを取り入れると、オブジェクトだけの場合よりも「タップした」という行為をユーザーが視覚でも認識できるので、自分の動作が何の意味を持つのか感覚的に捉えやすくなります。
影
影を配置することで、オブジェクト同士の位置関係や距離を知るための手がかりになります。
例えば、特定の画像を表示させたいとします。
リスト一覧の中から見たい画像をクリックし、背面が暗くなり、写真が浮き上がって見えるとしましょう。
写真単独で浮かび上がらせるより、影をつけることでユーザーは写真が自分が指定したオブジェクトであることを理解します。
写真を上下にスクロールした場合は、影をつけることで「どちらの方向に移動したのか」感覚的に捉えやすくなるでしょう。
厚み
厚みは、紙のレイアウトで表現します。
表現方法は
- 「つなぎ目」
- 「段差」
の2種類があり、つなぎ目は2枚の紙を隣り合わせに並べ、つないだイメージです。
平面的な表現であり、奥行きはありません。
それに対し、段差は紙が重なっているイメージです。
立体的な表現技法であり影で背面や前面を表現出来るので、視覚に奥行きを表現できます。
ボタン
ボタンには、
- 「フロート型」
- 「持ち上げ型」
- 「フラット型」
の3種類が存在します。
フロート型は、紙のレイアウトでつなぎ目にまたがるものです。
上下の段差に配置する場合は、上に来る紙に属し、画面がスクロールされると連動して上下します。
持ち上げ型は、ボタンにポップアップ機能を持たせたり、タップしたオブジェクトに対して、波紋のような動きが確認できるリップルのような動きをしたりするものです。
フラット型は、動的な機能はなく、操作時に色が変わったりする程度です。
「持ち上げ型」と異なり、ポップアップ機能はありません。
どのボタンを利用するかは、ボタンの重要性や画面レイアウトとのバランスを測りながら、最適な表現を選びましょう。
わかりやすいインタラクション
ユーザーの操作を手助けする上で、システム設計とユーザーの相互作用は重要です。
マテリアルデザインでのユーザーアクションに対し、よく使われるのは
- 「リップル」
- 「隆起」
- 「リヴール」
などが挙げられます。
いずれも、ユーザーの次のアクションを手助けし、誘導する役割を担うものです。
レイアウト
紙のレイアウトには、
- 「つなぎ目（Seam)」
- 「段差（Step）」
の2種類があります。
「つなぎ目」を利用する場合には、つなぎ目に１dpのLINEが表示され、スクロールすると、２枚の紙がつながったまま同時に動きます。
それに対して「段差」の場合は、２枚の紙が重なっている状態です。
Z軸方向の奥行き具合も異なり、段差に応じて、影もできます。
さらに、２枚の紙はそれぞれ独立して動くのが、「つなぎ目」との大きな違いと言えるでしょう。
マテリアルデザインの歴史
スキューモフィズム
スキューモーフィズムは、1890年代に誕生したデザインですが、iPhoneで採用されたのをきっかけに急速的に普及しました。
ある物や概念をデザインに反映する際に、「既存の現実世界にあるもの」を用いるのが特手用であり、立体感、リアリティのある表現が重視されます。
スキューモーフィズムのデザインとしてよく知られているのは、Windowsの「ごみ箱」アイコンが知られています。
現実のゴミ箱を彷彿とさせるので、私たちは不要になったファイルをそこに捨てれば良いと感覚的に理解することができます。
ただし、データサイズが大きくなってしまうデメリットもあります。
装飾が過剰だとCPUやGPUなどの容量が必要になるので、新たにデザインする場合には注意しなければなりません。
フラットデザイン
フラットデザインは、スキューモーフィズムの過剰装飾を可能な限り抑えたいという要望から生まれたデザイン手法です。
そのためシンプルさにこだわり、代表的な事例にはFacebookのログイン画面が挙げられます。
デザイン手法自体は、1920年頃に誕生したものですが、近年フラットデザインが採用されているものとしては、2013年夏にiPhoneのiOS7で注目を集めました。
ユーザーが、直感的に使いやすいのはもちろん、データサイズが小さいので、ユーザー・作り手双方にメリットがあると考えられていたものです。
一方で、シンプルさを追求した結果として、機能の差別化や重要度が分かりづらいというデメリットもあります。
メトロデザイン
メトロデザインは、過剰な装飾を削ぎ落とすために生まれたフラットデザインの一種と考えられています。
旧来のアイコン型ではなく、「タイル」と呼ばれるパネルがいくつも並ぶのが大きな特徴です。
アイコンよりも大きなタッチパネルをタップしたりスワイプしたり出来るので、スマートフォンやタブレットなどのデバイスの操作にも適していると言えるでしょう。
メトロデザインが採用されている例としては、Windows、Phone7やWindows８などが挙げられます。
マイクロソフトが開発したデザインということもあり、Windowsなどの製品で採用されている例が多いのも特徴的です。
マテリアルデザイン
現在Googleが利用を推奨しているのが、「マテリアルデザイン」です。
フラットデザインやメトロデザインの持つ「シンプルさ」のメリットを出来る限り残しつつ、かつてスキューモーフィズムが目指した「わかりやすさ」を再評価し、スキューモーフィズムのメリットの導入を試みています。
具体的には、光や影、質量などをフラットデザイン上での表現を試み、ユーザーにとってのUI・UXの向上を目指しています。
ここまで見てきたように、マテリアルデザインは平面上で３D空間を形成しつつ「紙」と「インク」というような二次元的要素を用いた表現が特徴的だと言えるでしょう。
マテリアルデザインとフラットデザインの違い
マテリアルデザインの対立概念として比較対象にされるのが、「フラットデザイン」です。
先に述べたように「シンプルさ」を追求したデザインであり、平面的な印象を受ける人も多いのではないでしょうか。
過剰な装飾がないのでファイル容量を小さくできる、どこに何があるか分かりやすい、スタイリッシュで都会的な印象を与えられる反面、重要な要素がわかりにくいデメリットもあります。
シンプルでデータ容量が小さいので、スマートフォンのアイコンやロゴなどに、フラットデザインが多く取り入られる傾向があります。
マテリアルデザインとフラットデザインの違い
マテリアルデザインは、フラットデザインの良さを引き継ぎつつ、弱点を補うためにかつてのスキューモーフィズムの理念も取り入れているのが特徴です。
フラットデザインにおいては、画面が平面的な印象をあたえがちになり、アイコンなどの要素も差別化しにくい欠点があります。
それを補うために、マテリアルデザインではアニメーションを利用する、陰影をつけることで二次元でも立体的に見せるなどの手法を用いています。
フラットデザインは
- 「二次元」
- 「スタイリッシュな印象を与える」
- 「重なりを意識しない」
という特徴があると言えるでしょう。
フラットデザインの特徴に対して、マテリアルデザインでは
- 「三次元」
- 「直感で操作しやすい」
- 「陰影など重なりを意識する」
といった特徴があります。
ただし、マテリアルデザインは一画面辺りのファイル容量が大きいので、読み込み速度が遅くなるデメリットもあります。
どちらか一方に偏ることなく、それぞれの良さを活用しながら作成上のバランスを取ると、Webサイトデザインの幅が広がるでしょう。
マテリアルデザインのメリットとデメリット
マテリアルデザインのメリット
- UIデザインとして優秀
- デザイナーにとって使いやすい
- 短時間での作成が可能
改めてマテリアルデザインのメリットをまとめると、フラットデザインの「シンプルさ」を引き継ぎつつ、物理的な奥行きや感覚的な操作がしやすさも追求したデザインです。
UIデザインとして優秀
UIデザインとして優秀であるというメリットが、まず挙げられます。
マテリアルデザインでは「インク要素」を上手く活用することで、効果的な配色やテキストの配置、アニメーションなどのモーションを組み合わせています。
そのため現実世界に近いイメージが湧きやすいデザインと言えます。
初見のユーザーであっても直感的に操作しやすいので、欲しい情報やUXの恩恵を受けられるのが特徴であり、UIデザインとしては優秀だと言えるでしょう。
デザイナーにとって使いやすいデザイン
加えて、デザイナーにとっても使いやすいデザインだと言えます。
Googleが、現在マテリアルデザイン利用を推奨しているので、Google公式サイトではマテリアルデザインの概要や詳細な作り方、デザインの基本知識などが学びやすい環境が整っています。
テキストを手元に置きながらマテリアルデザインを作成できるので、Webデザインの経験が浅くても、ある程度までのクオリティに仕上げられるのも、マテリアルデザインを利用する大きなメリットです。
短時間での作成が可能
ガイドライン・フレームワークがあるため短時間での作成が可能というのも、大きなメリットです。
Google推奨のルールでは、メインカラーを１色に統一する、サブカラーはメインカラーと同系色で２色まで、アクセントカラーはメインカラー・サブカラーと違う色を用いて利用は１色にとどめるなど、配色のルールや仕える色数も決められています。
加えて、ユーザーの操作に応じてどのようなアニメーションを使用したら良いのか、Googleが公開しているデモ動画内でも詳しく説明されています。
Googleの公式動画などを利用することで、Webデザインに不慣れな人でも、効率良くデザイン作成が可能なのも、マテリアルデザインを使うメリットと言えるでしょう。
UIデザインについて、より詳しく知りたい方はこちらから
マテリアルデザインのデメリット
もっとも、マテリアルデザインを利用する際には、デメリットも存在します。
- データの読み込みが遅くなる
- 似たようなデザインになりやすい
データの読み込みが遅くなる
画像やボタンなどのアイコン、各種モーションをデザインに組み込むと、シンプルなデザインと比較した場合に、どうしてもファイル容量が大きくなってしまうため、データの読み込みが遅くなるというデメリットがあります。
一般的に、Webサイトでページの読み込みに３秒以上かかると、サイトからの離脱率が明らかに大きくなると言われています。
読み込みスピードの遅さを原因としたユーザーの離脱を防ぐには、使用する画像の容量を軽くするなどの工夫を凝らし、ユーザーのストレスを少しでも軽減するのがおすすめです。
似たようなデザインになりやすい
Googleによって統一されたフレームワークが用意されているので、初心者でもマテリアルデザインに取り組みやすい反面、似たようなデザインになりやすいのもマテリアルデザインのデメリットです。
利用できる色数なども制約があるため、ライバルとの差別化をどのように出して行くかも、デザイナーにとっての課題と言えるでしょう。
グラフィックデザインの汎用性とオリジナリティのバランスをどのように取るか、他のフラットデザインなどとの比率などを工夫しながら、デザイナー独自のカラーを打ち出したいところです。
マテリアルデザインの作り方
- デザインを立体的に捉え、奥行きを考慮する
- 現実の物理法則から逸脱しない
- ユーザー視点のアニメーションを
1、デザインを立体的に捉え、奥行きを考慮する
マテリアルデザインでは、縦軸と横軸だけではなく、奥行きも意識しながらデザインを作成しましょう。
画面上の各種の要素は、現実世界で紙のデザインシートを重ねていくようなイメージで、レイヤーなどを配置していきます。
シートの厚さは、1dpまでと決まっているため、規定の数値から逸脱しないように留意しましょう。
2、現実の物理法則から逸脱しない
デザイン上の全てのシートやアニメーションは、実際の物理法則に従って作成します。
現実世界で、インクが紙を突き破っていたり、紙の外にテキストが表されることは、なかなかありません。
アニメーションを用いる場合も同様で、下位に配置したシートが、その上に重ねられたシートを突き抜けるような、ねじれ構造のアニメーションも避けることをオススメします。
3、ユーザー視点のアニメーションを
アニメーションは、ユーザーのアクションを起点にデザインしましょう。
具体的には、ユーザーがタップしたボタンの色が変わったり、タップしたオブジェクトに対して、波紋のような動きが確認できるリップルを取り入れた場合が挙げられます。
ユーザーの指先が画面に触れると波紋が広がるなど、アニメーションはユーザーの操作をスイッチングにします。
加えて、ユーザーが画面をスクロールして、親要素を操作したら、子要素もそれに連動します。アニメーションとユーザーのアクションが連動するのを意識してデザインしましょう。
マテリアルデザインにおけるボタンの種類の違い
フロート型
マテリアルデザインの中で、フロート型は最も重要な要素に割り当てます。
影がついて少し浮き上がったような円形のボタンが多く用いられ、『FABボタン』と呼ばれることもあります。
具体的には、新規作成のトリガーになる「+」アイコンのボタンや、お気に入り登録によく利用される「星マーク」のアイコンボタンなど、何かしらのアイコンだけがデザインされたボタンが中心です。
FABボタンは、１ページにつき１個しか利用できません。本当に重要な操作に使用するボタンで、ブラウザバックのボタンやメニューボタンには使えませんので、注意して下さい。
持ち上げ方（レイズド型）
持ち上げ型ボタンは、画面からやや浮き上がったように見えるデザインです。
矩形のボタンで表示されることが多く、ユーザーアクションの際に、リップル、隆起などのアニメーションが作動してユーザーの興味関心をひきつけやすいデザインです。
長方形の中にボタンの意味を表すテキストを書き込み、ホバー操作がトリガーとなってリップルや隆起などのアクションが発動するものが多いです。
また、ボタンのデザインによっては、クリックするとボタンの色が変わるものや陰影が濃くなって、より浮き上がったデザインになるものもあります。
フラット型
フラット型ボタンは、色付きテキストで表現されることの多いボタンです。
フロート型や持ち上げ型のボタンと異なり、ボタンの枠線がないのが特徴です。
重要度が低い選択ボタンなどに使われ、テキストリンクと同じような役割も果たします。
デザインそのものが非常にシンプルなため、他の要素とも組み合わせやすく、カードの上で使用することも可能です。
ただし、他の文字と区別が付けやすいように、余白を十分に取った上でボタンに配置されたテキストの色を変える、文面を単語ではなくアクションを促す文章を配置するなど工夫しましょう。
マテリアルデザインの事例
マテリアルデザインはGoogleが提唱しているデザインですから、やはりGoogleが提供しているWebページやサービスが参考になります。
Google Maps
特に、マテリアルデザインの適用例としてよく紹介されるのが、「Google Maps」です。
使用している色数はそれほど多くないですが、逆にすっきりしていて目的の道路や建物を探しやすいと感じるのではないでしょうか。
機能も、各ボタンをタップすると押した部分から波紋が広がるので、必要な情報と不要な情報の区分がしやすいデザインです。
加えて、スワイプで地図を移動したり、画面したに隠れている「その場所の最新情報」を引き出して表示するのも簡単なので、初めての土地でも利用しやすいでしょう。
Google Chrome
Googleでは、Chromeも使いやすいと評判です。
よくアクセスするWebページは、持ち上げ型ボタンでトップページに表示されるので、ブックマークなどの手間も必要なく、利用者の注意関心を引きやすいので、UIデザインとしても優れています。
このボタンは、「持ち上げ型ボタン」を採用。立体的に見えやすいデザインもあり、ユーザーファーストの設計だと言えます。
まとめ
以上マテリアルデザインについて解説しました。
マテリアルデザインはデータの読み込みが遅くなってしまうといったデメリットもありますが、使用することで時間の短縮化による効率化や操作のしやすいデザインを行うことができます。
ぜひデザインを行う際にこの記事を参考にして、マテリアルデザインを活用してみてください。
