ページの配色を決めるとき、好きな色を言葉で説明するのは意外と難しい。「落ち着いた緑」と伝えても、頭の中の緑とClaudeが選ぶ緑が同じになるとは限らない。
かといって、色の組み合わせを自分でいちから考えるのも大変だ。何色を組み合わせればまとまって見えるのか、知識ゼロだと見当がつきにくい。
そこで便利なのが、配色の候補を次々に見せてくれる無料のサイトCoolors（クーラーズ）。何ができるのか、Claudeと一緒に使うと何が楽になるのか、どう使い始めればいいのかを見ていく。
何ができるか：スペースキーを押すたびに、5色の組み合わせが出てくる
Coolorsの配色を作る画面を開くと、5色を並べた組み合わせが表示される。キーボードのスペースキーを押すたびに、新しい組み合わせに切り替わっていく。
気に入った色があれば、その色の列にある鍵のマークを押して固定できる。固定した色はそのまま残り、スペースキーを押すと、残りの色だけが固定した色に合うものに入れ替わる。
色の組み合わせを頭で考える必要はない。スペースキーを押しながら、気に入った色だけを固定して残していく。
Claudeと組み合わせると：色を言葉ではなく番号で渡せる
Coolorsの色には、それぞれ「#3B6FB6」のような、#から始まる6けたの番号がついている。この番号は、色を1つにぴったり決めるための名前のようなもので、番号をクリックすると色の詳しい画面が開き、番号を写せる。
この番号をClaudeに渡せば、「落ち着いた緑」のような言葉で説明しなくても、見て選んだ色そのものが伝わる。自分の目で選んだ色が、そのままページに使われる。
色は言葉で説明せず、Coolorsで選んだ番号で渡す。
使い始め方：気に入った色を固定して、番号をClaudeに渡す
最初は、作りたいページの雰囲気に近い色が1つ出てくるまでスペースキーを押し、それを固定するところから始めるのがおすすめ。残りの色は、固定した色に合わせて入れ替わっていく。
5色がそろったら、番号を写してClaudeに渡し、どの色をどこに使うかを一緒に考えてもらう。たとえばこんなやり取りになる。
あなた: 陶芸教室のページの色を、Coolorsで選んでみた。#F4EFE6、#D9A77A、#8C5A3C、#4A6B5D、#2E2A26 の5色。初心者でも気軽に来られる雰囲気にしたいんだけど、どう使うのがいいと思う？ Claude: 一番明るい #F4EFE6 を背景に、#2E2A26 を文字の色にすると読みやすくなります。申し込みボタンには、あたたかみのある #D9A77A が合いそうです。 あなた: いいね。緑の #4A6B5D は少しだけ、見出しに使いたい。
番号で渡しておけば、「その茶色じゃなくて」のような行き違いも起きにくい。色を選ぶのはCoolors、どこに使うかを考えるのはClaudeと分けて進める。
まとめ
Coolorsで色を選び、番号でClaudeに渡すと、「思っていた色と違う」という行き違いがなくなる。自分の目で選んだ色が、そのままページの色になる。
「見て選ぶのは専用の道具、それをどう使うかはClaudeと相談する」という組み合わせ方は、写真や文字のデザインを選ぶときにも出てくる。道具で選んで、Claudeに渡すという流れは、この先も何度も使える。
次にページの色を決めるときは、Coolorsでスペースキーを押して、気に入った色の番号をClaudeに渡してみてほしい。