Material Design 1.マテリアルデザインとは何か
同期のデザイナーの子にマテリアルデザインのことを聞かれた時、答えられなくて悔しかったのでw
公式ドキュメントを読みつつ、マテリアルデザインについてまとめていきたいと思います。(全10回くらいの予定)
デザインの歴史
スキューモーフィズムからマテリアルデザインに到るまでの流れを追っていきます。
スキューモーフィズム(1890年頃〜)
現実世界の視覚のルールをデザインに落とし込んだものです。
図1:スキューモーフィズムの例。紙のノートのような質感を持つ立体的なデザイン。
フラットデザイン(1920年頃〜)
装飾性を抑えたシンプルで平面的なデザインです。
図2:フラットデザインの例
こんなこと言うとなんですが、私は洗練されていて結構好きですw
メトロUI(2010年頃〜)
過剰な装飾を削ぎ落とした点において、フラットデザインの一種と言えます。
しかし、完全なフラットデザインではなく、もちろん完全なスキューモーフィズムでもなく、中間的な立ち位置(フラットデザイン寄り)です。
図3:メトロUIの例
マテリアルデザイン(2014年頃〜)
フラットデザイン及びメトロUIの持つ以下の課題を解決するものとして、マテリアルデザインが登場しました。
- 立体的な表現をなくしたため、どこを押すことができるのか、あるいはどこに文字を入力できるのかわからない。
- 無駄な装飾をなくしたため重要度が分かりづらい。
マテリアルデザインは
マテリアル(物質)のメタファー(比喩)
です。現実世界のルールをデザインに落とし込むことで、いつの時代でも、誰にでも、どんなデバイスでも通じるデザインを目指しています。
具体的には光と影、奥行きの概念を取り入れることで、現実世界の質量を表現し、直感的に分かりやすくしています。 ( →マテリアルは3D)
また、ユーザの操作に対しアニメーションで反応するなど触覚を大事にしている点でスキューモーフィズムと異なります。 (→意味のあるアニメーション)
マテリアル環境は3D
マテリアルデザインについて
「紙」と「インク」で構成されており、印刷物を意識した作り
という表現をよく見かけますが、つまり画面の縦横だけでなく、高さ(奥行き)も意識しているということです。
図4:x軸y軸に加えz軸が存在する
図5:パーツはそれぞれ3次元上に存在する。あるパーツがあるパーツを突き抜けるような現実にあり得ないデザインはない。
意味のあるアニメーション
ユーザの操作に対し、アニメーションでレスポンスを返すことによって、ユーザは自分の操作がどう伝わったのか、理解しやすくなります。
www.youtube.com 映像:マテリアルデザインの説明動画。「慣性」が意識されていることがよく分かる。
参考
■ エンジニアが武器にするMaterial Design // Speaker Deck
ーエンジニアがマテリアルデザインを学ぶことの大切さが語られています。
■ マテリアル – 日本語
ー公式ドキュメント。これは最低限読んでおくべきだと思います。(読んでいる途中だけどw)
■ マテリアルデザインについて少し調べる - Qiita
■ Googleマテリアルデザインとフラットデザインって結局何が違うの?[UI/UX] - NAVER まとめ
■ マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 |ferret [フェレット]
ーマテリアルデザインって何?フラットデザインとどう違うの?という疑問に端的に答えてくれるサイトたちです。