Cocoonのサイト配色、AIに「紺系でモダンに」と頼んだら47秒で別サイトになりました

先に結論です。エージェントAI（Claude Code）に「スタイリッシュでモダンな感じ　青か紺系で」と一言頼んだら、47秒でサイトが別人になりました。濃紺のヘッダー、紺の見出し帯、青いリンク。CSSは書いていません。Cocoonの設定画面に、AIが選んだ色を流し込んだだけです。

↓

配色を決めたのは、この一言だけです。ただ、色を変えてみると今度は細部が次々気になり出して、そこからの仕上げまでが本番でした。この記事は、その往復込みの全過程です。

Cocoonの色変更、操作は簡単。難しいのは「何色にするか」

Cocoonの配色は、管理画面の「Cocoon設定 → 全体」タブで変えられます。サイトキーカラー、背景色、リンク色。色見本をポチッと選ぶだけなので、操作でつまずく人はほぼいません。

難しいのはそこではなく、「で、何色にすればいいのか」です。

色見本からなんとなく選ぶと、なんとなくの見た目になります。かといって配色を勉強しようとすると、ベースカラー70%、メインカラー25%、アクセント5%といった理論の世界が待っています。理論は正しいのですが、読み終えたあとに自分のサイトの設定画面へ戻ると、また同じ問いが立っています。で、何色？

つまり配色は、操作がいちばん簡単で、決断がいちばん難しいカスタマイズです。だったら、決断のほうをAIに頼めばいい。今回はそういう実験です。実演するのは前回と同じく、提案から設定の流し込みまで代行してくれるエージェントAI。ChatGPTなど対話型AIでのやり方は、記事の最後にまとめました。

AIへの頼み方は、今回も一言でした

伝えた言葉はこれだけです。

スタイリッシュでモダンな感じ　青か紺系で

頼むときの画面は、こんな感じです。見た目はふつうのチャットで、違いは、このあとAIが自分で設定画面を操作することです。

雰囲気の言葉と、色の系統。この2つをセットで伝えるのがポイントです。AIの翻訳はこうでした。

• スタイリッシュでモダン → 濃紺のヘッダーに白抜きの文字。コントラストで締める
• 青か紺系 → 濃紺（#14213d）を骨格に、見出し帯は少し明るい紺（#1d3557）、リンクは鮮やかな青（#2563eb）と、紺のグラデーションで役割分担
• 背景は白のまま、文字は青みがかった黒（#1e293b）に

この色たちを、キーカラー・背景色・文字色・リンク色・ヘッダー・ナビ・フッターといったCocoonの設定11項目に流し込んで、反映まで47秒。ヘッダーが濃紺に落ちた瞬間、別のサイトになりました。

実際に流し込まれた設定画面がこちら。人間は1文字も打っていません。

そして大事なのはここです。やり直しても47秒という身軽さなので、色は試着の感覚で変えられます。「なんか違う」と思ったら、また一言いえばいいだけ。配色の決断が重かったのは、やり直しが重い時代の話でした。

仕上げの往復。「境目がない」「立体感がほしい」

配色が決まると、今度は細部が気になり出します。ここからは一言→修正のラリーでした。

「トップページの記事の境目がない」。白い背景に白いカードで、記事同士が溶けていました。AIの答えは、記事カードに細い枠と角丸、紺色のうっすらした影を付けて浮かせる案。マウスを乗せるとカードがふわっと持ち上がります。ここだけは設定でなくCSSの領域なので、追加CSSに少し書き足しています（配色そのものは最後まで設定のみです）。

ボタンの着替え。前回の記事で作った赤いキラッとボタンが、紺の世界では浮いてしまいました。形と光の演出はそのままに、色だけ紺→青のグラデーションに着替え。前回作った仕組みがそのまま生きるので、これも一瞬です。

