社内向け勉強会の、ゆるふわマテリアルデザイン講座。

1. マテリアルデザイン
ってなんですか？
松井沙織 @matu_sao

2. 松井 沙織
@matu_sao
紙媒体でグラフィックデザインを３年→WEB系やりたい
なーってベーシック入社、入った瞬間にアプリマーケがフ
ルセイルになる←イマココ
グラフィックとかアプリUIデザイナーやってます。まつ
こって呼ばれてますけどDXではないです。身長148センチ
です。
よろしくお願いします ヾ(:3ﾉｼヾ)ﾉｼ”

3. 個人的に、最近
Googleが盛り上がっている
ような気がする

4. モバイルフレンドリー!!

5. CMとか!!!!

6. OSとか端末も!!!!!!!!

7. 今のは一般側の目線から
では開発・制作側の
目線でいうと？

8. マテリアルデザイン
[Material Design]
というGoogleの考えた、Googleでのデザイン
ガイドライン（考え方）が個人的にアツい!!
気がする!

9. なにがアツいの
マテリアルデザイン?
• 手触りのある表面の表現
• 印刷物デザインの応用
• 修飾ではなく意味を伝える動き
• 画面サイズの変化に適応するデザイン
うーん・・・わかんない!!!!

10. 少し前からAppleが
やっている
フラットデザインと
どう違うの?

11. ちなみに、左がスキューモーフィックデザイン（リッチ
デザインとも言われてた）右がフラットデザイン。

12. ざっくり解説すると…
フラットデザイン：極力シンプルに、無駄な修飾
をしない。リアルな質感より2Dに落とし込んだ
効果などを用いたデザイン。
参考：https://www.youtube.com/watch?v=dXKuASAD_4Y&hd=1
マテリアルデザイン：Googleの考えたGoogleの
デザインルール。シンプルだけど直感的にわかる
自然の原理を用いたデザイン。
参考：http://www.google.com/design/

13. マテリアル デザイン
マテリアル ＝「素材・原材料 」
ここでは、紙とインク（現実にあるもの）が素材。
画面の中に紙があり、それらが重なっていたり、折
れたり、指に吸い付くように浮き上がったり、イン
クが広がるようなアニメーションで、自然の法則に
基づいたデザインルール・ガイドラインのこと。
参考：https://www.google.com/design/spec/material-design/introduction.html

14. 今のGoogleのデザインは
全てマテリアルデザインで
統一されています

16. でもなんでフラットデザイン
とかあるのに
マテリアルデザインなの？

17. 20XX年
Googleは混沌に満ちていた…
か、どうか知りませんが、当時のスマートフォンが登
場し始めてモバイル向けのサービスもやり始めた、だ
けどWebから見た表示（デザイン）やモバイル・モバ
イルアプリから見た表示もバラバラで統一感がなかっ
た。
モバイルから見たらここにボタンあるのに、Webから
見ると違う場所にあったりめっっちゃ見づらいじゃん！

18. じゃあどうしよっか…
世の中が急速にモバイル化し始め、正直モバイル
戦略遅れ気味のGoogle。ここら辺で先を見据え
る戦略が必要だと考え始める。
Webでもモバイルでも同じUXが得られないとダ
メだ! → 全ての体験を統一しよう! → この際デザ
インも統一しよう!!→Googleデザイナーが本気出
してデザインを考えた結果wwwww

19. マテリアルデザイン
という考え方ができた。
制作者、開発者だけでなく、
ユーザーにも一貫したものを
届けられるようになった。

20. しかしいいことばかり
じゃないぞマテリアルデザイン!!
フレームワークがしっかりしてるということは？
• みんな同じルールで作るので、似てるものが多く
なる。
• オリジナルのものを作ろうとした時、ちょっと大
変。
• あくまでもユーザーにわかりやすく使ってもらう
ための考え方の一つだよ、くらいが今の所いいか
も。

21. 2014年6月に
発表されたけれど
まだ実例や導入例が少ない
しかし
いずれGoogleを語る上で
大切な要素になるのでは…？

22. Googleデザインの今後が
楽しみですね
皆さんもフラットか
マテリアルか
ちょっと意識して見てみたら
面白いんじゃないでしょうか？

23. ご静聴
ありがとうございました!!