デザイン | INFOHUB-media https://infohub.jp/media 国内ビジネスリーダー向けメディア Tue, 26 Jan 2021 10:43:04 +0000 ja hourly 1 https://wordpress.org/?v=5.7.12 https://wp.infohub.jp/wp-content/uploads/2020/10/cropped-icon_logoA_2-32x32.png デザイン | INFOHUB-media https://infohub.jp/media 32 32 Amoung UsのUXから学ぶ、色覚異常にも優しいデザインの重要性 https://infohub.jp/media/2021/01/27/3569/ https://infohub.jp/media/2021/01/27/3569/#respond Tue, 26 Jan 2021 23:00:00 +0000 https://infohub.jp/media/?p=3569 色覚障害とは、色が異なって見えてしまい、色の区別する能力が低下してしまう症状です。 col...

The post Amoung UsのUXから学ぶ、色覚異常にも優しいデザインの重要性 first appeared on INFOHUB-media.]]>
色覚障害とは、色が異なって見えてしまい、色の区別する能力が低下してしまう症状です。

colorblindawarness.orgの統計[1]によると、世界では男性の8%、女性の0.5%が色覚障害を持っているとされています。

世界では、3億人以上の人が何らかの形で色覚障害を抱えています。

これらの統計を文脈に当てはめてみると、1000人の生徒が在籍する学校にこの統計を当てはめると、約100人の色覚障害の生徒がいることになります。

12~13人が脱色症、12~13人が原色症、12~13人が原色症、62人が脱色症となります。約半数の異常者は中等症から重症ということになる。

これはデザインにおいて、色覚障害者のためのUXを検討することの重要性を示しています。

色はデザインやゲームにどの程度影響を与えるのでしょうか?

それを探るために、最近の大人気ゲーム「Among Us」のケーススタディを行うことにしました。

そもそも「Among Us」とは?

おそらく見聞きしたこと、プレイしたことがある方も多いのではないでしょうか。

知らない人のために、このゲームは宇宙をテーマにしたオンラインマルチプレイヤー型の推理ゲームで、プレイヤーや乗組員は自分の中にいる『偽者』を探しながらタスクをこなしていきます。(日本では宇宙人狼と呼ばれることがあります)

一方、偽者はクルーのタスクを妨害したり、一人ずつ乗組員を殺害しゲームの勝利を目指します。

プレイヤーは異なるサーバーにバーチャルルームを作成したり、そこに参加したりすることでゲームをプレイできます。

1つの部屋には最大10人のプレイヤーがいて、各プレイヤーはそれぞれ異なる12色を選ぶことができます。

Amoung Usの各プレイヤーはそれぞれ異なる12色を選ぶことができる
The UX of Among Us: The importance of colorblind-friendly designより

乗組員は、ゲーム内チャットを介して誰がインポスター(偽者)であるかを議論・推測、投票して宇宙船から排除しなければいけません。

ユーザーは一般的に「Where?(どこで殺された?)」「Someone(誰か)」、「Any sus?(怪しい人いない?)」だけでなく、緑のアバターのプレイヤーは「Red sus(赤が怪しい)」、紫のアバターのプレイヤーは「Black sus(黒が怪しい)」などの色を基準にして発言することがあります。

この動画では、色や代名詞をプレイヤー名にすることで混乱した様子を実況しています。

これにより、チャットではプレイヤー名だけでは偽者を識別することが困難になり、混乱してしまうのです。

色が重要な役割を果たすこの環境では、色盲は複数のプレイヤーを区別することを困難にさせるため、プレイヤーのパフォーマンスや認知負荷に影響を与えます。

私は Among Us で使用されている配色を再現し、コブリスを用いてさまざまなタイプの色覚障害のテストを行いました。

色覚障害の各症状について

最も一般的な色覚障害は、赤と緑の区別ができなくなるケースです。

赤と緑の色覚障害には、第1色弱、第2色弱、第1色盲と第2色盲の4つのタイプがあります。

第2色弱は赤緑の色覚障害の最も一般的なタイプで、緑をより赤っぽく見せてしまいます。 

第1色弱は、赤がより緑に見え、明るく見えなくなります。第1色盲第2色盲は、どちらも赤と緑の区別が全くつかなくなるのです。

他の色覚障害の種類としては、以下のようなものがあります。

青黄色覚障害

珍しいタイプの色覚障害で、青と緑、黄と赤の区別がつきにくくなります。青黄色覚障害には以下の2つのタイプがあります。

第3色弱は、青と緑、黄と赤、青と緑、黄と赤の区別がつかなくなります。

第3色盲は青と緑、紫と赤、黄色とピンクの区別がつかなくなります。同時に、色が明るく見えなくなります

1色覚

完全な色覚障害の場合は、色が全く見えなくなります。これは単色性とも呼ばれ、かなり珍しいものです。タイプにもよりますが、はっきりとした色が見えなくなったり、光に敏感になったりすることもあります。

Among Usではどのように見えているのか

