画像から色を抜き出して、そのままサイトの配色設計に使いたいとき、かなり扱いやすかったのがCoolorsでした。感覚だけで「こんな雰囲気にしたい」と伝えるより、実際の色を先に整理しておく方が、AIへの指示はかなりブレにくくなります。

AIでサイトを作るなら、色は先に具体化した方が強い

AIで何かを作るときは、レイアウトや機能だけでなく、色も仕様の一部として先に固めておいた方が強いです。

たとえば「Spotifyっぽくしてください」とだけ伝えると、黒と緑を使ったそれっぽい画面は出てきます。ただ実際には、背景の黒が少し違う、カードの色味が違う、補助色の温度感が違う、というズレがかなり起きやすいです。

つまりAIは雰囲気だけでもある程度は作れますが、詰め切るには材料が足りません。その材料としてかなり効くのが、具体的な色コードです。

ここまで決まっていると、「なんとなくこの感じ」ではなく、「この色をここに使う」という指示に変わります。配色は後から整えるものと思われがちですが、AIで再現度を上げたいなら、むしろ最初に固めておいた方が扱いやすいです。

Coolorsで画像から色を抜く流れ

実際の操作はかなりシンプルです。今回は、自分で配色を考えるというより、参考にしたい画像から色を抜き出して、そのまま制作に使う流れで進めました。

まずはトップ画面から入る

Chromeで日本語翻訳すると、最初のボタンが「発電機を起動する」と表示されていました。Generatorの直訳だと思いますが、このあたりは少し機械翻訳っぽいズレがあります。ただ、入口さえわかれば操作自体は難しくありません。

カメラマークから画像を読み込む

画像から色を取りたい場合は、サービス内のカメラマークから進みます。ここで使うのは、スクリーンショットでも保存画像でも問題ありません。参考にしたい見た目がすでにあるなら、それをそのまま使う方が早いです。

色を取りたい場所に合わせる

画像をアップロードすると、丸いカーソルで色を拾えるようになります。ここで大事なのは、近そうな色をなんとなく取ることではなく、実際に使いたい場所の色を拾うことです。

今回の話で言えば、抽出対象はSpotify風UI全体の漠然とした色ではなく、カード部分の雰囲気を作っている色でした。背景全体を見るよりも、印象を決めている面の色を見にいく方が、後でかなり使いやすくなります。

足りない色は追加する

最初に表示される色数だけでは足りないことがあります。そんなときは必要な分だけ色を追加します。ただ、増やしすぎると今度は扱いにくくなるので、役割ごとに整理しておくと使いやすいです。

Generatorで配色を整理する

色を取り終えたら、Image Pickerの三点メニューからGeneratorで開きます。ここまで来ると、感覚的に「この雰囲気が好き」と思っていたものが、制作に渡せる配色として見えてきます。

色コードをAIへ渡す方法

ここで見えるHEXカラーコードは、サイトやアプリの色を正確に指定するときに使える材料です。自分がやった流れはかなりシンプルで、まずは色を変えたい場所が、AI側でどういう要素名で管理されているかを探ります。

そのうえで、該当箇所に対して「このHEXコードへ変えてください」と指示すれば、かなり簡単に理想の色へ寄せやすくなります。

いきなり「いい感じにしてください」と頼むより、この順番で渡した方がかなり安定しました。AIは便利ですが、やはり具体的な材料がある方が強いです。色コードがあるだけで、指示のブレはかなり減ります。

コード側への落とし込みまで見たい場合は、末尾の関連記事から実装記事へつなげると流れが自然です。

色を変えるとUIの印象はどう変わるか

色を抜いて終わりではなく、その色をきちんとAIへ渡したときに、見た目がどう変わるかを見るのが大事です。今回はSpotify風UIのミニプレーヤー部分で、その差がかなりわかりやすく出ました。

変更前は緑系の配色でしたが、変更後はカードの印象に合わせた別のトーンへ寄っています。レイアウト自体を大きく変えていなくても、色が変わるだけで印象はかなり変わります。

ここで見るべきなのは、単に色が変わったことではなく、寄せたかった雰囲気に近づいたかどうかです。UI再現では、形だけでなく色もかなり大きな要素だと感じました。

好きな作品モチーフの配色にも応用しやすい

この方法は、Spotify風のUI再現だけでなく、好きなキャラクターや作品の雰囲気をサイトに持ち込みたいときにも使いやすいです。

たとえばピカチュウをモチーフにしたいなら、画像から黄色、赤、黒、白の主要色を抜き出して、そのコードをAIへ渡せば整理しやすくなります。

いきなり「ピカチュウっぽくしてください」と頼むより、こうして色を具体化してから渡す方がかなりブレにくいです。雰囲気を再現したいときほど、このやり方はかなり効きます。

まとめ

Coolorsを使うと、好きな画像や作品の雰囲気を、そのままサイトの配色に近い形で取り出せます。流れ自体もかなりシンプルです。

これだけで、「なんとなくこの感じにしたい」が、「この色をここに使う」までかなり具体になります。AIでサイトを作る人ほど、一度試してみる価値はかなりあると思います。