ダークモード化できるプロモーションサイトを作った話

こんにちは、ゴンドウと申します。
ダークモードについて書こうと思います。

そもそもダークモードについておさらいすると、明るい色のテキストに暗色系の背景を使用するカラースキームであり、主にコンピュータの UI デザインや Web デザインで話題に挙がるものです。

ちなみにこの記事もクロームの拡張機能でダークモード化してテキストを書いています。

こんな感じで表示されています。
ダークモードの特徴は主に３つ

１.目に優しい

白ベースの画面と黒ベースの画面でそれぞれ１時間、Note.の記事を読んでみましたが、黒ベースの方が疲れにくい気がしました。私は目が疲れると目薬を使うのですが、白ベース＝2滴。黒ベース＝0滴という結果になりました。

もちろん、「今、目に優しい画面を見ているんだぞ！」という思い込みの力もあると思いますが、昔からPC画面を長時間見る開発者はエディタ系のアプリに黒系のテーマを適用している事を考えると納得できます。

2.消費電力を抑えられる

ただし液晶画面ではほとんど効果がなく、有機ELだと効果があると言われています。理由は簡単で液晶はバックライトとドットの上にカラーフィルターをかぶせる構造（黒い画面でもバックライトは発光している）で、有機ELはドットそのものが発光する構造のため、黒ではドットが発光しないのです。そのため有機ELの場合に限りダークモードで消費電力を抑えられるのです。

3.ヨウジヤマモト好きがハマりそう

これは特徴というより個人的な思いつきですが、黒の洋服しか着ない人いますよね。全身ヨウジヤマモトみたいな人です。彼ら彼女らは黒が好きだから、ダークモードにしっかりハマってくれると思います。やはりオシャレに敏感な人たちが使ってくれると一般にももっと広まると思います。

そうだ！ダークモードサイトを作ろう

で、このダークモードを自社のプロモーションサイトに適用しちゃおうと考えたんです。私たちはUIデザインなどを請け負うデザインチームですが、他社と同じような清潔感のある白ベースでサイトを作っても埋もれてしまうと思います。（ちょっと宣伝臭がしてきましたよね。すみません！）

もちろん多くの制作会社が白ベースのサイトなのは理由があって、イメージを固定せず様々な雰囲気やテイストに対応できるように見せたいからです。

なので完全に黒ベースのサイトを作るのではなく、ダークモードと白ベースのライトモードに切り替えできるサイトにしようと考えました。

こんな感じです。（メニュー左横のデスクライトボタンを押すと変化）
https://eastdesign.est.co.jp/

ブラウザの拡張機能で強制的にダークモード化するのとは違い、自然な色合いだと思います。また、ふわ〜とフェードして変化するのも気持ちがよいです。よかったらご覧になってください。