みなさんは､夜にスマホやPCで記事を読んでいて、画面が「眩しい」と感じたことはないでしょうか。実は私自身が、その眩しさにずっと悩まされてきた一人です。そこで今回、このブログにダークモードを導入しました。夜でも目に優しく、ゆったりと記事を読んでいただける環境を整えたかったからです｡

この記事では、ダークモードを導入した背景と、その具体的な方法、そして実際にやってみて気づいたことを、なるべく分かりやすくお伝えしていきます。

なぜダークモードを追加したのか

そもそもダークモードとは

皆さんにとっては当たり前だとは思いますが､改めてダークモードの説明をさせてください｡ダークモードとは、ひとことで言えば「画面の色を反転させた表示モード」です。

ふだん私たちが見慣れているのは、白い背景に黒い文字が並んだ画面ですよね。これを「ライトモード」と呼びます。一方のダークモードは、その逆です。黒っぽい背景に、白っぽい文字が浮かび上がる表示になります。同じ記事でも、印象はがらりと変わります。

目的は「夜でも快適に読めること」

では、なぜわざわざダークモードを追加したのか。その目的はシンプルでして、夜や暗い環境でも記事を読みやすくするためです。

この目的の背景には、私自身の体験があります。というのも、私は昼夜を問わず、あらゆるアプリをダークモードで使っている「ダークモード常用者」だからです。

きっかけは、夜の「眩しさ問題」でした。以前、夜にKindleで読書をしていたとき、ライトモードの画面があまりに眩しく感じたのです。暗い部屋で白い画面を見続けると、目がチカチカしてきます。そこで試しにKindle自体をダークモードに切り替えてみたところ、これが驚くほど快適でした。それ以来､私はすっかりダークモードの愛用者になりました｡

そして、ふと思ったのです。「自分がこれだけ助かっているなら、同じように夜に記事を読む読者の方も、きっと喜んでくれるはずだ」と。これが、導入を決めた一番の理由です。

具体的にどこを対応させたのか

ダークモード対応というと、ただ背景を黒くし､文字を黒くするだけ、というイメージを持つ方もいるかもしれません。ですが、実際に手を動かすと、整えるべき箇所はもう少しありました。具体的には、「配色」「アイコン」「切り替え機能」の3つです。見た目を整えるだけでなく、読者が自分の好みで切り替えられる操作性まで含めて対応しました。順番に見ていきましょう。

① 配色の反転と細部の調整

1つ目は、基本となる配色です。ライトモードの色を反転させる作業になります。

背景は、白から黒ベースへ。文字は、黒から白ベースへ。ここまでは、いわば当たり前の反転です。ただ、それだけでは終わりませんでした。このブログのテーマカラーである青と緑のグラデーションも、トーンを細かく調整する必要があったのです。

なぜなら、まったく同じ色でも、白背景の上と黒背景の上とでは、見え方がずいぶん変わるからです。ライトモードでちょうど良かった色が、ダークモードでは妙に浮いて見えたり、逆に沈んで見えたりします。そこで一色ずつ確認しながら、ダークモードでも自然に馴染むように整えていきました。

ヘッダー部分の青と緑のグラデーション､これも若干変更されているのが分かるかと思います｡ダークモードのほうが若干暗めのグラデーションになっています｡

② アイコンの差し替え

2つ目は、アイコンです。これは、ライトモードで使っていた灰色のアイコンを、ダークモード用に白いアイコンへ差し替えました。

理由は、視認性です。黒い背景の上に灰色のアイコンを置くと、背景に溶け込んでしまい、どうしても見えづらくなります。そこで、はっきりと見える白に統一しました。

③ モード切り替えボタンの実装

3つ目は、切り替え機能です。せっかく2つのモードを用意しても、読者が自由に選べなければ意味がありません。

そこで画面の上部に、太陽マークと月マークのアイコンを設置しました。タップひとつで、ライトモードとダークモードを自由に行き来できます。以下の画像の右上に着目してください｡

なお、初期状態では、読者の方のブラウザ設定に自動で追従するようにしています。普段スマホを夜間モードにしている方なら、何もしなくても最初からダークモードで表示される、という仕組みです。

どのようにダークモードを実装したのか

