”シンプル”なデザインを、”フツー”のWEBサイトを

デザイン制作時に悩むのが配色。色数を抑え過ぎてメリハリが無くなってしまったり、逆に目立たせたい部分を強調し過ぎて収集が付かなくなったり。ここに一番時間をかける場合が多いのではないでしょうか。

僕はそんなとき、Khromaというサービスをつかいます。自分の好きな色、使いたい色を設定すると、何種類もの配色パターンを提案してくれるWEBサービスです。

提案されたパターンはもちろんそのまま使うこともありますが、眺めているだけでもヒントになったりするので重宝しています。自分だけで考えていては絶対に思いつかないような配色もあったりするので勉強にもなります。

Khroma - The AI color tool for designers
Khroma is the fastest way to discover, search, and save color combos you'll want to use.

Khromaの使い方

好きな色を50個選ぶ

Khromaのサイトにアクセスし、画面中央にある「Personalize」というボタンをクリックしてください。

すると、色選択の画面になるので、好きな色を50個選びます。これが結構面倒といえば面倒なのですが、何でもこのKhroma、AIをつかって配色を選んでいるらしく、選ぶ色の数で精度が変わってくるようです。まあ、あまり深く考えずにホイホイと選んでいきます。

途中、英語で「もう少し赤を多めに選んで」みたいなメッセージが出て来ますが気にしなくても良いと思います。もちろん、ちゃんとその通りに選んだ方が配色の幅は広がるのでしょうが。

で、50個選び終えたら、画面右上の「Start Training」をクリックします。「Generating data」というメッセージが出て、配色パターンを出力する準備に入ります。この待ち時間が少し長いです。

配色パターンを確認する

しばらく待つと、こんな感じで色の組み合わせパターンが出てきます。スクロールしていくと下にずらっと並んでいます。

更に画面左上のアイコンでこれらの配色をつかった様々なケースのサンプルも確認できます。

まずポスター。

グラデーション。CSSもコピーできます。

人物をつかった画像。流行のデュオトーンってやつですね。

カラーパレットとしてつかうことも出来ます。

そして、画面右上でBiasの調整が出来ます。数値が低いほど色の範囲が広がるようです。

新しい配色のアイデアに

いつも同じ感じの配色になってしまったりして困ったときや、サイトやページの雰囲気に合った配色が中々思いつかないときなんかに便利なサービスです。

使い方も簡単なのでありがたいのですが、ネックは最初の50個の色を選ぶところくらいでしょうか。割と本気でうんざりします。わがままですかね。