Designを活用する2019-04-02SHAREツイートシェアはてブLINEPocketこんにちは。CEO,CTOの木村です。Design(マテリアルデザイン)をご存知ですか?マテリアルデザインは、Googleが提唱するデザイン手法です。マテリアルデザインの例このマテリアルデザインを活用するにあたっての利点や課題、弊社が使っている手法などをご紹介します。Designとはそもそもマテリアルデザインがなんなのか、詳しく見ていきます。マテリアルデザインは、以下のページにすべてのガイドラインが掲載されています。https://material.io/マテリアルデザインでは、使う色はprimaryとaccentの2つがメインで、多色を使うことはありません。そのかわり、影などを駆使して、物質感を出していると捉えられます。すべてが紙とインクからなる物体として、表現されています。多色を使って影を使わないフラットデザインとは、ここが違います。Designの実装マテリアルデザインはいわば「プロトコル」「規約」であり、プロトコルに沿った「実装」が存在します。代表的なものが、Google製のAndroidのアプリケーションです。Material」です。Angularを導入するhttps://material.angular.io/ほかにも、ReactのMaterial-UIVueのVuetifyなどがあります。これらを利用することが、最も手短なマテリアルデザインの活用法だと言えます。Designの利点というと語弊があります。マテリアルデザインに準拠したデザインを実装することの利点、が正確ですね。マテリアルデザインはGoogleのデザイナーたちが作り上げたものであり、下手なデザインを自作するよりは、準拠したほうがはやくきれいにできます。これが、準拠する一番大きな理由ですね。画一感を感じる人は少なくないと思います。これが最大のデメリットだと考えられます。解決する方法があります。Themingという手法が公式より提唱されています。Editorというエディタもあります。https://material.io/tools/theme-editor/ここでは、Typography...フォントColor...色Icongraphy...アイコンShape...各種パーツの形を編集したマテリアルデザインを作成することができます。マテリアルデザイン公式サイトにあることからもわかるように、これら4種を編集しても、マテリアルデザインから逸脱したことにはなりません。Materialではフォントに「Roboto」が使われていますが、Angroid感が出ると感じる人は多いと思います。カードやコンポーネントの角丸の感じも、Androidそっくりです。UIにして、マイクロソフト感を注入してみるとか笑ボタンを完全に角丸(border-radius:50%)をしてみるとか。マテリアルデザインに準拠しながらも、独自の世界観を表現したデザインを実装する方法がいろいろあります。マテリアルデザイン=Google感、Android感、画一感というイコール関係は、解消することができるのです。おわりにLCNEMは、ブロックチェーン技術などを使うフィンテック企業です。