Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

はのめぐみ / Megumi Hano

February 22, 2022
Tweet

More Decks by はのめぐみ / Megumi Hano

Other Decks in Design

Transcript

  1. 株式会社JX通信社 NewsDigest デザイナー
    羽野めぐみ @featherplain
    ダークモー
    ド対応に

    困ったときの便利な処方箋
    Material Designでつくるカラースキーム

    View full-size slide

  2. ニュース速報や地震・災害速報を

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

    View full-size slide

  3. NewsDigestユーザーの

    皆さんの声を集めました

    View full-size slide

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

    View full-size slide

  5. ユーザーの皆さんの声
    途切れない

    ダークモードの要望ッ...!!

    View full-size slide

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

    View full-size slide

  7. ネイティブ実装から

    Flutterに置き換え中
    FlutterはGoogle製のフレームワークで

    ひとつのソースコードでクロスプラットフォーム対応ができます
    そんな中、
    いま開発チームで取り組んでいること

    View full-size slide

  8. つまり、
    ゼロからコードを組み直す作業

    将来を見据えたカラー設計を考える

    View full-size slide

  9. でもダークモード対応やったことないんだよな...

    どうやろうかな
    社内でもあまり知見がない状態

    View full-size slide

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

    模範解答

    View full-size slide

  11. Light Theme Dark Theme

    View full-size slide

  12. NewsDigest向けに

    アレンジしたのがこちら

    View full-size slide

  13. Light Theme Dark Theme

    View full-size slide

  14. このスライドの配色も、

    新しいカラースキームから選んでいます
    ライトモード
    カラースキームの

    仕組みを解説します

    View full-size slide

  15. このスライドの配色も、

    新しいカラースキームから選んでいます
    ダークモード
    カラースキームの

    仕組みを解説します

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  22. Theme ✕
    On-color,

    Surface,

    Background

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  31. Material Designの設計に沿って作ったら

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

    View full-size slide

  32. Material Designの設計に沿って作ったら

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

    View full-size slide

  33. レゴブロックを

    組み立てる感覚でできた

    View full-size slide

  34. ダークモード対応に

    困ったときの便利な処方箋
    まとめ

    View full-size slide

  35. 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 full-size slide

  36. Theme ✕
    On-color,

    Surface,

    Background

    View full-size slide

  37. Material Designの設計を取り込んで

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

    View full-size slide

  38. 本格的な運用はまだこれから

    まずはデザインの土台作りから

    やっています
    土台がしっかりしていれば、後々の調整作業も怖くない

    View full-size slide

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

    View full-size slide