パソコンとスマホでは同じカラーコードでも色の見え方が全然異なる件

byNatchan - 2024/06/18

0

パソコンとスマホでは同じカラーコードでも色の見え方が全然異なる件について語ります。自身が運営するサイトあるいはブログの配色を迷っている人、カラーデザインを上手くなりたいWebデザイナーなどにおすすめの内容です。

{tocify} $title={Table of Contents}

配色を見直そうと思ったきっかけ

とあるツイートをきっかけに、ブログの配色（厳密にはボタンの色）を変えました。

自分が今まで設定していたボタンの色が、一部の人たちにとって刺激が強すぎると気づいたからです。

そのきっかけとなったツイートがこちら↓『iPhone SE4』のカラーバリエーションを載せた製品画像。プチバズっているのでタイムラインに流れてきました。

via X

これ投稿主は「色が濃くて目がチカチカする」と言っていますが、私的にはパステルカラーとまでは言わないけど、色が薄く見えるんです。

それで、この程度で目がチカチカするなら当ブログの配色ヤバいかも？となったんです。なので、どんな人が見ても目がチカチカしないために配色を見直すことにしました。

まず、今まで設定していた原色に近いボタンカラーがこちら↓

before

画像じゃ伝わりにくいんですけど、PCだと画面の大きさで色が膨張するせいか「濃い色だな」程度にしか思わないんですけど、スマホだと画面サイズが小さいので色が凝縮してさらに濃く見えるんです。

私でも濃く見えるってことは、上のツイートでチカチカした人からしたらめちゃくちゃ目に悪い配色にしてたということ。そこで、少しくすんだ色に変更しました。

誰が見てもチカチカしないように改善した配色がこちら↓

after

新作iPhoneカラーに比べたら濃いか..。それでも、だいぶ抑えた色味にはなりましたよね。同じトーンの色を3つ用意するのって結構むずかしいんで、これでOKとします。

結論、同じカラーコードを設定していてもパソコンよりもスマホの方が濃く見えるから、配色を決めるときはスマホを基準に色を定めましょうという話でした。

最後に｜人によって色の見方は違う

以上、パソコンとスマホでは同じカラーコードでも色の見え方が全然異なる件について語りました。

そのツイート見て改めて思ったのが、人によって色の見方って全然違う。ある人にとっては濃い色でも、別の人にとっては薄い色になる。

2015年に世界的にバズったドレスの色論争、ちなみに私には白金に見えました。色の濃さだけじゃなく、色のトーンまで人によって見え方が異なるのって面白い。

背景色とボタンカラーのコントラストをはっきりさせない方が目に優しいので、特にダークモードを採用している人はこれをきっかけに配色を見直してみてください。