ここまで読んで、「実装って、結局プログラミングが必要なんでしょう？」と身構えた方もいるかもしれません。でも、安心してください。今回の実装は、「AIへの日本語の指示」と「既存サービスの活用」という2本柱で進めました。コードは一行も書いていません。対話とちょっとしたアイコン修正だけで、すべて完結させています。

① AIに依頼する（Claude）

配色や切り替え機能の実装は、AIにお願いしました。使ったのは、Claude Codeという、現状でもかなり賢い部類に入るAIです。これに課金して活用しています。

やり方は、本当にシンプルです。日本語で指示を出すだけ。実際の画面を見ながら、「ここの色をもう少し明るくして」「この部分が読みにくいから直して」と、思いついた修正をそのまま言葉で伝えます。あとは、自分が納得できる仕上がりになるまで、その対話を繰り返すだけです。

専門的なコードを書く必要は、まったくありませんでした。日本語のやり取りだけで実装できてしまう。これは、ひと昔前なら考えられなかったことです。

② アイコンを差し替える

アイコンの差し替えには、「icooon-mono」というアイコンのダウンロードサービスを使いました。

このサイトには、アイコンの色を変更してからダウンロードできる機能があります。そこで、灰色のアイコンを白に変えて、そのまま保存しました。手間はほとんどかかりません。

ちなみに今後は、もっとオリジナル感を出したいとも考えています。AIを活用して、自分だけのアイコンを自作する方向も検討中です。

ダークモードを導入して気づいたこと

ここからが、実は一番お伝えしたい部分です。実際に対応してみて、はじめて分かったことが3つありました。

① 真っ黒・真っ白にすればいいわけではない

最初に学んだのは、色の選び方です。

私は当初、背景を純粋な黒（#000000）にして、文字を純粋な白（#ffffff）にすればいいと思っていました。ところが、これが意外と読みにくいのです。コントラストが強すぎて、文字がギラついて見えてしまいます。

正解は、少しだけ力を抜くことでした。黒はグレー寄りに、白もグレー寄りに。両方を少しずつ中間に近づけて、コントラストを「ちょうどいい強さ」に抑えるのです。すると、ぐっと目に優しくなりました。人間にとって読みやすいダークモードには、こうした「色のチューニング」が欠かせないのだと学びました。

② AIへの一発指示で完結させるのは難しい

次に痛感したのは、「一回お願いして終わり」とはいかない、ということです。

正直に言うと、私は「AIに『ダークモードにして』と頼めば、一発で完成するだろう」と高をくくっていました。ところが現実は、そう甘くありませんでした。ライトモードを前提に設定していた色が、ダークモードにした途端、あちこちで読みにくくなるのです。

しかも、ひとつ直すと別の場所に影響が出る、という連鎖も起こります。とりわけ手こずったのが、ブログ全体のテーマカラーと、シリーズやカテゴリーごとに割り当てたテーマカラーでした。ここは一つひとつ、地道に修正していくしかありませんでした。

つまり、「ダークモードにして終わり」ではないのです。細かな調整を、何度も繰り返す覚悟が必要でした。これからこうした挑戦する方は、ぜひ最初から「微調整の連続になる」と思っておいてください。

③ 画像はどうしても浮いてしまう

最後に、これは今もなお頭を悩ませている課題です。それは、画像の扱いです。

私は背景が白い画像を利用することがあります。こうした画像は、黒っぽいダークな画面の中に置くと、その部分だけ白く浮き上がってしまうのです。せっかく全体の眩しさを抑えても、浮いた画像のせいで、そこだけ目が疲れてしまいます。

この問題には、まだ完全な解決策を見つけられていません。今のところ、正直に「これは今後の課題です」とお伝えするしかありません。ただ、せっかく読者の目を労わるために始めたダークモードです。もっと快適に読んでいただける方法を、これからもあきらめずに探していきます。

おわりに

今回は、このブログにダークモードを導入した話をお届けしました。

きっかけは、夜の眩しさに悩んでいた、私自身のささやかな体験です。そして実際に導入してみると、「色は真っ黒・真っ白にすればいいわけではない」「一発の指示では完結しない」「画像はどうしても浮いてしまう」という、3つの学びがありました。どれも、やってみてはじめて分かったことばかりです。