狠狠撸

狠狠撸Share a Scribd company logo
マテリアルデザイン
ってなんですか?
松井沙織 @matu_sao
松井 沙織
@matu_sao
紙媒体でグラフィックデザインを3年→WEB系やりたい
なーってベーシック入社、入った瞬間にアプリマーケがフ
ルセイルになる←イマココ
グラフィックとかアプリUIデザイナーやってます。まつ
こって呼ばれてますけどDXではないです。身長148センチ
です。
よろしくお願いします?ヾ(:3??ヾ)??”
個人的に、最近
Googleが盛り上がっている
ような気がする
モバイルフレンドリー!!
颁惭とか!!!!
翱厂とか端末も!!!!!!!!
今のは一般側の目線から
では開発?制作側の
目線でいうと?
マテリアルデザイン
[Material Design]
というGoogleの考えた、Googleでのデザイン
ガイドライン(考え方)が個人的にアツい!!
気がする!
なにがアツいの
マテリアルデザイン?
? 手触りのある表面の表現
? 印刷物デザインの応用
? 修飾ではなく意味を伝える動き
? 画面サイズの変化に適応するデザイン
うーん???わかんない!!!!
少し前からAppleが
やっている
フラットデザインと
どう違うの?
ちなみに、左がスキューモーフィックデザイン(リッチ
デザインとも言われてた)右がフラットデザイン。
ざっくり解説すると…
フラットデザイン:極力シンプルに、無駄な修飾
をしない。リアルな質感より2Dに落とし込んだ
効果などを用いたデザイン。
参考:https://www.youtube.com/watch?v=dXKuASAD_4Y&hd=1
マテリアルデザイン:Googleの考えたGoogleの
デザインルール。シンプルだけど直感的にわかる
自然の原理を用いたデザイン。
参考:http://www.google.com/design/
マテリアル デザイン
マテリアル =「素材?原材料 」
ここでは、紙とインク(現実にあるもの)が素材。
画面の中に紙があり、それらが重なっていたり、折
れたり、指に吸い付くように浮き上がったり、イン
クが広がるようなアニメーションで、自然の法則に
基づいたデザインルール?ガイドラインのこと。
参考:https://www.google.com/design/spec/material-design/introduction.html
今のGoogleのデザインは
全てマテリアルデザインで
統一されています
マテリアルテ?サ?インってなんですか?
でもなんでフラットデザイン
とかあるのに
マテリアルデザインなの?
20XX年
Googleは混沌に満ちていた…
か、どうか知りませんが、当時のスマートフォンが登
場し始めてモバイル向けのサービスもやり始めた、だ
けどWebから見た表示(デザイン)やモバイル?モバ
イルアプリから見た表示もバラバラで統一感がなかっ
た。
モバイルから見たらここにボタンあるのに、Webから
見ると違う場所にあったりめっっちゃ見づらいじゃん!
じゃあどうしよっか…
世の中が急速にモバイル化し始め、正直モバイル
戦略遅れ気味のGoogle。ここら辺で先を見据え
る戦略が必要だと考え始める。
Webでもモバイルでも同じUXが得られないとダ
メだ! → 全ての体験を統一しよう! → この際デザ
インも統一しよう!!→Googleデザイナーが本気出
してデザインを考えた結果wwwww
マテリアルデザイン
という考え方ができた。
制作者、開発者だけでなく、
ユーザーにも一貫したものを
届けられるようになった。
しかしいいことばかり
じゃないぞマテリアルデザイン!!
フレームワークがしっかりしてるということは?
? みんな同じルールで作るので、似てるものが多く
なる。
? オリジナルのものを作ろうとした時、ちょっと大
変。
? あくまでもユーザーにわかりやすく使ってもらう
ための考え方の一つだよ、くらいが今の所いいか
も。
2014年6月に
発表されたけれど
まだ実例や導入例が少ない
しかし
いずれGoogleを語る上で
大切な要素になるのでは…?
Googleデザインの今後が
楽しみですね
皆さんもフラットか
マテリアルか
ちょっと意識して見てみたら
面白いんじゃないでしょうか?
ご静聴
ありがとうございました!!

