Bootstrapで学ぶダークモード対応！初心者でもできる画像とロゴの切替ガイド
生徒
「Bootstrapでダークモードに切り替えたとき、画像やロゴの色が見えにくくなることがあるのですが、どうすればよいですか？」
先生
「Bootstrapでは、ダークモードに合わせて画像やロゴを切り替えるいろいろな方法があります。初心者でもできる簡単な方法を一緒に見ていきましょう。」
生徒
「難しい設定は必要ですか？」
先生
「むずかしい設定はありません。画像を切り替える方法、色を変える方法、SVGの特徴をいかした方法など、誰でもできる工夫がありますよ。」
1. Bootstrapのダークモードとは何かをやさしく理解しよう
Bootstrapのダークモードは、画面全体の色を暗い色に切り替えて、夜間や暗い部屋でも見やすくするための仕組みです。Bootstrapにはダークモード専用のクラスやテーマ設定があるため、特別な知識がなくても画面を暗い配色に切り替えることができます。パソコン初心者でも迷わず使えるのが特徴です。
しかし、背景が暗くなると、明るい背景で見えていたロゴや画像が見えづらくなります。白い画像が背景に溶け込んでしまうと、利用者は操作に困ってしまいます。そこで役立つのが「画像やロゴのダークモード対応」です。
2. 画像の色を変えてダークモードに合わせるfilterの使い方
画像の色を変えるために便利なのがCSSの「filter」です。filterとは、画像に色調補正をする機能で、写真を白黒にしたり、色を反転させたりできます。ダークモードでは、明るい背景用の画像をそのまま使うと目立たないことがあります。filterを使うと色を反転して視認性を上げることができます。
<style>
img.dark-invert {
filter: invert(1);
}
</style>
<img src="/img/common/logo-moku.png" width="80px" class="dark-invert" alt="ロゴ">
filterでinvertを使うと、色が反転し、白いロゴを黒背景でも見やすくできます。ただし、写真や複雑な画像には不向きな場合があるため、ロゴやアイコンに使うのがおすすめです。
3. ダークモードとライトモードで画像を切り替える方法（source切替）
Bootstrapのダークモードでは、明るい画像と暗い画像を切り替える方法がとても便利です。「source切替」という方法では、ライトモードとダークモードで別々の画像を読み込むことができます。写真や色の多い画像はfilterではきれいに変換できないため、この切替方法が役立ちます。
<picture>
<source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
<img src="/img/common/logo-moku.png" width="80px" alt="ロゴ">
</picture>
この仕組みでは、利用者のブラウザがダークモードかどうかを自動的に判断し、適切な画像を表示します。初心者でも扱いやすく、画像を自由にデザインできるため、ブランドロゴや商品写真に向いています。
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のテーマ作成とダークモード運用のポイント
Bootstrapでテーマを作成するときは、画像やロゴの見え方を確認しながら配置することが大切です。ライトモードでは明るい色のロゴがきれいに見えても、ダークモードでは背景に溶け込んでしまうなど、配色の関係で見づらくなる場合があります。
初心者は「filter」「source切替」「SVG塗り」の三つを知っておくだけで、十分にきれいなダークモード対応ができます。特に、Bootstrapのdata-bs-themeを使うと、HTML上でテーマを切り替えるだけで見た目を変更できるため、管理が簡単になります。
画像の見え方は利用者の環境によって変わるため、画面の明るさやディスプレイの種類なども意識して調整すると、より利用者に親切なサイトになります。少しずつ改善しながら仕上げることで、初心者でも高品質なデザインを作れるようになります。
