マテリアルデザイン

こんにちはもしくはこんばんは!そして初めまして。
デザイン業務に関わっております、スガです。

さっそくではありますが「マテリアルデザイン」というものをご存知でしょうか?
また、言葉だけは聞いたことがある方も多いのではないでしょうか?

私自身も言葉だけは聞いたことは有りました。
ですが実際に足を踏み入れてみると内容が深く、
すぐに全てを理解するのは難しく感じました。

ここでは全部を理解せずとも、デザイナーでなくとも何となく分かる
をベースに「マテリアルデザイン」に触れていきたいと思います。


マテリアルデザインとは?

まず「マテリアルデザイン」とは2014年7月にGoogleが発表した新たなデザインのガイドラインです。
このガイドラインによってアプリの外観について一連のルールが設定されました。

※「マテリアルデザイン」をそのまま直訳すると「物質的デザイン」という意味になります。

マテリアルデザインの目的

スマートフォンやタブレット、テレビ、メガネ、腕時計などのデバイスで統一感のあるデザインを取り入れることで操作性も統一され、デバイスが変わってもユーザーが使いやすいUIを表現できるそう。

フラットデザインからマテリアルデザインへ

まず念のためフラットデザインとは、デザインにおいて余分な要素を無くし、
立体的な加工等の装飾を抑えることでシンプルに分かりやすくレイアウトやカラー構成で形成される平面的なデザインのことを指します。

gazou1

★特徴として★
・デザインの装飾部分を排除する事でシンプルに特化しページ内のコンテンツを惹きただせます。
・ページ内の要素によっては適さない場合もあります。
・マルチデバイスの対応と共に普及。

フラットデザインには今までにない新たなデザイン性を見出し
メリットも有る反面、デメリットも目立つようになってきました。

デザインの装飾部分を排除したことで、ページの見出しや帯、
遷移できるボタンの区別などがし辛くなりました。

そこで、フラットデザインに「光」や「影」、「奥行き」の触感的表現を含ませたものが「マテリアルデザイン」です。

「影」要素

マテリアルデザインでは影の要素が大事なものになります。
フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念があります。
gazou2
重ねるパーツの枚数によって高さ(上から見た奥行き感)を考慮し、影の表現を変えることでユーザーに「触れられるもの」ということを直感的に認識できるようにします。

カラー設定

マテリアルデザインでは、1つのページ内で色を多様しません。
基本的には下記のような4色で構成をします。

gazou3

・PRIMARY COLOR      :メインカラー
・DARK PRIMARY COLOR    :メインカラーと同系色
・ACCENT COLOR       :メインカラーと対比する色
・WINDOW BACKGROUND COLOR :無彩色、メインカラーと同系色

こちらの4色での配色はあくまでも一例ですので、
これらを逸脱してもマテリアルデザインでなくなるわけではありません。

最後に

気づかずに見ていたWEBサイトが実はマテリアルデザインがされているものであったということがあるかもしれません。
少しでも「これは、マテリアルデザインかもしれない」と興味を持って頂ければ幸いです。

私も勉強中の身ですが引き続き、全部を理解せずとも、
デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!

Pocket