フェンリル

Developer's Blog

マテリアルデザインのガイドラインが最高に実践的だった

 

Fenrir Advent Calendar 2014

 

「2014年にグッときたコレ」がテーマになる Fenrir Advent Calendar 2014 の24日目です。

マテリアルデザイン

 

デザイナーの大西です。マテリアルデザインそのものへの記事は既に多くの方々が取り組まれているので、少し目先を変えてガイドラインについてです。

このガイドラインが最高に実践的でグッときました。

UI・UXについてのガイドラインは面白くて勉強にもなるのですが、理解して実践するところにまで到達するのには中々のエネルギーを使いませんか?

マテリアルデザインは英語のドキュメントなので最初は尻込みしましたが、読み進めるうちに内容の充実っぷりに引き込まれました。ここまで親切なガイドラインは珍しいと思います。和訳も欲しいところですが、用例として画像がたくさん挙げられているので翻訳サイトを使えば充分理解できると思います。

 

 豊富なテンプレートと素材

750種類以上のアイコン

md01_icon_s

http://google.github.io/material-design-icons/

アプリケーション内で使用するためのアイコンがクリエイティブ・コモンズ(CC-BY)で配布されています。
現時点で750種類以上のアイコンがあり、各画面解像度用のサイズに書き出されたpngファイルにsvgファイルまでセットになっています。
先月ライセンスが緩く変更CC-BY-SA から CC-BYへ)されたので、より利用しやすくなりました。ライセンス表記することで自由に使用できるとのことです。

 

レイアウト用テンプレート

md02_layout

http://www.google.com/design/spec/resources/layout-templates.html

リストやアイコンの大きさ、余白などのガイド付きです。編集可能な ai ファイルで配布してくれているのでテンプレートとしてすぐに使えます。

この他にもカラーパレットやボタンなどの各部品がまとめられたファイルが公開されています。公式のテンプレートは安心感があるのでこの充実ぶりはうれしいです。

 

親切すぎる用例とサンプル

いい例、わるい例をあげて解説してくれているのでわかりやすいです。動画をふんだんに使用して説明しているのでアニメーションの章なども理解が進みます。豪華すぎるガイドライン……

特に印象に残ったのはアイコンの章で、視覚的なボリューム感をそろえる為に円形、正方形、長方形(縦横)のサイズをグリッドで説明してくれています。こういったグリッドを基準にして作成すると、アイコン全体の見栄えがぐんと良くなります。md03_grid

非デザイナーな開発者にも嬉しい説明

アニメーションの意図

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 アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Facebook コメント

コメント

六郎太2015年01月16日 20:03

出来上がったものを見る限り大いなる勘違いです。
数々のレビューがすべてを物語っています。
ガイドラインはあくまでガイドラインであり、強制ではないのですから
感化されて飛びつく前に一歩引いてよく考えて欲しかったですね。

伊藤2015年03月14日 18:10

今までのGoogleのWebサービスはパッと見はいいのですが、ユーザーインターフェースにおいては、サービスごとに何がどこにあるかを覚える必要があります。
たびたびある大きな仕様変更では、操作性がまったく違うものになることさえあります。
直感性ある操作という点では、アップルやMSどころか、任天堂など一部ゲームメーカーにも負けています。
マイビジネスロケーションなど、大量の店舗をバグを避けて扱うには非常に分かりづらいコツがいるのにヘルプにも画面上にも説明は一切なし。
サポートに電話してもGoogleマップスペシャリストなる人材はすぐに再現するトラブルさえよく知らない。ユーザーと一緒に育てていく途中とか抜かす。
サービス自体が未完成なものを公開してユーザーにデバッグさせることを恥と思わないし、告知も不十分なままに何度も仕様変更して、ヘルプも追いつかず古いままのこともよくある。
この分かりづらさや未完成さはGoogleの文化であり、これをマトモにするとGoogleの良さも無くなる気がします。
カオスはカオスのままでいいのかも。

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます