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

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

6e6c7132d99fd8febb2193fd21809d20?s=47 Megumi Hano
February 22, 2022

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

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

6e6c7132d99fd8febb2193fd21809d20?s=128

Megumi Hano

February 22, 2022
Tweet

More Decks by Megumi Hano

Other Decks in Design

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 設定
  33. None
  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. ありがとうございました