• Top
  • > Blog
  • > Googleの新しいデザインガイドライン「Material Design」を...
2014/07/08 User Experience, UXデザイン

Googleの新しいデザインガイドライン「Material Design」をみて感じたこと考えたこと

こんにちは、デザイナーの清水です。

Googleが開発者イベント「Google I/O 2014」にて、新しいデザイン「Material Design」を発表しました。これは、Androidの次期バージョンである「Android L」をはじめ、ウェブやウェアラブルデバイスなどGoogleの全プラットフォームを統一するデザインとなるようです。※現在のものはプレビュー版

 

この新しく開発されたMaterial Designのデザインガイドラインが早速公開されていますので、そのガイドライン等を見てデザインの特徴や感じたことを少し書いてみたいと思います。

まずこのデザインのコンセプトですが、ネーミングに「Material Design」と示されている通り、「物質的なデザイン」であるようです。具体的には、現実世界のモノがもつ物理的な振る舞いや構造を、UIの基礎的な原則として取り入れたデザインになっています。
我々が実世界で体験し、学習している感覚・知覚を利用することで、デジタル媒体における情報空間を、より直感的で分かりやすく使えるようにすることが狙いだと思われます。

 

近年のUIデザインのトレンドは、いわゆる「フラットデザイン」の傾向ですが、
それ以前の主流であったスキュモーフィックなデザインと比較すると、シンプルで平面的な表示のため、ユーザが操作できる部分の「手がかり」が分かりにくい等、使いやすさの面では課題があり、まだ発展途上であると思われます。
そのような中、Googleのデザインもフラットデザインの傾向にありますが、新しいMaterial Designでは、その課題に対しフラットデザイン的ビジュアルスタイルの世界観を踏襲しつつ、現実世界における物質性の基本原則を効果的に取り込むことで、次の次元のUIを作り出そうという挑戦を感じました。

 

 

 

『Material Design – Google Design Guideline』

公開されたガイドラインを見て、このコンセプトにあった特徴的で気になったものを今日は一つピックアップしてみます。

アニメーションや動きに細かな規定があり、そこにこのMaterial Designの特徴的な一面が表れている

デザインガイドラインのIntroductionの次には、色やカタチなどではなく、アニメーションが説明されています。
そこでは、すべてのアニメーションや動きの基本となる法則として、現実世界の物理原則(質量のあるものは力がかかるとどのように動くか等)を基本にすることから始まります。そして、ユーザがアクションした位置を基点にアニメーションや動きが発生することや、画面遷移などビューが変わる際のアニメーション(トランジション)に意味をもたせる等の解説が続きます。
またコンテンツを表示させる際のアニメーションでは、階層的に表示タイミングをつけることや、ボタンアイコンを押した際のアニメーションでは、連続的にカタチが変わるなど、細かな表示ルール・表現スタイルが規定されています。

物理法則に則した動きが規定されている

物理法則に則した動きが規定されている

 

これらは単に表示を面白くしたり楽しませる演出的なものではなく、Material Designのデザインコンセプトに基づき、動きやアニメーションにも意味をもたせ、表示の変化を手がかりに、ユーザに何が行われたか、何が起こっているかを理解することを助けています。

いわゆるフラットデザインスタイルでは、表示要素がシンプルなだけに、このような時間軸を含めたデザインに合理的な基本原則を定めることも、分かりやすさ・使いやすさを向上させるのに繋がると考えられます。

※詳細情報、参考・画像転載:

CNET Japan  
http://japan.cnet.com/sp/googleio2014/35049961/

Publickey  http://www.publickey1.jp/blog/14/googleuxmaterial_designgoogle_io_2014.html

清水良介(インタラクション&インフォメーションデザイナー)

記事一覧へ