iPhoneやiPadをグレイスケール表示したときに各社のアイコンの見え方の違いが気になりました。
この記事ではメインであるGoogle、Microsoft、AdobeのアイコンをiPadで集めて、デフォルト、白黒、P型色覚、D型色覚それぞれで見え方を検証します。
目次
デフォルト（C型色覚）
Googleアイコン：デフォルト
2020年秋からGoogleのロゴで使用している青・黄・赤・緑を使ったカラフルなアイコン展開になりましたね。正直、このアイコンになってからクリック間違いが増えました。
以前のアイコンに戻すChrome機能拡張まで存在するんですね😅
Microsoftアイコン：デフォルト
昔は垢抜けないデザインという印象だったMicrosoft社ですが、ここ数年で一気にデザインに力を入れています。
こちらは2018年に各サービスのアイコンをリニューアルしています。かなり気合入れた改変ですよね。Microsoft社のデザイン方針のサイト、見応えがあるのでお時間あったら是非。
Adobeアイコン：デフォルト
他に自社サービスでアイコンが数揃っているところ……我らがAdobe社でしょ！ 毎年徐々に変更されていて近年はすっかりシンプルになってますよね。
iPadでアプリをダウンロードしてアイコンを集めましたが、前述2社ほど揃えられませんでした。
白黒
iPhoneだと、「設定」 ＞ 「アクセシビリティ」 ＞ 「画面表示とテキストサイズ」 ＞ 「カラーフィルター」をオフにします。そのままグレイスケールになるはずです。他にも色味のフィルターを選択できますね。
Googleアイコン：白黒
ちょっとコントラストが薄くて見づらいかな？ カラーリングだけじゃなく形状も各アプリ似てますね。。
Microsoftアイコン：白黒
こちらはコントラストがメリハリ効いてますね。また、いい感じに要素にシャドウをかけているので、白黒でもカッコいいです。
Adobeアイコン：白黒
Adobeはまぁ白黒にしても印象はあまり変わりないですね。
P型D型色覚
赤と緑が見えずらいタイプです。日本人だと男性で5%ほどいるそうで、無視できない割合ですね。
Googleアイコン：P型D型色覚
さすがに今時は配慮されてデザインされていますわね。個人的に色数が減ったこっちの方が好みかも。
Microsoftアイコン：P型D型色覚
意図的なのか青が映える色の使い方をしていますね。
Adobeアイコン：P型D型色覚
イラレが目立つ😄 このシンプルさで視認性悪くなったら大変（しかもAdobeが）なので、もちろんちゃんと見えます。
まとめ
色々見え方を変えて検証してみましたが、じゃあ自分がアイコンやロゴをデザインするとき、ここまで配慮できているか？と言われると、あまりできていません。
最近はグラデーションを活かしたリッチなデザインが流行っていて、クライアントにもウケが良かったりしますが、意味や必然性を理路整然と説明して納得させれるようになりたいですね。