ダークモードを導入してから気づいた問題点と面倒なこと

byNatchan - 2023/02/08 2023/06/23

0

ブログにダークモードを導入してから気づいた面倒なことと問題点を教えます。黒い背景＋白いテキストにすることで目に優しいと言われるダークモード。

近頃、多くの企業が対応し始めてはいるものの個人ブログではまだまだ対応されていません。その中で流行りのダークモードを導入しようか迷っているサイト運営者におすすめの内容です。

{tocify} $title={Table of Contents}
Ads
無料体験実施なう！月額1,500円で12万冊以上の対象作品が聴き放題になる【Amazon Audible】

ダークモード3つの問題点

ダークモードに対応したサイトを複数運営している筆者が気づいたダークモードの問題点です。ちなみに私はコーダーではないので自力でダークモードを導入したのではなく、もともとダークモード対応のテーマを利用しています。

ダークモード対応のテーマは大手デザインストア『Envato Market』で手に入ります。別名ThemeForest。

≫ダークモード導入済みテーマ一覧

1. 蛍光色はNG

ダークモードを導入する際の第一関門です。それは、背景色が白でも黒でも見やすいメインカラーにすることです。そして、ダークモードを導入したサイトでやってはいけないのがメインカラーを蛍光色にすることです。

UXデザイナー向けコラム『UX Planet』によると、ダークモードでは視認性を下げるビビッドな色を使ってはダメなんだそう。

私の場合は第一関門からミスりました。当サイトのメインカラーは蛍光色のライムです。ロゴをデザインする段階でダークモードを見据えておくべきでした。

蛍光色は目がチカチカするからNG

ただ、どうしてもライム色を使いたかったのでダークモードを考慮して色彩の彩度を少し下げて調整することに。ダークモードで避けるべき色を上の画像にまとめたので、これからロゴを制作する場合は参考にしてください。

サイトに利用するオリジナルのロゴを外注したいという人には評判の良いプロに頼めるココナラがおすすめです。デザイナーが作った型を自身でアレンジしてロゴに仕上げたいという人にはAdobe Stockがおすすめ。

公式サイト：ココナラ/Adobe Stock

2．バナー広告が浮く

そして、実際にダークモードにしてみないと気づかないであろう問題。それは、バナー広告が浮くこと。やっぱり広告ってサイトデザインに自然になじんでほしいじゃないですか。

ダークモードにすると広告がちょっと浮きすぎてしまうんです。例えば以下の楽天の広告を見てください。これはモーションウィジェットと呼ばれます。

モーションウィジェットは2023年2月時点で白い背景のバージョンしか提供されていないので、ダークモードにするととても目立ちます。これは楽天に限った話ではないです。

最近はダークモード向けのバナーデザインを提供する企業も徐々に増えてはいますが、現状まだまだライトモードを前提にした広告ばかりなので、背景が白でも黒でも浮かない配色のデザインを増やしてほしいところ。

3．読み込み時のフラッシュ

このフラッシュと言う現象はダークモードのページを読み込むと、白い背景がフラッシュのように一瞬表示されることからそう呼ばれています。

デモサイトか何か見せれなくてアレなんですが、とにかくページを読み込むたびに白い画面が表示されるので目に負担がかかるんです。

この問題の原因は以下の引用文の通りです。

空のページと読み込み中のページだけを、ダークモード同様の黒背景にする事はできません。htmlが最初に読み込まれ、背景色の指定が最初に解析&描画されるからです。― Quora

この現象を修正するために色んな海外サイトを読みまくって試したんですが、無理だったのでライトモードを廃止にしました。当サイトがダークモード一択なのはこれのせいです。

私は以下の参考サイトを読んで実践してもダメでしたが、テーマやプラットフォームによっては改善されるかもです。一応シェアしておきます。

参考リンク：

Fix the White Flash on Page Load When Using a Dark Mode on a Static Site - Build a Theme

Light/dark mode: avoid flickering on reload

Fixing the dark mode flash issue on server rendered websites

最後に｜それでもダークモードがいい

以上、ダークモードを導入してから気づいた問題点と面倒なことを伝えましたが、それでもダークモードにするメリットは高いです。

SNSとか見てても「ダークモードじゃないとイライラする」と言う人さえいるくらいですし、以下のツイートを見てもダークモードユーザーの多さがわかるからです。

てゆうかダークモードで埋め込みさせてくれるツイッターやっぱ優秀！

みんなyoutubeって
ダークモード派？ライトモード派？
— 小清水透🫧 (@toru_2434) February 2, 2023

めったにいないと思いますが、ダークモードが見づらいという声も見られたので理想は両対応ですね。私のように強制的にダークモードにしてしまうよりも、ライトモードと切り替えができるようにしておくのがUX的にはベストかなという結論です。

最後までお読みいただきありがとうございました。おすすめUI/UX本を以下にまとめてシェアするので興味があればチェックしてみてください↓