より多くの人の目に留まるために

第1話 イメージカラーの目の留まりやすさ

　カクヨムのホームを開き、まず目に留まるのが「キャッチコピー」です。そして、このキャッチコピーとは作者が決めたイメージカラーの色で表示されます。

　当たり前ですが、コントラストが大きいほど見る人にインパクトを与えます。つまり目に留まりやすくなるのです。

　そのため「色」という情報はかなり重要になってきます。

　コントラストの数値は1.00～21.00。数字が大きくなるほどコントラストが高くなります。つまり見えやすくなります。

　しかし一番注意すべきは黒に混ざってしまってはいけないということです。白と黒のコントラスト値は21です。そのため、この数字に近づいてしまうと黒と混同してしまって、かえって見づらくなってしまいます。

　これらを踏まえると、コントラスト値だけでは判別つきません。CMYKの黒の量である0～100でも表してみようと思います。

　ということで今回は、カクヨムで設定できる計54色の、見え方についてメモして行こうと思います。右端の色はHSVのHUEの数値より、0~15・346~360を赤、16~45を橙、46~75を黄、76~105を黄緑、106~150を緑、151~210を青緑、211~255を青、256~285を青紫、286~315を紫、316~345を赤紫で分けています)

面倒くさい方は《総まとめ》をご覧になればすぐにわかると思います。

色の順番は、左上から縦に、次は二列目を縦に、という風に進めていきます。

始　↓　↓　　↓　↓　↓

↓　↓　↓　　↓　↓　↓

↗　↗　↗　　↗　↗　終

※背景色は#FFFFFFに統一しています。

番号#カラーコード　→コントラスト値/CMYKのBlack値/HSVによる色区分

・緑青

①#BAC23E　→1.93/24/黄

②#88C057　→2.33/25/黄緑

③#80A673　→2.76/35/黄緑

④#758E00　→3.73/44/黄

⑤#509600　→3.68/41/黄緑

⑥#2F8B61　→4.21/45/青緑

⑦#607000　→5.5/56/黄

⑧#336E00　→6.23/57/黄緑

⑨#00612B　→7.65/62/緑

⑩#7CBDBC　→2.13/26/青緑

⑪#65A8D1　→2.6/18/青緑

⑫#93ACDC　→2.29/14/青

⑬#42B8C1　→2.37/24/青緑

⑭#3189D3　→3.72/17/青緑

⑮#0033C4　→9.25/23/青

⑯#2C6D82　→5.81/49/青緑

⑰#11579A　→7.36/40/青

⑱#073D80　→10.56/50/青

・紫桃

①#8680BC　→3.6/26/青

②#96769F　→3.9/38/紫

③#C18CB1　→2.74/24/赤紫

④#634F94　→6.83/42/青紫

⑤#8F478D　→6.08/44/紫

⑥#A31F74　→6.99/36/赤紫

⑦#371F6A　→13.41/58/紫

⑧#70156D　→10.41/56/紫

⑨#80133D　→10.1/50/赤紫

⑩#E892C9　→2.24/9/赤紫

⑪#FFA3C5　→1.86/0/赤紫

⑫#FF8A94　→2.25/0/赤

⑬#F459B9　→3.01/4/赤紫

⑭#FF5D81　→2.94/0/赤

⑮#EE2323　→4.29/7/赤

⑯#E0005E　→4.85/12/赤紫

⑰#E33954　→4.22/11/赤

⑱#AD3232　→6.4/32/赤

・橙黒

①#FA9277　→2.22/2/赤

②#E7AA82　→2.01/9/橙

③#F6BE48　→1.7/4/橙

④#FF5E23　→3.05/0/橙

⑤#FF9D00　→2.08/0/橙

⑥#CC9A4D　→2.53/20/橙

⑦#964727　→6.51/41/橙

⑧#BD5C0B　→4.47/26/橙

⑨#876246　→5.43/47/橙

⑩#D9BF0C　→1.84/15/黄

⑪#828282　→3.84/49/ナシ

⑫#9FA191　→2.63/37/黄

⑬#B9A400　→2.51/27/黄

⑭#4C4C4C　→8.59/70/ナシ

⑮#A59395　→2.91/35/赤

⑯#76690D　→5.53/54/黄

