ABC2014 Winter: Material Design

基調特別招待講演トラック

マテリアルデザインの勘所

Material Design

Nobuya Sato Experience Designer

December 21st., 2014 – ABC 2014 Winter

Twitter: #abc2014w

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

自己紹介 •  佐藤伸哉 (@nobsato) •  UXデザイン、デザイン戦略

– 神戸芸術工科大学工業デザイン学科卒、その後、1994からCD-ROMやゲーム、Webのデザイン

– 主に大規模な企業サイトの情報設計や企業のグローバル戦略を実行

–  Sonyでニューモバイル戦略やグループ横断のプラットフォーム戦略、タブレット戦略を担当

– 米Seesmicで日本語化やAndroidやWP7のアプリ開発

–  UXとデザイン戦略の会社、Secret Lab, Inc.を設立

– 現在、米AKQAの東京オフィスの立ち上げに参画

2

3

主な監訳書

Material Design

7

http://google.com/design/spec

�

Polymer

8

https://www.polymer-project.org/

�

Material Design with Polymer

Copyright © 2014 Secret Lab, Inc. All rights reserved. 9

https://www.polymer-project.org/docs/

elements/material.html

�

Material Design for Bootstrap

10

http://fezvrasta.github.io/bootstrap-material-design/

�

11

本日のトピック

マテリアルデザイン

Material Design

13

http://bit.ly/MaterialDesignReel

�

•  マテリアルデザインとは

•  「MATERIAL（素材・物質）」

•  ガイドライン

•  これからの可能性

15

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

16

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

Project Kennedy

20

Versatile Design

22


2つの目的

2 Goals of Material Design

34

目的１：新しいビジュアル言語

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

35

目的２：統一した体験ができるシステム

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

36


３つの原則

3 Principles of Material Design

37

原則１：メタファー

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

38

原則２：大胆に、生き生きと、意図的に

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

39

原則３：モーションで意味を提供

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

40

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

42


Holographic Design

Holographic Design

44

Holo Design

47

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

Card-style

49

Google now

Android 4.1以降、本格的に導入

Card-style

50

Card-style

51

マテリアルデザインの

“MATERIAL”とは

What is “Material” of Material Design?

53

マテリアルデザインの“Material”

54

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

1. 環境：3次元

55

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

56

2. 素材の属性

57

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

58


59


60


61


62


63

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

64

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

65

ガイドライン Google Guidelines

67

ガイドライン

68

http://google.com/design/spec/material-design/�

まとめ Material Design is not a design guideline.

69

新しいデザイン思想

70

Material Designは、デザインガイドラインではなく、デザイン思想。

新しいデザインフレームワーク

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

71

新しいプラットフォーム

72

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

既存のプラットフォーム上につくる？

73

Google Search for iPhone�inbox for iPhone� Spreadsheet for iPhone�

74

http://google.com/design

�

Thank You


Nobuya Sato

Experience Designer

[email protected] http://google.com/+nobsato http://about.me/nobsato http://slideshare.com/nobsato

ABC2014 Winter: Material Design

Design

Transcript of ABC2014 Winter: Material Design