Page 1
基調特別招待講演トラック
マテリアルデザインの勘所
Material Design
Nobuya Sato Experience Designer
December 21st., 2014 – ABC 2014 Winter
Twitter: #abc2014w
Copyright © 2014 Secret Lab, Inc. All rights reserved.
Page 2
自己紹介 • 佐藤 伸哉 (@nobsato) • UXデザイン、デザイン戦略
– 神戸芸術工科大学 工業デザイン学科卒、その後、1994からCD-ROMやゲーム、Webのデザイン
– 主に大規模な企業サイトの情報設計や企業のグローバル戦略を実行
– Sonyでニューモバイル戦略やグループ横断のプラットフォーム戦略、タブレット戦略を担当
– 米Seesmicで日本語化やAndroidやWP7のアプリ開発
– UXとデザイン戦略の会社、Secret Lab, Inc.を設立
– 現在、米AKQAの東京オフィスの立ち上げに参画
2
Page 4
Material Design
7
http://google.com/design/spec
�
Page 5
Polymer
8
https://www.polymer-project.org/
�
Page 6
Material Design with Polymer
Copyright © 2014 Secret Lab, Inc. All rights reserved. 9
https://www.polymer-project.org/docs/
elements/material.html
�
Page 7
Material Design for Bootstrap
10
http://fezvrasta.github.io/bootstrap-material-design/
�
Page 8
11
本日のトピック
マテリアルデザイン
Material Design
Page 9
13
http://bit.ly/MaterialDesignReel
�
Page 11
• マテリアルデザインとは
• 「MATERIAL(素材・物質)」
• ガイドライン
• これからの可能性
15
Page 12
マテリアルデザインとは What is Material Design
16
Page 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
Page 16
Project Kennedy
20
Page 18
Versatile Design
22
Page 27
Copyright © 2014 Secret Lab, Inc. All rights reserved. 31
Page 28
Copyright © 2014 Secret Lab, Inc. All rights reserved. 32
Page 30
マテリアルデザイン
2つの目的
2 Goals of Material Design
34
Page 31
目的1:新しいビジュアル言語
「古典的な良いデザインの原則」と「技術と科学の可能性とイノベーション」を統合したビジュアル言語の開発。
35
Page 32
目的2:統一した体験ができるシステム
モバイル原則もとより、タッチ、音声、マウス、といった入力システムを考慮しつつ、プラットフォームとデバイスサイズを超えた、統一した体験ができる単一の基幹システム。
36
Page 33
マテリアルデザイン
3つの原則
3 Principles of Material Design
37
Page 34
原則1:メタファー
デザインのメタファーにMaterial(素材・物質)の考えを取り入れて、インターフェースやUXに紙とインク、光と表面いった素材との関係性を与えることで、オブジェクトの動きやUIの関係性などにアフォーダンスを生み出して、ユーザーにとって分かりやすいデザインを提供する。
38
Page 35
原則2:大胆に、生き生きと、意図的に
デザインに印刷の世界の考え方(グリッドシステム、タイポグラフィ、スペース、色)を取り入れ、ユーザーを視覚的に誘い、UIオブジェクトに階層やフォーカスの意味合いを与える。 意図的な余白や大きめのタイポグラフィを使ってユーザーのアクションを強調させる。
39
Page 36
原則3:モーションで意味を提供
状況の変化の様子やユーザーのアクションに合わせてオブジェクトの形状が変わるなど、常に自然で意味のあるモーションを提供する。 全てのアクションはひとつの環境で再現されユーザー体験の継続性を維持する。 反応やトランジションは常に一貫した体験を提供する。
40
Page 38
以前のビジュアル言語 HOLO DESIGN & CARD-STYLE
42
Page 39
Copyright © 2014 Secret Lab, Inc. All rights reserved. 43
Holographic Design
Page 40
Holographic Design
44
Page 41
Copyright © 2014 Secret Lab, Inc. All rights reserved. 45
Page 43
Holo Design
47
Holoデザイン Android 3.2以降のビジュアル言語
Page 45
Card-style
49
Google now
Android 4.1以降、本格的に導入
Page 49
マテリアルデザインの
“MATERIAL”とは
What is “Material” of Material Design?
53
Page 50
マテリアルデザインの“Material”
54
3つの構成要素でマテリアルデザインの世界観を構成 1. 環境 2. 素材の属性 3. 3次元空間でのオブジェクトの配置
Page 52
1. 環境:光源、環境光(自然光)、影
56
Page 54
3. 3次元空間内でのオブジェクトの配置
58
Page 55
3. 3次元空間内でのオブジェクトの配置
59
Page 56
3. 3次元空間内でのオブジェクトの配置
60
Page 57
3. 3次元空間内でのオブジェクトの配置
61
Page 58
3. 3次元空間内でのオブジェクトの配置
62
Page 59
3. 3次元空間内でのオブジェクトの配置
63
Page 60
3. 3次元空間内でのオブジェクトの親子関係
64
Page 61
3. 3次元空間内でのオブジェクトの親子関係
65
Page 63
ガイドライン Google Guidelines
67
Page 64
ガイドライン
68
http://google.com/design/spec/material-design/�
Page 65
まとめ Material Design is not a design guideline.
69
Page 66
新しいデザイン思想
70
Material Designは、デザインガイドラインではなく、デザイン思想。
Page 67
新しいデザインフレームワーク
Material Designは、活版印刷の時代から築きあげられた古き良きデザインを最新の技術を使って表現したデジタルのためのデザインフレームワーク。
71
Page 68
新しいプラットフォーム
72
Material Designは、様々なデバイス、プラットフォームに対応した、Googleが新たに既存のプラットフォームの上につくる、新しいプラットフォーム。
Page 69
既存のプラットフォーム上につくる?
73
Google Search for iPhone�inbox for iPhone� Spreadsheet for iPhone�
Page 70
74
http://google.com/design
�
Page 71
Thank You
Copyright © 2014 Secret Lab, Inc. All rights reserved. 75
Nobuya Sato
Experience Designer
[email protected] http://google.com/+nobsato http://about.me/nobsato http://slideshare.com/nobsato