More Related Content

Viewers also liked (14)

エンジニアリングするデザイナーが领域を超えて见えたこと
エンジニアリングするデザイナーが领域を超えて见えたことエンジニアリングするデザイナーが领域を超えて见えたこと
エンジニアリングするデザイナーが领域を超えて见えたこと
Mayumi Narisawa
?
第二回Android training4desinger 2
第二回Android training4desinger 2第二回Android training4desinger 2
第二回Android training4desinger 2
Kengo Suzuki
?
自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话
自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话
自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话
Reiko Gotou
?
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
hiroki-ishikawa
?
Size class_yucovin_collabotips01
Size class_yucovin_collabotips01Size class_yucovin_collabotips01
Size class_yucovin_collabotips01
Nino SAKUMA
?
[会計freee] 1. 機能紹介
[会計freee] 1. 機能紹介[会計freee] 1. 機能紹介
[会計freee] 1. 機能紹介
蹿谤别别别株式会社
?
マテリ〇ルデザイン配色のサンプル
マテリ〇ルデザイン配色のサンプルマテリ〇ルデザイン配色のサンプル
マテリ〇ルデザイン配色のサンプル
貴明 佐藤
?
クラウド会計ソフトfreee - ファイルホ?ックス
クラウド会計ソフトfreee - ファイルホ?ックスクラウド会計ソフトfreee - ファイルホ?ックス
クラウド会計ソフトfreee - ファイルホ?ックス
蹿谤别别别株式会社
?
サイボウズの公司风土
サイボウズの公司风土サイボウズの公司风土
サイボウズの公司风土
chika_nakazawa
?
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付きデザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
?
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
?
エンジニアのための鲍齿入门
エンジニアのための鲍齿入门エンジニアのための鲍齿入门
エンジニアのための鲍齿入门
Kazuyuki CHINDA
?
【プレゼン】见やすいプレゼン资料の作り方【初心者用】
【プレゼン】见やすいプレゼン资料の作り方【初心者用】【プレゼン】见やすいプレゼン资料の作り方【初心者用】
【プレゼン】见やすいプレゼン资料の作り方【初心者用】
MOCKS | Yuta Morishige
?
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
?
エンジニアリングするデザイナーが领域を超えて见えたこと
エンジニアリングするデザイナーが领域を超えて见えたことエンジニアリングするデザイナーが领域を超えて见えたこと
エンジニアリングするデザイナーが领域を超えて见えたこと
Mayumi Narisawa
?
第二回Android training4desinger 2
第二回Android training4desinger 2第二回Android training4desinger 2
第二回Android training4desinger 2
Kengo Suzuki
?
自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话
自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话
自分でできることを増やしてみるというのは结构楽しかったという新米颈翱厂开発者の小话
Reiko Gotou
?
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
hiroki-ishikawa
?
Size class_yucovin_collabotips01
Size class_yucovin_collabotips01Size class_yucovin_collabotips01
Size class_yucovin_collabotips01
Nino SAKUMA
?
マテリ〇ルデザイン配色のサンプル
マテリ〇ルデザイン配色のサンプルマテリ〇ルデザイン配色のサンプル
マテリ〇ルデザイン配色のサンプル
貴明 佐藤
?
クラウド会計ソフトfreee - ファイルホ?ックス
クラウド会計ソフトfreee - ファイルホ?ックスクラウド会計ソフトfreee - ファイルホ?ックス
クラウド会計ソフトfreee - ファイルホ?ックス
蹿谤别别别株式会社
?
サイボウズの公司风土
サイボウズの公司风土サイボウズの公司风土
サイボウズの公司风土
chika_nakazawa
?
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付きデザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
?
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
?
エンジニアのための鲍齿入门
エンジニアのための鲍齿入门エンジニアのための鲍齿入门
エンジニアのための鲍齿入门
Kazuyuki CHINDA
?
【プレゼン】见やすいプレゼン资料の作り方【初心者用】
【プレゼン】见やすいプレゼン资料の作り方【初心者用】【プレゼン】见やすいプレゼン资料の作り方【初心者用】
【プレゼン】见やすいプレゼン资料の作り方【初心者用】
MOCKS | Yuta Morishige
?
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
?

