どちらを選ぶ？ライトテーマとダークテーマの使い分けをインハウスUIデザイナーが雑談してみた
こんにちは。東芝UIデザインチームの近藤です。
みなさん、PCやスマホで使うOSテーマやアプリケーションは“ライトテーマ“と“ダークテーマ“のどちらを好んで使っていますか？その理由はなんでしょう？そんな、ふとした興味から、チームメンバーで「UIの“ライトテーマ“と“ダークテーマ“」について座談会を行ってみましたので、その内容を一部ご紹介します！
UIを使う時と作る時についてUIデザイナーならではの視点で語っています。
この記事では、明るい背景（白や明るい灰色）を基調にしたUIデザインを『ライトテーマ』と呼び（一般的には、ライトモードと呼ぶ場合もあります）、暗い背景（黒や暗い灰色）を基調としたUIデザインを『ダークテーマ』と呼びます（一般的には、ダークモードと呼ぶ場合もあります）。
省略して、『ライトテーマ』を『ライト』、『ダークテーマ』を『ダーク』と記載します。
1. 普段使っているツールはライト？ダーク？
私たちは、業務の中でMicrosoft社のOfficeのツールを使用します。（他にも複数のツールを目的に応じて使い分けています。）Officeのツールは、UIのライト／ダークを切り替える機能や背景色を切り替える機能があり、ユーザー自身の好みに合わせて自由に変更することができます。
東芝UIデザインチームのメンバーに、仕事をしている時どんな設定にしているか、聞いてみました。
…＊…＊…＊…＊…＊…＊…
本記事の登場メンバー：近藤、コバJ、松島、ono、池田、吉原、柴田、星野
近藤 ：皆さん、普段ライトとダークどちらにしていますか？
コバJ ：Teamsはダーク、それ以外はライトで使っています。
当初、ダークで統一しようと思ったのですが、他のアプリ（スタンドアロン版）にはダークテーマが無く、背景「濃い灰色」モードが選べるようになっていまして、そちらと比べると、ライト（デフォルトの背景が明るい灰色のモード）の方がシンプルで使いやすいと感じています。
デスクトップ背景は真っ黒にしています。
Windowsのテーマも含めて全て真っ黒にしてしまうと、背景にウィンドウが馴染んでしまって見失ってしまいそうなので、Windowsのテーマは判別できる色にしています。
近藤 ：わかります！私は真っ黒背景にWindowsのテーマもダークなので「あれ？どこいった？」となることがあります…
松島 ：基本的に、ダークに出来るものは、全てダークにしています。使用しているモニタが大きく、かつ、とても明るいモニタなので、ライトで使用すると画面がとてもまぶしくなってしまうのです…
デスクトップ背景は暗いグレーです。
ono ：モニタの明るさは影響しますね。環境照度も影響しているかも。
松島 ：そうですね。私は部屋が暗めなので、それで、よりいっそうまぶしく感じるのかも。
ono ：私は、Officeはライト、Adobeはダークです。画面内の暗い色のウィンドウはデザインツール、という感じで、無意識に色をみてツールを見分けているような気がします。
デスクトップ背景は、自然をモチーフにした写真にしています。私は、たくさんのウィンドウを開いていることが多いのですが、自然をモチーフにした写真が背景だと、ウィンドウの境目がよく見えます。
池田 ：僕は、デスクトップ背景は濃いグレーで、基本的に全てダークで使用していますね。
ただ、UIデザインをする時は、テーマに合わせて切り替えるようにしています。ダークUIを作る時はダークのツールに、ライトUIを作る時はライトのツールといった感じ。そうしないと、特に細い線とか、実際の見え方の感じがつかみづらいので…
デザインツールをライトにしたまま、その上でダークのUIを作ると、実際に見た時にバチバチな画面（コントラストが高く、要素が強く主張している感じ）になってしまったことがありました…
松島 ：自分の感覚をスイッチする、という感じですね。
池田 ：そうですね。テレビのUI（ダーク）と空調のコントローラーUI（ライト）の両方を同時に担当した時から、切り替えるようになりました。
近藤 ：なるほど！次から私もそうします（笑）
近藤 ：ライト／ダークを気にしないで使用している人も多いと思いますが、皆さんが使い分けるようになったきっかけはなんですか？私は、自分がダークのUIデザインをする時の勉強として切り替えたのがきっかけでした。
コバJ ：私は、画面のまぶしさがきっかけでした。ダークにしたら、案外心地よく使えて、なんだかカッコイイ感じなので、ダークで揃えるカタチでしっくりきました。
ただ、長い文章を読むときは、白背景の方が落ち着くと感じます。
柴田 ：私も同じです。長い文章は白背景でないと目が疲れちゃう。
池田 ：Teams（チャット）は、短い文章だから黒背景でも疲れないのでしょうね。
ono ：そうですね。文章・ドキュメントを扱うものはライトがいいです。そういう時の頭のモードが紙ベースなのかもしれないです。
吉原 ：現実世界に黒い紙に白い文字って少数派ですよね…
ono ：黒板くらいでしょうか…そういえば、学生の頃、黒板見づらいなぁと思っていました（笑）
２. ダークテーマを使っていて気づいたことは？
近藤 ：Officeのダークテーマや濃い灰色背景について、何か気付きはありますか？
吉原 ：私は、Teamsのダークはとても使いやすいなと感じているのですが、Outlookのダークは、情報の階層構造が背景色で表現されていると、より心地よく使えそうだなぁ、と思います。
近藤 ：情報構造の階層によって背景色が変えられているTeamsに対して、Outlookは、背景色が一色に見えますね。Teamsに比べると、画面の抑揚が弱く見えるケースがあるかもしれません。
コバJ ：PowerPointの背景を、『濃い灰色』にした時に気付いたのですが、ヘッダーのタブ、ツールバー、クイックアクセスツールバーにかけて、（アイコンと背景の関係性が）ネガとポジのものが混在して表示されます。あまり見ない状態なので気になりました。
近藤 ：あ！本当だ！
ライト（デフォルトの明るい背景色のモード）の時は、一番上のタブ以外はポジで統一されていますが、『濃い灰色』の時は、上からネガ、ポジ、ネガとなっていますね。
階層構造を明確に表現しようとすると、エリアごとの背景色のコントラストも大きくなるので、ネガポジを統一するのが難しいのかもしれないですね。
コバJ ：ライトの時はポジ、ダークの時はネガ、という風に単純には決められないものですね。
暗い・濃い背景色に、明るい・薄い色で要素が表示されることを『ネガ』、明るい・薄い背景色に、暗い・濃い色で要素が表現されていることを『ポジ』と表現しています
池田 ：自分は（Teamsは）ダークを使用しているのですが、ダークで使用している人の方が少ないと思うので、画面キャプチャなどを送る時は気を使っていますね。ツールの背景色によって、画像の余白の見え方が変わったりするので。
近藤 ：なるほど。相手の環境での見え方を想像して、意図通りに伝わるように注意する必要がありますね。
テキストを送る時にも同様に注意が必要ですよね。Teamsでテキストメッセージを送る時、強調しようとして文字色を変えたりするのですが、ライトとダークどちらの場合でも目立つ色を選ぶように注意しないと、黒背景では目立つのに、白背景だとほとんど読めない、ということになりかねないです。
松島 ：メールの文面でも、文字色が指定されているようなものだと、（Outlookを）ダークにしていると見えづらい時がありますね。ライトを想定して作られたメールなのだろうな、と思います。
吉原 ：Teamsは、原因が分からず文字色が背景と同化してしまうことがあります。
松島 ：そうですね。
気付かずに余計な書式設定が残っているときがあるので、Teamsでテキストメッセージを送る時は、テキストの書式設定をリセットする機能を良く使いますね。デフォルトの文字色に戻すことで、相手のテーマに合わせて自動変換されるように。
吉原 ：特にwebからコピーした時とかは、この機能が便利ですね。
星野 ：［Ctrl］＋［Shift］＋［v］のショートカットキーで、書式無しで文字がコピペできます！
近藤 ：そんな便利なショートカットキーがあったのですね！使います！
３. 提案するUIデザインのテーマはどうやって決めている？
近藤 ：自身が新たにUIデザインを行う際の、ライトとダークの使い分け方や、事例を教えてください。
コバJ ：そうですね・・・基本的には、使われる環境によって決めたりしますね。もし、現行UI画面の改修だったら、要望や問題が無い限りは、現行に合わせたりしますね。
池田 ：そういえば、テレビのUIは基本的にダークなのですが、一度、ライトにしたらあまり評判が良くなく…（笑）ダークに戻したこともありました。
吉原 ：映像やイメージなどのコンテンツに没入したい場面では、背景は暗い（ダーク）方が良い、というのがありそうですね。
近藤 ：なるほど。テレビの主役はコンテンツなので、設定系のUIは、主役を邪魔しないことが求められるのですね。
コバJ ：券売機など、いろんな環境（屋外、屋内、明るい、暗いなど）に置かれるものだと、映り込みを気にされるので、ライトが好まれることが多いですね。ディスプレイの表面が、グレアかノングレアなのかによっても変わってきますけどね。
グレアの方が、色の彩度が高く見えて、コントラストもはっきり見えますが映り込みが気になる…など、メリットとデメリットがあります。
近藤 ：なるほど、ディスプレイの素材も検討の材料になるのですね。タッチパネルだと、指紋とかが気になることもあるかもしれないですね。
池田 ：ライトのUIをデザインする時、「明るすぎてまぶしい」というコメントをいただくことがよくあるので、グレーに落ち着くことがあるのですが、グレーだと少し前のシステムの雰囲気が出てしまうことがありますね。
コバJ ：そういう場面よくありますね！折衷案でグレーになることもあります。ライトだとまぶしすぎる、という意見がよく聞かれますが、Webサイト等で白背景はけっこう見慣れているものだと思うのですが…
Webサイトっぽさに抵抗感があるのでしょうか？
ono ：インフラ系の現場の人には、白背景はコンシューマー向けの印象を受けるのかもしれませんね。
吉原 ：そうですね、グレー（又はダーク）の方が、プロっぽさがあるのかもしれません。
ono ：こなれ感というか…（笑）
近藤 ：（笑）
柴田 ：インフラ系のシステムだと、ライトとダークの両方に対応するという場面はあまりないですね。
近藤 ：そうですね。
（弊社では扱っていませんが）カーナビのUIは、環境によってライトとダークが切り替わるので、両方必要そうですね。暗い中で明るい画面を見ると瞳孔が閉じ、再び暗闇に目が慣れるまで時間が掛かるという問題もあるみたいですね。
吉原 ：これまでは両方対応する場面は少なかったかもしれませんが、最近は主にスマホ向けのUIでは、ライトとダーク両方に対応するのは普通になってきていますね。ユーザーそれぞれの状況や環境に合わせて選べるように選択肢を提供するという観点でも、両方への対応には意味があると思います。
ono ：こちらが想定してどちらかで決めるというよりは、状況に応じてユーザーが使いやすいと思う仕様を選択できることが本当の意味でユーザビリティへの配慮といえるのかな…
・・・
ono ：監視系のシステムでは、色にいろんな意味が反映されていることが多いので、ライトとダークの違いによって、重要な色の見え方・捉えられ方が変わらないように気を付けています。２４時間体制で監視を行う様な監視系システムのユーザーさんは、特に色の違いにとても敏感で、同じ赤でも見え方が変わると、『違う意味を持った赤なのでは？』と考えてしまう可能性があるので、気を付けています。
近藤 ：すごい！小さな変化にも敏感に察知してしまうのは、プロという感じですね。
たしかに、背景の上に置く色は、背景とのコントラストが十分に確保できないと識別できないので、白背景の上に置く色と黒背景に置く色とでは、調整する必要がありますからね。注意が必要ですね。
池田 ：そういえば。ライトではシャドウの表現をよく使いますが、ダークだとシャドウをつかわなくても若干の色の違いも識別できるなぁと思います。
柴田 ：鉄道の券売機のUIのデザインでは、ライトとダークどちらもあり、操作環境やブランディングなど様々な視点からどちらを採用するか決めますが、どちらにもメリットデメリットがありました。例えばライトだと、ダークモードに比べてボタンの境目が分かりづらいので、色覚特性に配慮するために明確にするなど、工夫が必要です。
近藤 ：ライトの方が良い部分もあれば、ダークの方が良い部分もありますね。絶対に、こっち！とは決められないので、目的や環境によってより良い方を選ぶ・選べる、というのが大切ですね。
…＊…＊…＊…＊…＊…＊…
４. さいごに
ここまで読んでいただき、ありがとうございました。
好みや環境によってライトとダークを使い分けることは、スマホ画面のテーマを切り替えられることになったことをきっかけに、広く一般的になってきたので皆さんも身近なことかもしれませんが、今回の記事で、UIデザイナーならではの視点やインフラ系システムならではの視点でみた、ライトとダークの奥深さを感じていただけたのではないでしょうか。
この記事を気に入っていただけましたら「スキ」をクリックしてくださると嬉しいです。また違うテーマで座談会を開催したいと思います。
ライター：近藤
※Microsoft、Office、Teams、Windows、Outlook、PowerPointは、マイクロソフトグループの企業の商標です。
※Adobeは、米国および/またはその他の国におけるAdobeの登録商標または商標です。
