色彩検定の世界

## はじめに
こんにちは！ MYJLab Advent Calendar 2024、11日目を担当する4年生のうのです。

昨日は佐藤さんのReactを使った配色ジェネレータのお話でした。
なんだかテーマが似ていて親近感を感じました！
私は配色のサイトが好きで、配色ジェネレータをブックマークにしてよく使うほどです。
自分で作れるのもなかなか面白いですね。

さて、本記事ではエンジニアでとってる人は数少ない色彩検定について話そうと思います。

私はウェブアプリを一時期作っていたときに、見やすい・伝わりやすい配色にかなり苦労したこともあり、今年の6月に色彩検定2級を取得しました。

就活には使えないし、持っててもすごいねと褒められる可能性はあまりないですが、シンプルに勉強が面白いと私は思います。
それと知識が入ることで、日常の見える景色が少し変わります。

時間に余裕があって、何かしら勉強がしたいけど、身につけたいけど、つまらない勉強はやりたくないという人におすすめです。

是非興味のある方は来年とって貰えたら嬉しいです！



本記事では軽く色彩検定について説明した後、基本知識や、私が面白いと思った分野、最後にクイズを出します。

## 色彩検定について
まず初めに軽く色彩検定とはどういうものなのか、過去のデータを使って話しますね。
色彩検定とは文部科学省後援の公的資格です。試験レベルは3級、2級、1級、UC級の4つです。
最も受験者数が多いのが3級で昨年は３万人が受けました。
合格率は2、3級は約7割。ちゃんと勉強したら基本取れるくらいです。
試験時間は2級は70分、検定料は１万円です。検定料ちょっと高すぎますね〜

気をつけて欲しいのは2、3級は年1回しか開催されないこと。
来年は6月22日で、申込期間は4月から始まるようです。
受けたい人は来年の4月くらいまでに決める必要があります。

受ける級は、色彩検定を初めて受ける人でも2級がおすすめです！
3級は、1週間あれば取れちゃうのでわざわざ取るのもなって思います。
2級は1ヶ月ぐらいなので、ちょうど飽きるかなくらいで取れますよ。

## 基本知識
さて簡単に基本知識を見てみましょう！

### PCCSの色相環
PCCSの色相は「Hue」と呼ばれ、全部で24種類あります。

<img width="40%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/633bc1c5-ace4-9134-4264-513b79947230.jpeg">

赤は2、黄は8、緑は12、青は18。まずはこれを覚えて大体の位置関係を把握します。
この4色は心理4原色と言って、最もその色らしい色のことです。（赤なら赤の色味しか感じられなくて、最も赤ってこと）

色彩検定では「この色は12くらいかな」など色を見て、色相を判断する能力も大切ですが、この色の反対側にある色、隣にある色を考える能力も必要になってくるんですよね。

後のクイズにも出題するので、なんとなく色の配置を覚えておいてください。

### PCCSのトーン図
PCCSでは似た印象やイメージをもつ、明度・彩度の領域を「トーン」と呼びます。

髪をブリーチやカラーをするときに「何トーンにしますか？」と聞かれると思いますが、ここから来ているんじゃないですかね、たぶん。

<img width="60%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/5ddc0daf-2e3a-49c3-b61a-cd4ebcbb5b0f.jpeg">

有彩色を12種類、無彩色を4種類に分類しています。
トーン図は右に行くほど彩度が高くなり、上に行くほど明度が高くなります。

色彩検定では、この配色は何トーンの集まり？と聞かれたりします。

一見見ると覚えることなさそうだなって思いますか？ただ色単色で見ると、比較対象がなく、意外とどのトーンなのか判別するには練習が必要なんですよね。

### 色相環とトーン図
さてこの２つを合わせると、相当な数の色を分類することができます。
例えばトーン図のv(ビビット)の黄色はv8と表されます。

<img width="30%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/a3efc990-3471-5d51-cb76-a9dc64cde521.png">

じゃあdkg（ダークグレイ）8は？
<img width="30%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/c944c7c6-7ddc-f6f0-fc58-c938865af42c.png">

黄色（8）と言っても、明度・彩度でこんなにも違いがあります。
白が200色あるのにも納得ですね。

## 配色
さて基礎知識はこのくらいにしておいて、配色技法について見てみましょう。
ここでは数種類の配色を紹介します。

## ドミナントカラー

これは定番、ドミナントカラー。同一色相で、トーンは自由です。
<img width="60%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/a05584be-1259-e326-e1fe-1a73d026b4d4.jpeg">

よく目にする配色ですね。
服のコーディネートや家具の統一感を出したいときに使う配色です。
日常のもので言うと、私の働いているサンマルクカフェのロゴはこのドミナントカラーです。

