Cocoonの標準ボタン、AIに一言頼んだら2分49秒でSWELL風になりました

先に結論です。エージェントAI（Claude Code）に「SWELL風のきらっとボタンの赤」と一言頼んだだけで、標準ボタンは2分49秒でSWELL風になりました。CSSは1行も書いてませんし、コピペもしていません。

このブログの最初の記事にも、赤い標準ボタンがありました。置いた日から「そのうち何とかしよう」と思いつつ、後回しにしていた存在です。

ボタンのカスタマイズを調べると、答えは2つ見つかります。Cocoonの設定でいじるか、先人が配ってくれているCSSをコピペするか。どちらも良い答えです。ただ、どちらも「用意されたデザインの中から選ぶ」やり方で、「自分のサイトの雰囲気に合わせたい」と思った瞬間、CSSの知識という壁がぬっと現れます。

今回は第3の道を試しました。頼んだ言葉も、出てきたCSSも、かかった時間も、全部この記事に載せます。ついでに、頼む言葉を変えたら同じボタンがどう化けるのか、4パターンのおかわりも作りました。

Cocoonのボタン、設定だけでもここまで変えられます

先に、標準機能に敬意を払っておきます。Cocoonのボタン（と、アフィリエイトリンク用の囲みボタン）は、ブロックの設定だけで結構変えられます。

変えられること	設定場所
色（背景・文字・ボーダー）	ブロックの設定パネル
サイズ（小・中・大）	同上
角を丸く（円形にする）	同上
光らせる	同上

「光らせる」にチェックを入れると、白い光がパッと弾けるフラッシュのような演出が付きます。これはこれで目を引きます。

それでも「なんか違う」と感じたら、次の答えがコピペCSSです。検索すると、十数種類のデザインを配ってくれている先人がたくさん見つかります。ありがたい文化です。従来のカスタマイズは、だいたいこの流れでした。

1. 「Cocoon ボタン CSS」などで検索して、配布記事を探す
2. デザイン一覧から、好みに近いものを選ぶ
3. CSSをコピーして、WordPressの「外観 → カスタマイズ → 追加CSS」に貼る
4. 色やサイズが自分のサイトと合わない部分を、CSSを読み解きながら手直しする

3番までは誰でもできます。壁は4番です。配られたデザインは、配った人のサイトの色に合わせて作られています。「この形はいいけど、色がうちと合わない」「もう少しだけ丸くしたい」と思った瞬間、急にCSSの知識を求められます。この入口で引き返した経験、ある方も多いはずです。

今回のAI路線でも、CSSを追加CSSに貼るところは同じです。違いはただ1つ、そのCSSを誰が書くか。「探して、選んで、手直しする」の3工程が、「好みを一言伝える」に置き換わります。

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

私がAIに伝えた言葉を、そのまま載せます。

SWELL風のきらっとボタンの赤

頼むときの画面は、こんな感じです。見た目はふつうのチャットで、違いは、このあとAIが自分でCSSを書いて貼り付けることです。

以上です。仕様書もなければ、色コードも、ピクセル数もありません。思いついた好みを、思いついた順に並べただけの一言です。

この一言を、AIはこう解釈しました。

• 「きらっと」 → 白い光の帯が、数秒ごとに斜めにスーッと走るアニメーション
• 「SWELL風」 → グラデーションのある赤・両端が丸いピル型・下にふわっと浮いた影・マウスを乗せると少し浮き上がる動き
• 「赤」 → 今のボタンの赤をそのまま活かして、明るい赤からのグラデーションで深みを足す

ここがAIに頼むいちばんのポイントだと感じています。ふわっとした言葉を、デザインの具体的な要素に翻訳するのはAIの仕事です。頼む側に必要なのは、正確な指示ではなく「◯◯風」「きらっと」「かわいく」といった方向の言葉だけ。むしろ、変に専門用語で頼むより仕上がりが素直になります。「こんなふわっとした頼み方でいいの？」くらいが、ちょうどいいです。

この実演をやっているのは、提案からCSSの貼り付けまでを代行してくれるエージェントAIです。ChatGPTなど、チャット画面で使う対話型AIでのやり方は、記事の最後にまとめました。

Before / After

結果がこちらです。実物を置いたので、触りながらどうぞ。

↓

変わったところを言葉にすると、こうなります。

• 角丸4pxの四角 → 両端まで丸いピル型
• 単色の赤 → 明るい赤から深い赤へのグラデーション
• 影なし → 下にふわっと浮いた赤い影
• 動きなし → 3秒ごとに白い光の帯が走る＋マウスを乗せると浮き上がる

