「2014年にグッときたコレ」がテーマになる Fenrir Advent Calendar 2014 の24日目です。
デザイナーの大西です。マテリアルデザインそのものへの記事は既に多くの方々が取り組まれているので、少し目先を変えてガイドラインについてです。
このガイドラインが最高に実践的でグッときました。
UI・UXについてのガイドラインは面白くて勉強にもなるのですが、理解して実践するところにまで到達するのには中々のエネルギーを使いませんか？
マテリアルデザインは英語のドキュメントなので最初は尻込みしましたが、読み進めるうちに内容の充実っぷりに引き込まれました。ここまで親切なガイドラインは珍しいと思います。和訳も欲しいところですが、用例として画像がたくさん挙げられているので翻訳サイトを使えば充分理解できると思います。
豊富なテンプレートと素材
750種類以上のアイコン
http://google.github.io/material-design-icons/
アプリケーション内で使用するためのアイコンがクリエイティブ・コモンズ（CC-BY）で配布されています。
現時点で750種類以上のアイコンがあり、各画面解像度用のサイズに書き出されたpngファイルにsvgファイルまでセットになっています。
先月ライセンスが緩く変更（CC-BY-SA から CC-BYへ）されたので、より利用しやすくなりました。ライセンス表記することで自由に使用できるとのことです。
レイアウト用テンプレート
http://www.google.com/design/spec/resources/layout-templates.html
リストやアイコンの大きさ、余白などのガイド付きです。編集可能な ai ファイルで配布してくれているのでテンプレートとしてすぐに使えます。
この他にもカラーパレットやボタンなどの各部品がまとめられたファイルが公開されています。公式のテンプレートは安心感があるのでこの充実ぶりはうれしいです。
親切すぎる用例とサンプル
いい例、わるい例をあげて解説してくれているのでわかりやすいです。動画をふんだんに使用して説明しているのでアニメーションの章なども理解が進みます。豪華すぎるガイドライン……
特に印象に残ったのはアイコンの章で、視覚的なボリューム感をそろえる為に円形、正方形、長方形（縦横）のサイズをグリッドで説明してくれています。こういったグリッドを基準にして作成すると、アイコン全体の見栄えがぐんと良くなります。
非デザイナーな開発者にも嬉しい説明
アニメーションの意図
http://www.google.com/design/spec/animation/meaningful-transitions.html
マテリアルデザインがどういったアニメーションを推奨しているのかが説明されています。自然で目障りにならず、操作への理解を助けるための動きが学べます。
画像の選び方
http://www.google.com/design/spec/style/imagery.html#imagery-best-practices
情報をより正確に伝えるために、どういった画像を選ぶべきなのかが説明されています。
このあたりは感覚的に実践しがちなところなので、キチンと文書化されているのがありがたいです。デザイナーですが改めてわたしも勉強になりました。
以上、ガイドラインとして個人的にグッときたところをまとめてみました。至れり尽くせりです。使わせようという気をひしひし感じるガイドラインでした。
また、マテリアルデザインに対応した Sleipnir Mobile for Android も本日リリースしておりますのでこちらもよろしくお願いいたします。
https://blog.fenrir-inc.com/jp/2014/12/sleipnir-android-3-0-0.html
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
