誰でも利用できますか?スマートフォンサイトも計測できますか?どの機能から使うべきか迷っています。フロントエンド,技術情報Tweetこんにちは、プロダクト開発事業部、エンジニアの明石です。エンジニアの皆さん「UIデザイン」は得意でしょうか?おそらく、得意という方はあまりいないと思います。そもそもデザインは「担当ではない」かもしれませんし、明確な不得意意識を持ってらっしゃるかもしれません。人員、納期、アプリケーションの用途などで「特にかっこよさで目を引くことは無いけど、普通にわかりやすく、使いやすいシンプルな」そして「デザイナーの手をわずらわせることがない」UIが短期間で必要になる場合は意外と多いと思われます。「飾りがない=つくるのが簡単である」という思い込みに反して、「特にかっこよさで目を引くことは無いけど、普通にわかりやすく、使いやすいシンプルな」デザインというのは本職のデザイナーでも難しいと聞きます。(http://www.lifehacker.jp/2015/08/150819_simple_hard.html)普通のエンジニアができるものではありません。そこで登場するのがGoogleが推し進めている『マテリアルデザイン』です。ルールが明確なのでリファレンスを見てデザインできるマテリアルデザインとは、Googleによれば『(UI設計のための)視覚的な言語』です。(https://material.google.com/)「視覚的な言語」と言うのは抽象的な表現ですが、(プログラム)言語のように規則に則って考えられており、それに従えば、誰でも同じようにわかりやすいデザインができますよ。いう「仕様」のことです。「仕様」はただ決まっているのではなく、画面要素それぞれの意味や機能と規則的に関連づいています。その原則は「UIは紙でできている。そこにインクでコンテンツが印刷されている。紙なので必要に応じて重ねたりできる。インクは液体なのでタッチ時にそれに合わせた動きをする。Button)は1画面にひとつだけ。細かいルールが決められています。そのルールはすべて公式ドキュメント(https://material.google.com/)に記載されています。マテリアルデザインの概略についてはスマホアプリ開発者の深津貴之氏の解説がとてもわかりやすいのでこちらをご参照ください。http://fladdict.net/blog/2015/05/material-design.html他にもGoogle検索すると、日本語でのわかりやすい解説がいくつもあるでしょう。ここ数年で随分状況が変わって来ましたが、「デザイン」は「センス」が問われる「アート」的な創作活動と思われている方はまだまだ多くいるように感じます。ファッションデザイナーのイメージでしょうか。マテリアルデザインはこのイメージに真っ向から反対し、「センス」ではなく明確な「ルール」を用いてUIを表現します。「ルール」が明確に確定されており、それを説明するドキュメントが存在する。リファレンスを見ながらコードを組むようにUIを作っていけるという点。これが私がエンジニアにマテリアルデザインをおすすめする理由その1です。実装のための、強力なWebアプリ向けライブラリが存在する。ルールが決まっているのだから、効率化するのも簡単です。そのためマテリアルデザインには当然のことながら、それを簡単に実現するためのライブラリが存在します。Lite』は(https://getmdl.io/)パーツや実例が豊富で使いやすいです。テンプレート(https://getmdl.io/templates/index.html)にはブログやポートフォリオサイトなどよくあるデザインが紹介されています。Lite』は確かに便利なのですが、そのアプローチはTwitterBootstrap等、既存のCSSフレームワークとあまり変わりません。既存のHTMLにCSSを適用する、つまり、既存のパーツに見た目を適用するというアプローチです。静的なページの場合はそれで十分でしょう。動的なアプリケーションの場合、UIと一口にいっても、単純な見た目や、ボタンを押したときの視覚効果だけでなく、スライドするメニューや入力項目のバリデーション、オートコンプリートなど、HTMLやCSSなどの見た目をつかさどる技術以外に、JavaScriptなどのプログラミング言語での処理が必要となります。これらを別に実装するのはなかなか手間がかかりますし、エンジニアとデザイナーとで役割分担がしづらい箇所でもあると思います。Webアプリケーションにおいては、UIに関連したよくある処理も、あらかじめマテリアルデザインされた部品に含んでおき、エンジニアはただそれを並べるだけで、ひと通りの機能を備えた使いやすいUIが出来上がる。いった、Google製JavaScriptフレームワーク用のマテリアルデザインのライブラリです。AngularJSもPolymerもカスタムディレクティブ、カスタムタグといった見た目や処理をまとめてひとつの部品にするコンポーネント化の機能を持っています。どちらもそれを最大限に活用した強力なライブラリです。(Angularは独自仕様、Polymerは次世代のWeb標準であるWebComponentsの拡張といった違いはありますが、実現されている機能の役割は変わりありません。Material』をご紹介します。いっても、わかりやすいデモページが用意されているのでそれを見ていただくのが、一番です。Material』ではカスタムタグを使って、マテリアルデザインのUIを構築していきます。>というカスタムタグが用意されており、これを書くだけで「マテリアルデザインされているチェックボックス」を配置することができます。他にもスワイプメニューや無限リストなど、便利な部品がたくさんあるので、ぜひご覧ください。Material』のためにAngularJSを採用してみる価値は十分あります。まとめもっと本格的なマテリアルデザインの事例が見たくなったら下記のサイトが参考になります。https://material.uplabs.com/インターフェースがシンプルなので、テーマカラー1色でも映えますし、写真やロゴなどの素材を活かしたデザインができるのもマテリアルデザインの魅力です。なにより、策定された標準仕様があって実装がある。基本的な処理はライブラリがカバーする。いうエンジニアが慣れ親しんだコンセプトのもと組み立てられたデザインというのは、とても魅力的です。そのまま使うのはもちろんのこと、コンセプトを基に、より深くデザインについて理解したいエンジニアにとって、マテリアルデザインはとてもいいきっかけになるのではないでしょうか。導入検討や他社ツールとの違い・比較について弊社のプロフェッショナルが喜んでサポートいたします。弊社のプロフェッショナルがコンサルティングいたします。今すぐお気軽にご相談ください。今すぐお気軽にご相談ください。10:00~19:00)今すぐお気軽にご相談ください。10:00~19:00)グラッドキューブは「ISMS認証」を取得しています。定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。いますぐ無料でお試しください。トライアル終了後も無料でご利用いただけます。Reserved.サイト内の記事・写真・アーカイブ・ドキュメントなど、すべてのコンテンツの無断複写・転載を禁じます。Reserved.サイト内の記事・写真・アーカイブ・ドキュメントなど、すべてのコンテンツの無断複写・転載を禁じます。