<img width="30%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/48133dce-8cd6-7a16-a5f0-c3973dbc99b5.png">

## ドミナントトーン
<img width="60%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/5b1d0a3e-8ec3-9cf0-10a1-1f459148bfce.jpeg">


次はドミナントトーン。色相は自由で、同一トーンにします。


これも良くありますね。カラフルなんだけど、なんか整って見えるよねって感じ。
アプリの見た目とかポスターとかトーンを揃えると綺麗に見えます。

GoogleやMicrosoftはこのドミナントトーンです。
<img width="30%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/fc56e1b4-351b-4ed5-001e-8c76b79798ca.png">　<img width="40%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/8f197e46-9232-ee45-291c-d2f2a583e2ca.png">


あとはほとんど同じ色じゃんっていう配色をカマイユ配色といい、逆に補色の色や明度差が大きくあるような配色をビコロール配色と言います。

<img width="40%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/f8489759-7f8d-cdaf-71b6-ef7e830200fc.jpeg">

<img width="40%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/4e4a4e77-201a-18a6-5f71-0ac65b539bfb.jpeg">

余談ですが、ビコロールはフランス語で「２つの色」と言うそうで、明快な3色の配色をトリコロール配色といいます。
トリコロールで有名なのはフランスの国旗です。

<img width="40%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/e41f2999-90a1-ac30-9204-8ee0bd269cd7.jpeg">

日常的に目に見えるもの配色には名前があって、それらは法則で成り立っているんです。

## 日常的に見る色の話
日常的に目に見る色の話といえば、誘目性が挙げられます。
人の眼を引きつける度合いを誘目性といい、実は背景の色で順序が少し異なります。

<img width="70%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/1024b308-4e60-7769-5825-1ad6644e22b1.png">

（参照：color-literacy　https://color-literacy.com/ ）

この誘目性の面白いところは、日常的に背景に沿って使われている場面が多いところです。

例えば黄色い点字ブロックは黒いアスファルトの上にあります。確かに見やすいかもと思いませんか？
<img width="40%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/33289555-ed25-8401-e801-61884dda3d03.jpeg">
(参照：Precious プレシャス https://precious.jp/articles/-/14045)

他にも止まれの標識は白と赤。大切な標識には配色がよく考えられています。
<img width="30%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/1532d4fb-ec17-3b03-cf4a-c13f0f55808a.png">
(参照：いらすとや　https://www.irasutoya.com/)


## クイズ
ここまで基礎知識、配色について話しました。
ここで簡単なクイズを出します。是非解いてみてください。

### 第一問
色相環を12個に分類した時、黄（8）の隣にくる色は？

<img width="20%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/4314c3dc-93ea-6b58-15c1-997929cef2c9.png">
<br>

<img width="19%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/0d33ffa4-334c-5eb9-b9a2-f7781a695eda.png">　　<img width="19.5%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/e6bfedf9-8506-acdc-fd8d-0e143a105cd5.png">　　<img width="20%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/88ea2236-fc66-f513-b67b-089f345d5c4a.png">

正解は左のオレンジです。黄色の両隣はオレンジと黄緑ですね。

### 第二問
色相環を12個に分類した時、紫（22）の反対にくる色は？

<img width="20%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/3662d079-558d-b6d0-5d8b-4fa77f7055ec.png
"><br>
<img width="19%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/4314c3dc-93ea-6b58-15c1-997929cef2c9.png">　　<img width="19%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/0d33ffa4-334c-5eb9-b9a2-f7781a695eda.png">　　　<img width="20%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/73d0d6f9-9728-9a43-9b0c-184954306f06.png">

正解は1番右の黄緑です。反対色はちょっと慣れるまでに時間がかかると思います。

### 第三問
この配色の名前は？
<img width="60%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/ffbb570d-279f-1c9c-ca6e-60914c18bb68.jpeg">

正解はドミナントカラーです。統一感がありますね。


### 第四問
この配色の名前は？
<img width="50%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617884/c3c70c4e-26d7-222f-f21b-5f6c682fe795.jpeg">

正解はビコロール配色です。色相の明快なコントラストがあります。

何問正解できたでしょうか？意外と簡単に思えましたか？

## 終わりに
今日は色彩検定について話しました。
色彩は私たちの日常生活に多く溶け込んでいることをわかっていただけたら幸いです。

この記事だけでは伝えきれなかった分野やまだまだ色の話は奥が深いので、是非色彩検定を受けて貰えると嬉しいです！

長々とお付き合いいただきありがとうございました〜！