はじめに

お疲れ様です！うっちーです！

卒研で作った配色アプリで使用していた「美度」という評価指標を最近使いたい場面が増えて来たので久しぶりに勉強しなおしてみました！

なお、美度というのは『実用性が低い』とされている指標なのでご留意を。あくまで参考程度に。 あとコントラスト比という指標についても思い出したのでついでにご紹介。

「デザインなんてセンスないから無理だよ〜」と思っている理系のあなたに送るデザインにわかのブログです。 一緒に理論武装しようぜ

美度について

↓この記事に全てが書いてあります！めちゃくちゃ参考にさせていただきました！ 配色の美しさを定量評価する"ムーン＆スペンサーの色彩調和論"｜長谷川満＠制作業

美度とは？

『美度』とは、配色の組み合わせの「美しさ」を数値的に評価したものです！

要するに、僕のようなセンス0の人間でも美度の高さによって配色の美しさが判断できるようにするための指標ですね。 具体的には、美度が0.5以上になっていると「美しい配色」と言えるらしいです。

美度の計算方法

調和と不調和

美度の計算には、大前提として配色というものは「調和」と「不調和」に分けることができるという思想があります。 要するに、配色が調和していれば美しく、不調和であれば美しくないということですね。

この調和・不調和を配色に含まれる各色のペアで計算し、それぞれどのくらい「調和しているか」「不調和になっているか」を採点、その合計点で美度を計算しているというわけです。

色相・彩度・明度

配色の調和・不調和を求める際に用いられるのが、

• 色相
• 彩度
• 明度

です！

色相・彩度・明度というのはHSVやマンセル表色系などと呼ばれる方法で色を表現する際に用いられる値です。 デジタルで色を表す際によく用いられているのはRGBという方式ですね。 こちらは光の三原色である「赤」「緑」「青」を0~255の範囲で数値化して色を表現する方式です。

対して、HSVやマンセル表色系という方式では、色相・彩度・明度という値で色を表現しているのです。

HSVにおける色相・彩度・明度について簡単に説明します！（間違ってたらすいません）

（画像はwikipedia様から引用：https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93#/media/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:HSV_cone.jpg ）

【色相（Hue）】

• 0~360°の『角度』によって色の「種類」を表す
• 0°が赤で、そこから角度が大きくなるごとに緑、青と変化していき、360°で再び赤に戻ってくる
• 図の円錐の底面の部分がこれに当たります

【彩度（Saturation）】

• 0~100%で色の「鮮やかさ」を表す
• 0%は鮮やかさがもっとも低く、白黒の状態になる。 100%で色がもっとも鮮やかになる
• 図の三角形の横軸の部分がこれに当たります

【明度（Value）】

• 0~100%で色の「明るさ」を表す
• 0%では色がもっとも暗く、黒色になる。 100%でもっとも明るくなる
• 図の三角形の縦軸の部分がこれに当たります

美度係数

配色の調和・不調和は、上記の色相・彩度・明度の「差」から採点されます。 色相・彩度・明度の差に応じて以下のような分類があります。

• 同一
• 第一不明瞭
• 類似
• 第二不明瞭
• 対比

例えば、色1と色2の色相の差が43°~100°の間であれば、色1と色2の色相の差は「類似である」という感じです。

色相・彩度・明度の差による分類の具体的な基準は以下の図のようになっています。 （両図はこちらの論文から引用：https://www.osapublishing.org/josa/abstract.cfm?uri=josa-34-1-46 ）

↑色相について

↑彩度（横軸）と明度（縦軸）について

このように、まずは配色に含まれる色のペアの色相・彩度・明度それぞれがどの分類なのかを調べていきます。

そして、以下の表のように、分類ごとに調和・不調和の点数が決められています。 （表はこちらの論文から引用：http://library.jsce.or.jp/jsce/open/00026/1999/06-0001.pdf ）

この時の調和・不調和の点数を『美度係数』と言います！

表を見ると、とくに明度の差が美度に与える影響が大きいことが分かりますね！ 色相や彩度による美度係数が最大でも0.8~1.7程度であるのに対し、明度は最大で3.7も美度係数が上がります！

実際に、片方の色は明るく、もう片方の色は暗くなっていると美度はグンッ！と上がります。 また、自分で色々計算してみると、白と黒の組み合わせが最強だということがわかります！（実際には完全な白、黒から少し色味を調整したもの） 次点で緑です！人間の目は緑色の光を捉えやすい的なあれだったはず。

