1.
基調特別招待講演トラック
マテリアルデザインの勘所
Material Design
Nobuya Sato
Experience Designer
December 21st., 2014 – ABC 2014 Winter
Twitter: #abc2014w
Copyright © 2014 Secret Lab, Inc. All rights reserved.

2.
自己紹介
• 佐藤 伸哉 (@nobsato)
• UXデザイン、デザイン戦略
– 神戸芸術工科大学 工業デザイン学科卒、その後、1994からCD-
ROMやゲーム、Webのデザイン
– 主に大規模な企業サイトの情報設計や企業のグローバル戦略
を実行
– Sonyでニューモバイル戦略やグループ横断のプラットフォー
ム戦略、タブレット戦略を担当
– 米Seesmicで日本語化やAndroidやWP7のアプリ開発
– UXとデザイン戦略の会社、Secret Lab, Inc.を設立
– 現在、米AKQAの東京オフィスの立ち上げに参画
2

3.
3
主な監訳書

4.
Material Design
7
http://google.com/design/spec

5.
Polymer
8
https://www.polymer-project.org/

6.
Material Design with Polymer
Copyright © 2014 Secret Lab, Inc. All rights reserved. 9
https://www.polymer-project.org/docs/
elements/material.html

7.
Material Design for Bootstrap
10
http://fezvrasta.github.io/bootstrap-material-design/

8.
11
本日のトピック
マテリアル
デザイン
Material Design

9.
13
http://bit.ly/MaterialDesignReel

10.
14

11.
• マテリアルデザインとは
• 「MATERIAL（素材・物質）」
• ガイドライン
• これからの可能性
15

12.
マテリアルデザインとは
What is Material Design
16

13.
Material Design…
“ We challenged ourselves to create a visual
language for our users that synthesizes the
classic principles of good design with the
innovation and possibility of technology and
science. “
17

14.
18

15.
19

16.
Project Kennedy
20

17.
21

18.
Versatile Design
22

19.
23

20.
24

21.
25

22.
26

23.
27

24.
28

25.
29

26.
30

27.
Copyright © 2014 Secret Lab, Inc. All rights reserved. 31

28.
Copyright © 2014 Secret Lab, Inc. All rights reserved. 32

29.
33

30.
マテリアルデザイン
2つの目的
2 Goals of Material Design
34

31.
目的１：新しいビジュアル言語
「古典的な良いデザインの原則」と「技術と科学の
可能性とイノベーション」を統合したビジュアル言
語の開発。
35

32.
目的２：統一した体験ができるシステム
モバイル原則もとより、タッチ、音声、マウス、と
いった入力システムを考慮しつつ、プラットフォー
ムとデバイスサイズを超えた、統一した体験ができ
る単一の基幹システム。
36

33.
マテリアルデザイン
３つの原則
3 Principles of Material Design
37

34.
原則１：メタファー
デザインのメタファーに
Material（素材・物質）
の考えを取り入れて、
インターフェースやUX
に紙とインク、光と表
面いった素材との関係
性を与えることで、オ
ブジェクトの動きやUIの
関係性などにアフォー
ダンスを生み出して、
ユーザーにとって分か
りやすいデザインを提
供する。
38

35.
原則２：大胆に、生き生きと、意図的に
デザインに印刷の世界
の考え方（グリッドシ
ステム、タイポグラ
フィ、スペース、色）
を取り入れ、ユーザー
を視覚的に誘い、UIオブ
ジェクトに階層やフォ
ーカスの意味合いを与
える。
意図的な余白や大きめ
のタイポグラフィを使
ってユーザーのアクシ
ョンを強調させる。
39

36.
原則３：モーションで意味を提供
状況の変化の様子やユ
ーザーのアクションに
合わせてオブジェクト
の形状が変わるなど、
常に自然で意味のある
モーションを提供する。
全てのアクションはひ
とつの環境で再現され
ユーザー体験の継続性
を維持する。
反応やトランジション
は常に一貫した体験を
提供する。
40

37.
41

38.
以前のビジュアル言語
HOLO DESIGN & CARD-STYLE
42

39.
Copyright © 2014 Secret Lab, Inc. All rights reserved. 43
Holographic Design

40.
Holographic Design
44

41.
Copyright © 2014 Secret Lab, Inc. All rights reserved. 45

42.
46

43.
Holo Design
47
Holoデザイン
Android 3.2以降のビジュアル言語

44.
48

45.
Card-style
49
Google now
Android 4.1以降、本格的に導入

46.
Card-style
50

47.
Card-style
51

48.
52

49.
マテリアルデザインの
MATERIAL とは
What is “Material” of Material Design?
53

50.
マテリアルデザインの Material
54
３つの構成要素でマ
テリアルデザインの
世界観を構成
1. 環境
2. 素材の属性
3. 3次元空間でのオ
ブジェクトの配置

51.
1. 環境：3次元
55

52.
1. 環境：光源、環境光（自然光）、影
56

53.
2. 素材の属性
57

54.
3. 3次元空間内でのオブジェクトの配置
58

55.
3. 3次元空間内でのオブジェクトの配置
59

56.
3. 3次元空間内でのオブジェクトの配置
60

57.
3. 3次元空間内でのオブジェクトの配置
61

58.
3. 3次元空間内でのオブジェクトの配置
62

59.
3. 3次元空間内でのオブジェクトの配置
63

60.
3. 3次元空間内でのオブジェクトの親子関係
64

61.
3. 3次元空間内でのオブジェクトの親子関係
65

62.
66

63.
ガイドライン
Google Guidelines
67

64.
ガイドライン
68
http://google.com/design/spec/material-design/

65.
まとめ
Material Design is not a design guideline.
69

66.
新しいデザイン思想
70
Material Designは、デザインガイドラインではなく、
デザイン思想。

67.
新しいデザインフレームワーク
Material Designは、活版印刷の時代から築きあげら
れた古き良きデザインを最新の技術を使って表現し
たデジタルのためのデザインフレームワーク。
71

68.
新しいプラットフォーム
72
Material Designは、様々なデバイス、プラットフ
ォームに対応した、Googleが新たに既存のプラッ
トフォームの上につくる、新しいプラットフォ
ーム。

69.
既存のプラットフォーム上につくる？
73
Google Search for iPhone inbox for iPhone Spreadsheet for iPhone

70.
74
http://google.com/design

71.
Thank You
Copyright © 2014 Secret Lab, Inc. All rights reserved. 75
Nobuya Sato
Experience Designer
nobsato@secret-lab.jp
http://google.com/+nobsato
http://about.me/nobsato
http://slideshare.com/nobsato