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

画像・ロゴのダーク対応：filter・source切替・SVG塗りの実例

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでダークモードに切り替えたとき、画像やロゴの色が見えにくくなることがあるのですが、どうすればよいですか？」

先生

「Bootstrapでは、ダークモードに合わせて画像やロゴを切り替えるいろいろな方法があります。初心者でもできる簡単な方法を一緒に見ていきましょう。」

生徒

「難しい設定は必要ですか？」

先生

「むずかしい設定はありません。画像を切り替える方法、色を変える方法、SVGの特徴をいかした方法など、誰でもできる工夫がありますよ。」

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属性の使い方

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切替）

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ロゴを使うと色変更が自由自在になる

ウェブサイトのデザインにおいて、ロゴは「サイトの顔」とも言える重要な要素です。そこで活用したいのが「SVG（エスブイジー）」という画像形式です。一般的な写真（JPEGやPNG）は、拡大すると輪郭がぼやけてしまいますが、SVGは「図形の計算式」でできているため、どれだけ大きくしても画質が一切劣化しません。

さらに、SEOやユーザー体験の観点から2026年のスタンダードとなっている「ダークモード」への対応も、SVGなら簡単です。 SVGは「画像」でありながら「プログラムコード」のような性質を持っているため、CSSを使ってWebサイトの背景色に合わせてロゴの色を瞬時に切り替えることができます。これにより、暗い画面でもロゴが埋もれず、読みやすさとブランドイメージを両立させることが可能です。


<style>
    /* 通常時（ライトモード）はロゴを黒色にする */
    .logo-svg {
        fill: #333333;
        transition: fill 0.3s ease; /* 色が変わる動きを滑らかにする */
    }

    /* ダークモードの設定：背景が暗いときはロゴを白色に変更 */
    [data-bs-theme="dark"] .logo-svg {
        fill: #ffffff;
    }

    /* サンプル用の背景エリア */
    .preview-box {
        padding: 20px;
        border: 1px solid #ddd;
        text-align: center;
    }
</style>

<div class="preview-box">
    <svg class="logo-svg" width="120" height="40" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
        <rect width="120" height="40" rx="8"></rect>
        <text x="60" y="25" font-family="Arial" font-size="14" fill="red" text-anchor="middle">LOGO</text>
    </svg>
    <p class="mt-2 small text-muted">※モードを切り替えると、この四角形の色が変わります</p>
</div>

ブラウザ表示

このように、SVGを採用することで、わざわざ「白いロゴ画像」と「黒いロゴ画像」の2種類を用意する必要がなくなります。プログラミング未経験の方でも、CSSの「fill（塗りつぶし）」という命令を覚えるだけで、サイト全体の雰囲気に合わせた色調整が自由自在になります。軽量で表示速度も速いため、Googleからの評価も高まりやすく、今の時代のWebサイト制作には欠かせないテクニックです。

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

Bootstrapを使って本格的なサイトを作る際、避けて通れないのが「ダークモード」への対応です。ライトモードでは清潔感のあったデザインも、背景を黒にするだけでロゴが見えなくなったり、画像が浮いてしまったりすることがあります。2026年現在のWebデザインでは、ユーザーのシステム設定（OSの設定）に合わせて自動で切り替わる「使いやすさ」がGoogleの評価（UX指標）にも繋がっています。

プログラミング経験がない方でも、Bootstrapの「data-bs-theme」属性を使えば、HTMLを一行書き換えるだけでサイト全体をダークモードにできます。しかし、画像やロゴの調整には少し工夫が必要です。初心者が覚えておくべき、実用的で簡単な3つの手法をサンプルと一緒に見ていきましょう。

手法①：CSSフィルターでロゴの色を反転させる

黒色のロゴはダークモード（背景が黒）では消えてしまいます。画像ファイル自体を差し替えなくても、CSSの「filter」機能を使えば、ブラウザ上で一瞬で色を白く反転させることができます。


<style>
    /* ダークモードの時だけ、ロゴにフィルターをかける設定 */
    [data-bs-theme="dark"] .custom-logo {
        filter: invert(1) brightness(2); /* 色を反転させて明るさを調整 */
    }
</style>

<div class="p-4 border">
    <div class="mb-3">
        <p class="small text-muted">【ライトモードでの見え方（背景白）】</p>
        <div class="bg-light p-3">
            <img src="/img/sample150-100.jpg" alt="サンプルロゴ" class="img-fluid" style="width: 100px;">
        </div>
    </div>

    <div>
        <p class="small text-muted">【ダークモードでの見え方（背景黒＋フィルタ適用）】</p>
        <div class="bg-dark p-3 text-white" data-bs-theme="dark">
            <img src="/img/sample150-100.jpg" alt="サンプルロゴ" class="img-fluid custom-logo" style="width: 100px;">
            <p class="mt-2 small">←黒い画像が白っぽく補正されます</p>
        </div>
    </div>
</div>

ブラウザ表示

手法②：pictureタグで画像を自動的に切り替える

ロゴや図解など、ライト用とダーク用で全く別の画像を用意したい場合は、HTMLの「picture」タグを使うのが一番確実です。これは「もしダークモードならAの画像を、それ以外ならBの画像を出す」という命令をブラウザに伝えます。


<div class="p-4 border">
    <h5>環境に合わせて変わる画像</h5>
    <picture>
        <source srcset="/img/sample120-120.jpg" media="(prefers-color-scheme: dark)">
        <img src="/img/sample150-100.jpg" alt="モード別画像" class="img-fluid">
    </picture>
    <p class="mt-2 small text-muted">※PCやスマホの本体設定が「ダークモード」の場合に画像が変化します。</p>
</div>

ブラウザ表示