上のAfterは、画像ではなく実物のボタンです。光の帯が走るのも、マウスを乗せるとふわっと浮くのも、この場でそのまま動いています。

やったことは、1箇所に貼っただけ

作業は、たった3ステップです。

1. WordPress管理画面の「外観 → カスタマイズ → 追加CSS」を開く
2. AIが出したCSSを貼り付ける
3. 「公開」を押す

AIが貼り付けた追加CSSの画面がこちら。人間は1文字も打っていません。

従来のコピペと同じ場所です。追加CSSはWordPressの標準機能なので、プラグインは要りません。テーマファイルも触りません。そして、ここに貼ったCSSはサイト全体に効くので、過去記事のボタンも未来のボタンも、全部まとめて変わります。実際、サーバー申し込みの記事のボタンも、この瞬間に一緒に変わりました。

AIが出したCSSの全文がこちらです。

/* 囲みボタン(赤)をSWELL風キラッとボタンに */
.btn-wrap.btn-wrap-red a {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f4503a 0%, #e60033 100%);
  border-radius: 50px;
  box-shadow: 0 5px 14px rgba(230, 0, 51, .35);
  padding: 1em 2.2em;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-wrap.btn-wrap-red a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(230, 0, 51, .45);
}
.btn-wrap.btn-wrap-red a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
  transform: skewX(-25deg);
  animation: maru-btn-shine 3s ease-in-out infinite;
}
@keyframes maru-btn-shine {
  0% { left: -130%; }
  30% { left: 130%; }
  100% { left: 130%; }
}

同じ赤で良ければ、このままコピペで動きます。ただ、この記事で持ち帰ってほしいのはCSSそのものではなく、頼み方のほうです。このCSSは「うちのサイトの赤」に合わせた仕上がりなので、それぞれのサイトの色と好みで、AIに一言頼むのが本筋です。

頼んでもいないのに、AIは2つ気を利かせていました。

• 赤いボタンだけを対象にしている。Cocoonのボタンには緑や青もありますが、それらは標準のまま残ります。色ごとに好みを育てられる設計です
• 前からあった追加CSSに追記する形にしている。以前入れた別のカスタマイズ（画像キャプションの中央寄せ）は無傷でした

気に入らなければ、貼ったCSSを消すだけで元の標準ボタンに戻ります。試し放題です。

かかった時間は、2分49秒

頼んでから、過去記事2本のボタンが変わったのを見届けるまでの実測です。

時刻	やったこと
07:56:59	AIに「SWELL風のきらっとボタンの赤」と伝える
〜07:58	AIがCSSを作り、追加CSSに貼って公開
07:59:48	過去記事2本のボタンで変身を確認。完了

この2分49秒には、AIがCSSを書く時間も、貼り付けて確認する時間も入っています。人間がやったのは、最初に一言頼んだことと、仕上がりに「いいね」と言ったことだけです。

コピペCSS集を2〜3サイト見比べて、好みのデザインを探して、色コードを書き換える。あの時間と比べると、探し回る工程がまるごと消えた感覚です。

おかわり: 頼む言葉を変えると、同じボタンはどう化けるのか

「SWELL風」以外の言葉だとどうなるのか、気になりませんか。追加で4つの一言を試しました。色の指定はすべてなし。「色はおまかせ」でAIに投げています。コピペ用に、出てきたCSSもそれぞれ載せておきます。4つとも実物のボタンなので、マウスを乗せて動きも試せます。

「丸っこく親しみやすく」

• 丸っこく → 両端まで完全に丸いピル型
• 親しみやすく → 暖色のオレンジのグラデーション。マウスを乗せると、むにっと少しふくらみます

