最近は、CSSを書くときにAIを使うことが身近になってきましたよね。
AIチャットに相談しながら書いたり、Codex や Claude Code のようなコーディング支援ツールを使って実装に近いコードを出してもらったり。ちょっとしたレイアウトやスタイルであれば、要件を伝えるだけで、それなりに動くコードが返ってきます。
実際、「とりあえず形にする」という意味ではとても便利です。ゼロから書き始めるより早いですし、自分ではすぐに思いつかなかったプロパティの組み合わせを提案してくれることだってあります。
ただ、業務の中でCSSを見ていると、引っかかる場面もあります。
コード自体は動いているし、見た目もぱっと見では問題なさそう。でも、あとから修正しようとすると、どこを触ればいいのか分かりにくい。ひとつ値を変えただけで別の場所が崩れたり、なぜその指定が必要なのか読み取りづらかったりする。
そういうコードに出会うと、「これはAIが出したものを、そのまま貼ったのかもしれないな」と感じることがあります。もちろん、実際にAIが書いたかどうかは分かりません。とはいえ、動いてはいるけれど意図が追いづらいCSSを見ると、あとから触る人のことまで考えられているのだろうかと心配になってしまうのは確かです。
そんなこんなで今回は、AIが生成したCSSとどう向き合うかについて考えてみたいと思います。
正しいけれど、扱いやすいとは限らない
まず前提として、AIが出力するCSSは、基本的には“正しい”ことが多いです。
文法として成立していて、ブラウザでも問題なく解釈される。指定した見た目も、ある程度きちんと再現される。少なくとも、「まったく動かないコード」が返ってくる場面は以前よりかなり少なくなっている印象があります。
ところが、CSSの場合はここが少しややこしいところで、CSSとして正しいことと、あとから扱いやすいことは必ずしも同じではありません。
たとえば、セレクタが必要以上に細かかったり、ネストが深かったり、!important で強めに上書きしていたりするコードでも、ブラウザ上では普通に動きます。見た目も整っているかもしれません。
でも、そのコードをあとからメンテナンスすることになったときに、次のような点で手が止まる可能性があります。
- 「なぜこの指定になっているのか」が分からない
- 少し余白を変えたいだけなのに、どの値を触ればいいのか迷う
- 別の場所でも使い回したいのに、特定のHTML構造に強く依存している
そうなると、コードは動いているのに、だんだん触りづらくなっていきます。
これは、CSSとして間違っているわけではないし、仕様から外れているわけでもありません。ただ、人間があとから扱うには少しツライ形になっている、ということです。
このあたりは、以前書いた「仕様通りなのにバグっぽく見えるCSS」の話とも少し繋がってくるかもしれません。見た目や感覚としては違和感があっても、ルールとしては正しく成立している。だからこそ、単純に「間違い」とは言い切れない難しさがあります。
AIは「今の条件」を満たすのが得意
では、なぜそういうCSSになりやすいのでしょうか。理由のひとつは、AIが基本的に「今与えられている条件を満たすこと」を優先してコードを生成する傾向にあるからだと思います。
「この要素を中央に配置してほしい」
「カードを横並びにしてほしい」
「このボタンをそれっぽく装飾してほしい」
こうした指示に対して、AIはかなりうまく答えてくれます。与えられた条件を満たし、その場で見た目を成立させるためのコードを出すのは得意です。
ですが、実際のCSSは、その場だけで完結しないことが多いですよね。
- 既存のCSSとの関係がある
- 他のページで再利用する可能性がある
- あとから別の人が修正するかもしれない
デザイン変更によって、同じコンポーネントに別の見た目が必要になることもありますが、AIが出力したコードがそうした文脈まで十分に踏まえているとは限りません。
もちろん、プロンプトで「保守しやすく」「シンプルに」「あとから変更しやすいように」と伝えることはできるし、それによって出力が改善されることもあります。それでも、最終的にそのCSSがプロジェクトに合っているかどうかは、現時点では人間の判断も必要になってくる部分かなと感じています。
そのまま使っていい場面もある
では、AIが書いたCSSはそのまま使ってはいけないのでしょうか。
たとえば、プロトタイプを作るだけなら、そのまま使っても問題ない場面は多いです。一時的な検証や、社内向けの簡単なデモであれば、多少粗いCSSでも十分役に立ちます。また、影響範囲が小さいパーツであれば、あとから問題になりにくいこともあります。
大事なのは、「どこで使うCSSなのか」を考えることかなぁと思います。
- 一時的に使うだけ？
- 本番環境に入るもの？
- 今後も修正され続ける？
- 他の人も触る可能性は？
このあたりによって、必要な見直しの度合いは変わってきそうです。長く使うCSSであれば、出てきたコードをそのまま貼る前に、少しだけ読んでおいた方が安心ですす。チェックポイントとしては、次のような感じでしょうか。
- セレクタが強すぎないか
- 固定値に頼りすぎていないか
- 他のスタイルとぶつかりそうな指定になっていないか
- 不要そうなプロパティが混ざっていないか
- あとから値を変えるときに、どこを触ればいいか分かるか
このような点を見ておくだけでも、だいぶ扱いやすさは変わってくるはずです。
AIのCSSは「完成品」より「たたき台」として見る
自分の手を動かさず、AIにCSSを書いてもらうこと自体はとても便利です。
ゼロから考える手間を減らせますし、実装パターンの候補を出してもらうこともできます。知らなかった書き方に気づくキッカケになることもあります。
ただ、出てきたものをそのまま完成品として扱うよりは、「たたき台」として見るくらいがちょうどよさそうです。AIの便利さに任せきってしまうと、「動いてはいるけれど扱いづらいCSS」が少しずつ増えていく恐れがあるからです。そして気づかないうちに背後から忍び寄るスパゲッティコード……。その先には、怪奇現象の原因を突き止めるために時間を溶かしてしまう悲しみが待っているかもしれません。
その悲しみを回避するための取り入れ方としては、次のような流れがよさそうです。
- まずAIに形を作ってもらう
- そのうえで、人間がプロジェクトに合う形へ整える
- 不要な指定を削る
- セレクタを見直す
- 意図が分かるように整理する。
そう考えると、AIはCSSを書く力を奪うものというより、最初の負担を軽くしてくれるものとして使いやすくなります。大事なのは、AIが出したCSSを「動いているからOK」で終わらせないことです。
- そのコードを自分たちが理解できるか
- あとから安全に変更できるか
- 他のスタイルと無理なく共存できるか
そこまで見て初めて、実際に扱いやすいCSSになるのだと思います。AIの進歩はとてつもなく速いので、そのうち、こうした心配も笑い話になるのかもしれません。
