定義・概要
ダークモードとは？
寝る前にベッドでスマホを手に取ると、部屋の明かりは消えているのに、白い画面がライトのように顔を照らします。ダークモードは、まさにこんな場面のためにあります。
ダークモード（Dark Mode）は、ウェブサイトやアプリの画面を、いつもの白い背景に黒い文字ではなく、暗い背景と明るい文字やアイコンで表示する方法です。内容はそのままです。ボタンもメニューも言葉も同じで、変わるのは色だけ。周りが暗いときでも、画面が目にやさしくなるようにするためです。
ナイトモードやダークテーマとも呼ばれます。今ではスマホやパソコンのシステムにも、毎日使うほとんどのアプリにも入っているので、新しいサイトやアプリにもあって当然だと考える人が増えています。
ダークモードの仕組み
スマホやパソコンには、明るい表示か暗い表示かを選ぶ全体の設定があり、日没になると自動で切り替わる機器もあります。よく作られたサイトやアプリはこの設定を読み取り、開いた瞬間から合った色で表示します。
もう一つの方法もあります。サイトやアプリの中にある小さなボタンで、太陽と月の形をしていることが多く、利用者が自分でモードを切り替えられます。その後はシステムが選択を覚えておくので、訪れるたびにライトモードに戻ることはありません。
裏側では、デザイナーが画面上のすべてのものに2組の色を用意します。背景、文字、ボタン、枠線、表などです。システムはモードに合わせて、ふさわしいほうの組を使います。昼用と夜用の2種類の照明がある部屋を思い浮かべてください。照明が変わっても、家具は同じ場所にあります。
ダークモードがあなたにとって大事な理由
サイトやアプリを持っているなら、訪問者は一日のさまざまな時間にそれを開きます。夜に見る人もたくさんいます。ダークモードは、そうした時間の使い心地をはっきり変えます。
- 暗い場所でも目が楽：暗い部屋でも、暗い画面はまぶしくありません。読者は記事を最後まで読んだり、商品を長く見たりしても、つらくなりません。
- バッテリーの節約：OLED画面のスマホでは、黒い点はほぼ消えていて電気を使いません。そのため、こうした画面ではダークモードのほうがバッテリーの消費が少なくなります。
- 長く働く人の疲れが減る：一日じゅう管理画面や管理システムの前にいる社員は、終業のころに違いを感じます。夜勤ではなおさらです。
- 利用者の選択を大切にする：スマホで暗い表示を選んでいる人が、真っ白に光るあなたのサイトを開いたら、このサイトは自分のことを気にかけていないと感じるでしょう。
では、ダークモードがいつも良いのでしょうか？そうではありません。日差しの下や明るいオフィスでは、白地に黒い文字のほうが読みやすい人も多くいます。大切なのは、利用者が選べるようにすることです。
ライトモードとダークモードの違い
| 項目 | ライトモード | ダークモード |
|---|---|---|
| 背景 | 白または明るい色 | 濃いグレーまたは紺色 |
| 文字 | 黒または暗い色 | 少しグレーがかった白 |
| 向いている時間 | 昼間や明るい場所 | 夜や薄暗い部屋 |
| バッテリー | ふつうの消費 | OLED画面では消費が少ない |
| 長い文章を読むとき | 明るい場所ではほとんどの人にとって読みやすい | 暗い場所ではより楽 |
目にやさしいダークモードのデザイン方法
色をただ反転させるだけでは、たいていうまくいきません。人が心地よく使えるダークモードには、小さな判断がたくさん必要です。
- 真っ黒ではなく濃いグレーにする：真っ黒と明るい白を並べると、差が強すぎて目が疲れます。濃いグレーや紺色の背景のほうが落ち着きます。
- 文字は明るく、でもまぶしすぎない：少しグレーがかった白のほうが、真っ白より読みやすくなります。
- 十分なコントラスト：コントラストとは、文字の色と背景の色の差のことです。差が小さすぎると読みにくくなり、特に高齢の人や目の弱い人にはつらくなります。アクセシビリティの基準であるWCAGは、この差の最低ラインを決めています。
- ブランドの色を少しやわらかく：強い青や赤は、暗い背景の上では目立ちすぎるので、少し落ち着いた色合いが必要です。
- どちらの背景にも合うロゴと画像：黒いロゴは暗い背景では見えなくなるので、明るい版が必要です。とても明るい写真は、少し抑えたほうがよい場合があります。
- 表とグラフ：管理画面では、棒や線の色を確認し、どちらのモードでもわかりやすくしておく必要があります。
ダークモードを加えるときによくある失敗
- トップページだけダークモードにして、支払いページやログイン画面などほかのページを忘れ、そこだけ急に白く光ってしまう。
- 暗い背景に薄いグレーの文字を置いて、ほとんど誰も読めなくなる。
- 利用者の選択を保存せず、毎回ライトモードに戻ってしまう。
- 端末の設定を無視して、全員に一つのモードを押しつける。
- 画面によって色の見え方が違うのに、公開前に実際のスマホでダークモードを確認しない。
- デザインが終わったあと、プロジェクトの最後に加えるため、画面の一部ではなく、つぎはぎになってしまう。
私たちが作るサイトとアプリのダークモード
Linkysoftでは、デザインが終わってからではなく、デザインの初日からダークモードを計画します。ウェブサイトのデザインと開発サービスで作るすべてのサイトには、ダークモードが最初から入っていて、アラビア語と右から左への表記（RTL）にも対応し、アクセシビリティ基準のWCAG 2.2も満たしています。公開前には、実際のスマホで確認します。
モバイルアプリ開発では、iPhoneとAndroid向けに、ライトモードとダークモード、使いやすい画面を備えたアプリを一からデザインします。その後、App StoreとGoogle Playに公開し、アップデートも続けて担当します。
あなたのプロジェクトは、チームが一日じゅう使う販売、在庫、人事などの管理システムですか？それなら、ウェブアプリケーションと管理システムのサービスで、あなたの会社の仕事の進め方に合わせて作ります。どの端末でも動きます。ここでは目の楽さも計画に入れておく価値があります。同じ画面が、社員の前で8時間以上開いたままになるからです。
新しいサイトやアプリを考えていますか？まずは私たちの無料相談から始めて、利用者が昼と夜に何を必要としているのか、一緒に考えていきましょう。