【potatotips #58】既存のプロダクトにダークモードを実装する

既存のプロダクトにダークモード を実装する 2019/01/28 potatotips #58 株式会社LIFULL 鈴木白斗

自己紹介 ・鈴⽊ ⽩⽃(はくと) / @hakut000 ・ LIFULL HOME’S事業本部 新UX開発部 デバイスソリューションユニット 開発2グループ Androidエンジニア ・2018年4⽉から 2 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

Agenda 3 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

Agenda • ダークモードに対応した理由 • 実装の基本⽅針 • デザイナーとの進め⽅ • ぶつかった壁 • 振り返ってみて 4 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ダークモードとは メニューや、コンテンツ背景などの配⾊を、 ⽩基調から黒基調に変更させる機能 5 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ダークモードとは 6 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ダークモードとは メリット • ⽬の疲労を抑える（発光⾊減るので⽬への負担が軽減） • コンテンツを⽬⽴たせる（画像>テキスト） • 暗い配⾊は夜の表⽰に適しているとされている https://uxmilk.jp/73874 7 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

• https://uxmilk.jp/73874

ダークモードに対応した理由 8 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ダークモードに対応した理由 • 弊社アプリは夜間の利⽤ユーザーがかなり多い • ユーザーの滞在時間とCVRの相関があった • Digital Well-being 9 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

実装の基本⽅針 10 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

実装の基本方針 11 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

実装の基本方針 12 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

実装の基本方針 13 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

デザイナーとの進め⽅ 14 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

デザイナーとの進め方 • エンジニア1 、デザイナー1で部屋に籠る • デザイナーはダークモード⽤のUI設計 • エンジニアはリソースやカラーの変更 • ⼀通り実装後、屋外屋内での表⽰確認 15 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ぶつかった壁 16 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ぶつかった壁 • リソースの量が膨⼤だったので、複数のエンジニアで対応したところ、 メンバーのよしなにがコンフリクトの原因になり⼿戻り発⽣。 • WebViewへの画⾯遷移を挟むとなぜかDarkmodeが消える • WebViewへの画⾯遷移を挟むとなぜかDarkmodeが消える 17 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ぶつかった壁 • リソースの量が膨⼤だったので、複数のエンジニアで対応したとこ ろ、メンバーのよしなにがコンフリクトの原因になり⼿戻り発⽣。 • WebViewへの画⾯遷移を挟むとなぜかDarkmodeじゃなくなる ・・・ 18 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

振り返ってみて 19 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

振り返ってみて • リソース変更を⾏うエンジニアは1⼈ないしは、少数の⽅がなんだかんだ速そう • WebView怖い • リリース後の運⽤フローはしっかり考えておいた⽅が良い • WebView怖い 20 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。

ご静聴ありがとうございました 21 © LIFULL Co., Ltd. 本書の無断転載、複製を固く禁じます。