@tyshgcによるMaterial Designの解釈・解読まとめ。 Gunosyにて行われた勉強会のスライドです。 動画版はこちら https://vimeo.com/107162632

1. Gunosy
Material Design Study
Tsuyoshi Higuchi @ tyshgc
What is Material Design?
マテリアルデザインってなんだろう?
2014, Sept. 25

2. Gunosy Material Design Study
PROFILE
樋口 剛 Tsuyoshi Higuchi
GunosyのUIデザイナー・フロントエンドエンジニアの傍ら、
UX設計なども担当している良くも悪くも10年選手。
Gunosyには2014年7月にジョイン。
前職はGunosy初期UI設計をした某社。

3. Gunosy Material Design Study
Index
1 … Material Designの目的
2 … Material Designとは
3 … 気になるところのまとめ

4. Gunosy Material Design Study
Material Designの目的
マルチデバイス時代の進化にあわせ、過去に築かれてきたデザインの
原則や理論、技術革新と科学の可能性をベースに、
様々なデバイス上でサービスを利用したいユーザーへ共通の操作体験
を提供する事が目的。
デバイス・プラットフォームを問わないUXガイドラインが必要

5. Gunosy Material Design Study
デバイスによって操作・体験が変わる
現実世界にないモノの動き
すぐに認知できないGUIコンポーネント
User
ストレス
No Platform Consistency!!

6. デバイスやプラットフォームの上に
生活があるのではなく、
“
生活の中にデバイスやプラットフォームがある
“
Gunosy Material Design Study
ユーザーの使い慣れた環境から逸脱すると離脱率は上がる
物理法則やモノの歴史は
無視できない

7. Gunosy Material Design Study
Material Designとは…

8. Gunosy Material Design Study
Material is the metaphor Bold, graphic, intentional Motion provides meaning
社会的に
蓄積された
デザイン理論
フィードバック
による
体験の継続性
物理的で
自然な
形状・動き
Visual Language
Material Design

9. Gunosy Material Design Study
全部話すと長いので、
気になる点だけまとめます

10. Gunosy Material Design Study
Animation
統一されたイージングSwift out
linear は NG!
動きには意味がある
イージングについて知りたい方はこちらがオススメ
Easing Function 早見表 http://easings.net/

11. Gunosy Material Design Study
Responsive Interaction
ユーザーの行動に対して
アニメーションで
処理が行われた事を表現する。
タップしても何も変化がない = 適切に処理されたかわかりにくい

12. Gunosy Material Design Study
UI Color Palette
カラーはメインカラーとアクセント
カラーの組み合わせで構成され、
Web・Android・iOSに対応するため
のカラーパレットが用意されている。
Material Designは原色をベースに、
道路標識や現代建築・スポーツ用の
コートなどを参考にし、瞬時に認知
できるように設計されている。

13. Gunosy Material Design Study
Floating Action Button
Material Designの肝ともいうべき
Floating Action Button
1 サイズは2通り2 最も重要なアクションを
基本画面に1つ配置
電話アプリの場合
電話するホームへ
3 関連した要素の場合は
複数設置可能
音楽アプリの場合
再生に関連している

14. Gunosy Material Design Study
Layout and Shadow
Material Designでは紙を
メタファーとして扱い、
意味（アフォーダンス）を
持たせる。
Floating Action Button
Background Status Bar
Material（素材）とメタファー（揶揄）でユーザーの脳に対して
実世界と同じ刺激を与えて、脳の負担を軽くしいる。

15. Gunosy Material Design Study
最後に…

16. Gunosy Material Design Study
So when we talk about the physics of things, we're not trying to copy
the real world. We're trying to make it natural for your brain, for you
mind, while still unleashing this thing that software can do which is
be this totally mutable, transformable, truly magical type of
experience. So that's kind of the line that we're trying to dance on.
僕らはリアルな物理を使うとはいってますが、
リアル世界をコピーしようとは考えていません。
ただ、脳や心にとって自然なものを作ろうとしているだけです。
ソフトウェアの可能性を開いて、変化のある本当にマジカルな
体験を作っていく、僕らはそんなラインの上でダンスしようと
しています。
マティアス・デュアルテ氏 Matias Duarte
引用元：マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー Brent Rose－Gizmodo US 翻訳 miho

17. Gunosy Material Design Study
所感

18. Gunosy Material Design Study
Material Designとは
UIデザインやUXアーキテクチャにおける哲学

19. Gunosy
Material Design Study
Thank you
ご清聴ありがとうございました！
Tsuyoshi Higuchi @ tyshgc
俺の”Material Designまとめ”リンク
http://raindrop.io/collection/215731