こんな感じに、センスではなく数字で配色を評価できるようになるのが美度という指標なのです！

秩序の値と混沌の値

上記のように色相・彩度・明度の差から計算される値を『秩序の値』と呼ぶそうです。 また、「配色に含まれる色の数」と「一定以上色相・彩度・明度の差がある色のペアの数」の合計値を『混沌の値』と呼ぶそうです。

そうして、 美度 = 秩序の値 / 混沌の値 として美度は計算されます！

分母に混沌の値が来る関係上、配色に含まれる色の数が多くなるほど、美度を高くするのが難しくなることが分かりますね！

ファッションなどで「色は3色まで！」と言われるのは、色が増えるほど綺麗にまとめるのが難しくなるからなのかな〜なんてことも美度という数字を通すことで見えてきます！

まとめ

【美度とは】

• 「配色の美しさ」を数字で表したものである
• 色の色相・彩度・明度の差から計算される
• 明度が対比になっている（大きく差がある）と美度が高くなりやすい
• 色の数が多いほど美しい配色を作るのは難しくなる

『実用性が低い』所以

一見便利な美度ですが、なぜ『実用性が低い』とされているのでしょうか？

それは単純に研究があまりされていないということもありますし、そもそも美的感覚というのは人によって異なるという点もあるでしょう。

また、「色」と一口に言っても色々あるそうで、 例えばディスプレイ上で表示される色と印刷した時に現れる色では見え方がかなり違いますし、そもそも美度の計算で使用されていたマンセル色相環というのは、デジタルで主に用いられているRGBやHSVなどとは互換性のない、マンセル表色系という表色系になります。

要するに、美度の計算で使われている色はRGBやHSVなどとは色の表現方法が違うのです。 色の表現方法が違うと変換ができません。そのため、美度の計算式をRGBに適用することは難しいのです。 アプリなどで実装しようと思っても式をそのまま適用することが難しいです。

そういう点でも「あくまで参考」という認識での使用をお勧めします。

もっとちゃんと『実用性』のある配色やフォントサイズの指標としては、WEBのアクセシビリティ（使いやすさなど）　のルールや基準を制定しているWCAGというガイドラインがあるので、そちらを参考にしましょう！ WCAG: https://waic.jp/translations/WCAG20/Overview.html#relativeluminancedef

• コントラスト比は7：1以上でAAA評価
• フォントサイズは18ポイント以上または14ポイント以上の太字

みたいなのが書いてあります！ デジタル庁の公開しているサイトなども色々参考になりそうです！

美度の使い方

実用性が低いとは言え、美度を用いて評価することで見えてくる事実はなかなかに面白いものがあります。

フランスの国旗

