ダークモード — その概要、モバイルアプリケーションにおけるダークインターフェーステーマ

ダークモードとは何か、なぜ必要か？

ダークモードは、画面の背景が暗く（通常Androidでは#121212、iOSでは#1C1C1E）、テキストやインターフェース要素が明るい配色です。単純な色の反転とは異なり、高品質なダークモードは慎重に選択されたパレットを使用します。純粋な黒ではなくダークグレーの背景（ハロー効果を低減）、彩度を抑えたアクセントカラー、ソフトなシャドウです。システムレベルのダークモードサポートは、iOS 13（2019年9月）とAndroid 10（2019年9月）で登場しました。

採用の主な理由はユーザーの快適性です。薄暗い環境（夕方、暗闇）では、明るい白い画面が眼精疲労を引き起こし、頭痛の原因になることがあります。ダークモードは、読みやすさを犠牲にすることなく画面の明るさを低減します。光過敏症や光に敏感なユーザーにとって、ダークテーマはオプションではなく、アプリケーションを快適に使用するための唯一の方法です。Android Developersによると、Androidユーザーの30%以上が常にダークテーマを有効にしています。

ダークモードはOLED画面でバッテリーを節約します。LCDではバックライトが常に点灯しているのに対し、OLEDピクセルは自ら発光します。暗い色はピクセルがオフであることを意味し、消費電力が低下します。Google（Android Developers Blog、2019）によると、OLEDディスプレイを搭載したPixelで、100%の明るさでのダークモードは、ライトテーマと比較して消費電力を60%削減します。LCD画面では、マトリックスバックライトがピクセルの色とは無関係に動作するため、節約は最小限（約3〜5%）です。

モバイルOSにおけるダークモードの歴史

システムサポートはいくつかの段階を経てきました。iOS 13（2019年）はUIUserInterfaceStyleによるグローバルダークテーマを導入しました。Android 10（2019年）は、独自のダークテーマを持たないアプリケーション向けにForce Dark Modeを追加しました。Android 12（2021年）のMaterial Youは、壁紙から自動的にダークパレットを生成し始めました。iOS 15（2021年）は、Safariおよびウェブコンテンツ向けにAPIを拡張しました。StatCounter（2026年）によると、App StoreとGoogle Playのトップ100アプリケーションの82%がダークモードをサポートしています。

iOSのダークモード: Swift APIとUIKitサポート

iOSダークモードAPIは、UITraitEnvironmentプロトコルに基づいています。すべてのUIViewControllerとUIViewは、traitCollection.userInterfaceStyleプロパティを持ち、.unspecified、.light、.darkのいずれかになります。システムテーマが変更されると、iOSはtraitCollectionDidChange(_:)メソッドを呼び出します。開発者はこのメソッドで色を更新するか、ライトパレットとダークパレットを自動的に切り替える動的色（UIColor(dynamicProvider:)）を使用する必要があります。

class ViewController: UIViewController {

    @IBOutlet var titleLabel: UILabel!

    override func traitCollectionDidChange(_: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateColors()
        }
    }

    func updateColors() {
        let isDark = traitCollection.userInterfaceStyle == .dark
        view.backgroundColor = isDark ? UIColor(named: "darkBackground") : .systemBackground
        titleLabel.textColor = isDark ? .white : .darkText
    }
}

// ダークモードの強制有効化
window.overrideUserInterfaceStyle = .dark

動的色は、iOSでダークモードを実装する最良の方法です。UIColor(named:)は、.lightおよび.darkの外観に対してAsset Catalogから自動的に異なる値を読み込みます。Assets.xcassetsで2つのバリアント（Any Appearance + Dark Appearance）を持つ色を定義するだけで、UIKitが自動的に適切な色を選択します。動的システム色（UIColor.systemBackground、.label、.secondaryLabel）は既にダークモードをサポートしており、自動的に変更されます。

SwiftUIとダークモード

SwiftUIはダークモードを標準でサポートしています。すべての標準色とモディファイア（Color.primary、.background、Color(UIColor.systemBackground)）が自動的に適応します。カスタム色には、動的UIColorと共にColor(uiColor:)を使用するか、@Environment(\.colorScheme)変数を使用して明示的にテーマを確認します。SwiftUI Viewは、traitCollectionDidChangeを呼び出さなくても、テーマの変更時に自動的に再描画されます。

struct ThemeView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("ダークモード")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Androidのダークモード: Kotlin APIとAppCompat

Androidダークモードは、AppCompatライブラリとTheme.AppCompat.DayNightテーマを通じて実装されます。昼間はライトテーマ、夜間はダークテーマが使用されます。強制有効化は、AppCompatDelegate.setDefaultNightMode()を介して設定されます：MODE_NIGHT_YES（ダーク）、MODE_NIGHT_NO（ライト）、MODE_NIGHT_FOLLOW_SYSTEM（システム）。リソースは、ライト（res/values/styles.xml）とダーク（res/values-night/styles.xml）に分けられます。

