🧠 概要：
概要
この記事は、運用中のウェブサイト「わだっつログ」をダークモードに対応させるカスタマイズ過程について述べています。ダークモードのメリットやデメリット、実装時の課題、ライトモードとダークモードのデザイン比較、設定方法などが詳しく紹介されています。
要約（箇条書き）
- ダークモードカスタマイズ中: 現在運用中のサイト「わだっつログ」でダークモードに対応。
- テーマとスキン: 「Cocoon」テーマ、スキンは「Bizarre-food（ホワイトラーメン）」を使用。
- ダークモードのメリット:
- 目の負担軽減: 暗い環境でも快適に閲覧可能。
- バッテリー消費抑制: 有機ELディスプレイで有効。
- デメリット:
- 可読性の課題: テキストと背景のコントラストが難しい。
- デザインコストの増加: 新しい配色とアイコンが必要。
- 環境依存: ユーザーの設定によって見え方が変わる。
- レイアウト比較: ライトモードとダークモードの各要素をビジュアルで比較。
- 設定方法: Windows10、iOS、Androidでのダークモードの設定手順を説明。
- 調整中の段階: 完成次第、再度記事にする予定。
この情報を元に、ダークモードの実装における様々な側面が分かります。
わだっつです。現在運用中のサイト（わだっつログ）ですが、ダークモードに対応させるカスタマイズを実装中です。
まだ一部調整が必要な所がありますが、だいぶ落ち着いてきたのでひとまず記事にしたいと思います。
運用中のサイトのテーマは「Cocoon」、スキンは「Bizarre-food（ホワイトラーメン）」をそれぞれ利用中。
1. ダークモードのメリット
目への負担軽減
暗い場所で白背景のコンテンツを長時間見るとまぶしさを感じやすいですが、ダークモードは背景を暗くすることでコントラストを抑え、目の疲労を軽減します。
今回は特に夜間や暗室での閲覧体験の向上を目的としています。
バッテリー消費の抑制
有機ELディスプレイでは黒画素を消灯できるため、ライトモード（白背景）に比べてバッテリー消費を抑えることが出来ます。
そのため、スマートフォンでの長時間利用時に有効です。
ダークモードのデメリット
視認性・可読性の課題
テキストやアイコンの色設定次第では、文字が背景に溶け込んで読みづらくなることがあります。現在、細かい部分については調整中です。
2.2 デザイン・実装コストの増加
ライトモード向けに作ったデザインや画像素材をすべて見直し、別途ダークモード用の配色やアイコンを用意する必要があります。制作工数やテスト項目も増えるため、コストがかかります。
2.3 環境依存の見え方
ユーザーのディスプレイや OS のテーマ設定によって見え方が変わるため、想定どおりのコントラストが出ない場合があります。
現在、ここら辺も調整中です。
ライトモード時・ダークモード時を比較
ライトモード時とダークモード時のレイアウトの比較をいくつか抜粋してみてみます。
サイトトップ
以下がライトモード時のサイトトップのレイアウトです。全体的に背景は白で構築しています。
サイトトップ（ライトモード時）
そして、以下がダークモード時のサイトトップのレイアウトです。背景を薄めの黒とし、文字色も白またはグレーに反転させています。
サイトトップ（ダークモード時）
目次
続いて目次。以下が目次のライトモード時のデザイン
目次（ライトモード時）
以下が目次（ダークモード時）のデザイン。色は水色としていますが、今後どうするかは検討中。
目次（ダークモード時）
続いて見出しとボタンリンク。見出しは濃いめの青を基調とし、ボタンリンクは各カテゴリー別に色分けしています。
見出し・記事本文
以下が見出し・記事本文のライトモード時のデザイン
まずは見出しと記事本文から。
見出しとボタンリンク（ライトモード時）
続いてダークモード時。見出しは背景とほぼ同じ色とし、ボタンリンクもグレー基調で統一。ここら辺はまだ調整が必要かもしれません。
見出しとボタンリンク（ダークモード時）
以下は記事本文中に埋め込んでいる検索フォーム。タブブロックでサイト内検索・Googleカスタム検索で切り替えられるようにしています。
タブブロック（要調整）
次にタブブロック。以下がライトモード時の画面
検索フォーム（タブブロック切り替え）：ライトモード時
以下がダークモード時の画面。
タブ非選択時、文字色とタブの背景色が重なっているせいか文字が見えない状態に。
何度か調整はしたのですが、なかなかうまく反映されず。ここは今後も調整が必須な箇所。
検索フォーム（タブブロック切り替え）：ダークモード時
以下は、クラシック版の段落の機能の一つ、ボックスアイコンの「アラート」。当サイトにも頻繁に埋め込んでおり、以下がライトモード時。
ボックスアイコンの「アラート」：ライトモード時
以下がダークモード時となっています。
ボックスアイコンの「アラート」：ダークモード時
ライトモード時・ダークモード時の比較は以上です。続いて各デバイス別のダークモードの設定方法です。
ダークモードの設定
各デバイス別のダークモードの設定方法は以下の通りです。
Windows10
まずはWindows10から。方法は以下の通りです。
-
「スタート」をクリック
-
「設定」をクリック
-
「個人用設定」をクリック
-
「色」をクリック
-
「色を選択する」でダークを選択
ブラウザ側の設定については、設定の「外観」または「デザイン」から「システムの既定」または「デバイス」となっていれば、自動的にダークモードが適用されます。
ブラウザ単位でオフにしたい場合、上記設定方法から「ライト」を選択すればライトモードに切り替わります。
iOS（iPhone）
続いてiPhone。方法は以下の通り。
-
「設定」をタップ
-
「画面表示と明るさ」をタップ
-
「外観モード」で「ダーク」を選択
Android（Xperia利用時）
続いて、AndroidOSの設定方法。Xperiaを例にご紹介。以下のいずれかで設定が出来ます。
まずは「STAMINAモード」から設定する方法
-
「設定」をタップ
-
「バッテリー」をタップ
-
「STAMINAモード」をタップ
-
「STAMINAモードを使用」のトグルをOFFにする
続いて、「画面設定」から設定する方法
-
「設定」をタップ
-
「画面設定」をタップ
-
「STAMINAモード」のトグルをONにする
ざっとこのような感じ。
まだ調整中の段階ではありますが、完成次第また記事にしたいと思いますので、今後ともよろしくお願いいたします。
Xのアカウントはこちら。（@wadattsu261)
また、併せて現在運用中の駅ホーム停止位置情報、乗り換え案内情報サイト（わだっつログ）もよろしくお願いします！
今回は以上です。ここまでお読みいただきありがとうございました。
Views: 0
