Material Designを活用する

こんにちは。

Material Design（マテリアルデザイン）をご存知ですか？

マテリアルデザインは、Googleが提唱するデザイン手法です。

このマテリアルデザインを活用するにあたっての利点や課題、弊社が使っている手法などをご紹介します。

Material Designとは

そもそもマテリアルデザインがなんなのか、詳しく見ていきます。

マテリアルデザインは、以下のページにすべてのガイドラインが掲載されています。

マテリアルデザインでは、使う色はprimaryとaccentの2つがメインで、多色を使うことはありません。

そのかわり、影などを駆使して、物質感を出していると捉えられます。

すべてが紙とインクからなる物体として、表現されています。

多色を使って影を使わないフラットデザインとは、ここが違います。

マテリアルデザインはいわば「プロトコル」「規約」であり、プロトコルに沿った「実装」が存在します。

代表的なものが、Google製のAndroidのアプリケーションです。

そしてもう一つが、Google主導のコミュニティ開発JavaScriptフレームワーク「Angular」に使用する「Angular Material」です。

Angularを導入する

ほかにも、

などがあります。

これらを利用することが、最も手短なマテリアルデザインの活用法だと言えます。

Material Designの利点というと語弊があります。マテリアルデザインに準拠したデザインを実装することの利点、が正確ですね。

マテリアルデザインはGoogleのデザイナーたちが作り上げたものであり、下手なデザインを自作するよりは、準拠したほうがはやくきれいにできます。

これが、準拠する一番大きな理由ですね。

マテリアルデザインに準拠したデザインを実装すると、

を感じる人は少なくないと思います。これが最大のデメリットだと考えられます。

しかしながら、解決する方法があります。

Material Themingという手法が公式より提唱されています。

Material Theme Editorというエディタもあります。

ここでは、

を編集したマテリアルデザインを作成することができます。

マテリアルデザイン公式サイトにあることからもわかるように、これら4種を編集しても、マテリアルデザインから逸脱したことにはなりません。

例えばAngular Materialではフォントに「Roboto」が使われていますが、Angroid感が出ると感じる人は多いと思います。

カードやコンポーネントの角丸の感じも、Androidそっくりです。

しかしながら、例えばフォントをMeiryo UIにして、マイクロソフト感を注入してみるとか笑

ボタンを完全に角丸(border-radius:50%)をしてみるとか。

マテリアルデザインに準拠しながらも、独自の世界観を表現したデザインを実装する方法がいろいろあります。

マテリアルデザイン=Google感、Android感、画一感

というイコール関係は、解消することができるのです。