見出し画像

ダークモードと色彩の話

こんにちは、コニーです!
今回はiOSDCに行ってきた時に興味深いな〜〜〜と思ったものを一つずつご紹介していきます!!

iOSDCすごいの!人が!後なんかびっくりするくらい一つ一つ面白かった!!!その中でも個人的にへえ〜〜ってなったものを紹介してくよ!長くなりそうだから一つにつき一つのnoteを書いてくよ!!

難しい色の話に負けない

これはしもとりさんという方がお話ししていました。
内容としてはiOSの実装においてのダークモードの必要性などを分かりやすく話していたのでご紹介します。

なんでダークモードを導入するの?

アクセシビリティのため
そもそもアクセシビリティとは:情報やサービスへのアクセスのしやすさのこと。あらゆる人がうるさい場所や、暗い場所、逆に明るい場所など、どのような場所においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる。
バッテリーに優しい
ダークモードにするとバッテリーの持ちが良くなる理由:利用されているディスプレイが関係している。液晶ディスプレイは白い色を出そうとする時が一番電力を使っている。→つまりは暗くすれば使うエネルギーの量が減る為。
目に優しい
暗いと視覚過敏の方や、色覚異常の方が見やすいです。目が疲れて、頭痛を起こすようなことが減ります。

こういったことがダークモードの導入の理由となっています。

そもそも表示される色は光の三原色を用いて表示されています。
みなさんご存知の通り、三色の色でどんな色も表現できるようなものになっています。色を増やすほどに明るくなる(加法混色)というものです。

イラレにスクショを貼り付けたら色がやばい

さて、みなさんはIllustratorというツールを使ったことはあるでしょうか?

実はこのツールにiPhoneのスクリーンショットを貼り付けると色がとんでもないことになります。メニューバー部分はなんら問題がなく表示されるのですが、写真部分になると上手く表示がされません。

これの理由としては、iPhoneの表現できる色とイラレの表現できる色が違うためです。

簡単に噛み砕いて言うと、iPhoneのほうが性能が良いため様々な色を表現できるのに対してイラレの表現できる色が少ない為上手く表示されないです。

これを聞いて分かるようにiPhoneの色域はかなり広いものとなっています。

色域

色域とは人間の目で認識できる色の範囲の中でも色の範囲を定めたもののことを指します。
デジタルカメラやプリンタ、スマホやPCのディスプレイ間での色合いなどの擦り合わせを行いやすいようにこの色域が定められています。

色域を分かりやすく表現(図示)する手法にはいくつかあるものの、XYZ表色系のxy色度図が使われることが多いです。(一番ポピュラー)

このXYZ表色系と言うのはCIE(国際照明委員会)で標準表色系として承認された色の表わし方です。「XYZ表色系」は、[R][G][B](Red/Green/Blue)という「色光の三原色」の混色量を原理にしています。この三原色を元に初めは色域を示す図があったものの、表現しきれない色が出てきたのでこの表が出てきました。

下記の図がXYZ表色系になります。

中に書いてある表現を解説していきます。

sRGB:Windows環境における標準の色域として定着しており、たいていの場合、液晶ディスプレイやプリンタ、デジタルカメラ、各種のアプリケーションなどは、sRGBの色域を違和感なく再現できるように設計されています。
Adobe RGB:sRGBの色域を超える鮮やかな色を再現できる機器が一般に普及したこともあり、 昨今はsRGBより広い色域を持つ「Adobe RGB」規格が出てき始めました。
NTSC:アメリカの国家テレビ標準化委員会が作成した色域で、アナログテレビ方式の色域規格となっています。Adobe RGBと似通った色味にはなりますが、少し表現できる色域は異なります。

この図を使うと基本的にどんな色でも座標で示すことができます。

色空間

色空間というのは、ディスプレイなどの扱う範囲や方法のことを指します。
原色:どの色か
色域:扱える色の範囲
ガンマ補正:見る環境に応じた補正

中でも「SRGB色空間」がポピュラーなものとなっています。
こちらも先ほど記したCIEが1998年に制定しました。

iPhoneの色空間はdisplayP3色空間というものでこちらはAppleが作った、iPhone7から取り入れられました。
かなり色域が広くなっていて、赤系統の色の表現の広がりがありました。

詳しくは下記のURL先を読んで見るとそのすごさが分かる、…かも?

ものの見え方