検索ボタンの黒。サイドバーの検索窓の隣にある「検索」ボタンだけ、配色を変えたあとも黒いまま残りました。調べると、これはCocoonではなくWordPress本体の検索ブロックの持ち物で、テーマの設定では変わりません。テーマとWordPress本体の境界線です。ここはCSS1行で紺に合わせました。

トップページの字体もモダンに。仕上げの最後は文字でした。Cocoonの設定「サイトフォント」を、モダンなサイトの定番Noto Sans JPに切り替え（これも設定だけです）。サイト名は太字にして字間を広げ、ロゴらしく整えました（ここはCSS2行）。書体が変わると、同じ紺でも顔つきが締まります。

かかった時間

やったこと	頼んだ一言	実測
配色の決定と反映	スタイリッシュでモダン、青か紺系	47秒
記事カードの立体化	境目がない、立体感を	約3分
ボタンと検索ボタンの色合わせ	おすすめ通りにして	約5分
サイト名の字体をロゴらしく	字体もモダンな雰囲気に	約2分

仕上げの往復まで入れて、合計11分ほど。配色の勉強はしていません。カラーコードも1つも調べていません。やったのは、見た目の感想を言葉にすることだけです。

判定: 🟡 工夫が要った

この連載の判定、今回は初めての🟡です。

• 🟢 AIで一発 = 一言頼んで、修正なしで完成
• 🟡 工夫が要った = 頼み直しや仕上げの往復が必要だった ← 今回
• 🔴 別の道が早い = 手動やスキンのほうが早い

🟡にした理由は、配色そのものは一言で決まった一方で、色を変えると細部が連鎖して気になり出し、仕上げの往復が必要だったからです。カードの境目、ボタンの色、検索ボタン、そして字体。サイト全体に手を入れるカスタマイズは、一言では完結しませんでした。そのぶん、往復のたびにサイトが締まっていく過程は、やっていていちばん楽しいところでもあります。

🔴側の線引きも書いておきます。Cocoonにはスキンという完成品の着せ替えがあり、配色に1秒も悩みたくないならスキンが最速です。AIに頼む道が活きるのは、「スキンの既製服ではなく、自分のサイトの雰囲気を言葉で決めたい」ときです。

まとめ: 色は、言葉で決められる

• 操作は簡単、決断が難しいのが配色。決断をAIに任せた
• 頼み方は「雰囲気の言葉＋色の系統」。反映まで47秒
• 色を変えると細部が連鎖する。仕上げの往復込みで合計11分ほど
• 配色は設定のみ（CSSゼロ）。仕上げの立体感とボタンだけCSS少々

頼み方の型は、前回と同じです。

「（サイト全体）を（雰囲気の一言＋色の系統）にして」

ボタン、配色ときて、次は見出しまわりを考えています。素のCocoonがどこまで変わるか、引き続きこのブログ自体で実験します。

ChatGPTなど、対話型AIでやる場合

最後に、チャット画面で使う対話型AIでのやり方です。この記事の実演は、色の提案から設定の流し込みまでAIがやりましたが、対話型AIでも同じ結果は作れます。違いは、出てきた色を自分でCocoon設定に入力すること。項目は11個なので、5分あれば入ります。

頼み方の文例です。そのままコピペで使えます。

私のブログをスタイリッシュでモダンな紺系の配色にしたいです。WordPressテーマCocoonの次の設定項目に入れる色を、カラーコードで提案してください: サイトキーカラー／サイトキーテキストカラー／サイト背景色／サイト文字色／リンク色／ヘッダー背景色と文字色／グローバルナビ背景色と文字色／フッター背景色と文字色

コツは、雰囲気の言葉（スタイリッシュ・かわいく・落ち着いた）と色の系統（紺系・緑系・ベージュ系）をセットで伝えること。サイトのスクリーンショットを1枚貼ると、今の状態を見た上で提案してくれるので、さらに精度が上がります。出てきた色が気に入らなければ、「もう少し明るく」と言い直せばいいだけです。