最早トレンドではない。「ダークモード」を作成する際に気をつけたい6つのポイント

6 tips to excel in designing dark mode

デザインの美しさと機能性の高さから人気を博している、ダークモード。

目の疲れやバッテリー消耗までも軽減してくれる利便性と、シンプルなデザイン性を両立しており、いまや一過性のトレンドではなく「普及し定着したデザイン」といえます。

今回は、ダークモードを作成する際に気をつけたい6つのポイントをご紹介します。

ポイント1. 背景を真っ黒にしない

「ダーク」という言葉から黒を連想しがちですが、ダークモードの背景に黒を使うのは避けましょう。

ダークモードの目的のひとつは、目の疲れを軽減すること。背景を真っ黒にしてしまうと、真っ白の背景と同様か、それ以上に目に負担がかかります。

6 tips to excel in designing dark mode

▲左は黒、右は黒に近いグレー(出典:UX Planet)

ポイント2. 純色を使わない

各色相においてもっとも彩度が高い「純色」をダークモードで使うのはご法度です。

WCAG(※)では、「ダークモードに純色を使用することは、アクセシビリティの基準に反する」としています。

(※Webコンテンツを障がいのある人にも使いやすいようにするためのガイドライン)

6 tips to excel in designing dark mode

▲左は純色の紫、右は白成分の多い紫(出典:UX Planet)

ポイント3. コントラストをつける

コントラストは、ダークモードのアクセシビリティにおいて重要な役割を果たします。

スマートフォンのような小さなデバイスで使用する場合や、プレゼンテーション用のスクリーンのような大きなデバイスで使用するケースでは、とくに重要です。

6 tips to excel in designing dark mode

▲左はコントラストが弱く、右はコントラストが強い(出典:UX Planet)

ポイント4. 色を反転させるだけでは不十分

ダークモードでやりがちな間違いのひとつが、「色の反転させただけ」のデザイン。

色を反転させるだけでもデザイン性や利便性に一定の効果は期待できますが、製品としては不十分。きちんと手動で、要素ごとに色味を調整しましょう。

6 tips to excel in designing dark mode

▲左は色を反転させただけのもの、右はダークモード用に調整したもの(出典:UX Planet)

ポイント5. 不透明度が高い色を使う

不透明度が低すぎる色は視認性を低下させます。

目を疲れさせるだけでなく、ユーザーが重要な情報を見逃す原因になります。できるだけ不透明度が高い色を使うようにしましょう。

6 tips to excel in designing dark mode

▲左がもっとも不透明度が高く、右側がもっとも低い(出典:UX Planet)

ポイント6. 影を使わない

ダークモードそのものが暗く深みがあるため、余計な影をつけるのは避けましょう。

不要な要素が加わることで、ユーザーの目を疲れさせてしまいます。

6 tips to excel in designing dark mode

▲左は画面のまわりに影がついており、右はついていない(出典:UX Planet)

ダークモード成功の鍵はアクセシビリティ

現代的でクールなデザイン、目やバッテリーの負担軽減など、さまざまなメリットがあるダークモード。

しかし一歩間違えるとアクセシビリティが下がり、逆にユーザーの負担を増やしてしまいます。

今回ご紹介したポイントを参考に、ダークモード作成の際はアクセシビリティを意識してみてください。

(執筆:Srishti Vashishtha 翻訳:中島あすか 編集:泉 提供元:UX Planet

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

30,000人以上が使う日本最大級のお仕事マッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 30,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