Overview

Webサイトのデザインやポスターの作製、こうしたデザインの仕事で配色を決めるのはとても重要なプロセスです。しかし、その作業はとても時間がかかります。その手助けに機械学習の力を借りよう、というのがこのColormindです。

作者の方はデザイナーのようで、常々この「配色を決めるプロセス」をどうにか効率化できないかと考えていたそうです。なぜなら、配色の良さというのは感覚的なものなので、「これがベストだ」と理屈で説明できません。そのため、オンラインのカラージェネレーターや写真から抽出した配色について、それが良いか、またデザインガイドラインに沿っているかなどをチェックする作業を、何度も繰り返していたそうです。

Technology/System

この作業を機械学習で改善できないか。そこで最初に試みたのが、RNN(LSTM)を利用した生成でした。ただ、これはあまり上手くいかなかったそうです(無難な色を選ぶ傾向があるそうです)。そこで次にpix2pixで話題となったGANを利用したところ、かなり使えるものに仕上がったということでした。

サイトでは、特定の色を指定、また固定して生成するなど、実践で使うのに欠かせない機能も実装されています。また、写真からの配色抽出も実装されています。写真内で使われている色を減色していくことでメインで使用されている色を抽出(量子化)する手法としてMedian Cutという手法がありますが(※)、それをベースに抽出した色が好ましいかをGANで判断するというアプローチになります。なお、学習データはAdobe Colorなどから取得したそうです。

※利用されている色をR、G、Bそれぞれの軸で構成される3次元空間上にマップし、最もレンジが大きい(最大/最小の差が大きい)軸の中央値で、画像の色空間の分割を行っていく手法です。実際に使用されているのは、これを改良したMMCQ(Modified Median Cut Quantization)という手法になります。

Results

以下が、実際に抽出を行ってみたサンプルになります。

こちらは、Uploadのタブから試してみることができます。

Further Thoughts

デザイナーの方が自分自身の問題解決に機械学習の技術を利用した、という点は機械学習の実装がかなり手に入りやすく、また扱いやすくなってきていることを感じさせます。配色にお悩みの方は、ぜひ試してみてください！

Links