AIの進歩は凄まじいですね。
バイブコーディングが流行っていたり、小さい開発チームではデザインもAIにやらせたりと、デザインの知見が浅い私のような人間が「色」について判断をする機会も珍しくなくなってきました。
ただ、私はデザイナーではないので、良し悪しは感覚だよりです。
「色」というアプリの印象に大きく関わる要素を、私は感覚だけで決めていたのです。
普段の業務でエンジニアが「え？アーキテクチャをこうした理由ですか？感覚っす！」とか言われたら、どうですか？
私なら手が出ちゃいそうです。
しかし、色にはそれをしてしまっていたのです。
それはお金をいただいてやることではないなと思い、色のアレコレを定量的に分析できるツールを作成しました。
これを用いて仕事をした結果、最低限の説明責任を果たせるようになりましたし、色についての知識も増えました。
そのうえで、「もしやこれは、他の人にも有益では？」と思い、公開することにしました。
私にとって初めての、個人開発のアプリの公開なのでかなりドキドキなのですが、誰かにとって有益なものになっていたら幸いです。
（めちゃくちゃバイブコーディングです。それでもドキドキなものはドキドキなんだ、、。）
- アプリ: Color Follows Function
- ソースコード: goto-kamoshirenai/color-function
アプリ名の由来
建築家ルイス・サリヴァンの言葉で、機能主義建築のスローガンになった言葉
"Form Follows Function"（「形態は機能に従う」）
をもじって、
"Color Follows Function"（「色彩は機能に従う」）
としました。
私は前職で建築設計をしていました。
ロゴについて
これは自分でデザインしました。
結構気に入っています。
白を表す#fffをもとにしています。
色を「単色・ペア・パレット」×「検証・設計」で捉える
色について知りたいことは、扱う色の数で変わります。
1色なら、色相・彩度・明度や色空間上の位置が知りたい。
2色なら、文字と背景のコントラストや、どの程度違って見えるかが気になります。
パレット全体なら、似すぎた色がないか、役割を分けられるか、色覚特性が変わっても見分けられるかを確認したくなります。
そこで、操作対象を 単色・ペア・パレット の3段階に分けて検証可能にしています
。さらに、既存の配色を調べる 検証 と、配色候補を作る 設計 を切り替えられるようにしています。
| 対象 | 主に確認できること |
|---|---|
| 単色 × 検証 | HEX / RGB / HSL / HSV、相対輝度、OKLCH、色相環、色温度、ガマットなど |
| ペア × 検証 | WCAGコントラスト比、CIEDE2000色差、APCA、P・D・T型の色覚シミュレーション |
| パレット × 検証 | コントラスト・色差の総当たり、色覚識別性、グレースケール耐性、役割カバレッジ、UIやグラフでのプレビュー |
| 設計 | 調和スキーム、トーン展開、アクセシブル化、色覚セーフ提案、テンプレート、デザイントークン出力など |
組み合わせに応じて、40種類以上の指標・提案カードが切り替わります。
自分で使っている中で、一度にいろいろな情報を見たいケースはあまりなく、どちらかというと「いま何色を、何のために見ているか」が明確な方が使いやすかったのでこの様になっています。
とりあえず２色設定してみると、このアプリの意図は掴めるはずです。
たとえば、文字色 #080808 と背景色 #E83015 の組み合わせは、見た目だけなら「黒と赤なので読めそう」に感じます。
アプリで測るとコントラスト比は 4.64:1。
WCAG 2.2の達成基準1.4.3というアクセシビリティに関するガイドラインが提示する基準に照らすと、通常テキストのAA基準 4.5:1 は満たす一方、AAA基準 7:1 には届きません。
色に関わるプルリクエストをレビューするときに、「ちょっと読みにくい気がする」と言われても結構困ります。めっちゃ主観のフィードバックなので。
そこで、WCAGの基準を元に話せば「AAには達していますが、AAAまでは言っていないですね。この色味はアプリ全体で頻出するので、AAA基準までコントラストつけたいです。」みたいに話すと非常に定量的で明確な指示になると思います。
私は業務の中ではそのコミュニケーションにそのままこのアプリを使用しています。
アプリ内の配色設定はそのままURLクエリに埋め込まれるので、URLをコピーして渡せば同じ結果を相手も確認ができます。
色にまつわる指標は色々あります。
色の数値化に、万能な指標はありません。
代表的なのはWCAG 2.2の達成基準1.4.3ですが、他にも色々あります。
適材適所なので、色々チェックできるようにしています。
可読性はWCAGコントラスト比で見る
WCAGのコントラスト比は、2色の相対輝度を L1、L2（L1 >= L2）として、次の式で求めます。
(L1 + 0.05) / (L2 + 0.05)
ここで使う相対輝度は、HEXのRGB値をそのまま足し合わせたものではありません。sRGBを線形化してから、各成分に係数を掛けます。UI上は単純な 4.64:1 でも、その手前には色空間の変換があります。
そんなの都度都度計算しているとしんどいので、このアプリに頑張ってもらっています。
加えて、APCAの Lc での評価も用意しているので、そちらも合わせて確認するのが良いかなと思っています。
いきなり「APCAの Lc 」と言われてもわからない人がほとんどだと思いますし、色なんて一度決めたら次考えるのは１年後とかだったりして、指標を全て覚えておくのは無理があると思います。
実際私には無理でした。
そこで、各パネルの？マークを押すと簡単な説明が、本マークを押すと公式のリンクや参考書籍情報などにアクセスできるようにしています。
「RGBの距離」ではなくCIEDE2000で色差を測る
RGBの各成分を引き算すれば、数値上の色の距離は出せます。
しかし、その距離が人間の感じる違いと素直に対応するとは限りません。
実際には知覚差があり、単純な波長の差＝人間が感じる色の差ではないんです。
じゃあどうすれば色の差を検証できるのか？というと、先人は早りり素晴らしく、知覚差に寄せて2色の違いを測る CIEDE2000（ΔE00） という指標があります。
パレットモードでは全色の組み合わせをマトリクスにし、「見た目の役割を分けたいのに、互いに近すぎる色」を探パレットモードにするとこんな感じでマトリックスで比較できます。
配色の生成はOKLCHで色相を回す
３色以上の配色を考えることは、２色の色を比較するのとはまた別の難しさがあります。
補色やトライアドを作るだけなら、HSLやHSVの色相をずらしてあげればシンプルに思えます。
しかし、前述したように数値の差＝知覚の差ではないので、それだと配色の根拠としては弱いかもしれません。
このアプリでは色の分析に加えて提案も可能なので、その機能（「検証」機能）ではそのあたりの知覚差も考慮に入れた配色を算出できます。
他にも色々
この他にもいろいろな指標や機能を用意しているので、色々触ってみていただけると嬉しです。
数値はデザインの答えではなく、判断材料である
ここまで数値の話をしてきましたが、このアプリは「数値が高ければ良いデザイン」と判定するものではありません。
色の印象は、面積、隣接色、文字サイズ、文化、使われる場面でも変わります。
コントラスト比が基準を満たしていても、ブランドの意図に合うとは限りません。
色覚シミュレーションも、個人の見え方を完全に再現するものではありません。
このツールの役割は、あくまで感覚に頼りがちな色の検討に、数値の情報を加えて補助することにあります。
あくまで補助的な役割だと思っていただければと思います。
（数値原理主義的になって、感覚派のデザイナーと揉めちゃうのとかが最悪ですよね、、）
おわりに
このアプリは自分が使いやすいようにちょこちょこ機能を追加したりしています。
もしよければ触ってみてください。
書籍リンクについて
アプリ内の一部書籍リンクは、Amazonアソシエイトのアフィリエイトリンクです。
リンク経由で購入されると、私に紹介料が入ります。
お小遣いが欲しいです！