300万円以下の副業収入は雑所得に。 8月1日発表の「所得税にまつわる改正案」解説 他
- 毎週月曜更新！フリーランス・副業ニュース
2019年9月、Android10とiOS13がリリースされ、「ダークモード（ダークテーマ）」の認知が世間に広まってきました。
そんな中でUIデザイナーは、Webサイトやアプリをダークモード対応させるよう、依頼されるケースが増えてきています。
この記事では、ダークモードのUIデザイン作成に関するコツをご紹介します。
▲TripItのダークモードの初期ドラフト（出典：Muzli）
そもそも、ダークモードとは？
ダークモードとは、最低限のカラーコントラスト比を確保しつつ、デバイススクリーンからの発光量を削減する機能です。ダークモードに設定すると、「暗いカラー」と「明るいカラー」の要素が入れ替わります。
ダークモードにより、以下のメリットが期待できます。
- 目の疲れを軽減させる
- 暗い環境でもスクリーンを見やすくする
- ユーザーの好みに合わせてカスタマイズされたUXを提供できる
- 「光に対して繊細な人」にも便利なユニバーサルデザインを提供できる
- バッテリーの消費量を削減する
とくにOLEDスクリーンのデバイスの場合は、ダークモードにより黒いピクセル部分を「そもそも発光させない」ため、消費電力を大幅に削減できます。
ダークモード対応させるための、カラーパレットの決め方
ダークモードは、ライトモード（通常モード）よりも色合いのニュアンスに気をつける必要があります。
ライトモードのテキストは、「ダークグレー」と「ライトグレー」など2色を使用してテキスト内容の重要度に差をつけて表現するケースがあります。しかしダークモードはそれが難しく、コントラスト比や読みやすさを配慮すると、ほとんどが白のテキストとなります。そのためダークモードの色使いに合わせて、ライトモードの色合いも同時に調整する必要があるのです。
▲出典：Muzli
カラーパレットを決めるときは、以下の2点に気をつけましょう。
ポイント1. デフォルトのカラーパレットは「機能」ごとに定義する
カラーパレットは、ライトモードもダークモードも、機能に合わせて16進数（HEX）で表現しましょう。
対となるカラーを設定できれば、ダークモードとライトモードの切り替えがスムーズになります。こうすることで、開発時に混乱が生じにくくなります。
▲出典：Muzli
ポイント2. 使用色は最低限に
ライトモードのカラーパレットがシンプルであればあるほど、ダークモードのデザインは楽になります。そのため、使用するカラーは最低限に留めましょう。以下が最低限のカラーパレット例となります。
- スクリーン背景色：
例えばライトモードでは淡いグレーに、ダークモードでは暗いブルーに設定します - レイヤー背景色：
コンテンツのレイヤーに使われる背景色。スクリーンの何もないキャンバスと、コンテンツの乗っている背景色を区別するために設定します - サブレイヤー背景色：
セクションのヘッダーなどに使われる背景色。ブロックごとにコンテンツを区別でき、内容のヒエラルキーを分かりやすく表現するのに役立ちます - アクションカラー：
クリックなど、何らかのアクションができるコンテンツに使われるカラー。ライトモードとダークモードで濃淡の差をつけても良いですが、大幅に変える必要はありません - メインテキストカラー：
ライトモードでは黒、ダークモードでは白を使用するのが無難です - サブテキストカラー：
サブテキストカラーは注意が必要です。ライトモードでは、メインとサブで濃淡をつけて重要度に差をつけられるのに対し、ダークモードではサブテキストにもメインテキストカラーと同じ白を使用せざるを得ないケースが多いです
▲出典：Muzli
一方で「ステータスカラー」や「非アクティブカラー」など、特定の目的があるものや、強調したいコンテンツには、ライトモード／ダークモード共通の色を使用するのがおすすめです。
しかし、あくまでシンプルなカラーパレットを心がけ、最低限の色をベースに使うようにしましょう。
まとめ
ダークモードのためのデザインシステムを考えるのは、チームにとってよい経験となるはず。
またダークモードのデザインは、ユーザーの満足度も間違いなく向上させるでしょう。開発するときはカラーに捉われるのではなく、16進数（HEX）で規定された、対となるカラーを定義するのを忘れずに。
機能を重視した定義づけをすることで、ライトモードとダークモードの切り替えが圧倒的にスムーズになり、UXも向上します。
（執筆：Kat Angeles 翻訳：Sugita Mariko 編集：Sansui Riho）
Webデザイナーが覚えておきたいコーディング&プログラミングの基礎知識
Workship MAGAZINE
”青い色”が企業やアプリのイメージカラーに採用される9つの理由
Workship MAGAZINE
フリーランスデザイナーに必要なサイトとポートフォリオサイトの作り方
Workship MAGAZINE
40,000人以上が使う！日本最大級のフリーランス・副業向けマッチングサービス『Workship』
「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」フリーランス・副業向けマッチングサービス『Workship（ワークシップ）』が、そんな悩みを解決します！
- 累計40,000人以上のフリーランス・副業ワーカーが登録
- 東証プライム上場企業からスタートアップまで多数参加
- 土日、週1、フルタイムなどさまざまな働き方あり
- 公開中の募集のうち66％がリモートOKのお仕事
- 時給1,500円〜10,000円の高単価案件のみ掲載
- お仕事成約でお祝い金10,000円プレゼント！
利用料は一切かかりません。一度詳細をのぞいてみませんか？
※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。