このような場合、色覚障害を持つプレイヤーはどのようにAmong Usで色を認識しているのでしょうか?

1.最も一般的な色覚障害は第2色弱で、緑が赤に見えるようになり、実生活では大きな影響はありませんが、ゲーム内で青と紫を区別することはほぼ不可能になってしまうのです。

第2色弱は、ゲーム内で青と紫を区別することはほぼ不可能になる
The UX of Among Us: The importance of colorblind-friendly designより

2. 人口の1.3%に発症する第1色弱では、赤がより緑に見えて、より明るく見えなくなります。このタイプは軽度で、日常生活に支障をきたすことはありません。

しかし、ゲーム内では青と紫の区別がほとんどつかなくなり、ピンクも紫っぽく見えるようになります。

The UX of Among Us: The importance of colorblind-friendly designより

3. 第1色盲第2色盲はどちらも赤と緑の区別が全くつかない状態になります。

第1色盲は、網膜の赤い光受容体が欠如していることによって引き起こされます。

純粋な赤は見えず、代わりに黒く見えます。紫の色は青と区別がつかず、オレンジがかった赤は薄暗い黄色に見えることがあります。

ゲームでは、赤と緑、赤と茶色、オレンジ、黄色とライム、紫と青、シアンと白の区別がつかず、ピンクが青く見えるかもしれません。

第一色盲は、赤と緑、赤と茶色、オレンジ、黄色とライム、紫と青、シアンと白の区別がつかず、ピンクが青く見えるかもしれない
The UX of Among Us: The importance of colorblind-friendly designより

第2色盲は、第1色盲と同様の原因で色相識別に影響を与えますが、色が暗くなる症状はありません。

ゲームでは、プレイヤーはピンクが青または灰色に見えることを除いて、第1色盲と同様の結果であることがわかります。

第二色盲は第一色盲と同様の結果であった
The UX of Among Us: The importance of colorblind-friendly designより

4. 3色盲は、赤と緑の錐体色素のみが存在し、青色の網膜受容体が全く存在しない非常に稀な色覚障害です。

青は緑がかり、黄色やオレンジはピンクがかり、紫の色は深い赤に見えます。ゲームでは、オレンジとピンク、紫と黒、青と緑、ライムとシアン、黄色と白の区別が難しいと感じるかもしれません。

第三色盲は、オレンジとピンク、紫と黒、青と緑、ライムとシアン、黄色と白の区別が難しい
The UX of Among Us: The importance of colorblind-friendly designより

5. 1色覚は、「全色盲」としても知られており、色を区別する能力が欠如する症状があります。(したがって、白黒テレビであるかのように見える) 

これにより、どの色も区別することがほとんど不可能になり、プレイヤーはアバターの色の輝度/明るさだけで区別する必要があります。

1色覚は、どの色も区別することがほとんど不可能になる
The UX of Among Us: The importance of colorblind-friendly designより

開発者にできること

では、色覚障害者がゲームをより利用しやすくするために、開発者ができることは何でしょうか。ここでは、下記2つの手段を紹介します。

  1. カードゲーム「UNO」が色覚障害者のために導入した色識別システム「ColorAdd」をのように、プレイヤーのためのツールを導入すること。
  2. Among Usでは、その色を識別するためのシンボルを付けることができ、識別が容易にすること。

このシンボルは、アバターの名前と一緒に表示したり、アバター自体に表示したりすることができます。

アバターの色の名前をプレイヤーの名前と同じように括弧で表示する方法です。

プレイヤー名と色名の両方を格好良く表示するためには多少の工夫が必要ですが、可能な解決策になるかもしれません。

名称やシンボルなどで、ここのプレイヤーを識別できるようにする
The UX of Among Us: The importance of colorblind-friendly designより

開発者はすでにこれに取り組んでおり[2]、ベータ版[3]ではカラーブラインドモードが利用可能ですが、インクルーシブデザイン(従来、デザインプロセスから除外されてきた多様な人々を巻き込むデザイン手法)がもたらす違いは興味深いものがあります。

例えばこの動画は、色と名前の両方を識別できない場合に発生する完全なカオスを表現しています。

私が事例研究に選んだのは、ゲームの人気が日に日に高まっており、多くの人が利用しているからです。

これにより、色盲サポートのテストがより簡単になるはずです。そして、私は Among Us の開発者がどのようにこれに対処するかを見てみたいと思っています。


コンテンツ提供:Unma Desai

ブリティッシュコロンビア大学院でHCI(ヒューマンコンピュータインタラクション)の研究に従事。UI/UXデザイナー。

原文:The UX of Among Us: The importance of colorblind-friendly design


[1]…Types of Colour Blindness
[2]…The Future of Among Us
[3]…Among Us beta update adds anonymous voting and colour-blind support



The post Amoung UsのUXから学ぶ、色覚異常にも優しいデザインの重要性 first appeared on INFOHUB-media.]]>
https://infohub.jp/media/2021/01/27/3569/feed/ 0