AIとペアプロしてCSSのバグを直してみた

こんにちは、渥美です。今日は前回の「AIとWebサイトを作る現場を公開」の続編として、実際に発生したバグをAIと一緒に修正した作業をそのまま公開します。

「AIに頼んだらどうやって問題を解決するの？」という疑問に、リアルなケーススタディでお答えします。

今回のバグ：スタイルが当たっていなかった

作業中、テンプレートの画像ギャラリーセクションで高さの指定が効いていない箇所を発見しました。

コードを見ると h-52 というTailwind CSSのクラスが使われていたのですが、実際にはスタイルが反映されていない状態。

AIと一緒にコードを読み解いた結果、根本原因が判明しました。

ブラウザで直接確認できない状況でも、AIがコードを読んで「コンパイル対象に含まれていない」と特定してくれました。ブラウザなしで原因究明できたのはAIならではの強みです。

解決策は2つ。どちらを使うかは開発環境・状況によります。

今回は即時対応できる方法②（直接CSS記述）を採用し、画像の高さ表示を修正しました。

AIと私のやり取りをそのまま録画しました。バグ発見から修正完了まで、ぜひ雰囲気だけでも見てみてください。

▼ Part 01：バグの発見と原因分析

▼ Part 02：修正作業と動作確認

今回の修正で改めて実感したことがあります。

AIは万能ではありませんが、「原因の仮説を立てて絞り込む」作業は非常に得意です。エラーの全体像を伝えると、人間なら見落としそうな箇所もすぐに指摘してくれます。

今回のケース（Tailwindのコンパイル漏れ）は、知っていれば一瞬で解決できるバグです。でも、知らなければ「なぜかスタイルが当たらない…」と長時間悩む可能性があります。

AIをパートナーにすることで、経験値の差を縮められるのが最大のメリットだと感じています。

こういった制作の裏側を、これからも定期的に公開していく予定です。もし「うちのサイトのバグも気になる」「どんな仕組みで作ってもらえるの？」と気になった方は、お気軽にご相談ください。

「どんな仕組みなのか知りたい」「実際の制作フローを聞いてみたい」
そんな軽い気持ちでのご相談、大歓迎です。しつこい営業は一切しません。