センス不要！エンジニア向け『マテリアルデザイン』のすすめ ｜ SiTest (サイテスト) ブログ

こんにちは、プロダクト開発事業部、エンジニアの明石です。
エンジニアの皆さん「UIデザイン」は得意でしょうか？

おそらく、得意という方はあまりいないと思います。そもそもデザインは「担当ではない」かもしれませんし、明確な不得意意識を持ってらっしゃるかもしれません。

しかし、人員、納期、アプリケーションの用途などで「特にかっこよさで目を引くことは無いけど、普通にわかりやすく、使いやすいシンプルな」そして「デザイナーの手をわずらわせることがない」UIが短期間で必要になる場合は意外と多いと思われます。

そして、「飾りがない=つくるのが簡単である」という思い込みに反して、「特にかっこよさで目を引くことは無いけど、普通にわかりやすく、使いやすいシンプルな」デザインというのは本職のデザイナーでも難しいと聞きます。(http://www.lifehacker.jp/2015/08/150819_simple_hard.html)普通のエンジニアができるものではありません。

そこで登場するのがGoogleが推し進めている『マテリアルデザイン』です。

マテリアルデザインとは、Googleによれば『(UI設計のための)視覚的な言語』です。(https://material.google.com/)

「視覚的な言語」と言うのは抽象的な表現ですが、(プログラム)言語のように規則に則って考えられており、それに従えば、誰でも同じようにわかりやすいデザインができますよ。という「仕様」のことです。「仕様」はただ決まっているのではなく、画面要素それぞれの意味や機能と規則的に関連づいています。

その原則は「UIは紙でできている。そこにインクでコンテンツが印刷されている。紙なので必要に応じて重ねたりできる。インクは液体なのでタッチ時にそれに合わせた動きをする。」というものです。

他にも、大きな機能ボタン(Floating Action Button)は１画面にひとつだけ。などの細かいルールが決められています。そのルールはすべて公式ドキュメント(https://material.google.com/)に記載されています。

マテリアルデザインの概略についてはスマホアプリ開発者の深津貴之氏の解説がとてもわかりやすいのでこちらをご参照ください。
http://fladdict.net/blog/2015/05/material-design.html

他にもGoogle検索すると、日本語でのわかりやすい解説がいくつもあるでしょう。

ここ数年で随分状況が変わって来ましたが、「デザイン」は「センス」が問われる「アート」的な創作活動と思われている方はまだまだ多くいるように感じます。ファッションデザイナーのイメージでしょうか。

マテリアルデザインはこのイメージに真っ向から反対し、「センス」ではなく明確な「ルール」を用いてUIを表現します。

「ルール」が明確に確定されており、それを説明するドキュメントが存在する。まるでリファレンスを見ながらコードを組むようにUIを作っていけるという点。これが私がエンジニアにマテリアルデザインをおすすめする理由その１です。

ルールが決まっているのだから、効率化するのも簡単です。そのためマテリアルデザインには当然のことながら、それを簡単に実現するためのライブラリが存在します。

Google製の『Material Design Lite』は(https://getmdl.io/)パーツや実例が豊富で使いやすいです。テンプレート(https://getmdl.io/templates/index.html)にはブログやポートフォリオサイトなどよくあるデザインが紹介されています。

さて、『Material Design Lite』は確かに便利なのですが、そのアプローチはTwitterBootstrap等、既存のCSSフレームワークとあまり変わりません。既存のHTMLにCSSを適用する、つまり、既存のパーツに見た目を適用するというアプローチです。静的なページの場合はそれで十分でしょう。

しかし、動的なアプリケーションの場合、UIと一口にいっても、単純な見た目や、ボタンを押したときの視覚効果だけでなく、スライドするメニューや入力項目のバリデーション、オートコンプリートなど、HTMLやCSSなどの見た目をつかさどる技術以外に、JavaScriptなどのプログラミング言語での処理が必要となります。これらを別に実装するのはなかなか手間がかかりますし、エンジニアとデザイナーとで役割分担がしづらい箇所でもあると思います。

ですから、Webアプリケーションにおいては、UIに関連したよくある処理も、あらかじめマテリアルデザインされた部品に含んでおき、エンジニアはただそれを並べるだけで、ひと通りの機能を備えた使いやすいUIが出来上がる。という状態が理想です。

それを実現しているのが『Angular Material』『Polymer paper-elements』 といった、Google製JavaScriptフレームワーク用のマテリアルデザインのライブラリです。

AngularJSもPolymerもカスタムディレクティブ、カスタムタグといった見た目や処理をまとめてひとつの部品にするコンポーネント化の機能を持っています。どちらもそれを最大限に活用した強力なライブラリです。

(Angularは独自仕様、Polymerは次世代のWeb標準であるWebComponentsの拡張といった違いはありますが、実現されている機能の役割は変わりありません。)

今回は、普及しているAngularJS(1系統)対応の『Angular Material』をご紹介します。とはいっても、わかりやすいデモページが用意されているのでそれを見ていただくのが、一番です。

https://material.angularjs.org/latest/demo/autocomplete

各デモ右上のタグアイコン”<>”をクリックするとソースが見れますのでご覧になっていただくとわかりますが、『Angular Material』ではカスタムタグを使って、マテリアルデザインのUIを構築していきます。

チェックボックスを例に取ると、通常は<input type=“checkbox” …>を定義し、そこにデザインに応じたCSS を適用します。『Angular Material』では<md-checkbox >というカスタムタグが用意されており、これを書くだけで「マテリアルデザインされているチェックボックス」を配置することができます。

他にもスワイプメニューや無限リストなど、便利な部品がたくさんあるので、ぜひご覧ください。すでにAngularJSを使っている方はもちろん、『Angular Material』のためにAngularJSを採用してみる価値は十分あります。

もっと本格的なマテリアルデザインの事例が見たくなったら下記のサイトが参考になります。
https://material.uplabs.com/
インターフェースがシンプルなので、テーマカラー１色でも映えますし、写真やロゴなどの素材を活かしたデザインができるのもマテリアルデザインの魅力です。

なにより、策定された標準仕様があって実装がある。基本的な処理はライブラリがカバーする。というエンジニアが慣れ親しんだコンセプトのもと組み立てられたデザインというのは、とても魅力的です。

そのまま使うのはもちろんのこと、コンセプトを基に、より深くデザインについて理解したいエンジニアにとって、マテリアルデザインはとてもいいきっかけになるのではないでしょうか。