なぜフリーランスの税金は高いのか?税理士さんにわかりやすく教えてもらった
- インタビュー
- フリーランス/個人事業主
- 税金
2019年9月、Android10とiOS13がリリースされ、「ダークモード(ダークテーマ)」の認知が世間に広まってきました。
そんな中でUIデザイナーは、Webサイトやアプリをダークモード対応させるよう、依頼されるケースが増えてきています。
この記事では、ダークモードのUIデザイン作成に関するコツをご紹介します。
ダークモードとは、最低限のカラーコントラスト比を確保しつつ、デバイススクリーンからの発光量を削減する機能です。ダークモードに設定すると、「暗いカラー」と「明るいカラー」の要素が入れ替わります。
ダークモードにより、以下のメリットが期待できます。
とくにOLEDスクリーンのデバイスの場合は、ダークモードにより黒いピクセル部分を「そもそも発光させない」ため、消費電力を大幅に削減できます。
ダークモードは、ライトモード(通常モード)よりも色合いのニュアンスに気をつける必要があります。
ライトモードのテキストは、「ダークグレー」と「ライトグレー」など2色を使用してテキスト内容の重要度に差をつけて表現するケースがあります。しかしダークモードはそれが難しく、コントラスト比や読みやすさを配慮すると、ほとんどが白のテキストとなります。そのためダークモードの色使いに合わせて、ライトモードの色合いも同時に調整する必要があるのです。
カラーパレットを決めるときは、以下の2点に気をつけましょう。
カラーパレットは、ライトモードもダークモードも、機能に合わせて16進数(HEX)で表現しましょう。
対となるカラーを設定できれば、ダークモードとライトモードの切り替えがスムーズになります。こうすることで、開発時に混乱が生じにくくなります。
ライトモードのカラーパレットがシンプルであればあるほど、ダークモードのデザインは楽になります。そのため、使用するカラーは最低限に留めましょう。以下が最低限のカラーパレット例となります。
一方で「ステータスカラー」や「非アクティブカラー」など、特定の目的があるものや、強調したいコンテンツには、ライトモード/ダークモード共通の色を使用するのがおすすめです。
しかし、あくまでシンプルなカラーパレットを心がけ、最低限の色をベースに使うようにしましょう。
ダークモードのためのデザインシステムを考えるのは、チームにとってよい経験となるはず。
またダークモードのデザインは、ユーザーの満足度も間違いなく向上させるでしょう。開発するときはカラーに捉われるのではなく、16進数(HEX)で規定された、対となるカラーを定義するのを忘れずに。
機能を重視した定義づけをすることで、ライトモードとダークモードの切り替えが圧倒的にスムーズになり、UXも向上します。
(執筆:Kat Angeles 翻訳:Sugita Mariko 編集:Sansui Riho)
Webデザイナーが覚えておきたいコーディング&プログラミングの基礎知識
Workship MAGAZINE
”青い色”が企業やアプリのイメージカラーに採用される9つの理由
Workship MAGAZINE
フリーランスデザイナーに必要なサイトとポートフォリオサイトの作り方
Workship MAGAZINE