Bootstrapで学ぶダークモード対応！初心者でもできる画像とロゴの切替ガイド

1. Bootstrapのダークモードとは何かをやさしく理解しよう

1. Bootstrapのダークモードとは何かをやさしく理解しよう

Bootstrapのダークモードは、Webサイト全体の配色をボタン一つで「明るい色（ライト）」から「暗い色（ダーク）」へ切り替えることができる非常に便利な仕組みです。2026年現在のWebデザインにおいて、ユーザーの目への負担を軽減する「目に優しい設計」は必須となっており、Bootstrapを使えば複雑なプログラミングの知識がなくても、最新のトレンドに合わせたUI（ユーザーインターフェース）を構築できます。

具体的には、HTMLのタグにdata-bs-theme="dark"という一言を追加するだけで、背景が黒系に、文字が白系に自動で変化します。これにより、夜間のブラウジングや暗い場所での操作性が飛躍的に向上します。プログラミングに慣れていない方でも、まずは「着せ替え機能」のような感覚で取り入れることができるのが最大の特徴です。

<div class="p-4" data-bs-theme="dark" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
    <h3>ダークモードが適用されたエリア</h3>
    <p>このように、背景が暗くなり文字が白く反転します。</p>
    <button class="btn btn-primary">青色のボタン</button>
</div>

しかし、ここで一つ注意点があります。背景色が暗く変わっても、ページ内に配置した「画像」や「ロゴ」の色は自動では変わりません。例えば、黒色のロゴを配置していた場合、背景も黒くなるとロゴが同化して消えてしまったように見えてしまいます。せっかくのサイトデザインが崩れないよう、次章から紹介するテクニックを使って、背景色に合わせて画像も賢く切り替えていきましょう。

2. 画像の色を1行で反転！ダークモード対応に便利なfilter属性の使い方

2. 画像の色を1行で反転！ダークモード対応に便利なfilter属性の使い方

Webサイトをダークモードに対応させる際、一番の悩みどころは「黒いロゴやアイコンが背景に溶けて見えなくなること」ではないでしょうか。わざわざ色違いの画像を用意しなくても、CSSの「filter（フィルター）」プロパティを使えば、初心者の方でもたった1行で画像の色を反転させることができます。

filterとは、画像に対してフォトショップのような加工（白黒、ぼかし、色反転など）をブラウザ上で直接実行できる機能です。特にinvert(1)という指定を使うと、色が100%反転し、黒い画像がパッと白く変わります。これにより、背景が暗いデザインでも画像の視認性を一瞬で確保できるため、SEOの観点からも重要な「アクセシビリティ（見やすさ）」の向上に直結します。

<style>
/* 背景が暗い場合にだけ適用するクラス */
.dark-mode-box {
    background-color: #333; /* 暗い背景 */
    padding: 20px;
    text-align: center;
}

.dark-invert {
    /* filter: invert(1); で色を反転（0が通常、1が完全反転） */
    filter: invert(1);
}
</style>

<div class="dark-mode-box">
    <p style="color: white;">↓CSSで色を反転させた画像</p>
    <img src="/img/common/logo-moku.png" width="80px" class="dark-invert" alt="ダークモード用の反転ロゴ">
</div>

この手法は、単色のロゴやシンプルなアイコン素材に最適です。逆に、写真などに使ってしまうと人の肌や風景が不自然な色になってしまうため、基本的には「図形的な要素」に絞って活用するのがスマートなWeb制作のコツです。手間をかけずに、ユーザーがストレスを感じない「読みやすいデザイン」を実現しましょう。

3. ダークモードとライトモードで画像を切り替える方法（source切替）

3. ダークモードとライトモードで画像を切り替える方法（source切替）

Webサイトのデザインにおいて、ライトモードとダークモードの両方に対応することは、ユーザーの目の疲れを軽減し、アクセシビリティを高めるために非常に重要です。特に、白背景で見やすいロゴや写真は、ダークモードの黒背景では見えにくくなってしまうことがあります。そこで役立つのが、HTMLの<picture>タグを使った「画像ソースの自動切り替え」です。

この方法の最大のメリットは、CSSで無理やり色を反転（filter）させるのではなく、それぞれのモードに最適化した別々の画像ファイルを読み込める点にあります。複雑なグラデーションのあるロゴや、色味が重要な商品写真なども、制作者の意図通りの美しさで表示させることが可能です。

<picture>
    <source srcset="/img/sample120-120.jpg" media="(prefers-color-scheme: dark)">
    <img src="/img/sample150-100.jpg" width="150" alt="モード切替のサンプル画像">
</picture>

プログラミングに詳しくない方でも、上記のコードをコピーして画像パスを書き換えるだけで簡単に導入できます。仕組みはシンプルで、<source>タグ内の media="(prefers-color-scheme: dark)" という記述が、ユーザーのデバイス設定（ブラウザのモード）を自動で読み取ります。条件に合致すればダーク用画像が、そうでなければ通常の <img> タグの画像が表示されるという仕組みです。

この手法はSEOの観点からも推奨されます。デバイスに不適切な画像を表示させてユーザー体験を損なうことを防ぎ、サイト全体の「使いやすさ（UX）」を高める評価につながるからです。ブランドの印象を損なわないよう、背景色に合わせた最適な画像準備を心がけましょう。

4. SVGロゴを使うと色変更が自由自在になる

4. SVGロゴを使うと色変更が自由自在になる

SVGとは、拡大しても画質が落ちない画像形式のことで、ロゴやアイコンに最適です。ふつうの画像と違って、色をCSSで変えられるため、ダークモードとの相性がとてもよいです。Bootstrapのテーマ作成でもよく使われます。

<style>
.logo-svg {
    fill: black;
}
[data-bs-theme="dark"] .logo-svg {
    fill: white;
}
</style>

<svg class="logo-svg" width="120" height="40" viewBox="0 0 120 40">
    <rect width="120" height="40" rx="5"></rect>
</svg>

SVGは色を変えたり形を変えたりできる柔軟な画像なので、サイト全体の雰囲気を統一したいときにとても便利です。白い背景でも黒い背景でもはっきり見せられるため、ダークモードでの読みやすさが大きく向上します。

5. Bootstrapのテーマ作成とダークモード運用のポイント

5. Bootstrapのテーマ作成とダークモード運用のポイント

Bootstrapでテーマを作成するときは、画像やロゴの見え方を確認しながら配置することが大切です。ライトモードでは明るい色のロゴがきれいに見えても、ダークモードでは背景に溶け込んでしまうなど、配色の関係で見づらくなる場合があります。

初心者は「filter」「source切替」「SVG塗り」の三つを知っておくだけで、十分にきれいなダークモード対応ができます。特に、Bootstrapのdata-bs-themeを使うと、HTML上でテーマを切り替えるだけで見た目を変更できるため、管理が簡単になります。

画像の見え方は利用者の環境によって変わるため、画面の明るさやディスプレイの種類なども意識して調整すると、より利用者に親切なサイトになります。少しずつ改善しながら仕上げることで、初心者でも高品質なデザインを作れるようになります。