WordPressにダークモードを実装できるプラグイン5選【無料あり】

WordPressで作ったサイトにダークモード（ナイトモード）を実装したいと考えたことはないでしょうか。

ユーザーが好みに応じてダークモードを使えるようになれば、便利なサイトである印象を与えることができます。WordPressのプラグインを活用すれば、手軽にダークモードを実装可能です。

本記事では、ダークモードが実装できるプラグインを5つ紹介します。

ダークモードとは？

ダークモード（Dark Mode）とは、ソフトウェア、OS、ウェブサイト、アプリの表示設定の一つで、背景色を黒、テキストやアイコンを白などの明るい変えるデザインモードです。ダークモードはただ視覚的な特徴があるだけでなく、下記のメリットがあります。

• 暗い環境で見やすい
• バッテリーの節約
• 見た目の印象を変えられる
• 集中力の向上

なお、ダークモードと対照的に位置するライトモードになります。

暗い環境で見やすい

ダークモードは、暗い環境で見やすくなるのが特徴です。

暗い寝室でネットサーフィンしていると、ライトモードですと表示が「眩しい！」と感じることはありますね。部屋との明暗の差に加えて、ブルーライトが目に飛び込んでくることが原因です。

この際、ダークモードを実装していれば、ワンクリックで白背景を黒背景に変更できます。暗い部屋でもストレスなく閲覧できるようになるので、長く閲覧できますね。

バッテリーの節約

ダークモードにすることで、デバイスのバッテリー節約になります。ディスプレイが黒色よりも白色を表示する際に、より電力を使うことが原因です。

例えば、スマホの輝度を最も明るい状態にした場合、ダークモードにすることで、ライトモードと比較して電力を4〜5割ほど節約できるそう。シンプルに電池が長持ちするなら、ダークモードを入れておく価値はあるかなと思います。

見た目の印象を変えられる

ダークモードは、ユーザーが見た目の印象を変えられるようになります。

• サイトに訪れた時間帯
• ユーザー自身のデザインの好み
• ユーザーの気分

Webサイトの場合、ダークモードであることがデザイン的に調和する業種・分野も存在します。たとえば、バーやクラブのWebサイトだと色調がダークモードになっている場合も多いです。

TCDでもクラブで使われている「DIVA」というWordPressテーマはダークモードです。

集中力の向上

ダークモードですと、テキストを読んだり作業する際に集中力が向上すると言われています。

WordPressの場合はダッシュボードをプラグインでダークモードにすることもできます。快適な作業環境にするためにダークモードの導入を検討してもいいかもしれません。

WordPressにダークモードを実装できるプラグイン5選

ダークモードを手軽に実装できるWordPressのプラグインを5つに厳選しました。

WP Dark Mode

WP Dark Modeは、インストールするだけで手軽にダークモードが利用できるプラグインです。

プラグインを有効化すると、サイトの右下に三日月のフローティングスイッチが表示されます。ボタンをクリックすれば、すぐにダークモードへ切り替わるので便利です。

基本的な機能は無料プランで利用できますが、より高機能な有料プランも用意されています。

有料プランでは、ダークモード用のサイトロゴが使えるようになったり、デザインをカスタマイズしたりできるようになります。

年払いプランでは1サイト年49ドル、買い切りプランでは50サイトで161.85ドルです。使い勝手がよく、知名度のあるダークモードプラグインを探している方は、WP Dark Modeをおすすめします。

Droit Dark Mode

Droit Dark Modeは無料から使えるダークモードプラグインです。

基本的な機能はWP Dark Modeと一緒ですが、スイッチや管理画面の仕様が異なります。有料プランにすると、スイッチのデザインや位置などを細かく設定可能です。

また、ショートコードでダークモードのスイッチを任意の場所に設置することもできます。「19時〜翌5時まではダークモードにする」といったタイマー機能を使えるのも便利です。

加えてWordPressの管理画面もダークモードに変更できます。

ユーザーだけでなくサイト運営者にとっても嬉しいプラグインと言えるでしょう。

Dark Mode Toggle

Dark Mode Toggleは、シンプルな使い心地のダークモードプラグインです。

