マテリアルデザインの基本的なポイントをまとめた資料です。 Wordbench京都のセッションで使用しました。

1. 聞いて覚える
マテリアルデザイン⼊⾨
~ニュアンスを掴んで理解しよう~
2015/11/7 WordBench京都
by ＠maki_saki

2. 2015-11-10 2
⽬次
• マテリアルデザインについて
• マテリアルデザインの機能
• マテリアルデザインの活⽤法（私⾒）
• フレームワークの紹介
• 参考サイトの紹介

3. 2015-11-10 3
⾃⼰紹介
HN：コンチ（ぼっち）
@maki_saki

4. 2015-11-10 4
⾃⼰紹介
経歴
• 携帯FLASHデザイナー（6年）
↓
• 旅⾏会社Web担当（4ヶ⽉）
↓
• 制作会社ディレクタ［社畜］（3年⽬）
別にデザインの
スペシャリストとか
凄いフロントエンジニアとか
じゃないです！！！
HN：コンチ（ぼっち）
@maki_saki

5. 2015-11-10 5
⾃⼰紹介
時々、勉強会開いてます＼(^o^)／
過去開催の勉強会
• jQuery勉強会
• CSSフレームワーク勉強会
• コーディング規約勉強会
• タグマネージャー勉強会
• LESSを始める勉強会
etc

6. マテリアルデザインを知ろう

7. 2015-11-10 7
マテリアルデザインを知ろう｜はじめに
Google I/O 2014 で
新しいデザインガイドラインが発表されました。

8. その前に…
フラットデザインって
ありましたね？

9. 2015-11-10 9
マテリアルデザインを知ろう｜フラットデザインとの違い
スキューモフィック
デザイン
フラットデザイン
• iOS、Widows8など様々な
インターフェイスにマッチする。
• シンプルゆえ、コンテンツに
フォーカスできる。
• CSSで作りやすいのでレスポンシブの
実装が容易
• 流⾏りのためクリエイティブが⾼い
プロダクトに⾒える。
（個⼈差があります。）
2013年 フラットデザインとは？

10. 2015-11-10 10
マテリアルデザインを知ろう｜⽬的
• 統⼀感のある設計
• 影やレイヤーなど3Dを表現
• 様々な画⾯サイズに適応できるデザイン
• 装飾ではなく、意味を伝える動き
あらゆるデバイスで統⼀感のある
「UIの基礎原則」を作る

11. 2015-11-10 11
マテリアルデザインを知ろう｜⽬的
なぜマテリアルデザインは作られたか

12. 2015-11-10 12
マテリアルデザインを知ろう｜⽬的
「紙」と「インク」
マテリアルデザインでは「紙」と「インク」と⽐喩（メタファー）している。
UIはバーチャル空間に「紙」の特徴を持つ。
「紙」は⻑⽅形か円となる。
ひし形などの複雑な形にはならない。
複雑な形は「インク」（コンテンツ）と
して紙の上に書く

13. 2015-11-10 13
マテリアルデザインを知ろう｜⽬的
3D（XYZ軸）空間でのUI設計
マテリアルデザインのUIは、紙を組み合わせて3次元で設計をする。
UI（紙）はXYZ軸を持つ
インクはZ軸を持たない
紙のUIを重ねて情報設計をする。
また「紙」の中の遷移は「紙」の中で
⾏われる。

14. 2015-11-10 14
マテリアルデザインを知ろう｜⽬的
紙の変形
紙のUIはコンテンツの遷移やピックアップなどの⽬的に合わせて変形する。
UI（紙）の変形はXY軸で⾏われる。
また、拡⼤しているように⾒せないように等
倍で変形しない。
円型は等倍で変形する。
Z軸を超えて変形しないのは、他のオブジェク
トをすり抜けてしまい現実ではありえない遷
移をするからである。
紙の厚みは固定である。

15. 2015-11-10 15
マテリアルデザインを知ろう｜⽬的
Z軸と影（シャドウ）
Z軸は⾼さの移動のみに絞られ、他のオブジェクトをすり抜ける事はしない。
またUIによって⾼さが異なる。
紙のUIは1dpの厚みを持つ
Z軸の標⾼・アニメーションによって
シャドウの量は異なる。

16. 質問です。

17. 2015-11-10 17
マテリアルデザインを知ろう｜⽬的
このテーブルの上にある
「紙」と「インク」はどれでしょう

18. 2015-11-10 18
マテリアルデザインを知ろう｜まとめ
マテリアルデザインはフラットデザインを
⽤いたデザインガイドラインである。
≠

19. マテリアルデザインの機能

20. アニメーション

21. 2015-11-10 21
マテリアルデザインの機能｜アニメーション
リップル（波紋）
タップすると波紋のアニメーションが起こる。

