---
title: "ダークモードとは？暗い配色に切り替える仕組みの基礎"
description: "端末のダークモード設定に連動してサイトの配色を切り替えるにはprefers-color-schemeメディアクエリを使います。CSSカスタムプロパティと組み合わせた実装パターンと、ユーザーが手動で切り替えられるようにする方法も含めて解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/dark-mode-term"
markdown: "https://giga-site.com/articles/dark-mode-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# ダークモードとは？暗い配色に切り替える仕組みの基礎

スマホやパソコンの設定で「ダークモード」にすると、アプリやサイトの背景が黒っぽくなる。あの暗い配色への切り替えはどう実現されているのでしょうか。この記事では、端末の設定に合わせて配色を変えるprefers-color-schemeの考え方を、初めての人にもわかるように整理します。

> Source HTML: https://giga-site.com/articles/dark-mode-term
> Article index: https://giga-site.com/articles/index.md

## ダークモードとは何か

ダークモードとは、画面の配色を暗い背景に明るい文字という組み合わせに切り替える表示方法です。これに対し、白い背景に暗い文字という従来の配色はライトモードと呼ばれます。

暗い場所でのまぶしさが和らぐ、好みに合う、といった理由で広く使われるようになりました。多くのOSやブラウザが、利用者の好みを設定として持っています。

## prefers-color-schemeで端末設定に合わせる

ダークモード対応の中心になるのが、prefers-color-schemeという仕組みです。これは「利用者の端末がライトとダークのどちらを好む設定になっているか」をWebページ側で受け取れるものです。

この設定を読み取り、ダークが好まれているときだけ暗い配色のスタイルを当てる、という形にすれば、利用者が特別な操作をしなくても、端末の設定に自然に追従できます。

サイト内に自前の切り替えスイッチを置く方法もありますが、まずは端末設定に合わせるところから始めると、少ない手間で多くの人の好みに対応できます。

## 実務ではどこで関係する？

ダークモードは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

ダークモードについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 配色で気を付けること

ダークモードは、ライトモードの色をそのまま反転すればよいわけではありません。真っ黒な背景に真っ白な文字は、かえって目が疲れることがあります。少し色を抑えた組み合わせが読みやすいとされます。

文字と背景の明暗の差（コントラスト）が十分にあるかも重要です。暗い配色では色が沈んで読みにくくなりがちなので、どちらのモードでも文章がきちんと読める配色を選ぶ必要があります。

## ダークモード対応を進める手順

いきなり完璧を目指さず、段階的に対応するのが現実的です。次の順で進めると整理しやすくなります。

1. まずライトモードの配色をきちんと整える
2. 色を直接書かず、まとめて管理できる形にしておく
3. prefers-color-schemeでダークが好まれる場合の指定を追加する
4. ダーク時の背景・文字・リンクなどの色を決める
5. 明暗の差が十分か、両モードで読みやすさを確認する
6. 画像やアイコンが暗い背景で見づらくないかも確認する

## 見落としやすいポイント

背景色は変えたのに、画像やアイコン、影の付け方がライトモードのままで浮いてしまう、というのはよくある見落としです。白背景前提の素材は、暗い背景で縁が目立つことがあります。

また、フォームの入力欄やボタンなど、見落としがちな細かい部分の配色も忘れずに確認します。一部だけ明るいままだと、そこだけ強く目立って違和感が出ます。

## 両モードの見え方を共有して確認する

ダークモードの仕上がりは、自分の端末設定だけでは片方しか確認できないこともあり、両方のモードで見え方を比べたいところです。関係者の端末設定もまちまちなので、実際に見てもらうのが確実です。

ギガサイト便なら、作りかけのHTMLをドロップして発行されたURLを共有でき、相手は自分の端末で、それぞれの設定でのダーク/ライト表示を確認できます。同じURLのまま差し替えられるので、配色を調整しては再確認する作業に向いています。社外に見せたくない試作なら認証の併用も選べます。

## よくある質問

### ダークモードは利用者が操作しないと切り替わりませんか？

prefers-color-schemeを使えば、利用者の端末がダークを好む設定になっているとき自動的に暗い配色を当てられます。サイト内に切り替えスイッチを別途用意することもできますが、まず端末設定に合わせるところから始めると手軽です。

### ライトモードの色を反転するだけでよいですか？

単純な反転はおすすめできません。真っ黒な背景に真っ白な文字はかえって目が疲れることがあり、少し色を抑えた組み合わせが読みやすいとされます。明暗の差を保ちつつ、暗い配色に合った色を選び直すのがよいでしょう。

### ダークモード対応で見落としやすい部分は？

背景色は変えたのに、画像やアイコン、影、フォームの入力欄などがライトモードのまま残って浮いてしまうケースが多いです。白背景前提の素材や細かいUI部品まで含めて、暗い背景でも違和感がないか確認しましょう。

### ダークモードは必ず対応すべきですか？

必須ではありませんが、暗い場所での見やすさや好みの面で歓迎されることが多い機能です。対応する場合は、両モードとも文章がきちんと読めるコントラストを保つことを優先するとよいでしょう。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [コントラスト比とは？文字が読みやすい配色の基礎](https://giga-site.com/articles/color-contrast-term/index.md)
- [CSSアニメーションとは？keyframesで動かす仕組みの基礎](https://giga-site.com/articles/css-animation-term/index.md)
- [position:stickyとは？スクロールで追従するヘッダーの基礎](https://giga-site.com/articles/sticky-header-term/index.md)
- [ミニファイ（minify）とは？ファイル圧縮の基礎](https://giga-site.com/articles/what-is-minify/index.md)
- [ダークモードで文字が読めないときの対処](https://giga-site.com/articles/dark-mode-unreadable/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ダークモードとは？暗い配色に切り替える仕組みの基礎",
  "description": "端末のダークモード設定に連動してサイトの配色を切り替えるにはprefers-color-schemeメディアクエリを使います。CSSカスタムプロパティと組み合わせた実装パターンと、ユーザーが手動で切り替えられるようにする方法も含めて解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/dark-mode-term",
  "url": "https://giga-site.com/articles/dark-mode-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ダークモードは利用者が操作しないと切り替わりませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "prefers-color-schemeを使えば、利用者の端末がダークを好む設定になっているとき自動的に暗い配色を当てられます。サイト内に切り替えスイッチを別途用意することもできますが、まず端末設定に合わせるところから始めると手軽です。"
      }
    },
    {
      "@type": "Question",
      "name": "ライトモードの色を反転するだけでよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "単純な反転はおすすめできません。真っ黒な背景に真っ白な文字はかえって目が疲れることがあり、少し色を抑えた組み合わせが読みやすいとされます。明暗の差を保ちつつ、暗い配色に合った色を選び直すのがよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "ダークモード対応で見落としやすい部分は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "背景色は変えたのに、画像やアイコン、影、フォームの入力欄などがライトモードのまま残って浮いてしまうケースが多いです。白背景前提の素材や細かいUI部品まで含めて、暗い背景でも違和感がないか確認しましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "ダークモードは必ず対応すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "必須ではありませんが、暗い場所での見やすさや好みの面で歓迎されることが多い機能です。対応する場合は、両モードとも文章がきちんと読めるコントラストを保つことを優先するとよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```