企業サイトにダークモード対応は必要か｜対応する前に確認すべきこと

端末の設定に合わせて配色を切り替えるダークモードは、対応するサイトが増えています。ただし企業サイトの場合、対応の必要性は商材と訪問者の性質によって大きく変わります。

対応すると確認する画面が実質的に倍になります。配色、写真、図版、影の表現をそれぞれ2通り用意し、両方で検証する必要があるためです。この工数に見合うかを先に判断してください。

この記事では、対応が必要な条件、色を反転させるだけでは成立しない理由、部分的に対応する方法、そして確認すべき箇所を整理します。

対応すると確認する画面が倍になる

工数が増えるのは、デザインだけでなく検証の側です。

最も負担が大きいのは最後の行です。公開後にページを追加するたび、2通りの確認が必要になります。運用の体制がないと、片方だけ崩れた状態が放置されます。

運用のしやすさは更新しやすい企業サイトの作り方｜CMS選定と運用設計のポイント、一貫性の保ち方はUIの一貫性はなぜ成果に効くのか｜崩れる原因と、揃えるべき範囲を参照してください。

必要性は訪問者の利用状況で決まる

対応の価値は、訪問者がどのような状況でサイトを見るかによって変わります。

企業サイトの多くは、下2行に該当します。検討中に数回訪れて数分ずつ見るという使われ方では、対応の効果を体感する場面がほとんどありません。

一方、記事を継続して読ませる構成であれば、対応の価値が出てきます。

色を反転させるだけでは成立しない

明るい配色をそのまま反転すると、読みにくく、印象も変わります。

• 暗い背景に白い文字を置くと、文字が滲んで見える（太さを下げる調整が要る）
• 彩度の高い色は、暗い背景で強く目立ちすぎる
• 影による立体感が効かなくなる（明るさの差で表現し直す）
• 明度差を保っても、実際の見え方は変わる
• ブランドの色が、暗い背景では別の印象になる

結果として、2通りの配色をそれぞれ設計する必要があります。反転の自動処理で済ませると、可読性が落ちます。明度差の基準は配色のコントラスト比の基準｜WCAGの数値と、実務での使い方を参照してください。

写真と図版が最も崩れやすい

配色は調整できても、素材の側は簡単に切り替えられません。

特にスクリーンショットは対処が難しい箇所です。元の画面が明るい配色である以上、暗い背景では浮きます。枠や余白で違和感を減らす方法が現実的です。

ロゴの展開についてはロゴの種類と選び方｜社名だけか、シンボルを持つかで運用が変わるを参照してください。

部分的に対応する選択肢

全ページを対応させる以外に、範囲を限定する方法があります。

記事ページだけの対応は、費用対効果が読みやすい選択です。長時間読む箇所に絞れば、素材の問題も限定されます。ただしページ間で挙動が変わるため、その点は許容できるかを確認してください。

対応しない判断も明示的に行う

対応しない場合でも、暗い設定の端末で見たときの状態は確認してください。

1. 端末を暗い設定にして、主要なページを開く
2. 意図せず一部だけ暗くなっていないか確認する
3. 入力欄の文字が見えなくなっていないか確認する
4. 問題があれば、明るい配色に固定する指定を入れる
5. その判断を記録に残す

意図せず一部だけ切り替わる状態が、最も見づらくなります。特に入力欄は、端末側の設定で見た目が変わることがあります。対応しないなら、明示的に固定するほうが安全です。

フォームの確認は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計も参照してください。

確認すべき箇所

対応する場合、崩れが出やすい箇所を優先して確認してください。

印刷の確認は見落とされがちです。暗い配色のまま印刷されると、インクを大量に消費し読めない紙が出ます。印刷用の指定を別に用意してください。

他の要素との順序

デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。

よくある失敗

色を自動で反転させて済ませる

可読性が落ちます。2通りの配色をそれぞれ設計してください。

写真と図版の対応を後回しにする

配色より対処が難しい箇所です。素材の準備を含めて工数を見積もってください。

運用の体制を決めずに対応する

追加のたびに2通りの確認が必要です。体制がないと片方が崩れたまま残ります。

対応しない場合に何も確認しない

意図せず一部だけ切り替わることがあります。明示的に固定してください。

印刷時の見え方を確認しない

暗い配色のまま印刷されると、読めない紙が出ます。

よくある質問

対応していないと評価が下がりますか

検索での評価に直接影響するという公式の記載はありません。ただし読みにくい状態が放置されていれば、離脱として現れます。対応の有無より、どちらの設定でも問題なく読めることが重要です。

切り替えるボタンを設置すべきですか

端末の設定に従うだけでも成立します。ボタンを置く場合、選択を記憶する仕組みが必要になり、実装が増えます。まず端末設定への追従から始めるのが現実的です。

既存サイトに後から追加できますか

可能ですが、配色が変数として整理されていない場合、全ページの見直しに近い工数がかかります。次のリニューアルで検討するほうが効率的なこともあります。

どのくらいの割合の人が使っていますか

端末や年齢層によって差があり、一律の数値は示せません。自社サイトの利用状況を推定したい場合、アクセス解析で判別できるかを確認してください。ただし取得できないこともあります。

メールマガジンでも対応が必要ですか

メールのアプリが独自に配色を変えることがあり、意図と異なる表示になる場合があります。特に画像の背景が白い場合に浮きます。配信前に、暗い設定の端末で確認してください。

まとめ

ダークモード対応は、対応するサイトが増えている一方で、企業サイトにおける必要性は商材と訪問者の性質によって大きく変わります。対応すると確認する画面が実質的に倍になり、特に公開後はページを追加するたびに2通りの確認が必要になります。運用の体制がないと、片方だけ崩れた状態が放置されます。

価値が出るのは、記事のように長時間読ませる箇所や、夜間の閲覧が多い場合です。逆に、検討中に数回訪れて数分ずつ見るという使われ方では、効果を体感する場面がほとんどありません。多くの企業サイトは後者に該当します。

また、明るい配色をそのまま反転させるだけでは成立しません。暗い背景に白い文字を置くと文字が滲んで見え、彩度の高い色は強く目立ちすぎます。配色以上に対処が難しいのは写真と図版で、背景が白い画像は四角く浮き、黒い線の図版は背景に溶けます。対応しない判断をする場合も、暗い設定の端末で意図せず一部だけ切り替わっていないかは確認してください。

当社ではホームページ制作において、対応範囲の判断からご相談いただけます。デザイン面の検討はデザイン制作とあわせてご相談ください。