22. 2015-11-10 22
マテリアルデザインの機能｜アニメーション
隆起
タップすると紙は⼀度浮き上がり、そして沈みます。

23. 2015-11-10 23
マテリアルデザインの機能｜アニメーション
リーベル
円形で覆うアニメーション、コンテンツの遷移に使われる

24. 2015-11-10 24
マテリアルデザインの機能｜アニメーション
視覚的な遷移
コンテンツの遷移はタップした場所が広がり詳細が現れる。
※カード、リスト、グリッドで共通して使われる。

25. 2015-11-10 25
マテリアルデザインの機能｜アニメーション
アニメーションの順序
アニメーションはグリッドのコンテンツの順に
沿って動きます。
※コンテンツが⼀括でアニメーションするのはNGです。

26. 2015-11-10 26
マテリアルデザインの機能｜アニメーション
⼀環性のあるアニメーション
アニメーションは協調性がある必要があります。

27. 2015-11-10 27
マテリアルデザインの機能｜アニメーション
何度も押したくなるアニメーション
派⼿に動く事でユーザーを楽します。

28. スタイル

29. 2015-11-10 29
マテリアルデザインの機能｜スタイル
カラー設計
⼀つの主要⾊（プライマリー）と強調⾊（アクセント）によって成り⽴つ。
プライマリー アクセント

30. 2015-11-10 30
マテリアルデザインの機能｜スタイル
アクセントカラー
重要な要素に注⽬をさせるために使います。
（アクションボタン、スイッチ、スライダーなど）
アクセント

31. 2015-11-10 31
マテリアルデザインの機能｜スタイル
タイポグラフィ
Roboto(欧⽂)とNoto（和⽂）を使⽤します。
Android5.0以降にはRobotoは標準装備されています。
Roboto Noto

32. 2015-11-10 32
マテリアルデザインの機能｜スタイル
アイコン
予めシステム⽤のアイコンフォントが⽤意されています。

33. 2015-11-10 33
マテリアルデザインの機能｜スタイル
画像使⽤の原則
イラストや写真を使⽤する場合は、個⼈関連、情報と関連し、
喜びを表現した画像を選択します。

34. 2015-11-10 34
マテリアルデザインの機能｜スタイル
適切なサイズ
デバイスに応じて画像がボケないように最適な画像を出すように切り分けます。

35. 2015-11-10 35
マテリアルデザインの機能｜スタイル
アイコン
独⾃でアイコンを作る場合は24dpのグリッドシステムを使⽤します。

36. 2015-11-10 36
マテリアルデザインの機能｜スタイル
⽂字サイズ
レイアウトの機能タイプによって⽂字サイズの上限があります。

37. 2015-11-10 37
マテリアルデザインの機能｜スタイル
⾔葉
ユーザーには「あなた」と話しかけるように⽂章を作ります。
○

38. 2015-11-10 38
マテリアルデザインの機能｜スタイル
確認の⾔葉
ユーザーに動作をさせる場合は⼀貫した動詞を使⽤します。
○

39. 少し話題を替えましょう

40. 私最近ブログを
リニューアルしました。

41. 2015-11-10 41
ブログリニューアル

42. テーマ変えたら、
アクセス数が3割くらい
落ちました
＼(^o^)／

43. マテリアルデザイン怖い
（違う）

44. 閑話休題

45. レイアウト

46. 2015-11-10 46
マテリアルデザインの機能｜レイアウト
Seem（繋ぎ⽬）とStep（段差）
レイアウトの境界は、紙が「並ぶ」Seem(繋ぎ⽬)、
紙が「重なる」Stepとあります。
Seem Step
隣接した紙が
同時に動きます。
それぞれの紙が
別々に動きます。

47. 2015-11-10 47
マテリアルデザインの機能｜レイアウト
画⾯密度（DP）
画⾯に収まる画素数です
⾼密度スクリーンは、低密度のものよりインチあたりの画素数が⾼いです。
画⾯密度 =画⾯の幅（または⾼さ）のピクセル/インチ画⾯の幅（または⾼さ）インチ

48. 2015-11-10 48
マテリアルデザインの機能｜レイアウト
ブレークポイントシステム

49. 2015-11-10 49
マテリアルデザインの機能｜レイアウト
UI領域 Status bar

50. 2015-11-10 50
マテリアルデザインの機能｜レイアウト
App bar
App barはブランディングと
機能（ナビゲーション、検索、アクション）を持ちます。
Nav icon
Title Action icon
Menu icon

51. 2015-11-10 51
マテリアルデザインの機能｜レイアウト
ボタン
UIで使⽤するボタンは3種類で、デザインは優先度で決定します。
フローティング
アクションボタン
レイズドボタン フラットボタン

