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

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

Transcript

1. 株式会社JX通信社 NewsDigest デザイナー
   羽野めぐみ @featherplain
   ダークモー
   ド対応に
   
   困ったときの便利な処方箋
   Material Designでつくるカラースキーム
   

   View Slide

2. ニュース速報や地震・災害速報を
   
   いちはやく届けるニュースアプリ
   累計ダウンロード数 約
   500万件
   3分前
   東京都で最大震度3の地震が発生
   速報ニュース
   総合 社会 国際
   地域 スポーツ グルメ
   東京メトロ丸ノ内線で運転見合わせ
   ノーベル化学賞候補に日本研究者　米の
   学術情報会社
   31分前
   NYダヴ、史上最高値を更新　追加経済
   対策に期待感
   21分前
   政府検討中の新法案概要が判明、懸念高
   まる　12日にも国会提出か
   6分前
   主要ニュース リアルタイムに配信中
   設定地域 東京都新宿区 変更する
   

   View Slide

3. NewsDigestユーザーの
   
   皆さんの声を集めました
   

   View Slide

4. ユーザーの皆さんの声
   

   View Slide

5. ユーザーの皆さんの声
   途切れない
   
   ダークモードの要望ッ...!!
   

   View Slide

6. そんな中、
   いま開発チームで取り組んでいること
   

   View Slide

7. ネイティブ実装から
   
   Flutterに置き換え中
   FlutterはGoogle製のフレームワークで
   
   ひとつのソースコードでクロスプラットフォーム対応ができます
   そんな中、
   いま開発チームで取り組んでいること
   

   View Slide

8. つまり、
   ゼロからコードを組み直す作業
   
   将来を見据えたカラー設計を考える
   

   View Slide

9. でもダークモード対応やったことないんだよな...
   
   どうやろうかな
   社内でもあまり知見がない状態
   

   View Slide

10. Material Designを活用する
    https://www.figma.com/community/file/1035203688168086460/Material-3-Design-Kit
    設計の
    
    模範解答
    

    View Slide

11. Light Theme Dark Theme
    

    View Slide

12. NewsDigest向けに
    
    アレンジしたのがこちら
    

    View Slide

13. Light Theme Dark Theme
    

    View Slide

14. このスライドの配色も、
    
    新しいカラースキームから選んでいます
    ライトモード
    カラースキームの
    
    仕組みを解説します
    

    View Slide

15. このスライドの配色も、
    
    新しいカラースキームから選んでいます
    ダークモード
    カラースキームの
    
    仕組みを解説します
    

    View Slide

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
    

    View Slide

17. Key Colors Material Designで定義されている5つの主要カラー
    Brand Color NewsDigest Key Color
    #32C4D7 | =187, =77, =84
    H S B
    H
    S
    B
    ueは色相
    
    aturationは彩度 (色の鮮やかさ)
    
    rightnessは明度 (色の明るさ)
    

    View Slide

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つの主要カラー
    

    View Slide

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つの主要カラー
    

    View Slide

20. Tonal Palettes 0から100までの値を持つ13の色調を作成
    0 10 20 30 40 50 60 70 80 90 95 99 100
    真っ黒
    
    #000
    真っ白
    
    #fff
    0 Tone 100
    明度と彩度を調整した色調
    

    View Slide

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の色調を作成
    

    View Slide

22. Theme ✕
    On-color,
    
    Surface,
    
    Background
    

    View Slide

23. Light
    Dark
    Primary
    Primary40
    On Primary
    Primary100 (white)
    Primary
    Primary80
    On Primary
    Primary10
    On-color テキストやアイコンに適用するコンテンツの色
    

    View Slide

24. On-color テキストやア
    イコンに適用するコンテンツの色
    Light
    Dark
    Primary
    Primary40
    On Primary
    Primary100 (white)
    Primary
    Primary80
    On Primary
    Primary10
    ボタン
    ボタン
    Primary
    Primary
    On Primary
    

    View Slide

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
    

    View Slide

26. Light
    Dark
    Surface
    Neutral100
    On Surface
    Neutral20
    Surface
    Neutral20
    On Surface
    Neutral80
    Surface コンポーネントの
    「 」
    に適用する色
    表面
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. Light
    Dark
    Background
    Neutral99
    On Background
    Neutral10
    Background
    Neutral10
    On Background
    Neutral90
    Background 画面の
    「 」
    に適用する色
    背景
    

    View Slide

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
    

    View Slide

31. Material Designの設計に沿って作ったら
    
    Light ThemeとDark Themeが爆速で完成
    通知設定
    速報
    定時
    注目ニュース
    表示設定
    路線
    地域
    東京都新宿区
    特集メディア一覧
    その他
    お知らせ
    よくある質問
    9:30
    設定
    通知設定
    速報
    定時
    注目ニュース
    表示設定
    路線
    地域
    東京都新宿区
    特集メディア一覧
    その他
    お知らせ
    よくある質問
    9:30
    設定
    

    View Slide

32. Material Designの設計に沿って作ったら
    
    Light ThemeとDark Themeが爆速で完成
    通知設定
    速報
    定時
    注目ニュース
    表示設定
    路線
    地域
    東京都新宿区
    特集メディア一覧
    その他
    お知らせ
    よくある質問
    9:30
    設定
    通知設定
    速報
    定時
    注目ニュース
    表示設定
    路線
    地域
    東京都新宿区
    特集メディア一覧
    その他
    お知らせ
    よくある質問
    9:30
    設定
    

    View Slide

33. View Slide

34. レゴブロックを
    
    組み立てる感覚でできた
    

    View Slide

35. ダークモード対応に
    
    困ったときの便利な処方箋
    まとめ
    

    View Slide

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
    

    View Slide

37. Theme ✕
    On-color,
    
    Surface,
    
    Background
    

    View Slide

38. Material Designの設計を取り込んで
    
    プロダクトに最適化する
    汎用的な設計なのでカスタマイズしやすいです
    用法・用量はご自由に!
    

    View Slide

39. 本格的な運用はまだこれから
    
    まずはデザインの土台作りから
    
    やっています
    土台がしっかりしていれば、後々の調整作業も怖くない
    

    View Slide

40. ありがとうございました
    

    View Slide