ダークモードの設計方法：モバイルアプリデザイナー向けの2021ガイド

照明を暗くし、目をリラックスさせ、エネルギーを節約します。 ダークモードはデザインの最大のトレンドの1つであり、WhatsApp、Instagram、Google、Facebook、Appleなどの世界クラスのブランドはすでにダークモードのデザイントレインに飛び乗っています。

Android10とiOS13の正式なリリースにより、ダークテーマのユーザーインターフェイスが脚光を浴びました。 AppleとGoogleはどちらも、過去1年間、リソースとダークモードへの注意を注いできました。

正しく行われた場合、ダークモードの利点は前例のないものになります。 暗い場所でも読みやすくなります。 彼らは目の疲れを軽減します。 画面に基づいて、バッテリーの消費を大幅になくすことができます。

ダークテーマをアプリに対応させることは、すべてのモバイルアプリデザイン会社の使命になりつつあります。 それでも、ダークモードアプリの設計上の課題は無視できません。 単純に色を再利用したり、色を反転したりすることはできません。 そうすれば、必要なものとは正反対の極性が得られます。

ダークモードの設計が正しくないと、目の疲れを引き起こし、暗い場所での読み取りが困難になります。 このテーマの低輝度は、暗い環境での安心感を生み出します。 そのため、暗いテーマを作成するときは、楽しく、バランスが取れていて、読みやすいものにしてください。

この記事では、モバイルアプリの設計者がダークモードのUIデザインエクスペリエンスをユーザーに提供する方法を検討します。

Androidアプリのダークテーマをデザインする方法は？

Googleには、デザイナーがAndroidアプリ用のダークテーマの設計方法を理解し始めるのに役立つ広範なドキュメントサポートが付属しています。

技術の巨人は、ダークテーマのユーザーインターフェイスを定義し、ダークモードアプリのデザインを開発する方法の出発点を提供する4つの原則を確立しました–

1.グレーvsブラック

最初に気付くかもしれないのは、ダークテーマのアプリのデフォルトの背景が黒ではなく、ダークグレーであるということです：＃121212。

特にAndroid10のプラットフォームは黒の背景を使用しているため、グレーと黒を選択した理由については多くの議論があります。 これは主に、使いやすさと省電力の間のトレードオフです。

プラットフォームの背景として純粋な黒の＃000000色を使用することで、システムアプリとサーフェスがOLEDディスプレイで開いているときに使用する電力を可能な限り少なくすることができます。 これらのシステムサーフェスは非常に単純である傾向があり、通常はテキストと単純なアイコンだけであるため、コントラストの問題と戦うために、テキストとアイコンの色を適切に調整できます。

ただし、アプリでは、表面に何でも含めることができます。複雑なカラフルなベクターアニメーション、明るい画像、対照的なブランドの表面などです。 これらを真っ黒な背景に配置すると、結果として得られるコントラストがはるかに高くなり、目の疲れが増す可能性があります。 したがって、明るい色または灰色の背景を使用することが解決策です。

2.アクセントのあるカラーのディテールへのこだわり

ダークUIの配色を定義する場合、ダークテーマUIに限定された色のアクセントを適用することをお勧めします。これにより、スペースの大部分がダークサーフェス専用になります。 また、背景を暗くしておくと、写真の視覚がより深くなり、アクセントカラーとの見栄えのするコントラストが作成されます。 分割された補色を使用すると役立ちます。 このスキームには、1つのドミナントカラーと、ドミナントカラーの補色に隣接する2つのカラーがあります。 これを行うと、補色スキームの緊張なしに必要なコントラストが得られます。

3.バッテリー寿命を節約する

暗いテーマは、最小の色のコントラスト比を満たしながら、デバイスの画面から放出される輝度を減らします。 これらは、目の疲れを軽減し、現在の照明条件に合わせて明るさを調整し、暗い環境での画面の使用を容易にすることで、視覚的な人間工学を改善するのに役立ちます。これらはすべて、バッテリーの電力を節約します。 OLEDスクリーンを備えたデバイスは、いつでも黒いピクセルをオフにする機能、または明るいピクセルの使用を減らすことによって恩恵を受けます。

4.アクセシビリティに準拠した色の組み合わせを選択する

アクセシビリティカラーコントラスト基準を満たすことにより、通常のダークテーマユーザー（低視力のユーザーなど）に対応します。

ダークカラースキームと全体的なモードに関するGoogleマテリアルデザインガイドラインで修正されたさまざまなプロパティがあります–

標高：暗いテーマを設計するプロセスでは、コンポーネントは明るいテーマの場合と同じデフォルトのシャドウコンポーネントと標高レベルを保持します。 異なるのは、標高レベルの表面の照明です。

