Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.081 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

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

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

×