ダークモードの UI について考える
iOS 13 でダークモードの噂があったり、ダークモードの UI についてあまり語られていないような気がするので考えてみる。
ダークモードの利点としては画面全体が真っ黒、または暗くなるため、色を自発光させる OLED（有機EL）などではバッテリーの消費を少なくすることが可能かつ、
発光を抑えることで目に対して負担を減らすことができる。
欠点としては、よくダークモードの UI で見づらいと言われることがある。
いくつか問題があると思われるが、
主な理由は人の目が明るい陽を受ける時間帯に生活しているため、目が明るいものを認識するように作られているのではないかと予想される。
そのため、現状のライトモードをそのまま色替えだけで使用すると見づらくなる。
Microsoft には悪いが Mac 版 Excel のダークモードを見てみるとそのままライトモードの色を変えているだけでわかりづらさがある。
これらを踏まえて以下の問題があると思われる
- アイコンのわかりづらさ
- ボタンのわかりづらさ
- 境界のわかりづらさ
- 背景のわかりづらさ
- 選択状態のわかりづらさ
macOS のダークモードはどのように対応しているのか
全体
文字色は階調の反転ではあるが、選択色、背景色、セレクターの色やアイコンがライトモードとはかなり異なる。
アイコン
以下の画像も見てもらうとわかるがライトモードでは線でアイコンが描かれているが、 ダークモードでは塗りになっている。
そして、ダークモードではライトモードよりも多く単色ではなく色が薄い部分が含まれている。
また、ライトモードで色付きのアイコンに黒い縁取りがついている場合、ダークモードでは白の縁取りをつけた方が見栄えが良い場合がある。
そのため状況次第で2つアイコンを作成する必要が出てくるので注意。
ボタン
iOS の場合のボタンはデフォルトでは枠や背景色がないが、macOS でボタンは枠と背景色があるため色が変わる。
ライトモードはボタンの背景色は白に近くなっているが、黒ではなくグレーになっている。
境界
Windows Phone や Window 8 以降での境界はタイポグラフィと余白で表現していた。
macOS の場合 UI の境界の区切りに関してはラインで行う場合もあるが、下の画像のように背景色を変えることで入力部の境界を表現している。
また、ウインドウやボタンなどの外枠にはハイライトが施してある。
背景
横とヘッダー背景は半透明とぼかしが入っており、背景色によって変わるようになっている。
選択状態
Apple が提供しているアプリでは選択時はアクセントカラーとなっている。
macOS でのアクセントカラーはセレクターやチェックボックスの背景などとなるが、設定でアクセントカラーとは別に強調色を変更でき、異なる色が混在する UI となるので作成する際に問題が出るケースがあるので注意。
ダークモードの UI 作成で考えるべきもの
ライトモードの白背景に比べ、ダークモードの黒やグレーの背景は文字の濃淡の差がライトモードよりわかりづらくなる場合があるので注意。
ライトモードで白背景の場合、境界線と文字の色は同色でも問題ないが、ダークモードの場合は境界線と文字の色同色の場合は見づらくなる場合がある。
思うに背景が白地だと全体に目が行くことになるが、背景が黒字だと白い部分（視覚的には光っている部分）に目が行くためで濃淡でどこに注目させるかをデザインする必要がある。
アイコンについてもダークモードでは線ではなく塗りにしている場合があるが、こちらも認知的な観点から境界線と同じ問題を抱えると思われる。
線を細くしすぎたアイコンではダークモードでわかりづらくなる可能性があり、線で表現されるアイコンで塗りとして表現できない場合はある程度線の太さを太くしておくとよいだろう。
まとめ
ライトモードからダークモードへ変更する場合にはシステムが勝手にしてくれるわけではなく、それなりに自分で調整する部分があるという点がわかると思われる。
そして、一部使用している色やアイコンは、
ライトモード、ダークモード両対応する場合、コードでの変更コストだけではなく、リソースを編集する場合がある点も注意が必要である。
もし、噂どうりに iOS でダークモードが追加されるなら、それなりの作業コストが必要あるのではというところ。
続き
参照元