.btn-wrap.btn-wrap-red a {
  background: linear-gradient(135deg, #ffb85c 0%, #ff8c42 100%);
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(255, 140, 66, .35);
  padding: 1.1em 2.4em;
  transition: transform .25s ease;
}
.btn-wrap.btn-wrap-red a:hover {
  transform: scale(1.04);
}

「シュッと高級感」

• シュッと → 角をほぼ直角に戻し、文字の間隔を広めに
• 高級感 → 墨色のグラデーションに、金色の細い枠。光る演出はあえてなし。高級は静かでした

.btn-wrap.btn-wrap-red a {
  background: linear-gradient(135deg, #2b2d3a 0%, #16171f 100%);
  border: 1px solid rgba(201, 168, 106, .65);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(22, 23, 31, .3);
  padding: 1.1em 2.6em;
  letter-spacing: .12em;
  transition: box-shadow .3s ease, filter .3s ease;
}
.btn-wrap.btn-wrap-red a:hover {
  filter: brightness(1.15);
  box-shadow: 0 8px 22px rgba(22, 23, 31, .4);
}

「サイトの雰囲気に合わせて」

• ここはAIの動きが面白かったパターンです。AIはまずこのサイトを観察して、「背景は薄いグレー、文字は濃いグレー、色らしい色は本文リンクの青だけ」と読み取りました
• その上で、リンクと同じ青（#1967d2）のフラットなボタンを出してきました。飾りを足すのではなく、サイトの静けさに合わせて引き算する方向です。言われてみれば、いちばん「元からあった顔」をしています

.btn-wrap.btn-wrap-red a {
  background: #1967d2;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(25, 103, 210, .25);
  padding: 1em 2.2em;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.btn-wrap.btn-wrap-red a:hover {
  background: #1554ab;
  box-shadow: 0 4px 12px rgba(25, 103, 210, .35);
}

「押したくなる感じで」

• 押したくなる → 下に濃い縁のある、物理ボタンのような立体感。マウスを乗せると実際にへこんで、押した感触が返ってきます
• 色はおまかせの結果、行動をイメージさせる緑が選ばれました

.btn-wrap.btn-wrap-red a {
  background: linear-gradient(180deg, #34d374 0%, #27ae60 100%);
  border-radius: 10px;
  box-shadow: 0 5px 0 #1e8449, 0 8px 14px rgba(39, 174, 96, .3);
  padding: 1em 2.4em;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-wrap.btn-wrap-red a:hover {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #1e8449, 0 4px 8px rgba(39, 174, 96, .3);
}

4パターン作って、順にサイトへ当てて確認するまで、まとめて4分22秒でした。デザインの引き出しを持っていなくても、言葉の引き出しさえあれば、選択肢はいくらでも増やせます。そしてうちのサイトは、CSSを差し替えるだけでいつでもボタンを着替えられるようになりました。

判定: 🟢 AIで一発

このブログのカスタマイズ実例には、毎回この判定を付けることにします。

• 🟢 AIで一発 = 一言頼んで、修正なしで完成
• 🟡 工夫が要った = 頼み直しやプロンプトの工夫が必要だった
• 🔴 別の道が早い = 手動やスキンのほうが早い

今回は文句なしの🟢でした。一言→修正ゼロ→2分49秒。おかわりの4パターンも、すべて一発です。ボタンはCSSとして独立した小さな部品なので、AIがいちばん外しにくい題材だった、という追い風もあります。この先、サイト型トップページのような大物になるほど🟡や🔴が出てくるはずです。出たら出たで、そのまま書きます。

🔴側の線引きも書いておきます。標準設定の色変えで満足しているなら、設定だけで十分です。サイト全体の雰囲気をまるごと変えたいなら、Cocoonにはスキンという先人の大発明もあります。AIに頼む道が活きるのは、「既製のデザインでは、あと一歩好みに届かない」と感じたときです。

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

最後に、チャット画面で使う対話型AIでのやり方です。この記事の実演は貼り付けや確認までAIがやりましたが、対話型AIでも作れるものは同じです。違いは、出てきたCSSを自分で追加CSSに貼ること。作業が1回増えるだけです。

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

WordPressテーマCocoonの囲みボタン（赤）を、SWELL風のきらっと光るボタンにするCSSを書いてください。カスタマイザーの追加CSSに貼って使います。

コツは、対象（Cocoonの囲みボタン）と使い道（追加CSSに貼る）を添えること。「サイトの雰囲気に合わせて」をやりたいときは、サイトのスクリーンショットを1枚貼ると、AIが配色を読み取ってくれます。うまく効かなかったら、この記事のCSSを見せて「これを◯◯風にして」と頼むのも近道です。

まとめ: 好みを言葉にするだけ

• 頼んだのは一言。「SWELL風のきらっとボタンの赤」
• 貼ったのは1箇所。外観→カスタマイズ→追加CSS
• かかったのは2分49秒。過去記事のボタンも一括で変身
• おかわり4パターンは、まとめて4分22秒
• 戻すのはCSSを消すだけ。着替えも一瞬

頼み方に型があるとすれば、これだけです。

「（変えたいもの）を（好みの一言）にして。サイトの雰囲気に合わせて」

ボタンの次は、サイトの配色や見出しも同じやり方で変えていく予定です。素のCocoonがどこまで変わるか、このブログ自体を実験台にして続けます。