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

松井 沙織 @matu_sao

紙媒体でグラフィックデザインを３年→WEB系やりたいなーってベーシック入社、入った瞬間にアプリマーケがフルセイルになる←イマココ

グラフィックとかアプリUIデザイナーやってます。まつこって呼ばれてますけどDXではないです。身長148センチです。

よろしくお願いします　ヾ(:3ﾉｼヾ)ﾉｼ”

個人的に、最近 Googleが盛り上がっている

ような気がする

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

CMとか!!!!

OSとか端末も!!!!!!!!

今のは一般側の目線から

では開発・制作側の 目線でいうと？

マテリアルデザイン [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デザインの今後が 楽しみですね

皆さんもフラットか マテリアルか

ちょっと意識して見てみたら 面白いんじゃないでしょうか？

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