5分で マテリアルデザインを読む 2015/08/08 第8回G-Study

自己紹介 名前 吉田 剛 (ヨシダ ツヨシ) 職業 フロント寄りのデベロッパー (元Flash使い) スマホUI講師 イカしてると思うブキ わかばシューター

2  

3  

マテリアルデザイン

4  https://www.google.com/design/spec/material-design/introduction.html

5  

よし！読むか！

6  

7  

英語だ、、 専門用語多い、、

8  

訳したよ！

章立て

9  

６. コンポーネント

７. パターン

８. ユーザビリティ

９. リソース

１. マテリアルデザイン

２. マテリアル

３. アニメーション

４. スタイル

５. レイアウト

10  

5分じゃ無理！

11  

各章まとめました。 ニュアンス掴んで！

あとは各自で読んで、、、

5分後に マテリアルデザインを読む 2015/08/08 第8回G-Study

13  

さっそく、、 と行く前に、、

14  

※更新されます

15  

１. マテリアルデザイン

Material design

１. マテリアルデザイン

16  

•  新しいデザインルール • 統一性・法則 • 様々な環境に適応可能 •  紙とインク

17  

２. マテリアル

What is material?

２. マテリアル

18  

•  新しい概念の基本物質 •  厚さ一定で層状 •  縦横のみ伸び縮みする •  色や画像は表面の模様

２. マテリアル

19  

•  新しい概念の基本物質 •  厚さ一定で層状 •  縦横のみ伸び縮みする •  色や画像は表面の模様

紙

インク

２. マテリアル

20  

21  

３. アニメーション

Animation

３. アニメーション

22  

•  簡潔で意味があること •  自然であること •  操作への適切な反応 •  ワクワクは細部に宿る

３. アニメーション

23  

•  簡潔で意味があること •  自然であること •  操作への適切な反応 •  ワクワクは細部に宿る

← 第7回G-Study 　“動き”を作るポイント

24  

http://cda244.com/2015/01/11-505/

25  

8まで飛びます 4～7は後ほど

26  

８. ユーザビリティ

Usability

８. ユーザビリティ

27  

•  アクセシビリティ •  ローカライズ

28  

4～7は 決まり事・ルール が続きます

29  

４. スタイル

Style

４. スタイル

30  

マテリアルデザインを 構成する以下要素のルール 色使い・アイコン・画像・文字・文章

４. スタイル

31  

32  

５. レイアウト

Layout

５. レイアウト

33  

色々な環境でマテリアルデザインを実現する基本ルール 単位・構造・可変 etc…

５. レイアウト

34  

35  

６. コンポーネント

Components

６. コンポーネント

36  

各パーツ説明と決まり事 ボタン・テーブル・ダイアログ・ タブ・テキスト入力 etc…

６. コンポーネント

37  

38  

７. パターン

Patterns

７. パターン

39  

よく使われる要素や画面、シーンのパターン エラー表示・起動画面・検索・ スクロール・データ形式 etc…

７. パターン

40  

41  

９. 素材

Resources

９. 素材

42  

制作に役立つ素材を用意しています カラーパレット・フォント・ テンプレート・アイコン etc…

43  

以上。

44  

ニュアンス掴んだ？

45  

さぁ！読もう！

ありがとうございました

46  

おまけ

47  

Material Design Lite

48  http://www.getmdl.io/