物の見え方は千差万別、十人十色といったところです。最初に記述したような色覚異常ではない健常者であったとしても見る人によって見えている世界は違ってきます。

そんな中、ウェブコンテンツの広範囲に及ぶ推奨事項を記しているのが「Web Content Accessibility Guidelines」です。

このガイドラインに従いデザインをすることで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光過敏性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツを見易くすることができます。又、ほとんどの利用者にとって使いやすいものになります。

ここでは軽く触れる程度なので、気になるはググってみるか下記のURLへどうぞ!!

視覚特性色々

色盲、色覚という呼び方をよく耳にしますがこれは差別的な表現となっている為、昨今では「色覚異常」「色覚多様性」といった呼び方を推奨されています。そのほか「視覚過敏」などの病気もあります。

この色覚異常を引き起こす要因となる細胞が下記となります。

脊椎動物の網膜には錐体(すいたい)桿体(かんたい)と呼ばれる細胞があり錐体が色を感じる細胞、桿体が光を感じることができる細胞となっています。この細胞があるからこそ色や明るさを感じることが出来ます。

色覚異常には先天性、後天性とあります。

先天性色覚異常:遺伝による錐体視物質の異常。(日本人での頻度は男性の約5%、女性の0.2%です。)
後天性色覚異常:目や脳内の病気などによる色覚障害。

問題となる錐体の種類によって見えづらい色味が変わっており、色覚異常といっても様々なタイプがあります。

1型色覚(L錐体の異常):赤に敏感な視細胞(L錐体)の機能に異常がある
2型色覚(M錐体の異常):緑に敏感な視細胞(M錐体)の機能に異常がある
3型色覚(S錐体の異常):青に敏感な視細胞(S錐体)の機能に異常がある

1型・2型が赤と緑が苦手色としていて、3型が青と黄を苦手色としています。又、1・2型の方が多い為、これらをあわせて先天赤緑色覚異常ともいっています。

先天赤緑色覚異常の色の見え方
見分けにくい色の組み合わせとしては下記の通りとなっていて、色味を考える時にはこれも考えながら作成すると色覚異常の方にも優しいものになると思います。

色覚異常の人は何色が苦手?

症状の程度、原因により変わるので一概に言えないのが現状です。
ただ、苦手色は型によっても変わるので色のみで区別をつけるようなグラフなどの表現は避けるというのが無難かと思います。

色に関して迷った時は一度グレースケールにすることでコントラスト比の強弱が分かるかと思うので、そこで見辛い際には修正を施して行くのがいいかと思います。

なお、コントラストが弱いと認識が出来ないかたもいます。このコントラストは年齢によって認識することが難しくなることや、白内障などの病気で見えにくくなることもあります。適度な大きさを保つよう心掛けるようにしましょう。

iPhoneで出来る色の調整

今回紹介したような色覚異常の方に向けての対応としてアプリにダークモードを実装することも多くなりましたがiPhone自体での対応が可能なのをご存知でしょうか?

色反転
背景を暗くした方がものが見やすい場合は、「色を反転」を使って、画面にコンテンツを表示する方法を変えられます。設定方法としては、「設定」>「一般」>「アクセシビリティ」>「ディスプレイ調整」>「色を反転」の順に選択してください。(スクショを載せようとしたものの端末内でしか反映されず、撮ったスクショには反映されなかったので自分で試してみてね😄!)
カラーフィルター
色覚に障がいがある場合も、カラーフィルタを使うと、色の違いが見分けやすくなります。カラーフィルタを使うと、写真や映画の見え方が変わるので、必要なときにだけ、要望に合わせて使うような形です。
カラーフィルタは設定 App から有効にすることができます。「設定」>「一般」>「アクセシビリティ」>「ディスプレイ調整」の順に選択し、「カラーフィルタ」を選択します。

「カラーフィルタ」をオンにすると、4 つのプリセットフィルタの中から選択できるようになります。

グレイスケール
赤/緑フィルタ (1 型色覚)
緑/赤フィルタ (2 型色覚)
青/黄フィルタ (3 型色覚)

まとめ

今回はダークモードを通して知った色彩についてiOSDCで聞いた講義を深掘りするようにググりつつまとめてみました!色の世界って奥が深い!色覚異常の方はどんな世界が見えているのか、なんて考えたこともなかったので勉強になりました。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

5

akira

株式会社マンハッタンコード

マンハッタンコードの取り組みや業務を紹介するマガジン
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。