多くのホームページやアプリで「ダークモード」のオプションが増えてきました。
このモードは目にやさしいだけでなく、バッテリー消費の観点からもとても注目されています。
今回のコラムでは、初心者の方でも理解しやすいようにダークモードの説明とこれからホームページを制作する方、既にホームページを持っている方にダークモードを実装するヒントについて説明させていただきます。
ダークモードとは？
「ダークモード」は画面の背景を暗い色にし、文字やアイコンを明るい色で表示するデザインのことを指します。
逆に通常の明るい背景のデザインを「ライトモード」と言います。
デバイスやアプリケーションでは、ユーザーの選択で簡単に切り替えが可能です。
(ダークモードのGoogleホームページ)
(ライトモードのGoogleホームページ)
ダークモードは2018年～2019年でホームページなどに採用されるようになり最近のトレンドとして急速に普及していますが、実はコンセプトや背景に暗色を使用するデザインは昔から存在していたそうです。
ダークモード採用の歴史(一部)
- モバイルOS
iOS：Appleは2019年のiOS 13で公式にダークモードを導入しました。
Android：Googleは2019年のAndroid 10で公式にダークモードをサポートしました。 - デスクトップOS
macOS：Appleは2018年のmacOS Mojaveでダークモードを導入しました。
Windows10：MicrosoftもWindows 10で暗いテーマのオプションを提供していますが、完全なダークモードの導入はやや遅れて実施されました。
ダークモードのメリットとデメリット
◆メリット
① 目の疲れを軽減できる
夜や暗い場所でのホームページ閲覧やアプリ使用時、暗い背景にすることで目の疲れや眩しさを軽減できます。
② バッテリーの消費量の削減
有機ELディスプレイを搭載したデバイスにおいて、黒や暗い色はピクセルを消灯させることができるため、電力の節約が期待できます。
③ 視覚的な変化と新鮮さ
ユーザーインターフェースの変化は、ユーザーエクスペリエンス(ユーザーが感じる使いやすさや印象)の新鮮さや興味を引き付ける要因となることがあります。
④ 周囲への影響の軽減
暗い場所での使用時に、ダークモードは周囲を照らしすぎることなく、他人の目を気にせずに利用できます。
◆デメリット
① コントラストの問題
ダークモードのデザインは、一部のユーザーにとってコントラスト(暗明差)が不足して読みにくいと感じることがあります。
② 画像やコンテンツの見え方の変化
ダークモードでは、画像やビジュアルコンテンツの色調や鮮明さが意図しない形で変わることがあります。
③ 開発・デザインの負担
ダークモードをサポートするには、ライトモードとは異なるデザインや色の選択が必要となり、開発者やデザイナーに追加の作業が発生します。
④ 一貫性の欠如
すべてのホームページがダークモードをサポートしているわけではないため、異なるプラットフォームやサービス間での体験が一貫しないことがあります。
デザイン観点でのダークモード
色の調和
ダークモードでは、単に背景を黒くするだけでは十分ではありません。色の選択や組み合わせは、見やすさと美しさを保つための重要な要素です。
例えば、ホームページを制作する際、純粋な黒よりも少し明るめの灰色を背景色として選ぶことで、視覚的な疲れを減少させることができます。
コントラストの適切な管理
テキストと背景のコントラストは、内容の読みやすさに直結します。
しかし、過度なコントラストは目を疲れさせる可能性があるため、適切なバランスが求められます。
テキストのコントラスト
【良い例】
ダークモードでは、灰色の背景上に白または明るい灰色のテキストを配置することで、読みやすさを確保しつつ、過度なコントラストによる目の疲れを避けることができます。
【悪い例】
純粋な黒の背景に純粋な白のテキストを配置すると、コントラストが高すぎて目を疲れやすくさせる可能性があります。
アイコンやイラストのコントラスト
【良い例】
アイコンやイラストのエッジに微細なシャドウやアウトラインを追加することで、ダークバックグラウンド上での視認性を向上させることができます。
【悪い例】
ライトモードで使用しているアイコンやイラストをそのままダークモードに適用すると、背景とのコントラストが不足して見にくくなることがあります。
ボタンやアクション要素のコントラスト
【良い例】
主要なアクションボタンは、他の要素よりも高いコントラストを持つ色を使用することで、ユーザーの注目を引きやすくします。
【悪い例】
すべてのボタンや要素が同じコントラストレベルで表示されると、ユーザーは何が重要なアクションなのかを識別するのが難しくなる可能性があります。
背景のコントラスト
【良い例】
セクションごとの情報を区別するために、微妙なコントラストの違いを持つ背景色を使用します。これにより、情報の階層性や関連性を視覚的に示すことができます。
【悪い例】
背景色が均一で、情報の区分が不明瞭な場合、ユーザーはページ上での情報の流れや優先順位を理解するのが難しくなります。
ブランドの一貫性の維持
企業やブランドのカラーパレットが、ダークモードでも効果的に機能するように考慮する必要があります。
ブランドカラーが「ライトモード」と「ダークモード」の両方で一貫して伝わるように調整することが重要です。
状態のフィードバック
ボタンの押下状態やホバー時のフィードバックも、ダークモードでは異なる色やエフェクトで設計することが望ましいです。
ユーザビリティの確保
システムの通知や警告メッセージは、ダークモードでも目立ち、ユーザーに適切に情報が伝わるように設計する必要があります。
ダークモード実装のヒント
CSSカスタムプロパティの活用
ライトモードとダークモードでの色やスタイルを変更する際、CSSカスタムプロパティ(変数)を利用すると、トグル操作(※)でのスタイル変更が容易になります。
※同一操作で、2つの状態(オン/オフ)を切り替えること。
:root {
–background-color: white;
–text-color: black;
}
[data-theme=”dark”] {
–background-color: black;
–text-color: white;
}
メディアクエリを利用した自動切り替え
‘prefers-color-scheme’メディアクエリを使用することで、ユーザーのOS設定に基づいた色モードを自動的に適用することができます。
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
トグルスイッチの実装
ユーザーが手動でライトモードとダークモードを切り替えることができるトグルスイッチを提供することで、ユーザビリティを向上させることができます。この設定は、localStorage(ローカルストレージ)やcookie(クッキー)に保存してページ間で維持すると良いでしょう。
画像やアセットの切り替え
ダークモードでは、特定の画像やアセットの視認性が低下する可能性があります。
そのため、明暗モードそれぞれに最適化された画像を用意し、JavaScriptやCSSを使用して動的に切り替えるように実装します。
テストの徹底
ダークモードを実装した後は、様々なデバイスやブラウザでの表示を確認することがとても重要になります。
特に、色のコントラストや視認性に問題がないかを必ず確認してください。
アクセシビリティの確認
ダークモードの実装は、視覚障害を持つユーザーや光過敏症のユーザーにとって有益ですが、適切なコントラストや読みやすさを確保するためのテストが必要です。ツールやプラグインを使用してアクセシビリティの検証を行いましょう。
まとめ
今回はダークモードについてお話ししましたが、いかがでしたでしょうか。
ダークモードはユーザビリティやデザインの観点から非常に素晴らしい機能ですが、実装や適用には注意が必要です。
適切に取り入れることで、ユーザーにとっての利便性や快適さ向上することができますので、これからホームページを制作する方、既にホームページがあり、ダークモードを実装していない方はぜひ検討してみてください。
ダークモードを取り入れたホームページ制作ならZIUS(ジウス)にお任せ下さい。(※)
ZIUS(ジウス)では業務歴が豊富(2年以上)で様々な業種や業界に関わってきたプロのデザイナーがお客様のホームページ制作を専任担当いたします。
集客強化、おしゃれさを重視したい等、お客様のご要望をデザインの力で解決し、ご納得いただけるクオリティーに満足いただけます。
ZIUSではグループ全体でのスケールメリットを活かして圧倒的な低価格を実現しています。
格安でありながら高品質、最高のコストパフォーマンスでホームページを提供いたします。
※ダークモードの実装はお問い合わせにてご連絡ください。プランによっては実装できない場合があります。 詳細は以下のバナーから確認してみてください。気になればお気軽にお問い合わせください。
2024年法改正 障害者差別解消法とアクセシビリティ
2024年4月に施行される障害者差別解消法の改正は、デジタルアクセシビリティの新たな基準を設け、障害を持つ人々、高齢者、一時的な障害を持つ人々を含むすべての人がデジタル情報に平等にアクセスできるようにすることを目的としています。この法改正は、情報技術の進展と社会のデジタル化に伴い、誰もが情報にアクセスしやすい環境を実現するための重要な対応です。
アクセシビリティは、すべての人がホームページやアプリケーションをスムーズに利用できるようにするための基本的な設計原則であり、デジタル空間の平等性を高める社会的責任でもあります。障害者差別解消法の改正により、ウェブコンテンツのアクセシビリティ基準に準拠し、障害を理由とした情報アクセスの障壁を取り除くことが求められています。
ホームページのアクセシビリティを向上させることは、法的義務を超え、すべてのユーザーへのコミットメントを示す行動です。アクセシビリティポリシーの策定、WCAG 2.1への準拠、アクセシビリティ評価ツールの活用など、具体的な対応策が提案されています。これらの対応策を実施することで、ホームページはより多くの人々にとって使いやすいリソースとなります。
ZIUSでは、アクセシビリティをウェブデザインの中心に据え、すべての人が情報に平等にアクセスできるデジタル環境の実現を目指しています。障害者差別解消法の改正を受け、障害のある人々を含むすべてのユーザーが直面する可能性のある障壁を理解し、これを解消するための具体的な対策を講じています。
こちらに詳細な内容をまとめたコラムがありますので、ぜひ読んでいただければと思います。
