「ダークモード」は黒を基調とした落ちついた色合いの画面表示です。

iPhoneの標準機能として搭載されて以降、今まで以上に使用するユーザーが増えていると考えられます。

ダークモードは画面の見やすさだけでなく、電力消費を抑えるなどユーザーのメリットがあります。

ダークモードを前提としたWEBサイトの設計は欠かすことができませんので、デザインする際のポイントを紹介します。

ダークモードとは

ダークモードとはデジタルデバイスの画面表示モードの一つです。

ライトモードが画面表示が白色をメインカラーとしてデザインされているのに対して、ダークモードでは背景を黒や暗い色調にし、文字やアイコンを明るい色で表示することで、視覚的な快適さに配慮されています。

メリットや特徴について確認していきましょう。

OSやブラウザによって呼び方が違う

ダークモードは、様々なOSやブラウザによって異なる名前で呼ばれています。AppleのMacOSやiOSでは「ダークモード」といいますが、GoogleのAndroidでは「ダークテーマ」と呼ばれるなど、名称にいくつかのパターンがあります。

呼び方に違いはあるものの内容は全て、背景を暗い色にし、文字やアイコンを明るい色で表示する画面表示モードのことを指しています。

ダークモードのメリット・デメリット

ダークモードを利用することで光の刺激を減らせるので、目の疲労を軽減するというメリットがあります。また、消費電力を抑えることができ、バッテリー節約にも貢献します。

デメリットはデザイン調整が必要になったり、一部の色や画像が正しく表示されない可能性があったりすることが挙げられます。

ダークモード対応は増えている

ユーザーの視覚的な快適さに配慮して、たくさんのWEBサイトやアプリがダークモード対応を実施しています。

OSやブラウザもダークモードのサポートを強化しています。

デザイン段階でダークモードを考慮することは欠かせない時代になりつつあります。

ダークモード対応のデザインの作り方

ダークモードのデザインは、明るいテーマとは異なる考え方と調整が必要です。

色の選択やコントラストの調整などは重要なポイントとなります。

具体的な注意点を確認しておきましょう。

ピュアブラック・ピュアホワイトを使わない

ピュアブラックやピュアホワイトは、ダークモードのデザインでは避けるべきです。

コントラストが強すぎるため、ユーザーの目に負担を与えてしまい、不快なデザインだと捉えられてしまうかもしれません。

ソフトな色調を選択することで、適切なコントラストを保つことができます。

カラーの彩度をおとす

ダークモードでは、色の彩度を下げておくとよいでしょう。

明るいテーマでは鮮やかな色が見やすく、効果的なデザインとなります。ですがダークモードでは彩度が高いと色が目立ちすぎてしまい、ユーザーの目の負担が大きくなってしまいます。

ダークモードに適した見やすさを考慮して、色彩の調整を行います。

コントラストを調整する

ダークモードのデザインでは、コントラストの調整が欠かせません。

高すぎるコントラストは視覚的なストレスとなってしまいますが、低すぎてしまうと読みづらくなります。

バランスを考慮して、背景と文字やアイコンの色調を調整し、見やすさと読みやすさに配慮しましょう。

手前のコンテンツほど明るい色調にする

ダークモードのデザインでは、画面の前面にあるコンテンツほど明るい色調を選ぶことが基本です。

手間にあるコンテンツを目立たせることで、ユーザーは情報を効率的に取得しやすくなります。

手前は明るくして、奥は暗くすることで、情報の優先度をつけることができます。

例えば背景と文字の明るさについても、背景は暗くして文字は明るくします。複数のレイヤーを重ねたデザインであるほど、明るさの考慮が欠かせません。

まとめ

ダークモードは、ユーザーの視覚的な快適さを向上させるための重要な手段となりました。

色の選択、コントラストの調整など、デザイン原則を理解し、適切なバランスで設計することが欠かせません。

ここで紹介した原則を参考にしつつ、ライトモードだけでなくダークモードにもうまく馴染むWEBサイトを目指しましょう。

こんな記事も読まれています

会社案内・パンフレットやWEBサイト制作でフリー素材を使用する際の注意点とは 会社案内・採用パンフレットの人気フォントとは？ゴシック体が与える印象の違い 内容・中身が古くなった会社案内パンフレットを使うデメリット