デザインお任せ？ ChatGPTにいい感じのCSSボタンを作ってもらった

こんにちは。富士通クラウドダイレクトの中の人田畑です。
ChatGPTの登場でこの先生きのこりの方法を真剣に考え始めています。

さて、私はその昔Webデザインの仕事をしていたのですが、その折はCSSに大変頭を悩ませていました。しかし、今はChatGPTで簡単に作ってもらえるというお話。いい世の中になったものです。

ということで、本ブログのトップページの各記事にある「続きを読む」ボタン、これをちょっといい感じにするべく、「ChatGPTでCSSボタンデザイン」を試してみたいと思います。

CSSには触れずにそれっぽい指示だけで作りたい
指示のレベルに合わせたアウトプットが出てくるぞ
コード自体を貼り付けて指示して仕上げ
まとめ

CSSには触れずにそれっぽい指示だけで作りたい

ChatGPTが話題に上り始めて日数もたち、すでに効率・効果的に回答を引き出すための呪文が多数研究されていますが、そのあたりはいったん置いておいて、

CSS自体にはできるだけ言及しない（クラス名くらい）
まるでディレクターがデザイナーに指示するようなキーワードを使う

この二つを基本条件にして作成してみます。

指示のレベルに合わせたアウトプットが出てくるぞ

まずどんなボタンにするか、ですが、ちょっと目立つように派手な・・虹色で動くかっこいいボタンにしましょう！ヒュー！

背景色が虹色にクルクル回ってかっこいい「続きを読む」ボタンのCSSを書いて！

↓　↓　↓

若干頭が悪そうな指示でしたが、キッチリと頭が悪そうなアウトプットで答えるChatGPTに感動を隠せません。特に、マウスホバー時の挙動がかなりダイナミックですが、これがChatGPT的なかっこよさなんでしょうか。
また、これはこれで指示通りな気はしますが、これだとインターネット黎明期感が否めないため、もうちょっと今風にしてもらうようにお願いしなおしです…。

まず、英語の方が精度が高いと聞くので無料の翻訳サービスを使い、英語で指示を。また、クルクル要素がダメな気がしたのでそれも消しました。ついでに、コピペしやすいようにクラスも指定します。

Write CSS for the coolest and most modern "read more" button with a rainbow background.
regulation : class name is ".entry .entry-inner .entry-see-more"

↓　↓　↓

割とよさそうなのができた気がします。グラデーションのアニメーションスピードや、虹色の彩度を抑えて中間色寄りな調整をする事でギラギラ感を抑えるなど、mostではないかもしれまんが、十分modernな雰囲気です。センスいいね！
ただ、ホバー効果がなかったのでこれまたかっこいいホバー効果をつけてもらいましょう。センスに期待！

これにかっこいいホバー効果をつけてくれ

↓　↓　↓

ChatGPT君、キミ「これにより、クールでモダンなボタンにかっこいいホバー効果が追加されます。」って自信満々だけどセンス大丈夫か？

この子の「かっこいい」認識に疑問が増すばかりですが、とりあえずCSSの種は作られたので、調整を続けていきます。

コード自体を貼り付けて指示して仕上げ

どうやら、同じ指示でも気分によって仕上がりが違ってくるようなので、確実に調整するには、元のCSSを張り付けつつ細かく指示を出すとよさそうです。

先ほどのボタンではとにかくショッキングなピンク色のドロップシャドウを、グレーの普通の影に、またぼかしが大きすぎるのでいっその事なくしましょう。あと、CSSに入っていた背景色の指定がうまく利いていなかったので、これは取ってもらいます。

.entry .entry-inner .entry-see-more:hover {
background-color: #d60094;
transform: scale(1.05);
box-shadow: 0px 0px 15px 0px rgba(214,0,148,0.8);
}
ホバー効果の影の色を薄いグレーに、ぼかしは無くす。あと、背景色の変更も無しで。

↓　↓　↓

それなりのボタンになったんじゃないでしょうか！？個人的にもうちょっとだけ影を狭くして欲しいので、調整してもらいます。
ここまできたらCSSを直接触ったほうが早いのはわかっていますが、最後まで我慢して指示します。何事もやってみさせることが大事と昔の人も言っています。

影をもうちょっと小さくしてください。

↓　↓　↓

これはほぼ完成でいいでしょう！ということで、ここからさらにボタンの角丸を調整してもらった下のcssを、ブログにつけてみました。（トップページから見れます）

.entry .entry-inner .entry-see-more {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50px; /* 角を最大まで丸くする */
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-image: linear-gradient(to right, #f76a6a, #febe67, #fffb00, #1edfbb, #4286f4, #f76a6a);
  background-size: 600% 600%;
  animation: rainbow 10s ease infinite;
  transition: all 0.3s ease;
}


.entry .entry-inner .entry-see-more:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 8px 0px rgba(128, 128, 128, 0.5);
}


@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

注1）元のCSS影響を消すため、設置にあたりここから少し調整しています。
注2）記事中でも触れましたが、改めて同じ指示を出しても違うコードがでたりします。

まとめ

噂どおり、CSSボタン程度は朝飯前に作ってくれました。しかも、制作ディレクターが新人デザイナーに指定出すぐらいの粒度でそれっぽいのを作ってくれるのはちょっと驚きでした。特に、「モダン」の単語から虹色の調子を整えてくるところなど、人間ならうっかりセンスを感じてしまうところです。また、最後の仕上げを細かく指定しないといけないのも、なんだか本当に人間に指示を出しているようで不思議な感覚でした。

これで、CSSが苦手なデザイナーはもとより、Webアプリ開発する方の手間なんかもかなり省けるようになりそうです。