Similar to マテリアルテ?サ?インってなんですか? (20)

デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめデザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
Aimi Shinohara
?
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO JamExperience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Akihiko Kodama
?
厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409
schoowebcampus
?
幼稚园児はできている超高速笔顿颁础
幼稚园児はできている超高速笔顿颁础幼稚园児はできている超高速笔顿颁础
幼稚园児はできている超高速笔顿颁础
mit mit
?
テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!
テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!
テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!
Hideki Akiba
?
Think, Mind, Vision etc..
Think, Mind, Vision etc..Think, Mind, Vision etc..
Think, Mind, Vision etc..
c-mitsuba
?
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
?
新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)
新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)
新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)
NodokaFujimoto
?
新卒2ヶ月で础滨を社会実装させた3つのデザイン
新卒2ヶ月で础滨を社会実装させた3つのデザイン新卒2ヶ月で础滨を社会実装させた3つのデザイン
新卒2ヶ月で础滨を社会実装させた3つのデザイン
NodokaFujimoto
?
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
Kenta Nakamura
?
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
Takashi Kitamura
?
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
?
厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409
schoowebcampus
?
厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409
Ryosuke Matsumoto
?
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
裕規 山本
?
鲍滨は「习うより惯れろ」
鲍滨は「习うより惯れろ」鲍滨は「习うより惯れろ」
鲍滨は「习うより惯れろ」
tomo tsubota
?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
Takahiro YAMAGUCHI
?
キャリア设计的な话
キャリア设计的な话キャリア设计的な话
キャリア设计的な话
祐磨 堀
?
デザイナー「にも」デザインを 任せてもらうために
デザイナー「にも」デザインを 任せてもらうためにデザイナー「にも」デザインを 任せてもらうために
デザイナー「にも」デザインを 任せてもらうために
Tomoko Nishina
?
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
?
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめデザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
Aimi Shinohara
?
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO JamExperience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Akihiko Kodama
?
厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409
schoowebcampus
?
幼稚园児はできている超高速笔顿颁础
幼稚园児はできている超高速笔顿颁础幼稚园児はできている超高速笔顿颁础
幼稚园児はできている超高速笔顿颁础
mit mit
?
テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!
テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!
テ?サ?インエンシ?ニア?ホ?ータ?ーレスな时代を楽しもう!
Hideki Akiba
?
Think, Mind, Vision etc..
Think, Mind, Vision etc..Think, Mind, Vision etc..
Think, Mind, Vision etc..
c-mitsuba
?
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」Fukui Biz Cafe Side.I  #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
?
新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)
新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)
新卒2ヶ月で础滨を社会実装させた3つのデザイン(修正前)
NodokaFujimoto
?
新卒2ヶ月で础滨を社会実装させた3つのデザイン
新卒2ヶ月で础滨を社会実装させた3つのデザイン新卒2ヶ月で础滨を社会実装させた3つのデザイン
新卒2ヶ月で础滨を社会実装させた3つのデザイン
NodokaFujimoto
?
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
Kenta Nakamura
?
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
Takashi Kitamura
?
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
?
厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409
schoowebcampus
?
厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409厂肠丑辞辞讲演资料130409
厂肠丑辞辞讲演资料130409
Ryosuke Matsumoto
?
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
裕規 山本
?
鲍滨は「习うより惯れろ」
鲍滨は「习うより惯れろ」鲍滨は「习うより惯れろ」
鲍滨は「习うより惯れろ」
tomo tsubota
?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
Takahiro YAMAGUCHI
?
キャリア设计的な话
キャリア设计的な话キャリア设计的な话
キャリア设计的な话
祐磨 堀
?
デザイナー「にも」デザインを 任せてもらうために
デザイナー「にも」デザインを 任せてもらうためにデザイナー「にも」デザインを 任せてもらうために
デザイナー「にも」デザインを 任せてもらうために
Tomoko Nishina
?
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
?

マテリアルテ?サ?インってなんですか?