⑰#000000　→21/100/ナシ

⑱#747481　→4.61/49/青

　明度、というものが色の濁りに関係していることを忘れてはいけません。明度は黒の量です。先ほど、0~100であらわしたものになります。(数字が大きいと暗い)

　これは色の波長によって指標が変わります。明度に置き換えると数値は0.2、0.4、0.6、0.8、1～10の十四段階になります。数字が大きくなると明るくなっていきます。

一番鮮やかな色の明度

赤　：6(31)

橙　：8(15)

黄　：9(8)

黄緑：8(15)

緑　：7(23)

青緑：7(23)

青　：6(31)

青紫：3(54)

紫　：3(54)

赤紫：6(31)

　マンセル色立体、と調べていただければわかりやすいかと思います。

　つまり、黄色は紫の一番鮮やかな色と同じ明度にしたとき、濁って見える、ということです。

　これらを踏まえると、見えやすさに関する明度、適切な黒の量が分かるようになります。

　そしてコントラストの数値は各色それぞれ、

赤　：4

橙　：2.52

黄　：1.07

黄緑：1.29

緑　：1.37

青緑：1.25

青　：8.59

青紫：6.25

紫　：3.14

赤紫：3.77

したがって……

赤に区分⇒マンセル(６)

・紫桃

⑫#FF8A94　→2.25/0/赤　⇒10

⑭#FF5D81　→2.94/0/赤　⇒10

⑮#EE2323　→4.29/7/赤　⇒9

⑰#E33954　→4.22/11/赤　⇒9

⑱#AD3232　→6.4/32/赤　⇒6◎

・橙黒

①#FA9277　→2.22/2/赤　⇒10

⑮#A59395　→2.91/35/赤　⇒5

橙に区分⇒マンセル(８)

・橙黒

②#E7AA82　→2.01/9/橙　⇒9

③#F6BE48　→1.7/4/橙　⇒10

④#FF5E23　→3.05/0/橙　⇒10

⑤#FF9D00　→2.08/0/橙　⇒10

⑥#CC9A4D　→2.53/20/橙　⇒7◎

⑦#964727　→6.51/41/橙　⇒5

⑧#BD5C0B　→4.47/26/橙　⇒7

⑨#876246　→5.43/47/橙　⇒4

黄に区分⇒マンセル(９)

・緑青

①#BAC23E　→1.93/24/黄　⇒7

④#758E00　→3.73/44/黄　⇒4

⑦#607000　→5.5/56/黄　⇒3

・橙黒

⑩#D9BF0C　→1.84/15/黄　⇒8◎

⑫#9FA191　→2.63/37/黄　⇒5

⑬#B9A400　→2.51/27/黄　⇒6

⑯#76690D　→5.53/54/黄　⇒3

黄緑に区分⇒マンセル(８)

・緑青

②#88C057　→2.33/25/黄緑　⇒7◎

③#80A673　→2.76/35/黄緑　⇒5

⑤#509600　→3.68/41/黄緑　⇒5

⑧#336E00　→6.23/57/黄緑　⇒3

緑に区分⇒マンセル(７)

・緑青

⑨#00612B　→7.65/62/緑　⇒2

青緑に区分⇒マンセル(７)

・緑青

⑥#2F8B61　→4.21/45/青緑　⇒4

⑩#7CBDBC　→2.13/26/青緑　⇒7◎

⑪#65A8D1　→2.6/18/青緑　⇒8

⑬#42B8C1　→2.37/24/青緑　⇒7◎

⑭#3189D3　→3.72/17/青緑　⇒8

⑯#2C6D82　→5.81/49/青緑　⇒4

青に区分⇒マンセル(６)

・緑青

⑫#93ACDC　→2.29/14/青　⇒8

⑮#0033C4　→9.25/23/青　⇒7◎

⑰#11579A　→7.36/40/青　⇒5◎

⑱#073D80　→10.56/50/青　⇒3.5

・紫桃

①#8680BC　→3.6/26/青　⇒6

・橙黒

⑱#747481　→4.61/49/青　⇒4

青紫に区分⇒マンセル(３)

・紫桃

④#634F94　→6.83/42/青紫　⇒5◎

紫に区分⇒マンセル(３)

・紫桃

