現在、GoogleのWebサービスには、マテリアルデザインと呼ばれる手法が採用されています。
競合他社がマテリアルデザインを取り入れたと聞いたり、実際に自社サイトやサービスにマテリアルデザインを取り入れるべきか迷っているという企業も多いと思います。
そこでこの記事では、下記の内容につき、マテリアルデザインについて初めての方にもわかりやすく解説します。
- マテリアルデザインの特徴
- マテリアルデザインのメリット・デメリット
- マテリアルデザインを取り入れる方法
＼ 年末までに限った無料特典 ／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム
【BOLTでは、こんなデモアプリがすぐに作れます】
- 貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
- 社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
- ご興味のある方は下記のフォームよりお申し込みください
マテリアルデザインとは？
マテリアルデザインとは、Googleが提唱するデザインシステム（技術・手法・デザインなど）のことです。
マテリアル（Material）とは物質という意味であり、マテリアルデザイン（Material Design）とは、人が普段目にしている実世界の「物質」と同じ法則（影・質量感のある動き・立体感など）でデザインすることにより、ユーザーがストレスなく直感的に扱えることを目指したものです。
パソコンのみならずスマートフォン・タブレット端末などの普及により、どのようなデバイスからでも操作しやすいよう、操作感に統一性を持たせようという試みから生まれました。
マテリアルデザインの特徴とは？
マテリアルデザインには、具体的には下記のような特徴があります。
紙とインクで捉える
文字や写真などは「インク」、それらを配置するヘッダー・ボタン・枠などを「紙」という、実世界での印刷物の要素のように捉えることが大きな特徴です。
紙の要素には厚み（dpという単位）という概念があり、上下の重なりを意識して、重なった上の要素に光を表現して影を出したり、重なった下の要素を暗くして奥行きを出したりします。
このようにしてユーザーが選択した「紙」の要素を人が実際に手に取った時のように見せることで、視覚的な感覚によってユーザーが直感的に理解できるように工夫されています。
3次元のデザイン
マテリアルデザインは、立体感を出すために、縦・横に加えて高さ（Z軸）という概念のあるデザインです。このZ軸上にある紙の要素の位置（高さ）の変化に応じ、実世界の影と同様の法則で、影のつく範囲や影の濃さも変化します。
関連性のある自然な動き
ユーザーの操作に関連した、自然でわかりやすい動きをつけることも特徴です。
ユーザーがスワイプすると、その動きに連動して表示画面が移動したり、リストに並んでいるカード要素の1つをタップすると、選択したカードの内容が開かれたりする動きなどがその例です。
少ない色の配色
マテリアルデザインでは、配色にもルールがあります。
十分なコントラストによって要素と要素を区別したり、要素同士の関係性や階層をわかりやすくするなど、意味のある配色を行います。
その際、使用する色の数が少ないことも特徴で、使用できる色は下記の通りです。
- メインカラー(Primary)
最も多く使用する1色を指します - サブカラー（Primary Variant）
メインカラーと同系色のトーンの異なる濃い色・薄い色で、2色使用することができます - アクセントカラー（Secondary）
ボタンなど目立たせたい要素に使用する1色を指します - 常に使える色
上記以外に白・黒・グレーと、エラーが出た時に使用する赤は使用が可能です
UIのためのガイドライン
マテリアルデザインは、UIデザイン（ユーザーにとっての使いやすさを追求したデザイン）を実現するためのガイドラインです。そのため、下記のようにユーザーの読みやすさに配慮した内容も設けられています。
- レイアウト
- タッチ・クリックするボタンなどの要素のスペース（空間）
- 文字のフォント・サイズ・行間
フラットデザインとは？
同じUIデザインのための別の手法としてフラットデザインがあります。
フラットとは平面を意味し、フラットデザインとは、その名の通り平面でシンプルなデザインであることがその特徴です。わかりやすい例としてよく挙げられるのは、iPhoneのホーム画面に並ぶアプリがフラットデザインです。
スマートフォンなどの小さな画面ではシンプルである方が見やすく、データ量も軽いというメリットがあります。一方で、フラットゆえに逆に見づらかったり、目立たせたい場所が目立ちにくいというデメリットもありました。
そこで現在では、シンプル且つフラットであることを出来る限り残しつつも立体感を取り入れたフラットデザイン2.0に進化しています。
フラットデザインについてはマテリアルデザインのようなガイドラインは存在しないため、自由にデザインできることが大きな特徴の1つであり、メリットでもあると言えるでしょう。
マテリアルデザインのメリット
マテリアルデザインのメリットは、ユーザー目線で定められたガイドラインがあり、それに沿って作ることができるため、高い技術やセンスがなくても優れたUIデザインのサイト・サービスを構築できるという点です。
マテリアルデザインのデメリット
マテリアルデザインのデメリットは、細かいガイドラインを定めて統一性を持たせようとしていることから、似たようなデザインになりがちでオリジナリティが出しにくい点が挙げられます。
また、フラットデザインに比べると、データ量が重く、読み込みスピードが遅くなる傾向もあります。
マテリアルデザインを取り入れるには？
マテリアルデザインにはガイドラインに多くの項目が存在するため、しっかりと学ぶには時間が掛かります。
そこで、手軽に取り入れたい場合にはフレームワークを使うという手があります。
この他にも多数のフレームワークが存在しますので、自身にとって使いやすいものを探してみるのも良いでしょう。
[まとめ]マテリアルデザインはユーザーの利便性のために考えられている
2014年に打ち出されたマテリアルデザインは、2018年には第2世代のマテリアルデザイン2へ、2021年には第3世代のマテリアルデザイン3へと進化しており、今後もどんどん新しいものへと進化していくと思われます。
ただ、根本にあるのは「ユーザーにとって見やすく、使いやすい」という、ユーザーの利便性のためのコンセプトです。
その意味からも、マテリアルデザインだけに固執することなく、自社のWebページやサービスのどこに、どの手法を取り入れるべきか、ユーザー目線で考えることが重要だと言えるでしょう。
なお、マテリアルデザインを採用したシステム構築を検討されている方はお気軽に弊社までご相談ください。
当社がこれまで支援してきた開発事例の共有、企画・コンサルティング、要件定義や実際の開発支援まで包括的にサポートさせていただくことが可能です。
システム開発を失敗しないために、弊社が相見積もりの取得までをサポートさせていただくことも可能です。むやみな営業電話などは決して行いませんので、まずは無料のご相談をお待ちしております。
