昨今、あらゆるアプリで実装されているダークモード。とはいえ、ウェブページではまだ実装されているサイトは少数。
今回は、ワードプレスサイトでダークモードを実装する方法について解説します。
プラグインをインストールするだけなのでとっても簡単ですよ。
ダークモード（ナイトモード）とは
暗色背景に白文字をベースに作成される。白背景に黒文字といった一般的な表示方法と配色を逆転させた表示方法。
ダークモード、ナイトモード、ダークテーマなどの呼称がある。
ダークモードを実装できるプラグイン
WP Dark Mode
使いやすく、クセがなく、どんなサイトにも馴染みやすいデザインのプラグイン。
カスタマイズ性に優れていて、非常に細かくデザインを調整できます。
有料のPro版ではほぼ完全にイメージ通りのダークテーマが実装できるようになるほか、アナリティクス機能を利用できるのでダークモードの使用状況を確認できる。
ダークテーマによる効果検証をしっかり行うには、WP Dark Mode以外だと現状厳しいです。
DarklupLite – WP Dark Mode
無料版で背景色が完全に真っ黒のダークモードを実装したいなら、Darklupがおすすめです。
1位のWP Dark Modeに比べ、無料状態でのカラーリングはより詳細に設定できます。
有料版を利用した場合はWP Dark Modeの有料版と同レベルでカスタマイズ可能ですが、アナリティクス機能はありません。
Blackout: Dark Mode Widget
Blackoutは、ダークモードへの切り替えボタンを１つ追加するシンプルなプラグイン。
設定は一切できないので、デザインに合わせた調整は難しいです。
シンプルで軽量になっているため、ページ表示速度を重視するなら一考の余地あり。
以下の手順で、直接ワードプレスにインストールできます。
WP管理画面 > [プラグイン] > [新規追加] > [プラグインの検索] > プラグイン名or「dark mode」で検索 > [インストール]
ダークモードによって期待される効果
- 離脱率が低下する
- 売上が向上する
- 目に優しいサイトになる
- スマホのバッテリーを温存できる
ダークモードで離脱率が低下する
LIFFULが運営する賃貸不動産ポータルサイト『ホームズ』のアプリにて継続率向上が報告されています。
ダークテーマを使用するユーザーのアプリ継続率が 10% 以上、向上することがわかりました。
なお、リリース後は新規登録ユーザーの 21% がダークテーマを利用しています。
Google Play developers -「事例」
まだダークモード導入による効果の統計は公開されている事例が少ないため、他サービスでどうなるのかは不明瞭です。
ダークモードで売上が向上する
一般に、熱心にサービスを巡回するユーザーは購買意欲が高いため、離脱率が低ければ購入率が向上します。
したがって、サイト内での売上向上に繋がりやすいと言えます。
ダークモードで目に優しいサイトになる
夜の時間帯にサイトを閲覧するユーザーにとって、明るいスマホ画面の光は体内時計を狂わせる原因になります。
また、光量が大きいほど目が疲れるため、ダークモードを利用するとユーザーの健康を守ることができます。
ダークモードでスマホのバッテリーを温存できる
画面の明るさはスマホのバッテリー消費に関係します。
ダークモードを利用することによってスマホのバッテリー消費を抑えることができるので、それを理解しているユーザーは積極的にダークモードを採用しているサービスを利用することがあります。
私の使っているスマホは、黒を発光しないことで表現する「有機EL」というディスプレイと搭載しているので、ダークモードだとバッテリー消費が露骨に違います。
ダークモードの恩恵はまだ未知数
ダークモードはまだ新しい様式です。どのくらいの恩恵があるのかはわかりません。
利用しているサービスにダークモードが実装されていた場合、ユーザーの7割はダークテーマを利用する傾向があると言えそう。
あなたはダークモードを使っていますか？
— 小林 I Web Designer (@pulpxstyle) January 15, 2021
差し支えなければその理由もお聞かせください。
他の方が行ったアンケートでも、比率はほとんど同じでした。
どのくらいの効果があるかはまだ不明瞭なダークテーマ。でも、あれば使うのが7割くらいいるのなら、あった方がいいことは間違いなさそう。
早めに対応しておくと、競合に差をつけられるかもしれません。
