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

175 Views

January 30, 19

スライド概要

2019/01/28開催
potatotips #58 (iOS/Android開発Tips共有会) LTスライド
登壇者:株式会社LIFULL 鈴木 白斗

LIFULL HOME'S Androidアプリエンジニアが語る
・ダークモードに対応した理由
・実装の基本方針
・デザイナーとの進め方
・ぶつかった壁

profile-image

株式会社LIFULL

@LIFULL

スライド一覧

LIFULL HOME'Sを運営する株式会社LIFULLのアカウントです。 LIFULLが主催するエンジニア向けイベント「Ltech」等で公開されたスライド等をこちらで共有しております。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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