【WordPress】「ダークモード」導入のメリットとデメリット

WordPress歴10年のLeoです！

今日は、先日Wordpressテーマを更新したのに伴い導入した「ダークモード」についてのお話です！

ダークモードとは

今やiPhoneなどのスマホでもダークモードは一般的になってきていますよね。

ダークモードとは、基本的に暗い背景（大体は少しグレー寄りのブラック）に明るい色の文字（大体はホワイト）というカラースキームのことで、場合によってはアイコンなどもモノクロ調に変更されます。

左がこの記事の通常モードのスクショで、右がダークモードに変えた場合の見え方です（モバイルの場合上下に表示されています）。

今後必須の機能になるだろうと予想していますが、そもそもどんな意図で生まれたものなのでしょうか？

ダークモードのメリットとは？

今後必須の機能になりそうですが、そもそもどんな意図で生まれたものなのでしょうか？

画面の視認性UP

ダークモードを有効にすると、周囲が暗くても画面が見やすくなります。

アップルのページによると、このように書かれていて、周りの明るさによって違うかも知れませんが、画面が見えやすくなる効果を見込んでいることがわかります。

目の疲労軽減

こちらの記事によると、確実な根拠は見られていないということですが、個人的には通常モードは明るすぎて、特に夜に暗い部屋で画面を見るとき、チカチカしてしまいことから逃れられるので嬉しい機能と感じています。

省電力になる

画面が全体的に暗くなることから省電力、つまりバッテリーライフを長くさせる効果を狙って可能性が考えられますが、こちらの記事では、省電力効果も微妙らしいと紹介されています。

とはいえ、おそらく液晶は黒い表示でもバックライトは完全には消えているわけじゃないので省エネ効果がなくとも、OLED（有機EL）だと黒は発光OFFなので効果はあるんじゃないかなーと思います。

ダークモードの導入で感じるメリット

では、Wordpressテーマの「ZEEN」を導入したことで得た、ダークモードについて、メリットと感じている点を紹介します。

1. 自分としての読みやすさが上がった

個人的な都合ですが、ボクはMacも、iPhoneもダークモードを愛用していて、ダーク背景の目がチカチカしにくい環境に慣れています。普段、「読むこと」が多く発生するSmart News（アプリ）でもダークモードにしているため、たまに発生する白い背景のページを読むというシチュエーションがしんどいくらいです。

なので、自分の記事を読み返すときにダークモードで読めるのが非常にありがたく感じています！

2. 先進的なサイトになった気がする

今まさにトレンドという感じですが、まだそんなに多くの個人サイトで導入されていないと思うので、いち早く導入することで、先進的なブログサイトを作れた気がしていい気分です！（笑）

3. 読者に優しいサイトにできた（？）

明確な証拠はないという声も多いですが、読者にとって選択肢があるということは良いことですよね。白バックの方が読みやすいという人も、ダークモードの方が読みやすいという人もいるはずなので、好きな方を選んでいただけるのは読者に対して優しいブログサイトになったのではないかと思います。

ダークモードの導入によるデメリット

では、逆にデメリットはあったのか？

上記のように、いいところも多く、また、「ZEEN」を購入する際、多数あるテーマの中から選ぶ作業の中で、ダークモードが搭載されていることは一つの選択要素でした。それくら、「欲しい！」と思っていた機能なので、得られて満足しています。

しかし、導入してから分かったデメリットもいくつかあるので紹介します。

1. CSSの記述が手間

まずはこれです。ボクは、このブログでも6000行以上の追加CSSを書いています。その行数が多くなっている一つの理由がダークモードで、全部ではないですが、多くの指定において、ダークモードの場合の指定を書かなくてはいけないのが結構手間です。

↑これは吹き出しを使ったページですが、ダークモードにして初めて、丸抜きの背景部分の白さがかっこ悪く見える様になりました。少し面倒でしたが、丸抜き部分以外を透過にして画像を設定し直しました。

↑下の方が対応させた画像に替えたやつです。細かいかも知れませんが白い背景じゃなくなっている方がスマートです。

通常モード、ダークモード、どちらでも問題ない部分もあるにはあるんですが、カラースキーム自体が違うので、特に色の指定において記述が必要な要素が多く、買ったまま使う人ならいいかも知れませんが、ボクのように、せっかく有料テーマを買っても満足してそのままで使えないタイプの人間にはこの手間が予想以上でした。

2. 白背景の写真で問題が起きる

これは、元々”そのつもり”で挿入画像を用意すれば解決する部分もありますが、過去の記事で発生してしまう問題です。

こちらの画像を挿入した記事ですが、元々白い背景になっている画像を使ったため、

ダークモードになるとこのようにイメージが変わってしまいます。

対応策はいくつかあるので、今後は”そのつもり”で画像を用意していく予定ですが、挿入画像によっては思わぬ不格好さが出てしまう心配があります。

3. インライン広告がカッコわるい

このブログでは、トップ画面でインライン広告を挟んでいます。

こんな感じですが、ある程度、サムネのサイズやレイアウトなどのデザインを揃えることでデザインに溶け込んだ広告を挿入できる中で、

ダークモードになると、広告部分の背景が白いままなのでこのスクショのようにちょっと不恰好なんですよね。

以上の通り、一番はCSS記述がめんどくさいという点、それ以外に、デザイン上の課題がいくつかある、という感じですね。

まとめ

• ダークモードは最近のトレンドである
• 導入できるならメリット多い機能である
• CSS記述など手間やいくつかの問題点はあるので注意

ということで、ダークモードデビューしたLEOLOGで気づいたことなどを紹介してみました。