ひとつの画像でライトモードとダークモード両方に対応する方法

2020-07-08, 2020-07-05

メディアクエリのモード分け(light or dark)を使わずに、シンプルに1つの画像でライトモードとダークモード両方に対応する方法を解説します。ポイントは、写真は暗めにし、イラストは背景を透過させてさらに黒色文字等を灰色にすることです。

ダークモードとは

ダークモードの概要

ダークモードとは、ウェブサイトやアプリの黒基調デザインを指します。各種OSやブラウザが既にダークモード表示に対応しており(プラグインで対応する場合もあります)、従来のライトモードと新しいダークモードを選択する自由がユーザーにはあります。

このダークモードでは、暗い背景に明るい文字等で情報を伝えます。それゆえ、情報伝達量はライトモード、ダークモードともに変わりません。

しかし、不要な情報のほとんどが暗くなり、必要な情報が明るくなるために、以下の絶大なるメリットがあります。

ダークモードのメリット

ダークモードのメリットは2つあります。

ダークモードは目が疲れにくい

ライトモード(基本背景色が白)では、あらゆる可視域の波長の光が、情報量の少ない背景から発せられています。言い換えれば、ライトモードのディスプレイを眺めることは、晴れた眩しい空を眺めて空を飛ぶカラスや飛行機を認識することと同義です。目に負担がかかるため、何時間もそんな状態を維持できません。

一方のダークモード(基本背景色が黒)では、夜空の星を眺めることと同義です。星空を何時間見たとしても、目が疲れることはないでしょう。

つまり、ダークモードは目に優しい望ましい表示モードです。積極的に、ダークモードに切り替えていきましょう。

ダークモードではモバイルのバッテリーが長持ちする

モバイル端末のディスプレイは、LCDが廃れ、OLEDまたはµLEDが主流になります。それらの自発光素子は、ダークモードの場合、ディスプレイの大部分を占める背景では、ほとんど光っていない(電気を使わない)ことになり、消費電力を著しく低減できます。

モバイル端末を長時間動作させたい場合は、そのような次世代ディスプレイを利用して、ダークモードに切り替えましょう。

ウェブサイト側の対応が必要

このように、ダークモードは積極的に採用されていきますが、ウェブサイト側でもいくつかの対応が必要です。特に画像をダークモードに対応させるのは骨が折れる作業です。

一般的には、メディアクエリのprefers-color-schemeでlightとdarkを場合分けするのですが、それぞれのモードに対応した画像を用意する必要があり面倒です。少なくとも髭犬はできません。

この記事では、簡便にライトモードとダークモードの両方に対応した画像を作る方針を紹介します。

ライトモードとダークモード両方に適した画像にする方法

ここではいくつかのパターンに場合分けして、画像をライトモードとダークモード両方に対応させるための方針を解説します。

明るい写真は暗くする

例えば、いかにも眩しい以下の写真をダークモードで表示させると目がやられます。

このような眩しい写真に対しては、以下のようにある程度暗くしておく必要があります。これで、ライトモードでもダークモードでも対応可能な写真になりました。

もしアイキャッチなどで、写真を自由に選べるなら、最初から背景部分が白く明るいものを避けた方が良いでしょう。なお暗めの写真は特に対応不要です。

明るい背景のイラストは背景を透過色にする

デザイン、イラスト、ロゴ等では、背景が真っ白になる場合があります。そのような画像は、ダークモードでは背景が眩しく目がやられます。背景を透過色に変更しましょう。ライトモードでは背景が明るく、ダークモードでは背景が暗くなります。

お気づきかもしれませんが、この「髭犬のサイト」のロゴは、背景が透過色になっています。

背景が透過色の場合は、黒色のイラストや文字を灰色にする

背景を透過色にしたイラストやデザインで、透過背景と隣接する黒色の箇所はダークモードでは消えたように見えます。それを防ぐために、当該黒色の箇所の色を灰色に変更しましょう。これで、ライトモード、ダークモードどちらでも灰色として認識できるようになります。

お気づきかもしれませんが、この「髭犬のサイト」のロゴは、透過色の背景に隣接する文字が灰色になっています。

SVGアイコンの場合はfill:currentColorで文字色と同じにする

SVGアイコンを.svg画像ファイルではなく、ソースとしてHTMLに埋め込んでいる場合は、そのpathのfillの色設定を"currentColor"にしておけば文字と同じ色になります。ライトモードでもダークモードどちらでも文字と同じ色なので、しっかり認識できるはずです(一部ブラウザのダークモードで例外あり)。

気になる方は、以下のSVGアイコンのソースを表示して確認ください。

ライトでもダークでも問題ない画像を使おう

バッテリーの持ちを良くするために、将来的にはダークモードがスタンダードになると予想されます。これからサイトを立ち上げる方は、ライトモードでもダークモードでも情報が伝わる画像を使いましょう。

以下リンクより、1つ前のカテゴリに戻れます。

ウェブサイト運営 流行りのWordPressを使わず原始的な手打ちで「髭犬のサイト」を管理している時代遅れの髭犬が、どのようにサイトを運営しているか、その運営方針や設定等を紹介します。