色彩検定UC級のまとめと考えたこと

2021年度の色彩検定のUC級（色のユニバーサルデザイン）を受けてきました。
その勉強で得た知識などをまとめます。
※追記予定です。


## そもそもなぜ勉強しようと思ったのか
Webサイト制作を仕事にしていることもあり、「誰もが見やすい（読みやすい）サイトってどうやってつくるんだろう？」と思ったことが最初のきっかけです。
一個人の私感で色合いや文字の大きさを決めてしまっていいのか？私だけが見やすくなってしまうのではないか？等いろいろ考えました。
もともとデザインに興味はあったので、色彩の勉強をしておけばWebでも紙でも応用でき、役に立てるのではないかと思い、色彩検定UC級を受けることにしました。


## ユニバーサルデザインとは
>UC（色のユニバーサルデザイン）とは
「色覚の多様性に配慮した、誰もが見やすい色使い」です。
[UC級とは-色彩検定教会](https://www.aft.or.jp/feature/uc.html)

つまり、すべての人に優しいデザインということです。
子供からお年寄り、性別、文化、身体状況などのあらゆる個性の違いにかかわらず、「最初から誰もが利用しやすく、暮らしやすい社会になるよう、モノやサービスを提供する」という考え方。

## ユニバーサルデザインとバリアフリー
ユニバーサルデザインの考え方は1980年代にロナルド・メイス教授が広めたものです。
当時のアメリカでは「バリアフリー」の考え方が主流でした。
ロナルド・メイス教授は病気により幼少期から車椅子（電動車椅子）を使って生活をしていました。

### バリアフリーってなに？
バリアフリーとは、バリアを取り除くことをさします。
例えば、車椅子の人が階段を上り下りすることは難しいですが、階段にスリープをつけることで　簡単に上り下りすることが可能になります。
バリアフリーは「特定の誰かのためにとって優しい取り組み」であり、後付けの取り組みです。

### ノーマライゼーションの考え方
1950年にバンク・ミケルセンが提唱した「障害者を排除するのではなく、障害をもっていても健常者と均等に当たり前に生活できるような社会こそがノーマルな社会である」という考え方。
ユニバーサルデザインの考え方の原点です。

### すべての人に優しいデザインを
教授は問題があるたびに解決していくバリアフリーではなく、「できるだけ多くの人が使いやすいデザインをはじめから考えることが必要」と考え、ユニバーサルデザインの考え方を広めていきました。
日本では、1990年代にユニバーサルデザインの考え方が徐々に取り入れられ広まりました。

## ユニバーサルデザインの七つの原則
ユニバーサルデザインには七つの原則があります。

1. 誰にでも公平に使用できること
1. 使う上で自由度が高いこと
1. 使い方が簡単ですぐわかること
1. 必要な情報がすぐに理解できること
1. 危険につながらないデザインであること
1. 少ない力でも楽に使用できること
1. アクセスしやすいスペースと大きさを確保すること

この7つの原則を出発点として、「ユニバーサルデザイン実践ガイドライン」など、実際の製品設計への活用を視野にいおいた設計支援ツールなどが開発されている。

## 視覚情報に関わるユニバーサルデザイン
### 色
色の見え方は加齢によっても異なり、視覚特性の多様性を知ることが必要。
超高齢化社会の日本では色の側面からもユニバーサルデザインの考え方を適応することが必要不可欠。
また、注意表示などについては聴覚・触覚などによってわかる別の設備を設けるられている。
→点字になれていない人（後天的視覚障害者）のために音声ガイドや触って読める大きな浮き出し文字などを用いる

### ピクトグラム
ピクトグラムとは設備の内容を絵で表した絵文字で、日本語文字を読むことのできない子供や海外の方々にとっても瞬間的に意味がわかるもの。
図記号は、1964年の東京オリンピック時に開発されたのが始まりで、2001年には代表的な案内用の図記号が日本工業規格（JIS）として規定されました。2020（2021）年の東京オリンピックでも話題になりました。

## 高齢者が分かりにくい事例
高齢者にとっては表示された画像が単純で、鮮明なほど見やすく読みやすい傾向がある。
「高齢者障害者配慮設計指針」（JISZ8071）において、高齢者への視覚に配慮するべき対象物は下記を挙げている

+ 手で触れる可能性のある鋭い角や縁
+ スリップ、つまずき、衝突、転落など、または怪我の危険に繋がるような同一面上の段差、障害物または突起物
+ むき出しの火及び炎
+ 誰もが認知できる触覚警告表示がない場合の腐食物
+ 視覚表示だけに依存する避難誘導システム
+ 色でしかわからない、または背景と文字のコントラストが低い警告表示


その他、日常生活での事例

+ 飲み薬の色の区別
+ 黒い天ぷら鍋にどれだけの油を入れたか分かりにくい
+ 青色の標識が黒に見えて目立たない
+ 道路の凹凸がわかりにくい（立体感・奥行き感が減少）
+ 文字や表示が小さすぎて見えない
+ 解説書が読みにくい
+ コンロの火がちゃんとついたか不安
+ 階段の段の区切りがわかりにくい

これらを配慮していくことが必要となる。


## WEBサイトでの利用
色が見分けにくい色覚特性の人の場合、赤と緑、グレーとピンク、などの組み合わせがわかりにくいです。
また、明度差の低いグレー同士の配色は色を正常に認識できる人にとっても見分けにくいです。


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYEOyGp" data-user="hayashi-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hayashi-m/pen/zYEOyGp">
  Untitled</a> by m hayashi (<a href="https://codepen.io/hayashi-m">@hayashi-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### どう対応するか？
#### セパレートカラーを用いる
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYeYJJM" data-user="hayashi-m" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hayashi-m/pen/vYeYJJM">
  Untitled</a> by m hayashi (<a href="https://codepen.io/hayashi-m">@hayashi-m</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

セパレーションとは「分離」という意味で、色と色の間に入れてコントラスト感を調整する色をセパレーションカラーという。
セパレーションカラーを用いることで対応前より見やすくなります。


### シミュレーションソフトを使う
色覚異常や高齢者の色覚・視覚特性をシミュレーションできるソフトを利用して、検討対象の中で区別しにくくなる色の組み合わせが使われていないかを確認する。

①Webソフト

+ [Vischeck](http://www.vischeck.com/)
+ [UDing](http://www.toyoink1050plus.com/tools/uding/)

②iOSアプリ

+ [色のシミュレータ](https://asada.website/cvsimulator/j/)

③アドビソフト

+ Adobe Illustrator,Photoshop

## まとめ
デザイナーでなくても、色の見え方を知らないより知っているほうが良いと思い勉強を始めました。
興味があることから学んでいくのは楽しかったです。
誰にでも読みやすく分かりやすいものを作っていきたいとおもいます。