Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Gunosy 
Material Design Study 
Tsuyoshi Higuchi @ tyshgc 
What is Material Design? 
マテリアルデザインってなんだろう? 
2014, Sept. 25
Gunosy Material Design Study 
PROFILE 
樋口 剛 Tsuyoshi Higuchi 
GunosyのUIデザイナー・フロントエンドエンジニアの傍ら、 
UX設計なども担当している良くも悪くも10年選手。 
...
Gunosy Material Design Study 
Index 
1 … Material Designの目的 
2 … Material Designとは 
3 … 気になるところのまとめ
Gunosy Material Design Study 
Material Designの目的 
マルチデバイス時代の進化にあわせ、過去に築かれてきたデザインの 
原則や理論、技術革新と科学の可能性をベースに、 
様々なデバイス上でサービスを...
Gunosy Material Design Study 
デバイスによって操作・体験が変わる 
現実世界にないモノの動き 
すぐに認知できないGUIコンポーネント 
User 
ストレス 
No Platform Consistency!!
デバイスやプラットフォームの上に 
生活があるのではなく、 
“ 
生活の中にデバイスやプラットフォームがある 
“ 
Gunosy Material Design Study 
ユーザーの使い慣れた環境から逸脱すると離脱率は上がる 
物理法則...
Gunosy Material Design Study 
Material Designとは…
Gunosy Material Design Study 
Material is the metaphor Bold, graphic, intentional Motion provides meaning 
社会的に 
蓄積された 
デザ...
Gunosy Material Design Study 
全部話すと長いので、 
気になる点だけまとめます
Gunosy Material Design Study 
Animation 
統一されたイージングSwift out 
linear は NG! 
動きには意味がある 
イージングについて知りたい方はこちらがオススメ 
Easing Fun...
Gunosy Material Design Study 
Responsive Interaction 
ユーザーの行動に対して 
アニメーションで 
処理が行われた事を表現する。 
タップしても何も変化がない = 適切に処理されたかわかりに...
Gunosy Material Design Study 
UI Color Palette 
カラーはメインカラーとアクセント 
カラーの組み合わせで構成され、 
Web・Android・iOSに対応するため 
のカラーパレットが用意されてい...
Gunosy Material Design Study 
Floating Action Button 
Material Designの肝ともいうべき 
Floating Action Button 
1 サイズは2通り2 最も重要なアクシ...
Gunosy Material Design Study 
Layout and Shadow 
Material Designでは紙を 
メタファーとして扱い、 
意味(アフォーダンス)を 
持たせる。 
Floating Action Bu...
Gunosy Material Design Study 
最後に…
Gunosy Material Design Study 
So when we talk about the physics of things, we're not trying to copy 
the real world. We're...
Gunosy Material Design Study 
所感
Gunosy Material Design Study 
Material Designとは 
UIデザインやUXアーキテクチャにおける哲学
Gunosy 
Material Design Study 
Thank you 
ご清聴ありがとうございました! 
Tsuyoshi Higuchi @ tyshgc 
俺の”Material Designまとめ”リンク 
http://ra...
Upcoming SlideShare
Loading in …5
×

Gunosy Material Study : What is Material Design?