プラグインを有効化すると、画面左下にダークモードの切り替えスイッチが表示されます。デザイン自体がシンプルなので、ミニマルなサイトにも抵抗なく設置できるでしょう。

カスタマイズや管理画面のダークモードに対応するには、有料プランの登録が必要です。

年払いプランはなく全て買い切りで、1サイト29ドルとなっています。サイト数無制限でも79ドルなので、かなり安く抑えることができるでしょう。ただし、サポートが1年のみとなっています。

また、若干カスタマイズできる範囲が限られているので「シンプルでそこそこ使えるプラグインを購入したい」という方におすすめです。

優れた機能性を求めるなら、WP Dark ModeかDroit Dark Modeのいずれかが良いでしょう。

DarklupLite

DarklupLiteは、多機能なダークモードプラグインです。

無料プランでも時間を指定して自動でダークモードに切り替えたり、管理画面をダークモードにしたりできます。他社のプラグインでは有料の機能が無料で使えるのが強みです。

ただし、スイッチのカスタマイズや位置を変更するには、有料プランにする必要があります。

1サイトのみの場合は年29ドルで利用可能です。
買い切りプランでは、3サイト49ドルから全ての機能が使えるようになります。

DarkMySite

DarkMySiteは、前述したDarklupLiteと同じく、無料で時間によるダークモードの自動切替や管理画面のダークモード化ができるプラグインです。

サイトのデフォルトをダークモードにする機能も無料で使えるのもポイント。手軽にサイトの雰囲気を一新したい方は、DarkMySiteを有効化するのがおすすめです。

有料プランにすると、9種類のスイッチデザインが選べたり、ドラッグでスイッチの位置を編集できたりと便利な機能が追加されます。画像や動画をダークモード用のものに置き換える機能も利用可能です。

有料プランは年払いプラン（年15ドル〜）と買い切りプラン（25ドル〜）が用意されています。

スイッチのデザインは好みが分かれそうですが、複数の機能を無料から利用できる優秀なプラグインと言えるでしょう。

ダークモードプラグインを使う際の注意点

ダークモードプラグインを使う際は、以下の点に注意してください。

• ロゴや画像は反転しない
• テーマや他のプラグインとの互換性
• アップデートが頻繁に行われているか
• 類似のプラグインを有効化しない

ロゴや画像は反転しない

プラグインを使用すると、簡単にテキストや背景色をダークモードに転換できます。しかし、ロゴや画像はそのままです。よって、整合性を重視するなら、どうしてもカスタマイズが必要になってきますね。

ロゴの反転にはCSSのfilterプロパティが使えます。

テーマや他のプラグインとの互換性

プラグインによっては、使用しているテーマや既存のプラグインと干渉して不具合を起こす原因になります。

• ダークモードが機能しない
• レイアウトが崩れる
• 表示速度が遅くなる

ダークモードプラグインをインストールした後に、上記のような問題が起きた際は、テーマやプラグインが干渉している可能性が高いです。

別のダークモードプラグインに代替するか、干渉しているプラグインを突き止めて変更するなどして問題を解消しましょう。

アップデートが頻繁に行われているか

WordPressプラグインを選ぶ際に大事なポイントとして、アップデートが頻繁に行われているか、という問題があります。

もう何年もアップデートされていないプラグインは、セキュリティ的にも推奨されるものではありませんので、そこは確認しておいてください。

類似のプラグインを有効化しない

1つのサイトに複数のダークモードプラグインを有効化するのは良くありません。ダークモードプラグイン同士が干渉すると、正常に動作しなかったり表示速度が遅くなったりする問題が起こります。また、サイト上にいくつもダークモードのスイッチが表示されると、ユーザーが混乱を招く原因になるでしょう。

まとめ

WordPressにダークモードを実装できると、ユーザーの快適性や離脱率を下げられる効果が期待できます。

プラグインを選ぶ際は無料で利用できる範囲や、スイッチのデザインなどをチェックしてみてください。シンプルな機能に限定するのであれば、無料プランでも十分対応可能です。

サイトロゴをダークモードに変更したり、特定のページのみ除外したりなどの機能を利用したい方は、有料プランをおすすめします。

あると意外に便利なダークモードを実装して、ワンランク上のサイトを作ってみてはいかがでしょうか。