// ダークテーマの強制有効化
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // super.onCreateの前に設定
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // 現在のテーマを決定
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// AndroidManifest.xmlにナイトモードを登録
// android:configChanges="uiMode"

Force Dark Modeは、Android 10+のシステム機能で、ダークテーマをサポートしていないアプリケーションの色を自動的に反転します。開発者オプションまたはテーマ内のandroid:forceDarkAllowed="true"属性を介して有効にします。これは一時的な解決策です。本番環境では、values-nightを介して独自のダークパレットを実装する必要があります。そうしないと、視覚的な品質が低下します（反転したアイコン、読みにくい色）。

Material You Dynamic Themes

Material You（Android 12+）は、デバイスの壁紙から5つの主要色（primary、secondary、tertiary、neutral、neutralVariant）を自動的に生成します。各色について、ライトパレットとダークパレットが作成されます。開発者は属性（?attr/colorPrimary、?attr/colorOnPrimary、?attr/colorSurface）を使用します。システム自体が現在のテーマに適したバリアントを選択します。Dynamic Colorは、Material Design 3（com.google.android.material:materialコンポーネント）を使用したAndroid 12+でサポートされています。

// values/themes.xml — ライトテーマ
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_light</item>
    <item name="colorOnPrimary">@color/on_primary_light</item>
</style>

// values-night/themes.xml — ダークテーマ
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

ダークテーマのデザイン: コントラストと色のルール

ダークモードのデザインは、単なる色の反転ではありません。Google Material Designは、純粋な黒の代わりにダークグレー（#121212）を使用することを推奨しています。純粋な黒（#000000）は白いテキストとのコントラストが高すぎ、ハロー効果（文字の周りの晕き）を引き起こします。要素の標高（ elevation）は色で表現されます。要素が高いほど、背景は明るくなります。背景上のカードは#1E1E1E、ダイアログは#2D2D2D、ナビゲーションパネルは#383838です。

色のコントラストは、ダークモードではライトモードよりも低くする必要があります。Material Designの推奨：プライマリテキスト — 白色（#FFFFFF）透明度87%、セカンダリ — 60%、無効 — 38%。アクセントカラーは彩度を低くする必要があります。ライトテーマでprimary = #6200EEの場合、ダークテーマでは#BB86FC（明るく落ち着いた紫）です。WCAG 2.1によると、通常のテキストの最小コントラスト4.5:1は両方のテーマで維持する必要があります。

画像とアイコンは、ダークテーマで個別の処理が必要です。透明度のあるアイコンは明るい色に塗り替える必要があります。背景が明るい写真は眩しく感じられることがあります。明るさを20〜30%減らすか、半透明のオーバーレイを追加することをお勧めします。ロゴやブランド要素には、ダーク背景用のバージョンを使用してください。iOS Asset CatalogとAndroid VectorDrawableは、ライトテーマとダークテーマで別々のリソースをサポートしています。

ダークモード vs ライトモード: メリットとデメリット

テーマの選択は、使用環境、コンテンツの種類、ユーザーの好みによって異なります。Nielsen Norman Group（2020年）の調査では、通常の照明下ではライトモードの方が15〜20%高い読書速度を提供することが示されました。しかし、薄暗い環境ではダークモードが眼精疲労を軽減し、読みやすさを向上させます。大量のテキスト（記事、ドキュメント）を含むインターフェースでは、通常ライトモードが好まれます。

消費電力は、OLEDでのダークモードの重要な論拠です。Google（2019年）によると、OLED画面でのダークテーマのYouTubeは、ライトテーマよりも43%少ないエネルギーを消費します。Googleマップは32%です。インターフェースが明るく、画面の明るさレベルが高いほど、節約効果は大きくなります。LCD画面では、節約効果は5%を超えません。屋外の強い日差しの中でアプリケーションを頻繁に使用するユーザーにとっては、ライトモードが唯一読み取り可能なオプションです。

IT Sectrの推奨事項 — 当社は、システム（システムに従う）、ダーク、ライトの切り替えオプションを備えた両方のテーマを実装しています。自動切り替えだけが唯一のオプションであってはなりません。ユーザーは日中にダークテーマ（片頭痛のため）や夜間にライトテーマ（読書のため）を望む場合があります。当社のプロジェクトでは、プロファイル設定にテーマ切り替えを追加し、選択を記憶します。プレミアムコンテンツ（写真、ビデオ）を含むアプリケーションでは、適用前にテーマのプレビューを推奨します。