カラーパレットも人工知能で！ディープラーニングによる配色ツール Colormind

こんにちは、プロダクト開発チーム エンジニアの森永です。

Webサイト作成やアプリケーション開発でのデザインの際に、配色をどうするか悩んだことのある方も多いかと思います。
今回はディープラーニングを使用してカラーパレットを自動的に作成する配色ツール「Colormind」を紹介いたします。

トップページにアクセスして「Generate」ボタンを押すだけで、ランダムではありますが調和の取れた5色からなるカラーパレットが作成されます。再度ボタンを押すと別のカラーパレットが生成されます。

ページの下部には、さまざまなテーマについて生成したカラーパレットに近い5色がカラーパレットとして表示されます。

生成されたカラーパレットについて、鍵アイコンをクリックするとその色が固定されます。再度 Generate ボタンを押すと、固定された色は変わらずに他の色は再度生成されます。もちろん、複数の色のロックやロック位置の移動にも対応しています。

また、鍵アイコンの隣にあるパラメーター変更アイコンをクリックすると色変更ダイアログが出て任意の色に変更することも可能です。

例として一番左をこのブログのタイトルで使われている緑色( #009688 )に変更して Generate ボタンを押すと以下のようなカラーパレットになります。

もちろんこれだけでも便利ですが、このツールのもう一つの特徴として、任意の画像からイメージされるカラーパレットが生成可能である点が挙げられます。

トップメニューのメニューから「Image Upload」を選択し、「Image Upload」ボタンを押すとファイル選択ダイアログが表示されます。ファイルを選択後に「Generate」ボタンを押すと、その画像からイメージされるカラーパレットが生成されます。

例として、先日の記事「モバイルファーストの時代。スマートフォン用ブラウザは2017年以降どうなる？」で使用したアイキャッチ画像をアップロードし、Generate ボタンを押すと以下のカラーパレットが生成されます。

なるほど、確かに画像と同じ雰囲気のカラーパレットです。もちろん気に入らなければ再度 Generate ボタンを押せば別のカラーパレットが生成されます。

このように簡単にカラーパレットが生成できる Colormind ですが、このツールでは「Generative Adversarial Networks (GAN)」と呼ばれる技術を使用している旨が開発者のブログで記載されています。

GAN はモントリオール大学の研究グループによって開発された技術で、2つの相反するニューラルネットワークを用いて学習していくことが特徴です。この GAN は画像生成技術への応用などで研究が進んでいます。

なお、 GAN の詳細についてはまた別記事にて紹介予定です。

今回は Colormind を紹介いたしましたが、以前紹介したもの同様に、Webサイト作成やアプリケーション開発での補助ツールとして人工知能が使われているツールがどんどん増えてきています。

クリエイティブの分野でも人工知能を有効活用し、より良いサイト作成、アプリ開発に役立てていきましょう！