最近スマホやアプリの昨日で”ダークモード”が流行っています。
今回は、”ダークモード”について改めてまとめてみました。
ダークモードとは
ダークモードとは、モニターに表示される背景色やメインカラーを黒基調にし、反対にテキストやアイコンなどを白基調の明るい色にしたデザインに変更する機能のことです。
呼び方はダークモード以外にもダークテーマ・ナイトモード・シャドウモードなど、様々な呼び方をされています。
TwitterやInstagram、LINEなどダークモードが設定可能なアプリが増え、昨今のトレンドになっています。
ダークモードのメリット
ダークモードのメリットは、代表で下記の3つを挙げられます。
- 目が疲れにくい
- トレンド感がある
- 高級感やシックなイメージを表現できる
画面表示と周囲の明るさとのギャップが少なくなるため、画面がみやすくなるのが大きなメリットになります。
ダークモードデザインのポイント
ダークモードのデザインを作成する上でのポイントをまとめてみました。
ピュアブラックとピュアホワイトを使わない
“真っ黒”と”真っ白”を使うと、コントラストが高くなってしまい逆に目に負担がかかってしまいます。
また、ピュアブラックより濃いブラックが存在しないため、シャドウによる奥行きの表現ができなくなってしまいます。
なるべく、黒に近いグレーを使うと品が良く見えます。
■参考サイト
カラーの彩度を落とす
背景を暗くしても、写真などで彩度の高い色を使用するとコントラストが高くなってしまいます。
また、黒系の背景に彩度の高い写真などを置くと見え方を荒くさせてしまうため、彩度を落とした方が全体的にバランスが取れて綺麗な見え方になります。
明るい色の面積を少なくする
ダークモードは、ユーザーの意識を背景の黒基調より手前の白基調の方に誘導する効果があるため、手前のコンテンツほど明るい色調にする必要があります。
そのため、ユーザーに1番見てもらいたいもの、その次に見てもらいたいものなど、強調するべき情報を整理する必要があります。強調するべきものがたくさんあると逆に画面がごちゃごちゃしてしまうため、強調すべき情報を1番面積を小さくし、明るい色にするのがポイントになります。
まとめ
ダークモードについて、いかがでしたでしょうか。
いつものデザインと勝手が違う分、難しいと感じることが多いと思います。
デザインの要望で「これもこれも全部強調してほしい！」と言われることが多々あると思いますが、ダークモードでその要望を受け入れるととんでもないことになってしまう可能性があります。
めげずに頑張りましょう！
