Transcript

• 1. 基調特別招待講演トラック マテリアルデザインの勘所 Material Design Nobuya Sato Experience Designer December 21st., 2014 – ABC 2014 Winter Twitter: #abc2014w Copyright © 2014 Secret Lab, Inc. All rights reserved.
• 2. 自己紹介 •  佐藤 伸哉 (@nobsato) •  UXデザイン、デザイン戦略 –  神戸芸術工科大学 工業デザイン学科卒、その後、1994からCD- ROMやゲーム、Webのデザイン –  主に大規模な企業サイトの情報設計や企業のグローバル戦略 を実行 –  Sonyでニューモバイル戦略やグループ横断のプラットフォー ム戦略、タブレット戦略を担当 –  米Seesmicで日本語化やAndroidやWP7のアプリ開発 –  UXとデザイン戦略の会社、Secret Lab, Inc.を設立 –  現在、米AKQAの東京オフィスの立ち上げに参画 2
• 3. 3 主な監訳書
• 4. Material Design 7 http://google.com/design/spec
• 5. Polymer 8 https://www.polymer-project.org/
• 6. Material Design with Polymer Copyright © 2014 Secret Lab, Inc. All rights reserved. 9 https://www.polymer-project.org/docs/ elements/material.html
• 7. Material Design for Bootstrap 10 http://fezvrasta.github.io/bootstrap-material-design/
• 8. 11 本日のトピック マテリアル デザイン Material Design
• 9. 13 http://bit.ly/MaterialDesignReel
• 10. 14
• 11. •  マテリアルデザインとは •  「MATERIAL（素材・物質）」 •  ガイドライン •  これからの可能性 15
• 12. マテリアルデザインとは What is Material Design 16
• 13. Material Design… “ We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. “ 17
• 14. 18
• 15. 19
• 16. Project Kennedy 20
• 17. 21
• 18. Versatile Design 22
• 19. 23
• 20. 24
• 21. 25
• 22. 26
• 23. 27
• 24. 28
• 25. 29
• 26. 30
• 27. Copyright © 2014 Secret Lab, Inc. All rights reserved. 31
• 28. Copyright © 2014 Secret Lab, Inc. All rights reserved. 32
• 29. 33
• 30. マテリアルデザイン 2つの目的 2 Goals of Material Design 34
• 31. 目的１：新しいビジュアル言語 「古典的な良いデザインの原則」と「技術と科学の 可能性とイノベーション」を統合したビジュアル言 語の開発。 35
• 32. 目的２：統一した体験ができるシステム モバイル原則もとより、タッチ、音声、マウス、と いった入力システムを考慮しつつ、プラットフォー ムとデバイスサイズを超えた、統一した体験ができ る単一の基幹システム。 36
• 33. マテリアルデザイン ３つの原則 3 Principles of Material Design 37
• 34. 原則１：メタファー デザインのメタファーに Material（素材・物質） の考えを取り入れて、 インターフェースやUX に紙とインク、光と表 面いった素材との関係 性を与えることで、オ ブジェクトの動きやUIの 関係性などにアフォー ダンスを生み出して、 ユーザーにとって分か りやすいデザインを提 供する。 38
• 35. 原則２：大胆に、生き生きと、意図的に デザインに印刷の世界 の考え方（グリッドシ ステム、タイポグラ フィ、スペース、色） を取り入れ、ユーザー を視覚的に誘い、UIオブ ジェクトに階層やフォ ーカスの意味合いを与 える。 意図的な余白や大きめ のタイポグラフィを使 ってユーザーのアクシ ョンを強調させる。 39
• 36. 原則３：モーションで意味を提供 状況の変化の様子やユ ーザーのアクションに 合わせてオブジェクト の形状が変わるなど、 常に自然で意味のある モーションを提供する。 全てのアクションはひ とつの環境で再現され ユーザー体験の継続性 を維持する。 反応やトランジション は常に一貫した体験を 提供する。 40
• 37. 41
• 38. 以前のビジュアル言語 HOLO DESIGN & CARD-STYLE 42
• 39. Copyright © 2014 Secret Lab, Inc. All rights reserved. 43 Holographic Design
• 40. Holographic Design 44
• 41. Copyright © 2014 Secret Lab, Inc. All rights reserved. 45
• 42. 46
• 43. Holo Design 47 Holoデザイン Android 3.2以降のビジュアル言語
• 44. 48
• 45. Card-style 49 Google now Android 4.1以降、本格的に導入
• 46. Card-style 50
• 47. Card-style 51
• 48. 52
• 49. マテリアルデザインの MATERIAL とは What is “Material” of Material Design? 53
• 50. マテリアルデザインの Material 54 ３つの構成要素でマ テリアルデザインの 世界観を構成 1.  環境 2.  素材の属性 3.  3次元空間でのオ ブジェクトの配置
• 51. 1. 環境：3次元 55
• 52. 1. 環境：光源、環境光（自然光）、影 56
• 53. 2. 素材の属性 57
• 54. 3. 3次元空間内でのオブジェクトの配置 58
• 55. 3. 3次元空間内でのオブジェクトの配置 59
• 56. 3. 3次元空間内でのオブジェクトの配置 60
• 57. 3. 3次元空間内でのオブジェクトの配置 61
• 58. 3. 3次元空間内でのオブジェクトの配置 62
• 59. 3. 3次元空間内でのオブジェクトの配置 63
• 60. 3. 3次元空間内でのオブジェクトの親子関係 64
• 61. 3. 3次元空間内でのオブジェクトの親子関係 65
• 62. 66
• 63. ガイドライン Google Guidelines 67
• 64. ガイドライン 68 http://google.com/design/spec/material-design/
• 65. まとめ Material Design is not a design guideline. 69
• 66. 新しいデザイン思想 70 Material Designは、デザインガイドラインではなく、 デザイン思想。
• 67. 新しいデザインフレームワーク Material Designは、活版印刷の時代から築きあげら れた古き良きデザインを最新の技術を使って表現し たデジタルのためのデザインフレームワーク。 71
• 68. 新しいプラットフォーム 72 Material Designは、様々なデバイス、プラットフ ォームに対応した、Googleが新たに既存のプラッ トフォームの上につくる、新しいプラットフォ ーム。
• 69. 既存のプラットフォーム上につくる？ 73 Google Search for iPhone inbox for iPhone Spreadsheet for iPhone
• 70. 74 http://google.com/design
• 71. Thank You Copyright © 2014 Secret Lab, Inc. All rights reserved. 75 Nobuya Sato Experience Designer nobsato@secret-lab.jp http://google.com/+nobsato http://about.me/nobsato http://slideshare.com/nobsato