表面の標高が高いほど、表面は明るくなります。 明度は、半透明のオーバーレイのアプリケーションによって示されます。 オーバーレイを使用すると、コンポーネントを区別して影を確認することもできます。

アクセシビリティとコントラスト：暗いテーマのUIデザインの背景は、白いテキストを表示するのに十分な暗さである必要があります。 背景とテキストの間に最低15.8：1のコントラストを使用する必要があります。 これを行うと、最高標高のサーフェスに追加されたときに、本文テキストがWCAGのAA標準である4.5：5：1に確実に合格します。

色：設計者は、読みやすさを向上させるために、彩度の低い色の使用に焦点を当てる必要があります。 一次色と二次色の選択は、明るいUIテーマと暗いUIテーマの両方を考慮することにも依存する必要があります。

暗い背景の明るいテキスト：暗い背景に明るいテキストが表示される場合は、次の不透明度レベルを使用する必要があります。

• 強調度の高いテキストの不透明度は87％です
• 中強調テキストとヒントテキストの不透明度は60％です
• 無効にされたテキストの不透明度は38％です

状態：状態は、オーバーレイを使用して、ダークテーマレイアウトまたはコンポーネントのインタラクティブ要素のステータスを伝達します。 ダークテーマでは、状態はデフォルトのライトテーマと同じオーバーレイ値を使用する必要があります。 状態オーバーレイを継承する2つのコンテナがあります： SurfaceとPrimary 。

サーフェスカラーを使用するサーフェスコンテナは、テキストまたはアイコンのカラーと一致するオーバーレイを適用する必要があります。 原色を使用するサーフェスコンテナの場合、状態オーバーレイは白である必要があります。

ダークモードでiOS用のアプリを設計する方法は？

ダークモードで、AppleはiOSのUIスタイルと色の意味を再考しました。 iOS13でダークモードを設計するためにAppleがもたらした変更を見てみましょう。

セマンティックカラー

Appleは、ライトモードとダークモードの両方でiOSアプリの感触と外観のバランスをとるために、一般的に使用されるUIコンポーネントにセマンティックカラーを導入しました。 これらの色は最高のRGB値を持っていません。 代わりに、iOSインターフェイスのスタイルを直接変更します。 さらに、ダークモードでは、これらのセマンティック色相はオーバーレイの色とテキストの処理に役立ちます。

システムカラー

Appleは、システム全体の暗い外観とダイナミックさをサポートする9つの事前定義されたシステムカラーをもたらしました。 したがって、これらの色は選択したインターフェイススタイルに変更されます。

鮮やかさとぼかし効果

iOS 13では、Appleは4つのぼかし効果と8つの鮮やかな効果を導入しました。これらは、iOSのインターフェイススタイルに自動的に適応します。

ダークモードとライトモードでのブラー効果は次のとおりです。

Appleはまた、 iOSダークモードタイポグラフィスイートに4つの鮮やかな効果、オーバーレイに3つ、セパレーターに1つを導入しました。 はい、どうぞ：

SFシンボル

Appleは、ヒューマンインターフェイスガイドラインで、製品開発者および設計者がアプリケーションで使用できる1500を超えるシンボルのコレクションを提供しています。 ダークモードでは、明るいUIと暗いUIの両方に最適化されているため、自動的に見栄えがします。

効果的なモバイルアプリのダークテーマデザインのヒント

ダークモードは、過去数年間で最も要望の多かった機能の1つです。 AppleとGoogleはどちらも、ダークテーマをUIの重要な部分にしました。 ダークモードの輝度の低下は、暗い環境での安全性を提供し、目の疲れを最小限に抑えることができます。

ダークモードUIを作成するときに適切に機能する必要がある特定のプロセスがあります。 結局のところ、あなたはあなたの製品を素晴らしいものにしたいのですよね？ アプリのダークモードを設計する方法に関するベストプラクティスのチェックリストについては、すべてのチェックボックスをオンにしてみましょう。

1.純粋な黒色は避けてください

暗いテーマは、黒の背景に白のテキストであってはなりません。 実際、高コントラストの画面を調べるのは難しい場合があります。

アプリにダークモードを追加する場合は、ダークグレーをダークモードコンポーネントの原色として使用するのが最も安全です。これにより、目の疲れが軽減され、灰色の表面の影が黒に比べてはるかに見やすくなります。 。

2.暗いテーマでの飽和色の使用は避けてください

明るい表面で見栄えのする飽和色は、暗い背景に対して振動する可能性があり、テキストを非常に読みにくくします。

