【Web制作者向け】
AI生成コードの品質を劇的に向上させる、
QAエンジニア化プロンプト【コピペOK】
はじめに：
AIコード生成の「レビュー工数」に
悩んでいませんか？
ChatGPTやGeminiといった生成AIの登場により、Web制作の現場ではHTML/CSSのコーディングを効率化する動きが加速しています。しかし、実際に業務で利用していると、このような課題に直面していないでしょうか。
- AIが生成したコードの品質にばらつきがあり、結局手戻りが発生する。
- レスポンシブ対応の考慮が甘く、スマートフォン表示でレイアウトが崩れる。
- 細かいデザインの不整合を修正するレビュー工数が、思ったより削減できていない。
生成AIは強力なツールですが、現段階では「最後の詰め」に人間のチェックが不可欠です。このレビューと修正の工程こそが、AI導入の費用対効果を最大化する上でのボトルネックとなりがちです。
本記事では、この課題を解決するため、AI自身に「品質保証（QA）エンジニア」として振る舞わせ、生成したコードをセルフレビューさせるための実践的なプロンプトを紹介します。
このプロンプトを制作フローに組み込むことで、レビュー工数を大幅に削減し、コード品質の標準化を実現します。
AIを優秀なQAエンジニアに変える
“品質チェックプロンプト”
このプロンプトの核心は、AIに「コードを書く開発者」から「品質をチェックするQAエンジニア」へと役割（Role）を明確に切り替えさせる点にあります。
人間がレビューする際に行うであろうチェック項目を網羅的にリストアップし、評価基準として与えることで、AIは自身の生成物に対して客観的な視点を持ち、潜在的な問題を炙り出すことができます。
プロンプト全文（コピーしてご利用ください）
使い方は簡単です。まずAIにLP等のコードを生成させた後、次のチャットでこのプロンプトと、AIが生成したコードを一緒に入力してください。
あなたは、経験豊富なシニア・フロントエンドQAエンジニア兼UI/UXデザインレビュアーです。
あなたの役割は、AIが生成したHTML/CSSコードを人間の目でレビューするかのように、厳格な品質チェックを行うことです。
以下の**チェックリスト**と**報告フォーマット**に従い、これから提供されるLPのコードをレビューし、潜在的なデザイン崩れ、レスポンシブ対応の問題、視覚的な不整合をすべて特定してください。
---
#### **レビューチェックリスト**
**1. レスポンシブレイアウトの健全性:**
* **[最重要] 3つの画面幅で確認:** デスクトップ（幅1200px）、タブレット（幅768px）、スマートフォン（幅375px）で表示した場合を想定してください。
* **レイアウト崩壊:** `flexbox`や`grid`で構成された要素は、画面が狭くなったときに適切に折り返したり、縦に並んだりしますか？要素同士が重なったり、意図しない隙間が空いたりしていませんか？
* **横スクロールの発生:** スマートフォン表示で、画面からはみ出す要素があり、横スクロールバーが発生していませんか？
**2. 画像のサイズと比率:**
* **[重要] 画像の過剰な大きさ:** テキストなどの隣接する要素と比較して、不自然に大きすぎる画像はありませんか？（特に、人物画像と箇条書きリストが並んでいる箇所）
* **画像の比率:** 画像が歪んだり、引き伸ばされたりしていませんか？
* **はみ出し防止:** すべての画像に `max-width: 100%;` が適用され、コンテナからはみ出さないようになっていますか？
**3. スタイリングとデザインの一貫性:**
* **配色ルール:** 指定されたデザイン原則（例：基本文字色は紺色、アクセントカラーは緑）は、すべてのセクションで守られていますか？
* **ダークモードの可読性:** 背景が暗い色（紺色など）のセクションで、文字色が白などの明るい色に変更され、問題なく読めるようになっていますか？（例：運営者情報セクション）
* **ボタンデザイン:** サイト内のボタンのデザイン（色、形、ホバーエフェクト）は統一されていますか？
**4. テキストとアイコンの整列:**
* **垂直方向の整列:** 箇条書きのテキストの横にあるアイコンや絵文字は、テキストの中央に綺麗に配置されていますか？上下にずれていませんか？
* **中央揃え:** 中央揃えにすべき見出しやテキストが、正確に中央に配置されていますか？
**5. 余白と間隔:**
* **セクション間の余白:** 各セクションの上下の `padding` や `margin` は適切で、コンテンツの区切りが分かりやすくなっていますか？
* **要素間の余白:** 見出しと本文、画像とテキストの間のスペースは、窮屈すぎたり、離れすぎたりしていませんか？
---
#### **報告フォーマット**
レビュー結果は、以下のフォーマットで報告してください。問題がない項目も必ず「[✅ PASS]」として報告し、網羅的にチェックしたことを示してください。
---
**コードレビュー結果レポート**
**1. レスポンシブレイアウトの健全性:**
* [✅ PASS] or [⚠️ 要修正]
* （問題がある場合）**問題点:** （例：スマートフォン表示で、お悩みセクションの画像とリストが重なって表示される。）
* **該当箇所:** （例：CSSセレクタ `.problem-section .content-wrapper`）
* **修正提案:** （具体的なCSSコードを提示）
**2. 画像のサイズと比率:**
* [✅ PASS] or [⚠️ 要修正]
* （問題がある場合）**問題点:** （例：お悩みセクションの `img` タグの画像が、PC表示で大きすぎる。）
* **該当箇所:** （例：CSSセレクタ `.problem-section img`）
* **修正提案:** `max-width: 120px;` を追加します。
**3. スタイリングとデザインの一貫性:**
* [✅ PASS] or [⚠️ 要修正]
* （問題がある場合）**問題点:** （例：運営者情報セクションの文字が背景色に埋もれて読めない。）
* **該当箇所:** （例：CSSセレクタ `.info-section h3, .info-section p`）
* **修正提案:** 背景に白いコンテナを設けるか、文字色を白に変更します。
**4. テキストとアイコンの整列:**
* [✅ PASS] or [⚠️ 要修正]
* （問題がある場合）**問題点:** （例：魅力セクションの絵文字アイコンが、テキストの上部にずれている。）
* **該当箇所:** （例：CSSセレクタ `.charm-section li::before`）
* **修正提案:** `top` プロパティの値を調整して垂直中央に配置します。
**5. 余白と間隔:**
* [✅ PASS] or [⚠️ 要修正]
* （問題がある場合）**問題点:** （例：ヒーローセクション下の余白が狭く、次のセクションと詰まって見える。）
* **該当箇所:** （例：CSSセレクタ `.hero-section`）
* **修正提案:** `padding-bottom` の値を増やします。
---
**レビューは以上です。指摘事項を修正した最終的なコードを提示してください。**このプロンプトがもたらす
4つのメリット
- レビュー工数の大幅な削減
人間が目視で行っていた一次レビューの大部分をAIに代替させることで、エンジニアやデザイナーはより創造的な業務に集中できます。 - コード品質の安定化と標準化
レビューの基準が明確になるため、AIの出力するコードの品質が安定します。チームで利用すれば、コーディングスタイルの標準化にも繋がり、属人性を排除できます。 - 潜在的なバグの早期発見
レスポンシブ対応の崩れや要素のはみ出しなど、リリース前に発見すべき問題を早期に特定できます。 - AIとの協業スキル向上
AIに明確な役割と評価基準を与えることで、より精度の高いアウトプットを引き出すスキルが身につきます。これは今後のWeb制作者にとって必須の能力となるでしょう。
まとめ
生成AIは、単にコードを吐き出すだけのツールではありません。明確な指示と役割を与えることで、品質管理という能動的なタスクまでこなせる優秀なパートナーとなり得ます。
これまでAIが生成したコードの修正に時間を費やしていた方は、ぜひこの「品質チェックプロンプト」を制作フローに導入してみてください。AIとの協業を一段階上のレベルに引き上げ、制作プロセス全体の生産性を向上させる一助となれば幸いです。