Not 2 L8 JKでもわかるMaterial 3

Transcript

1. Do not H8, Not too L8, G8 Material 3 ColorScheme Card Product Development Division > Clien Group > Mobile Team Lead Kodai Kikuchi (bigbackboom)
2. Kodai Kikuchi • モバイルエンジニア • 趣味： ◦ ゲーム ◦ バスケ
3. Material 3とは？ 3
4. Material 3とは？
5. Material 3とは？ Googleのオープンソースデザインシステム Android/Flutterのモバイルフレームワークで使われている 5
6. Material 3とは？ ちゃんと対応していない？ こんなことでお困りでは？ 6
7. Material 3とは？ 7 • モバイルのアクセシビリティの対応が⼤変 • デザイナーとエンジニア間でのコンポーネントの設定で 定期的なやりとが常に起きる
8. Material 3とは？ 今回はちょっと Material３の⾊概念が ややこしいので 話していければ 8
9. Basics
10. Basic 前提 10
11. Basic Material3 は デザインフレームワーク 11
12. Basic 12 • 決められたルールに沿ってデザインを⾏う • 沿えないのであれば、そもそも使わない • ルールに沿うことで以下のことが担保される ◦ ライトモード‧ダークモードでの挙動 ◦ コンポーネント単位の⾊使い ◦ カラーコントラストのアクセシビリティ ◦ コンポーネントの細かな振る舞い
13. Basic iOSのHIGはガイドライン なので根本から考え⽅が違う 13
14. Color Scheme
15. Color Scheme Material３では デザイナーの⾊の選択権は ほぼありません 15
16. Color Scheme 16 Source カラー を設定
17. Color Scheme 17 ⾊を⾃動⽣成
18. Color Scheme 18 Sourceカラーは主に２種類 • Static Color： ◦ 好きな⾊を設定する • Dynamicカラー： ◦ ユーザーの端末の背景⾊などが⾃動選択される
19. Color Scheme 19 えっ、でも ⾊んな⾊を選択したい？
20. Color Scheme 20 やめましょう
21. Color Role
22. Color Scheme ⾊は役割で選ぶ 22
23. Color Scheme 23 • Primary, Secondary, Tertiar： ◦ アクセント⾊ • Surface： ◦ 背景⾊ • Container： ◦ ボックスなど前景UIの背 景 • On： ◦ アクセント、Surface、 Containerに載せる⾊ • Error: ◦ エラー⾊ • Outline: ◦ ボーダー⾊ • Fixed: ◦ ライト‧ダークモードに 左右されない⾊
24. Color Scheme これらの役割を 組み合わせたのが こちら 24
25. Color Role 25
26. Color Role 26
27. Color Scheme 27 えっ？ コーポレートカラーを そのまま使いたい？
28. Color Scheme 28 ダメです
29. Color Senamtics
30. Color Semantics 何を根拠に⾊は ⾃動⽣成されているのか？ 30
31. Color Scheme 31 Source カラー
32. Color Scheme 32
33. Color Semantics 33 HCT(Hue, Chroma, Tone) ◦ L*a*b*’sの明度とCAM16’sという⾊空間の合わせ技 ◦ Hue(⾊相)、Chroma(彩度)、Tone(濃淡)
34. Color Semantics 34 各ロール(Primary, Secondary, etc)に設定された閾値に ⾃動でChromaとToneを寄せていく 閾値はMaterial Color Utilitiesに定義されている
35. Color Scheme 35
36. Color Scheme 36 Primary (Light): targetTone = 40 maxChroma ≒ 32〜36
37. Color Scheme 37 Primary (Light): targetTone = 40 maxChroma ≒ 32〜36 Hue: 142 Chroma: 36 Tone: 40
38. Color Scheme 38
39. Color Scheme 39
40. 伝えたかったこと
41. Color Scheme ⾔いたかったことはこれ 41
42. Color Scheme フレームワークを使うなら ルールは守ろう 42
43. Color Scheme Rails, React, iOS, Flutter, ビジネス なんでも話は同じ 43
44. Color Scheme 楽するために 使っているんだから フレームをぶち壊す⾏動は 慎みましょう 44
45. Color Scheme G8 N8, M8! Grate Night, Mate! 45
46. Reference
47. Reference 47 Science of Color Design Color Scheme Color Role Material Theme Builder