CSSメディアクエリでダークモードを設定！WebサイトのUXを向上させる方法

Webサイトのダークモード対応が求められる背景

近年、スマートフォンやパソコンのOS設定で「ダークモード」を好むユーザーが急増しています。ユーザーの目に優しく、バッテリー消費を抑える効果もあるため、Webサイト側でもこの設定に対応することが、利便性（UX）の向上に直結します。

「自社のホームページも最新のトレンドに合わせたい」「ユーザーにとって使いやすいサイトにしたい」とお考えの方は多いのではないでしょうか。今回は、CSSのメディアクエリを使用した具体的な設定方法と、成果を出すためのポイントを解説します。

CSSメディアクエリ「prefers-color-scheme」の使い方

ブラウザやOSのダークモード設定を検知するには、CSSのメディアクエリである prefers-color-scheme を使用します。これにより、ユーザーの環境に合わせて自動的にデザインを切り替えることが可能です。

基本的な記述コード

以下は、通常時（ライトモード）とダークモード時で背景色と文字色を切り替える基本的なコードです。

• light：ユーザーがライトテーマを希望している、または明示していない場合
• dark：ユーザーがダークテーマを選択している場合

例えば、ダークモード時に背景を黒、文字を白にする場合は、メディアクエリ内で色を指定し直すだけで対応できます。これにより、個別にページを作り直すことなく、スマートな対応が可能になります。

株式会社ドラマが提案する「価値を高める」サイト制作

単に背景を黒くするだけでは、Webサイトの目的である「集客」や「売上アップ」には繋がりません。株式会社ドラマでは、ホームページを作りたい、あるいはWeb周りの問題を解決したいとお考えの方に対し、以下の視点での最適化を提案しています。

• 可読性とブランドイメージの両立：コントラストが強すぎると逆に目が疲れてしまいます。ブランドカラーを活かしつつ、長時間見ても疲れない配色設計が重要です。
• 画像やロゴの最適化：背景が暗くなった際に、ロゴが見えなくなったり画像が浮いて見えたりしないよう、細部まで調整を行います。
• コンバージョンへの導線設計：ダークモード下でも「お問い合わせ」ボタンなどが埋もれず、自然にアクションを促せるようなデザインを追求します。

私たち株式会社ドラマは、京都を拠点にWeb制作やITコンサルティングを行っています。技術的な実装はもちろん、ビジネスの成果に繋がるWeb戦略をトータルでサポートいたします。

まとめ：Web周りのお悩みは株式会社ドラマへ

ダークモード対応は、今やユーザーに選ばれるWebサイトを作るための重要な要素の一つです。CSSのメディアクエリを活用し、多様な視聴環境に合わせたサイト制作を行いましょう。設定方法が分からない、あるいは現在のサイトをより良く改善したいとお悩みの方は、ぜひプロの手を借りることも検討してみてください。

株式会社ドラマでは、ホームページ制作からSEO、ITコンサルティングまで、Webに関するあらゆる課題解決をお手伝いいたします。まずはお気軽にお問い合わせ、お電話、お申し込み、またはお見積りのご依頼をお待ちしております。