ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode

UI/UXデザイナーLT会 - vol.6 #uiuxdesignerslt の登壇資料です。
https://rakus.connpass.com/event/235515/

Transcript

1. 株式会社JX通信社 NewsDigest デザイナー 羽野めぐみ @featherplain ダークモー ド対応に 困ったときの便利な処方箋 Material Designでつくるカラースキーム
2. ニュース速報や地震・災害速報を いちはやく届けるニュースアプリ 累計ダウンロード数 約 500万件 3分前 東京都で最大震度3の地震が発生 速報ニュース 総合 社会 国際 地域 スポーツ グルメ 東京メトロ丸ノ内線で運転見合わせ ノーベル化学賞候補に日本研究者　米の 学術情報会社 31分前 NYダヴ、史上最高値を更新　追加経済 対策に期待感 21分前 政府検討中の新法案概要が判明、懸念高 まる　12日にも国会提出か 6分前 主要ニュース リアルタイムに配信中 設定地域 東京都新宿区 変更する
3. NewsDigestユーザーの 皆さんの声を集めました
4. ユーザーの皆さんの声
5. ユーザーの皆さんの声 途切れない ダークモードの要望ッ...!!
6. そんな中、 いま開発チームで取り組んでいること
7. ネイティブ実装から Flutterに置き換え中 FlutterはGoogle製のフレームワークで ひとつのソースコードでクロスプラットフォーム対応ができます そんな中、 いま開発チームで取り組んでいること
8. つまり、 ゼロからコードを組み直す作業 将来を見据えたカラー設計を考える
9. でもダークモード対応やったことないんだよな... どうやろうかな 社内でもあまり知見がない状態
10. Material Designを活用する https://www.figma.com/community/file/1035203688168086460/Material-3-Design-Kit 設計の 模範解答
11. Light Theme Dark Theme
12. NewsDigest向けに アレンジしたのがこちら
13. Light Theme Dark Theme
14. このスライドの配色も、 新しいカラースキームから選んでいます ライトモード カラースキームの 仕組みを解説します
15. このスライドの配色も、 新しいカラースキームから選んでいます ダークモード カラースキームの 仕組みを解説します
16. Key Colors ↓ Tonal Palettes ↓ Themes Primary Key Color Primary40 0 10 20 30 40 50 60 70 80 90 95 99 100 Primary Primary40 On Primary Primary100 (white) Primary Primary80 On Primary Primary10
17. Key Colors Material Designで定義されている5つの主要カラー Brand Color NewsDigest Key Color #32C4D7 | =187, =77, =84 H S B H S B ueは色相 aturationは彩度 (色の鮮やかさ) rightnessは明度 (色の明るさ)
18. Primary Key Color Primary40 Secondary Key Color Secondary40 Tertiary Key Color Tertiary40 Neutral Key Color Neutral40 Neutural Variant Key Color Neutral-Variant40 Accent Colors Neutral Colors Brand Color NewsDigest Key Color #32C4D7 | =187, =77, =84 H S B ↓ ※ 他にもセマンテ ィ ッ クカラーやカスタ ムカラーがあります H S B ue は色相 aturation は彩度 (色の鮮やかさ) rightness は明度 (色の明るさ) HSBの値を変更し てキーカラーとし て展開する Key Colors Material Designで定義されている5つの主要カラー
19. Primary Key Color Primary40 Secondary Key Color Secondary40 Tertiary Key Color Tertiary40 Neutral Key Color Neutral40 Neutural Variant Key Color Neutral-Variant40 Accent Colors Brand Color H S B ue は色相 aturation は彩度 (色の鮮やかさ) rightness は明度 (色の明るさ) ↓ HSBの値を変更し てキーカラーとし て展開する NewsDigest Key Color #32C4D7 | =187, =77, =84 H S B Key Colors Material Designで定義されている5つの主要カラー
20. Tonal Palettes 0から100までの値を持つ13の色調を作成 0 10 20 30 40 50 60 70 80 90 95 99 100 真っ黒 #000 真っ白 #fff 0 Tone 100 明度と彩度を調整した色調
21. 0 10 20 30 40 50 60 70 80 90 95 99 100 真っ黒 #000 真っ白 #fff Primary Key Color Primary40 | =187, =77, =74 H S B NewsDigest Key Color #32C4D7 | =187, =77, =84 H S B 視認性を上げる 0 Tone 100 明度と彩度を調整した色調 Tonal Palettes 0から100までの値を持つ13の色調を作成
22. Theme ✕ On-color, Surface, Background
23. Light Dark Primary Primary40 On Primary Primary100 (white) Primary Primary80 On Primary Primary10 On-color テキストやアイコンに適用するコンテンツの色
24. On-color テキストやア イコンに適用するコンテンツの色 Light Dark Primary Primary40 On Primary Primary100 (white) Primary Primary80 On Primary Primary10 ボタン ボタン Primary Primary On Primary
25. On-color テキストやア イコンに適用するコンテンツの色 Light Tonal Palette Dark Primary Primary40 On Primary Primary100 (white) Primary Primary80 On Primary Primary10 ボタン ボタン Primary Primary On Primary 0 10 20 30 40 50 60 70 80 90 95 99 100
26. Light Dark Surface Neutral100 On Surface Neutral20 Surface Neutral20 On Surface Neutral80 Surface コンポーネントの 「 」 に適用する色 表面
27. Surface コンポーネントの「 」に適用する色 表面 Main text Sub text Main text Sub text Main text Sub text Main text Sub text Light Surface Neutral100 On Surface Neutral20 Dark Surface Neutral20 On Surface Neutral80 Surface Surface On Surface
28. Surface コンポーネントの 「 」 に適用する色 表面 Light Surface Neutral100 On Surface Neutral20 Dark Surface Neutral20 On Surface Neutral80 0 10 20 30 40 50 60 70 80 90 95 99 100 Tonal Palette Main text Sub text Main text Sub text Main text Sub text Main text Sub text Surface Surface On Surface
29. Light Dark Background Neutral99 On Background Neutral10 Background Neutral10 On Background Neutral90 Background 画面の 「 」 に適用する色 背景
30. Background 画面の 「 」 に適用する色 背景 Light Dark Background Neutral99 On Background Neutral10 Background Neutral10 On Background Neutral90 0 10 20 30 40 50 60 70 80 90 95 99 100 Tonal Palette
31. Material Designの設計に沿って作ったら Light ThemeとDark Themeが爆速で完成 通知設定 速報 定時 注目ニュース 表示設定 路線 地域 東京都新宿区 特集メディア一覧 その他 お知らせ よくある質問 9:30 設定 通知設定 速報 定時 注目ニュース 表示設定 路線 地域 東京都新宿区 特集メディア一覧 その他 お知らせ よくある質問 9:30 設定
32. Material Designの設計に沿って作ったら Light ThemeとDark Themeが爆速で完成 通知設定 速報 定時 注目ニュース 表示設定 路線 地域 東京都新宿区 特集メディア一覧 その他 お知らせ よくある質問 9:30 設定 通知設定 速報 定時 注目ニュース 表示設定 路線 地域 東京都新宿区 特集メディア一覧 その他 お知らせ よくある質問 9:30 設定
34. レゴブロックを 組み立てる感覚でできた
35. ダークモード対応に 困ったときの便利な処方箋 まとめ
36. Primary Key Color Primary40 0 10 20 30 40 50 60 70 80 90 95 99 100 Primary Primary40 On Primary Primary100 (white) Primary Primary80 On Primary Primary10 Key Colors ↓ Tonal Palettes ↓ Themes
37. Theme ✕ On-color, Surface, Background
38. Material Designの設計を取り込んで プロダクトに最適化する 汎用的な設計なのでカスタマイズしやすいです 用法・用量はご自由に!
39. 本格的な運用はまだこれから まずはデザインの土台作りから やっています 土台がしっかりしていれば、後々の調整作業も怖くない
40. ありがとうございました