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.

2015/08/08 第8回G-Study発表資料 5分でマテリアルデザインを読む

1,601 views

Published on

15/08/08 に行われた第8回G-Studyのライトニングトークで使用したスライドです。

Published in: Design
  • Be the first to comment

  • Be the first to like this

2015/08/08 第8回G-Study発表資料 5分でマテリアルデザインを読む

  1. 1. 5分で マテリアルデザインを読む 2015/08/08 第8回G-Study
  2. 2. 自己紹介 名前 吉田 剛 (ヨシダ ツヨシ) 職業 フロント寄りのデベロッパー (元Flash使い) スマホUI講師 イカしてると思うブキ わかばシューター 2  
  3. 3. 3   マテリアルデザイン
  4. 4. 4   https://www.google.com/design/spec/material-design/introduction.html
  5. 5. 5   よし!読むか!
  6. 6. 6  
  7. 7. 7   英語だ、、 専門用語多い、、
  8. 8. 8   訳したよ!
  9. 9. 章立て 9   6. コンポーネント 7. パターン 8. ユーザビリティ 9. リソース 1. マテリアルデザイン 2. マテリアル 3. アニメーション 4. スタイル 5. レイアウト
  10. 10. 10   5分じゃ無理!
  11. 11. 11   各章まとめました。 ニュアンス掴んで! あとは各自で読んで、、、
  12. 12. 5分後に マテリアルデザインを読む 2015/08/08 第8回G-Study
  13. 13. 13   さっそく、、 と行く前に、、
  14. 14. 14   ※更新されます
  15. 15. 15   1. マテリアルデザイン Material design
  16. 16. 1. マテリアルデザイン 16   • 新しいデザインルール • 統一性・法則 • 様々な環境に適応可能 • 紙とインク
  17. 17. 17   2. マテリアル What is material?
  18. 18. 2. マテリアル 18   • 新しい概念の基本物質 • 厚さ一定で層状 • 縦横のみ伸び縮みする • 色や画像は表面の模様
  19. 19. 2. マテリアル 19   • 新しい概念の基本物質 • 厚さ一定で層状 • 縦横のみ伸び縮みする • 色や画像は表面の模様 紙 イ ン ク
  20. 20. 2. マテリアル 20  
  21. 21. 21   3. アニメーション Animation
  22. 22. 3. アニメーション 22   • 簡潔で意味があること • 自然であること • 操作への適切な反応 • ワクワクは細部に宿る
  23. 23. 3. アニメーション 23   • 簡潔で意味があること • 自然であること • 操作への適切な反応 • ワクワクは細部に宿る ← 第7回G-Study  “動き”を作るポイント
  24. 24. 24   http://cda244.com/2015/01/11-505/
  25. 25. 25   8まで飛びます 4∼7は後ほど
  26. 26. 26   8. ユーザビリティ Usability
  27. 27. 8. ユーザビリティ 27   • アクセシビリティ • ローカライズ
  28. 28. 28   4∼7は 決まり事・ルール が続きます
  29. 29. 29   4. スタイル Style
  30. 30. 4. スタイル 30   マテリアルデザインを 構成する以下要素のルール 色使い・アイコン・画像・文字・文章
  31. 31. 4. スタイル 31  
  32. 32. 32   5. レイアウト Layout
  33. 33. 5. レイアウト 33   色々な環境でマテリアル デザインを実現する基本 ルール 単位・構造・可変 etc…
  34. 34. 5. レイアウト 34  
  35. 35. 35   6. コンポーネント Components
  36. 36. 6. コンポーネント 36   各パーツ説明と決まり事 ボタン・テーブル・ダイアログ・ タブ・テキスト入力 etc…
  37. 37. 6. コンポーネント 37  
  38. 38. 38   7. パターン Patterns
  39. 39. 7. パターン 39   よく使われる要素や画面、 シーンのパターン エラー表示・起動画面・検索・ スクロール・データ形式 etc…
  40. 40. 7. パターン 40  
  41. 41. 41   9. 素材 Resources
  42. 42. 9. 素材 42   制作に役立つ素材を用意 しています カラーパレット・フォント・ テンプレート・アイコン etc…
  43. 43. 43   以上。
  44. 44. 44   ニュアンス掴んだ?
  45. 45. 45   さぁ!読もう! ありがとうございました
  46. 46. 46   おまけ
  47. 47. 47   Material Design Lite
  48. 48. 48   http://www.getmdl.io/

×