②#96769F　→3.9/38/紫　⇒5

⑤#8F478D　→6.08/44/紫　⇒4◎

⑦#371F6A　→13.41/58/紫　⇒2

⑧#70156D　→10.41/56/紫　⇒3

赤紫に区分⇒マンセル(６)

・紫桃

③#C18CB1　→2.74/24/赤紫　⇒7◎

⑥#A31F74　→6.99/36/赤紫　⇒5

⑨#80133D　→10.1/50/赤紫　⇒4

⑩#E892C9　→2.24/9/赤紫　⇒9

⑪#FFA3C5　→1.86/0/赤紫　⇒10

⑬#F459B9　→3.01/4/赤紫　⇒10

⑯#E0005E　→4.85/12/赤紫　⇒8

カッコ内の数字に近いもの、加えてコントラストの数値が4~8のものが鮮やかである、ということができます。

《総まとめ》

・緑青

①#BAC23E　→1.93/24/黄

②#88C057　→2.33/25/黄緑　◎

③#80A673　→2.76/35/黄緑

④#758E00　→3.73/44/黄

⑤#509600　→3.68/41/黄緑

⑥#2F8B61　→4.21/45/青緑

⑦#607000　→5.5/56/黄

⑧#336E00　→6.23/57/黄緑

⑨#00612B　→7.65/62/緑

⑩#7CBDBC　→2.13/26/青緑　◎

⑪#65A8D1　→2.6/18/青緑

⑫#93ACDC　→2.29/14/青

⑬#42B8C1　→2.37/24/青緑　◎

⑭#3189D3　→3.72/17/青緑

⑮#0033C4　→9.25/23/青　◎

⑯#2C6D82　→5.81/49/青緑

⑰#11579A　→7.36/40/青　◎

⑱#073D80　→10.56/50/青

・紫桃

①#8680BC　→3.6/26/青

②#96769F　→3.9/38/紫

③#C18CB1　→2.74/24/赤紫　◎

④#634F94　→6.83/42/青紫　◎

⑤#8F478D　→6.08/44/紫　◎

⑥#A31F74　→6.99/36/赤紫

⑦#371F6A　→13.41/58/紫

⑧#70156D　→10.41/56/紫

⑨#80133D　→10.1/50/赤紫

⑩#E892C9　→2.24/9/赤紫

⑪#FFA3C5　→1.86/0/赤紫

⑫#FF8A94　→2.25/0/赤

⑬#F459B9　→3.01/4/赤紫

⑭#FF5D81　→2.94/0/赤

⑮#EE2323　→4.29/7/赤

⑯#E0005E　→4.85/12/赤紫

⑰#E33954　→4.22/11/赤

⑱#AD3232　→6.4/32/赤　◎

・橙黒

①#FA9277　→2.22/2/赤

②#E7AA82　→2.01/9/橙

③#F6BE48　→1.7/4/橙

④#FF5E23　→3.05/0/橙

⑤#FF9D00　→2.08/0/橙

⑥#CC9A4D　→2.53/20/橙　◎

⑦#964727　→6.51/41/橙

⑧#BD5C0B　→4.47/26/橙

⑨#876246　→5.43/47/橙

⑩#D9BF0C　→1.84/15/黄　◎

⑪#828282　→3.84/49/ナシ

⑫#9FA191　→2.63/37/黄

⑬#B9A400　→2.51/27/黄

⑭#4C4C4C　→8.59/70/ナシ

⑮#A59395　→2.91/35/赤

⑯#76690D　→5.53/54/黄

⑰#000000　→21/100/ナシ

⑱#747481　→4.61/49/青

数値上は◎をつけたものが人の目に入りやすいカラーだと分かりました。

では最後に、筆者の主観でどの色が見えやすいか、並べようと思います。

・緑青

⑤⑥⑨⑭⑮⑰

・紫桃

④⑤⑥⑧⑬⑭⑮⑯⑰

・橙黒

④⑧⑭⑰

重なっているのは

・緑青

⑮⑰

・紫桃

④⑤

でした。

　素人データはあまりいいものじゃないかもしれないです。

　書くのに半日かかりましたが笑

次回……はあるかわかりませんが……それぞれの色のイメージやジャンルに当てているカラーの分析をしようと思います。