WordPressサイトでダークモードの実装をお考えですか？それなら、この記事がお役に立てるはずです。
この記事では、ダークモードを設定することで得られるアクセシビリティの向上、訪問者の健康への配慮、エネルギー使用量の削減、ユーザーの嗜好への対応などの利点を取り上げ、プラグインやカスタムコードを使って、経験値に応じてWordPressサイトにダークモードを実装する手順もご紹介します。
ダークモードとは
ダークモードとは、暗い背景に明るい色の文字が配置されるページ表示です。WordPressサイトに実装することで、サイト訪問者が従来のライトモード（明るい背景に暗い色の文字が配置されるページ表示）とダークモードから好きな表示方法を選択することができます。
これは多くのPCやスマートフォンのOSではすでに一般的な設定であり、中には時間帯に応じてライトモードとダークモードを自動的に切り替えるものもあります。
WordPressサイトへの実装も同様で、訪問者がボタンなどの要素を使って、ライトモードとダークモードを簡単に切り替えられるようにします。コンテンツは変わらず、配色だけが変化します。
以下は、ライトモードのWordPressサイト例です。
このサイトをダークモードに切り替えると、以下のようになります。
上のテストサイトでは、訪問者のOSの設定に基づいて表示するモードが切り替わります。また右下のウィジェットで訪問者が手動で変更することも可能です。
WordPressサイトでダークモードを提供する利点
WordPressサイトでダークモードを提供する利点は多数あります。ユーザーの好みに対応できることから、サイトのアクセシビリティの向上、ユーザーの健康への配慮などが挙げられます。
以下、詳しくご紹介します。
サイトのアクセシビリティの向上
ダークモードを提供する大きなメリットの1つは、ウェブサイトのアクセシビリティが向上することです。
「a11y」とも略されるアクセシビリティは、障がいを持つユーザーを含め、より多くの人がウェブサイトを快適に利用できるようにすることを意味します。
例えば、スクリーンリーダーを使ってサイトを閲覧しているユーザーに配慮するなどが考えられます。
アクセシビリティは、誰もがウェブサイトを簡単に楽しめるようにするためだけでなく、多くの法域で法的要件にもなっています。障害を持つアメリカ人法（ADA）や欧州アクセシビリティ法などがその代表例です。
ダークモードの提供は、Web Content Accessibility Guidelines（WCAG）で規定されているわけではありませんが、アクセシビリティの改善につながることに変わりはありません。
具体的には、以下のような利点が挙げられます。
- テキストコンテンツのコントラストが向上する─ダークモードでは通常、背景色とテキスト色のコントラストが非常に強くなります。これにより、視力に問題があるユーザーにとってもコンテンツが読みやすくなります。高コントラストはWCAGでも推奨されているため、ダークモードを提供することで、間接的にWCAGに従うこともできます。
- 一部ユーザーのコンテンツの読みやすさが向上する─失読症などの視覚処理障がいを持つ一部ユーザーにとって、白い背景で黒色の文字を読むことは困難です。この症状は、Scotopic Sensitivity Syndrome（SSS、日本語では「光感受性障がい」と訳されることも）またはアーレン症候群などと呼ばれます。
- 偏頭痛に悩むユーザーの問題が軽減される─一般に偏頭痛を持つユーザーには、明るい光を極力避けることが推奨されます。暗い背景でコンテンツを提供することで、偏頭痛を悪化させるリスクを抑えながら、ウェブサイトの閲覧を楽しむことができます。
とはいえ、全ての状況において、ダークモードがアクセシビリティ改善の最適解というわけではありません。例えば、乱視を持つユーザーにとっては、かえってコンテンツがぼやけて見える（ハレーションと呼ばれる）可能性があります。したがって、ユーザー自身でライトモードとダークモードを切り替えられるようにするのが最善です。
目や体にやさしい
ダークモードの提供は、ユーザーの健康管理にも良い影響を与えます。
ダークモードは一般的に、睡眠の質の向上につながることが言及されています。専門家は、就寝前の時間帯は明るい光を避けるよう勧めています。
ウェブサイトの画面が明るければ明るいほど、訪問者の睡眠の質に悪影響を与えます。ダークモードを提供することで、訪問者の睡眠への影響を抑えながら、WordPressサイトを楽しんでもらうことができます。
また、各訪問者のOSの設定に基づいてダークモードを自動的に有効にすることも可能です。たとえば、訪問者が就寝前の数時間に自動的にダークモードに切り替えるようにOSを設定している場合は、それに従うことができます。
ダークモードはまた目の疲れを軽減します。セントラルフロリダ大学（UCF）の研究によると、「ダークモードの方がライトモードよりも（研修参加者の）眼精疲労が著しく低い」という結果が報告されています。
ライトモードより省エネ
これはすべてのユーザーの利点になるわけではありませんが、有機ELディスプレイ（OLED）のエネルギー消費量が少なくなるという小さな利点もあります。有機ELディスプレイは、画面全体を照らすのではなく、個々のピクセルを「消す」ことができるため、暗い色のピクセルを表示するエネルギーを抑えることができます。
正確な省エネ効果は、画面の明るさ設定によりますが、少なくとも3～9%、明るさを高く設定している画面では、39～47％と大幅に消費量が削減されます。
この数値は、異なる明るさの画面エネルギー消費量を分析したパデュー大学の研究によるものです。
単にダークモードを好む人もいる
上記のようなメリットに加えて、単に個人的な好みでダークモードを使用したい訪問者もいます。
上記のような理由から日常的にダークモードを使用している可能性もあれば、単に好きで使用しているかもしれません。
いずれにしても、ダークモードを使用できるオプションを提供することで、多くの訪問者のユーザー体験をより良いものにできます。
WordPressサイトにダークモードを実装する4つの方法
WordPressサイトにダークモードを実装する方法はいくつかあります。以下、4つの方法をご紹介します。
1. WordPressプラグインを使用する
自分でコーディングしたくない場合は、WordPressのダークモードプラグインを使用するのが最も簡単な方法です。
インストールして有効化するだけでダークモードを実装できるため非常にシンプルで、必要に応じて調整も可能です。
特に人気の高いWP Dark Modeプラグインは、無料で使用できます。
プラグインを有効化すると、即座にサイト上でダークモードが動作します。先ほどのスクリーンショットで見たテストサイトでもこのプラグインを使用しています。
訪問者のOS設定に基づいて、表示モードが自動的に切り替わります。また、右下のウィジェットを使ってユーザーが自分で切り替えることも可能です。
ダークモードの機能を調整するには、WordPress管理画面に出現する「WP Dark Mode」メニューから「Settings」を開きます。本記事執筆時点では、基本的にメニューは英語になりますが、設定内容自体がシンプルであるため、比較的容易に理解できそうです。（「Frontend Dark Mode（フロントエンドのダークモード）」の有効化または無効化や、ダークモードの設定を「Use system settings（訪問者のシステム設定に合わせる）」など）。
他にも以下のようなプラグインがあります。いずれも無料で使用可能です。
これらのプラグインは、サイトのフロントエンドに大きな影響を与える可能性があるため、本番サイトで有効にする前に、ステージング環境のような安全な環境でテストすることを強くお勧めします。
KinstaのWordPress専用マネージドクラウドサーバーをご利用の場合は、各サイトに無料で付属するステージング環境で、プラグインを簡単にテストすることができます。
2. ダークモード対応テーマを使用する
ダークモードを実装する別の方法として、ダークモードが組み込まれているWordPressテーマを選ぶという手もあります。
例えば、Rich Tabor氏の無料テーマ「Kanso」には、ダークモード機能が組み込まれています。同氏の個人サイトで実際に見栄えを確認できます。
すでに別のテーマでサイトを構築している場合は、ダークモード実装のためだけにテーマを変更するのは大変な作業になりますが、現在サイトを作成中でダークモードを実装したい場合には、WordPressテーマ選びの際にチェックしたい機能の1つに追加することをお勧めします。
3. JavaScriptライブラリを使用する
コーディングに慣れている人であれば、JavaScriptライブラリを使ってダークモードを実装することもできます。
WordPress開発者であれば、このライブラリを使って開発中のプラグインやテーマにダークモードを簡単に組み込むことも可能です。WordPress.orgのダークモードプラグインのいくつかは、JavaScriptライブラリ上に構築されています。
ダークモード用のライブラリは複数ありますが、特に以下2つが人気です。
- darkmode.js
- drkmd.js
いずれかを使用する際には、例によって本番サイトにコードを追加する前に、ステージング環境でテストを行なってください。KinstaでWordPressサイトをホスティングしている場合は、ステージング環境をワンクリックで作成できます。
darkmode.js
darkmode.jsは、Vanilla JSとCSS mix-blend-modeを使用して、設定なしでダークモードを導入します。デフォルトでは、訪問者がダークモードとライトモードを切り替えるためのウィジェットが実装されますが、独自のソリューションを構築したい場合には無効にすることができます。
訪問者が初めてサイトにアクセスすると、OSの設定に基づいて表示モードが選択されます。また、ローカルストレージもサポートしているため、この設定は次回以降の訪問にも反映されます。上記のリンク（darkmode.js）からプレビューを確認可能です。
独自のCSSルールを追加する必要がなく、mix-blend-modeを使用しているため、手間がかかりません。
drkmd.js
drkmd.jsは、darkmode.jpとは少し異なるアプローチを採用しており、CSS mix-blend-modeを使ってサイトのダークモードを自動作成するのではなく、ダークモードで使用したいCSSを指定できるようになっています。そして、theme-lightとtheme-darkクラスを使用して、これらのスタイルルールをサイトに追加します。
また、data-drkmd-attach属性をscriptタグに追加して、表示モードを切り替えるための独自のトグルも実装可能です。
また、ユーザーのOS設定を自動的に検出し、ユーザーの選択をローカルストレージに保存する機能などの便利な機能もあります。
4. 独自のコードソリューションを使用する
JavaScriptライブラリを使用する以外にも、ダークモードの実装に使用できるコードベースのソリューションがあります。
一般にはライトモード用のCSSルールを適用し、ダークモード用には別のルールを適用します。
こちらの解説記事にもありますが、jQueryを使用するのも手です。基本的には、ライトモードとダークモードの両方のCSSルールを追加します。
続いて、ダークモードを有効化するためのボタンやスイッチなどのウィジェットを追加します。ユーザーがこのボタンをクリックすると、JavaScriptによって使用するCSSクラスが切り替わります。上に挙げた解説記事では、jQueryとhasClass()、addClass()、removeClass()が使用されています。
もっと複雑な設定を行うことも可能で、例えば、JavaScriptベースのこちらの解説では、サイトのダークモードに以下の機能を追加する方法が提示されています。
- ユーザーのシステム設定に基づいて、好みの表示モードを自動検出する
- ユーザーの選択を保存し、次回以降の訪問時に正しい表示モードを自動的に読み込む
基本的には、1つ前でご紹介したJavaScriptライブラリのいずれかを使用する方がシンプルですが、使用したくない場合には、このような選択肢もあります。
WordPress管理画面をダークモードに切り替える方法
ここまでは、WordPressサイトのフロントエンドに焦点を当ててきましたが、バックエンドのWordPress管理画面にもダークモードを実装して、自分も先にご紹介したようなダークモードも利点を得ることができます。
WordPress管理画面にダークモードを実装するには、プラグインを使用するのが手っ取り早いです。プラグインには、以下の2種類があります。
- 管理画面はそのままで、スタイルを切り替えるだけでダークモードを有効にするプラグイン
- 独自のインターフェースを作成してダークモードも提供するプラグイン
前者の場合には、例えばDark Mode for WP Dashboardプラグインを使用することができます。
なお、先ほどご紹介したWP Dark Modeプラグインを含む一部フロントエンド向けのダークモードプラグインでは、WordPress管理画面にもダークモードを適用することができます。
ダークモードに切り替えて、管理画面での体験を改善するには、以下のプラグインを使用してみてください。
まとめ
ウェブサイトでダークモードを提供することで、アクセシビリティを改善し、訪問者の健康に配慮できるだけでなく、一部画面でのエネルギー使用量の削減、そしてユーザーの嗜好に対応することができます。
WordPressサイトにダークモードを実装する方法は複数あります。コーディングに抵抗がある場合は、プラグインやダークモード対応テーマを使用できます。コーディングに慣れていれば、ダークモード用のJavaScriptライブラリを使用するか、独自のソリューションをコーディングすることができます。
なお、ダークモードの実装はサイトのフロントエンドの外観に大きな影響を与えるため、本番サイトで実装する前に十分にテストを行ってください。
KinstaのWordPress専用マネージドクラウドサーバーでは、組み込みのステージング環境を使って、安全にダークモードを簡単にテストし、動作を確認した上で本番サイトに変更を適用することができます。
コメントを残す