見出し画像

配色を提案するAIツール「Khroma」が便利

現在、Etsyショップに販売するデジタル商品を構想中なのですが、ブランディングを考えるうえでは、配色も重要になってきます。

とりあえず「自分が心地よいと思う色ってなんだろう?」というところからスタートしようと思い、タイトルにあるAIツール「Khroma」(おそらく読み方は"クロマ")を使ったら、けっこう便利でした。


Khromaとは

好みの色を選択すると、さまざまな配色パターンを提案してくれるサービス。ソフトウェアデベロッパーのジョージ・ヘイスティングという方が、個人ブロジェクトで制作したものです。

Khromaの使い方

日本語に対応していないのが難点ですが、使い方はシンプルです。上記の公式サイトにアクセスしたら、まず「Get Started」ボタンをクリック。すると、好みの色を選択する画面に切り替わります。

(左上にガイダンスのポップアップウィンドウが表示されるときがありますが、そのときは「Got It」をクリックして閉じます)

色を選択していく場面

ここから最低でも50個の色を選択していきます。右上に「50 likes to go」と表示されていて、これは「あと50個選択してね」という意味です。

色を選択していくと、上部のバーに色が追加されていき、右側の数字も減っていきます。

選んだ色が上部に追加され、右上には「36 colors left」の表記

選んでいくと、右下に「Pick more yellow」などと表示がでることがあります。これは「もっとイエローを選んだ方が提案の精度があがるよ」というようなものです。

必ずこれに従って選ばないといけないわけではないのですが、これも意識して色をピックしていくといいかと思います。

右上の「0 colors left」の表記とトレーニング開始ボタン

50個を選び終わると、右上に「Start Training」というボタンが現れます。これをポチっとすれば終わり!AIの提案内容がでるまで待ちましょう。

※ちなみに、50個以上選択することも可能です。そうすると、右上が「-5 colors left」とマイナス表記になっていきます。

AIトレーニング中の表記

ネット環境にもよると思いますが、ぼくの場合は数分で完了しました。下記が、ぼくに提案された色の配色たち。

AIによる色の提案
右上の🔄ボタンで色を反転、❤️ボタンでお気に入り登録、ℹ️ボタンで色情報を確認できます。

5つのモードで配色を提案

最初に表示されるのは、色単体のカードなのですが、他にも4つモードがあります。左上にモード切り替えボタンがあり、左からType、Poster、Gradient、Image、Paletteとなっています。

テキストと補足を添えた2色提案のTypeモード
2色で提案するPosterモード
グラデーションで提案するGradientモード
画像を添えるImageモード
4色で提案するPaletteモード

ちなみに、左上のモードボタンをクリックすると、そのモード内で色をシャッフルしてくれます。提案された色を閲覧したいときに下にスクロールしてずらっと見てもいいし、こちらのシャッフル(リフレッシュ?)を活用してもいいと思います。

カスタム画像の設定

Imageモードでは、好きな画像を反映させることも可能です。右上の⚙️アイコンをクリック→ 「Upload custom image」で画像をアップロードします。

画像は縦型タイプが推奨されています。

アップロードしたら、下にスクロールしてみてください。そうすると反映されていくことが多かったです。

バイアスの設定

画面の右上に「Bias」と書かれたボックスが2つあります。ここをドラッグで下げたり上げたりして、提案する色の範囲を調整できるようです。バイアスを下げると、提案する色の幅が広がるそうです。

ここは自分でいろいろといじってみて遊んでみるといいかもしれません。

※2つボックスがあるというのは、おそらく「1つの配色提案にペアが1つある」という構造なのかなと勝手に理解してます。(間違ってるかもしれません)

データの保存方法

右上の⚙️アイコンでメニューを開き、下部にある「Download Khroma data」ボタンで提案内容のファイルをダウンロードできます。

緑のボタンをクリック

するとjsonファイルがダウンロードされます。このファイルを次回またサイトにアクセスした際に使用すると、前回の提案内容を表示できます。お気に入りした内容もちゃんと反映されます。

ファイルをアップロードする場所がわかりずらいのですが、最初の色を選ぶ画面の上部に、控えめに「Import it」というテキストがあります。ここをクリックしてjsonファイルをアップロードします。

右のImport itをクリック

楽しい色の冒険ができそう

使い方次第で、いろいろと模索ができそうなツールです。色の情報をコピペして検索に入れれば、指定の色だけが含まれるものに絞り込むこともできます。

例えば、ブランドのキーカラーの1つが決まったら、その色で検索をかければ相性のいい色が見れたりしますよね。使い方次第で無限大?な色ツールです。

現状は、ユーザー登録機能がないようなので、提案内容はデータとしてダウンロードして、次回インポートするという形式でちょっと手間です。今後、さまざまな機能が追加されるかもしれません。

* * *

以上、AIツール「Khroma」のご紹介でした。色って不思議、奥が深いですよね。色彩心理学にも興味がでてきたこの頃です。

参考になった!と感じたら、いいね、コメントも気軽にどうぞっ!週に1回ほど Etsy 関連の情報を発信しているので、興味のある方はフォローもぜひお願いいたします〜!

ではでは〜


いいなと思ったら応援しよう!

244|Etsyショップ運営中
いつもありがとうございます。発信の質をさらに高め、継続もできるよう精進してまいりますー!