読みやすさが向上し、UIが不必要に表現されないため、明るいトーンを使用する必要があります。これにより、不必要な目の疲れを防ぐことができます。

3.アプリデザインの感情的な側面を考慮します

アプリのダークテーマをデザインするときは、ダークテーマでもライトテーマのデザインと同じ感情的な感覚を翻訳することを目指している必要があります。

しかし、そうするのは賢明ではありません。 なぜなら、最終的には異なる色が異なる感情を投影するからです。 その結果、ダークモードの色は別の感覚を呼び起こします。 これが、両方のテーマUIに共通の感情的なセットを見つける必要がある理由です。

4.両方の外観でデザインをテストします

ユーザーが1日のさまざまな時間に両方のテーマUIを切り替える方法と同じように、アプリを1日2回テストして、さまざまな光の条件でアプリがどのように機能するかを確認する必要があります。 そしてそれがあなたの基準を満たしていることを確認するために。

5.ダークモードをアニメーションやイラストに組み込む

アプリにアニメーションや重いグラフィック要素が含まれている場合は、ダークテーマでの採用にも備える必要があります。 イラストに被写体と背景が含まれている場合は、被写体に注意を向け続けるために、背景色を完全に彩度を下げるとよいでしょう。

6.アクセシビリティの色のコントラスト基準を満たす

コンテンツがダークモードで快適に読みやすい状態を維持していることを確認してください。 暗いテーマの表面は、白いテキストを表示するのに十分な暗さである必要があります。 Googleマテリアルデザインでは、テキストと背景のコントラストレベルを15.8：1以上にすることをおすすめしています。 カラーコントラストツールを使用して、コントラスト比をテストします。

7.逆にしないでください

標準モードからダークモードに移行する場合、元のテーマが有用な視覚的信号を提供する場合があります。 ダークテーマを作成するには、単に色を反転させないでください。 心理的に重要な色を無意味な淡い色調に変換している可能性があります。 使用する色については、意識的に決定してください。

8.適切な「オン」カラーを使用します

「オン」の色は、主要なサーフェスと要素の上にあります。 通常、これらはテキストに使用されます。 ダークテーマの場合、デフォルトの「オン」の色は真っ白です。 しかし、それは明るい色であり、暗い背景に対して視覚的に振動します。 このため、Googleマテリアルデザインでは、少し濃い白を使用することをお勧めします。

• 無効化されたテキストは38％の暗さを利用します。
• 60％では、中太字のテキストが実行されます。
• 強調度の高いテキストは、87％の暗さである必要があります。

9.深くなる

レイヤーが高いほど、軽くする必要があります。 これにより、ダークモードで、ディスプレイで最も使用されている要素から最も使用されていない要素までの視覚的な階層が作成されます。

これで、アプリのダークモードバージョンの設計について知っておくべきことがすべてわかりました。 次の実用的なステップは、アプリケーションにUIを実装した専門家のチームと話すことです。 これは、エンドユーザーに健全なエクスペリエンスを提供するという意図の達成に近づく方法と見なす必要があります。

まとめ

これで、アプリのダークモードバージョンの設計について知っておくべきことがすべてわかりました。 ダークモードアプリのデザインは、今まさに注目を集めている革命です。 つまり、暗くなってクリエイティブになるのに最適な時期です。 次の実用的なステップは、アプリケーションにUIを実装したUIエキスパートのチームと話し合い、アプリ開発におけるUIデザインの重要性を実際に理解することです。 これは、エンドユーザーに健全なエクスペリエンスを提供するという意図の達成に近づく方法と見なす必要があります。

ダークモードアプリのデザインについてもっと知りたいですか？ アプリ開発の専門家に連絡してください。

ダークモードアプリの設計に関するよくある質問

1.ダークモードは目に適していますか？

はい。 ダークモードアプリのデザインは、携帯電話の長時間の使用で目の疲れや乾燥を防ぎます。 対照的でないことにより、ユーザーは暗闇の中でアプリケーションをスクロールしやすくなります。

2.ダークモード用にどのように設計しますか？

AppleとGoogleの両方に、ダークテーマアプリケーションの設計プロセスを説明するドキュメントがありますが、考慮しなければならないヒントがいくつかあります。 それらのいくつかは次のとおりです。黒一色を避け、黒を使用することの感情的な側面を念頭に置き、白とダークモードのアプリデザインの過渡的な違いを見てください。

3.不健康なダークモードとして何かありますか？

はい、ダークモードが良いよりも害を及ぼす可能性がある場合があります。 それらは、かすみ効果を引き起こす可能性があります。または、コントラストスタイルに十分な注意が払われていない場合、それらは目に大きな負担をかける可能性があります。