押さえておきたい「マテリアルデザイン」

WEBデザイナーを目指すならマテリアルデザインを理解しよう

最近は様々なWEB関連の仕事があり、IT関連の資格、職業などもドンドン増加しています。
WEBデザイナーを目指す方も非常に多くなっていますが、WEBデザイナーを目指す方に理解しておくべきデザインとしてマテリアルデザインがあります。

2014年にGoogleが発表したのがマテリアルデザインで、現在はGoogleのデザインのほとんどがこのマテリアルデザインとなっています。
現在ではかなり多くの企業等でこのマテリアルデザインを利用されているので、これは理解しておくべきデザインでしょう。

マテリアルデザインはわかりやすさなどを追及して生まれたもので、デザインという分野では見やすく、合理的でためになる要素が含まれているため、これからWEBデザインに関わる人こそ、知ってほしいデザインなのです。

物理的法則に則したデザインがマテリアルデザイン

マテリアルデザインのマテリアルというのは、原料や材料という名詞の意味と、物質的なという形容詞の意味があります。
マテリアルデザインは、物理的法則に則したデザインという事になります。

現代はパソコン、タブレット、スマートフォン等、様々なデバイスがありますが、こうした様々なデバイスについて、どんなデザインであっても同じ操作性を持ったサイトにするために、マテリアルデザインが効果を発揮します。

これまでのデザイン思想を知る

WEBで利用してきたこれまでのデザイン思想は、スキューモフィズム、フラットデザイン、メトロデザインそしてマテリアルデザインとなります。
1890年くらいから利用されてきたスキューモフィズムはiPhoneに採用され一気に広まったものです。

現実世界にあるものを用いるデザイン、これを追求しデザインの立体感、リアリティを表現しているデザイン思想です。
最もスキューモフィズムとして説明しやすいといえばWindowsのごみ箱です。
まさしく誰がみても一目でゴミ箱とわかる形状です。

スキューモフィズムが過剰装飾だったため、シンプルにしたいということで出てきたのがフラットデザインです。
2013年、iPhoneのiOS7で採用されたことで脚光を浴び、直感的に理解できるデザイン、データサイズが小さいという利点が評価されました。

しかし重要な機能と区別しにくいという事で、このデメリットを払しょくするために作ったのがメトロデザインです。
フラットデザインの一種ともいわれているメトロデザインは、タイルと呼ばれるパネルを利用しています。

このデザインが登場したことで、タップ、スワイプ等、より直感的に操作できるよさが生まれています。

マテリアルデザインの特徴は?魅力は?

フラットデザインが持っているシンプルさ、スキューモフィズムが持っているわかりやすさという利点を活かし、光、影などをフラットデザインに組み込んでいるという特徴を持っています。

マテリアルデザインは3次元によって表現されていますが、縦、横、高さを意識した作りとなっています。
しかもカラム「枠」については「紙」「インク」で構成されているので、よりわかりやすくなっています。

例えば重なった2枚の紙、1枚目と2枚の紙の間に影が見えるようにしてあればそれはマテリアルデザインです。
しかし影がないという場合にはマテリアルデザインではありません。

またユーザーがタップ、スワイプなどの動作を起こした時、そのレスポンスが明確という点も魅力があります。
表示されている画面上でどんな操作ができるのか?動作すると直感的にそれがわかります。