フランスの国旗をご存じでしょうか？ 以下のように左から青、白、赤の配色となっています。 (国旗はwikipedia様から引用: https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%A9%E3%83%B3%E3%82%B9%E3%81%AE%E5%9B%BD%E6%97%97#/media/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Flag_of_France.svg )

一見単純に見えるこの配色ですが、カラーコード（RGB）は以下のようになっています。

• 青：0, 35, 149
• 白：255, 255, 255
• 赤：237, 41, 57

実は白以外は純色の青（0, 0, 255）、赤（255, 0, 0）ではないのです！

「何が違うん？」と思う所ですが、このような場面で『美度』を用いることで数値的にどちらが優れた配色であるかを求めることができるのです！

上の図（卒研の発表資料から持ってきました）のように、実際の配色と純色の配色の美度を計算してみると、実際の配色の方が美度が高くなっているのがわかると思います！

実際の配色では美度が0.5を上回っており、美度の観点では「美しい配色」であると言えますね！ 純色を用いた場合ではあまり綺麗な配色ではない色の組み合わせでも、少し色を調整するだけで綺麗な配色になっているのです。 （なお、今回の計算はマンセル表色系ではなくHSVで行ったため、マンセル表色系で計算した場合とは誤差がある可能性があります） (また、厳密には色の面積なども影響があるみたいです)

コントラスト比について

こっちはまともな指標です！

WCAGで規定されている指標です！（WCAGでは美しさというよりも可読性などの意味合いが強いですが） WCAG: https://waic.jp/translations/WCAG20/Overview.html#relativeluminancedef

コントラスト比とは

コントラストというのはざっくり言うと 『どのくらいはっきり分かれているか』です！ これを数値化したものがコントラスト比になります！

文字を読んだり、ロゴを目立たせたい場合、背景色とはっきり分かれていた方が目立ちますよね！

そんな時の判断に使われるのが『コントラスト比』という指標なのです！

WCAGでは、

• 小さいテキストにおいては背景色と7：1以上のコントラスト比がある
• 大きい文字や大きい画像では背景色と4.5：1以上のコントラスト比がある

などと規定されています。

他にもテキストのサイズなどについてもいろいろ書いてあるので、デザイナーやフロントエンジニアの方は是非読んでおきたいところですね！（でも僕はまだ読んでないです）

コントラスト比の計算方法については色々ややこしいので割愛します。

コントラスト比の使い方

コントラスト比を使い方の例として問題を出したいと思います！

問題!!

下の図（こちらも卒研の発表資料から持ってきました）のような青色を背景色に用いている場合、上に配置する文字の色は白（R: 255, G: 255, B: 255）と黒（R: 0, G: 0, B: 0）のどちらがより目立つ(= コントラスト比が高くなる)でしょうか？

正解!!

正解は下のようになります！

• 文字の色が白の場合のコントラスト比は5.7：1
• 文字の色が黒の場合のコントラスト比は3.7：1

実際に左の方が読みやすくて文字が目立っているように感じられると思います！ コントラスト比は人間の目の性質も考慮して計算されているのです！

このように、

数値的に「どちらが（背景色に対し）目立つか・読みやすいか」を表す指標がコントラスト比なのです！

なお、コントラスト比が最も高くなるのは純色の黒と白の組み合わせですが、あまりにもコントラスト比が高いと逆に目が疲れてしまったりするので注意が必要です！ Webサイトなどでは一見黒と白に見える色でも、少しトーンが調整されたりしています。

まとめ

【コントラスト比とは】

• 色が『どのくらいはっきり分かれているか』を数値化したものである
• 文字の可読性や目立ちやすさの指標として使われる
• WCAGによって具体的な基準が設定されている
• コントラスト比が高すぎると逆効果になる場合がある

終わりに

ということで今回は配色の良し悪しを数値的に評価するための指標について書かせていただきました！

「デザインなんて、配色なんてセンスないから無理だ〜」と思っている理系の皆さん！ むしろデザイン・配色というのは『理論』のフィールドなのです！ センスよりも経験と知識がモノを言うのです！

知らんけど！！

さて、これらの指標、使ってみたいですよね？ でも手動で計算するのはめんどくさいですよね？

ということで作りました！

卒研でもアプリを作っていたのですが、そちらはDartで作っていたのとあまりにコードが終わってるため、Next.jsで簡易的に作り直しました！ （なおこれも大概なクソコードな模様）

こちらのリンクからお試しいただけるので是非！

【リンク】 colorlens-for-web

【UI】 友人曰く「内田史上最高のUI」

【操作方法】

• 画面上部に配色が表示されます
• 「Edit」のボタンで色を編集できます
• 「+」ボタンで色を追加、「-」ボタンで色を削除できます
• 画面下部に配色の評価が表示されます

【開発メモ】

• 開発期間2日くらい
• 卒研の時はライブラリすら満足に理解してなかったの思い出してしみじみした（DartとJavaScriptでは数に差があるとはいえ）
• 色の操作にtinycolor2というライブラリを使用。RGB→HSV変換やコントラスト比の計算、さらにそれがWCAGの基準を満たしているかまで計算できる
• UIはshadcn/uiというのを使いました。いまいまいさんがオススメしてたので
• 次はv0というのも使ってみたい
• 美度の計算アルゴリズムは卒研のアプリからほぼ流用できた

おまけ：ジャッドの色彩調和論

なんかいい感じの配色の理論らしいですよ奥さん。 メインカラーが決まっていたら色相を良い感じにズラして色を取っていくことで良い感じの配色が完成する的なサムシング。

配色に迷ったら使ってみよう（アドビのカラーホイールで良くね？は言わないお約束） おすすめの記事: 「色相環」とか「トーン」ってどう使うの？配色のコツは「ジャッドの色彩調和論」 | WebNAUT by Beeworks