Learn to Live and Live to Learn

IT(たまにビジネス)に関する記事を読んで、考えて、使ってみたことをまとめる場。

Material Design 1.マテリアルデザインとは何か

同期のデザイナーの子にマテリアルデザインのことを聞かれた時、答えられなくて悔しかったのでw
公式ドキュメントを読みつつ、マテリアルデザインについてまとめていきたいと思います。(全10回くらいの予定)

デザインの歴史

スキューモーフィズムからマテリアルデザインに到るまでの流れを追っていきます。

スキューモーフィズム(1890年頃〜)

現実世界の視覚のルールをデザインに落とし込んだものです。

f:id:A_01:20170419233400p:plain 図1:スキューモーフィズムの例。紙のノートのような質感を持つ立体的なデザイン。

フラットデザイン(1920年頃〜)

装飾性を抑えたシンプルで平面的なデザインです。

f:id:A_01:20170419235107j:plain 図2:フラットデザインの例

こんなこと言うとなんですが、私は洗練されていて結構好きですw

メトロUI(2010年頃〜)

過剰な装飾を削ぎ落とした点において、フラットデザインの一種と言えます。
しかし、完全なフラットデザインではなく、もちろん完全なスキューモーフィズムでもなく、中間的な立ち位置(フラットデザイン寄り)です。

f:id:A_01:20170419235127p:plain 図3:メトロUIの例

マテリアルデザイン(2014年頃〜)

フラットデザイン及びメトロUIの持つ以下の課題を解決するものとして、マテリアルデザインが登場しました。

  • 立体的な表現をなくしたため、どこを押すことができるのか、あるいはどこに文字を入力できるのかわからない。
  • 無駄な装飾をなくしたため重要度が分かりづらい。

マテリアルデザインは

マテリアル(物質)のメタファー(比喩)

です。現実世界のルールをデザインに落とし込むことで、いつの時代でも、誰にでも、どんなデバイスでも通じるデザインを目指しています。
具体的には光と影、奥行きの概念を取り入れることで、現実世界の質量を表現し、直感的に分かりやすくしています。 ( →マテリアルは3D)

また、ユーザの操作に対しアニメーションで反応するなど触覚を大事にしている点でスキューモーフィズムと異なります。 (→意味のあるアニメーション)

マテリアル環境は3D

マテリアルデザインについて

「紙」と「インク」で構成されており、印刷物を意識した作り

という表現をよく見かけますが、つまり画面の縦横だけでなく、高さ(奥行き)も意識しているということです。

f:id:A_01:20170420000759j:plain 図4:x軸y軸に加えz軸が存在する

f:id:A_01:20170420000440j:plain 図5:パーツはそれぞれ3次元上に存在する。あるパーツがあるパーツを突き抜けるような現実にあり得ないデザインはない。

意味のあるアニメーション

ユーザの操作に対し、アニメーションでレスポンスを返すことによって、ユーザは自分の操作がどう伝わったのか、理解しやすくなります。

www.youtube.com 映像:マテリアルデザインの説明動画。「慣性」が意識されていることがよく分かる。

参考

エンジニアが武器にするMaterial Design // Speaker Deck
 ーエンジニアがマテリアルデザインを学ぶことの大切さが語られています。

マテリアル – 日本語
 ー公式ドキュメント。これは最低限読んでおくべきだと思います。(読んでいる途中だけどw)

マテリアルデザインについて少し調べる - Qiita
Googleマテリアルデザインとフラットデザインって結局何が違うの?[UI/UX] - NAVER まとめ
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 |ferret [フェレット]
 ーマテリアルデザインって何?フラットデザインとどう違うの?という疑問に端的に答えてくれるサイトたちです。