@tyshgcによるMaterial Designの解釈・解読まとめ。
Gunosyにて行われた勉強会のスライドです。
動画版はこちら https://vimeo.com/107162632

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Gunosy Material Study : What is Material Design?

  1. 1. Gunosy Material Design Study Tsuyoshi Higuchi @ tyshgc What is Material Design? マテリアルデザインってなんだろう? 2014, Sept. 25
  2. 2. Gunosy Material Design Study PROFILE 樋口 剛 Tsuyoshi Higuchi GunosyのUIデザイナー・フロントエンドエンジニアの傍ら、 UX設計なども担当している良くも悪くも10年選手。 Gunosyには2014年7月にジョイン。 前職はGunosy初期UI設計をした某社。
  3. 3. Gunosy Material Design Study Index 1 … Material Designの目的 2 … Material Designとは 3 … 気になるところのまとめ
  4. 4. Gunosy Material Design Study Material Designの目的 マルチデバイス時代の進化にあわせ、過去に築かれてきたデザインの 原則や理論、技術革新と科学の可能性をベースに、 様々なデバイス上でサービスを利用したいユーザーへ共通の操作体験 を提供する事が目的。 デバイス・プラットフォームを問わないUXガイドラインが必要
  5. 5. Gunosy Material Design Study デバイスによって操作・体験が変わる 現実世界にないモノの動き すぐに認知できないGUIコンポーネント User ストレス No Platform Consistency!!
  6. 6. デバイスやプラットフォームの上に 生活があるのではなく、 “ 生活の中にデバイスやプラットフォームがある “ Gunosy Material Design Study ユーザーの使い慣れた環境から逸脱すると離脱率は上がる 物理法則やモノの歴史は 無視できない
  7. 7. Gunosy Material Design Study Material Designとは…
  8. 8. Gunosy Material Design Study Material is the metaphor Bold, graphic, intentional Motion provides meaning 社会的に 蓄積された デザイン理論 フィードバック による 体験の継続性 物理的で 自然な 形状・動き Visual Language Material Design
  9. 9. Gunosy Material Design Study 全部話すと長いので、 気になる点だけまとめます
  10. 10. Gunosy Material Design Study Animation 統一されたイージングSwift out linear は NG! 動きには意味がある イージングについて知りたい方はこちらがオススメ Easing Function 早見表 http://easings.net/
  11. 11. Gunosy Material Design Study Responsive Interaction ユーザーの行動に対して アニメーションで 処理が行われた事を表現する。 タップしても何も変化がない = 適切に処理されたかわかりにくい
  12. 12. Gunosy Material Design Study UI Color Palette カラーはメインカラーとアクセント カラーの組み合わせで構成され、 Web・Android・iOSに対応するため のカラーパレットが用意されている。 Material Designは原色をベースに、 道路標識や現代建築・スポーツ用の コートなどを参考にし、瞬時に認知 できるように設計されている。
  13. 13. Gunosy Material Design Study Floating Action Button Material Designの肝ともいうべき Floating Action Button 1 サイズは2通り2 最も重要なアクションを 基本画面に1つ配置 電話アプリの場合 電話するホームへ 3 関連した要素の場合は 複数設置可能 音楽アプリの場合 再生に関連している
  14. 14. Gunosy Material Design Study Layout and Shadow Material Designでは紙を メタファーとして扱い、 意味(アフォーダンス)を 持たせる。 Floating Action Button Background Status Bar Material(素材)とメタファー(揶揄)でユーザーの脳に対して 実世界と同じ刺激を与えて、脳の負担を軽くしいる。
  15. 15. Gunosy Material Design Study 最後に…
  16. 16. Gunosy Material Design Study So when we talk about the physics of things, we're not trying to copy the real world. We're trying to make it natural for your brain, for you mind, while still unleashing this thing that software can do which is be this totally mutable, transformable, truly magical type of experience. So that's kind of the line that we're trying to dance on. 僕らはリアルな物理を使うとはいってますが、 リアル世界をコピーしようとは考えていません。 ただ、脳や心にとって自然なものを作ろうとしているだけです。 ソフトウェアの可能性を開いて、変化のある本当にマジカルな 体験を作っていく、僕らはそんなラインの上でダンスしようと しています。 マティアス・デュアルテ氏 Matias Duarte 引用元:マテリアル・デザインって何? Androidデザイン責任者にインタヴュー Brent Rose-Gizmodo US 翻訳 miho
  17. 17. Gunosy Material Design Study 所感
  18. 18. Gunosy Material Design Study Material Designとは UIデザインやUXアーキテクチャにおける哲学
  19. 19. Gunosy Material Design Study Thank you ご清聴ありがとうございました! Tsuyoshi Higuchi @ tyshgc 俺の”Material Designまとめ”リンク http://raindrop.io/collection/215731

×