52. 2015-11-10 52
マテリアルデザインの機能｜レイアウト
フローティングアクションボタン
紙の上にならどこにでも配置できます。
また、Seem、Stepのどちらにも関連がある場合は跨いで表⽰できます。

53. 2015-11-10 53
マテリアルデザインの機能｜レイアウト
レイズドボタン
レイズドボタンとフラットボタンは汎⽤的に使⽤できる。
優先度で使い分けをする。
押すと、
浮かび上がります。

54. 2015-11-10 54
マテリアルデザインの機能｜レイアウト
フラットボタン
遷移先を複雑になり過ぎないように
ツールバーやダイアログはフラットボタンを使⽤します。
インクで作られた
影の無いボタン

55. 2015-11-10 55
マテリアルデザインの機能｜レイアウト
コンテンツ
コンテンツの表現は主にこの3つです。
リスト グリッド カード

56. 2015-11-10 56
マテリアルデザインの機能｜レイアウト
リスト
単⼀の連続した項⽬を垂直配置で複数配列する。
⼀つのリストの中に3⾏以上のテキストが⼊る場合はカードを使う。

57. 2015-11-10 57
マテリアルデザインの機能｜レイアウト
グリッド
連続した均⼀なデータの画像を複数配列して視覚的に選択させる
シャドウ無し

58. 2015-11-10 58
マテリアルデザインの機能｜レイアウト
カード
異なる要素で関連のある構成内容を表⽰するのに使⽤します。
カードコレクションは同⼀平⾯上でレイアウトされます。
シャドウ有り

59. 2015-11-10 59
マテリアルデザインの機能｜レイアウト
タブ
グループ分けされたコンテンツの切り替えに使⽤します。
※ナビゲーションとして使⽤しません。
タップとスワイプで
コンテンツの切り替えが
可能

60. どうです？
マテリアルデザインの事
少し⾝近に感じれましたか？

62. ご清聴ありがとうござました。
(*ゝω・*)

63. 嘘です！！
d(*´∀｀)b
もうちょい続きます。

64. マテリアルデザインの活⽤法

65. そんなのない！
（多分）

66. だって他所様の
デザインガイドですよ！

67. パクリダメゼッタイ

68. でも知っておくと
良い事もあるんですよ
（多分）

69. 2015-11-10 69
マテリアルデザインの活⽤法
• 概念を理解し応⽤して
⾃分のデザインガイドラインを作るため。
• ガイドラインを作る⼿前の設計で
認識を共有できる。
• Googleが作っているので受け⼊れられやすい
設計と提案が可能。

70. ガイドラインって必要？
Q.

71. 必要じゃボケ！！
A.

72. ガイドラインをつくるの
⼤変ですが、ちゃんと
メリットあります。

73. 2015-11-10 73
マテリアルデザインの活⽤法
他社ガイドライン
バーンワークス株式会社 某社畜

74. ガイドラインがあると
みんな仲良く、統⼀した品質を保てます！！

75. ブランディング
とても⼤事

76. ブランディング
とても⼤事

77. ご清聴ありがとうござました。
(*ゝω・*)

78. 嘘です！！
d(*´∀｀)b
※本⽇2度⽬
もうちょい続きます。

79. マテリアルデザインの
フレームワーク

80. 2015-11-10 80
マテリアルデザインのフレームワーク
Material Design Lite
Google謹製のフレーム
ワーク
最低限マテリアルデザン
を実装するためのもの
JSとCSSを合わせて
27KBという超軽量
License：Apache2 license

81. 2015-11-10 81
マテリアルデザインのフレームワーク
Materialize
マテリアルデザインの設
計を実装したフレーム
ワーク
UIコンポーネントが豊富
エンジニアに⼈気
License：MIT License

82. 2015-11-10 82
•マテリアルデザインのフレームワーク
Material Design for Bootstrap
Boostrapにマテリアルデ
ザイン要素を適応させた
もの
Bootstrapユーザーは
敷居が低く使える
License：MIT License

83. 参考サイト

84. 2015-11-10 84
参考サイト
公式ドキュメント
公式サイトが正義です。
最新の情報はここで確認！
Google Design

85. 2015-11-10 85
参考サイト
CSSのclassだけですでに
⽂字⾊と背景⾊が⽤意されている。
モックアップを作るのにとても便利
カラーパレット
google-material-color

86. 2015-11-10 86
参考サイト
カラーパレット
カラーパレットを作るのにとても
便利です
Material Palette

87. 2015-11-10 87
参考サイト
他の⼈が作ったマテリアルデザインの
サイトが⾒えます。
デザインギャラリー
MaterialUp

88. ご清聴ありがとうござましたやで。
(*ゝω・*)

89. 参考⽂献
公式ドキュメント
http://www.google.com/design/spec/material-design/introduction.html
マテリアルデザイン
http://www.slideshare.net/akioyonekura1/materialdesign-49393726