【実践】生成AIでHTML/CSS/jQueryを自動生成する方法

Last updated at 2026-07-28Posted at 2026-07-20

はじめに

生成AI（ChatGPTなど）を活用して、Webサイトのワイヤーフレームからプロトタイプまでを効率的に作成する方法をまとめました。本記事では、プロンプトエンジニアリングの基礎から、実際にHTMLワイヤーフレームに対してCSS・jQueryを自動生成するワークフローまでを紹介します。

本記事はシリーズの一環として、生成AIを活用した開発スキルの基礎を扱います。ここで学ぶプロンプト設計の考え方やAIとの対話手法は、後続の記事で扱う業務システム開発（Python × Dify × RAG）にもそのまま応用できます。まずはフロントエンド領域でプロンプトエンジニアリングの感覚を掴み、次のステップとしてバックエンドやAIシステム構築へと進んでいきましょう。

なお、本記事で使用するソースコードは、以下のGitHubリポジトリからダウンロードできます
gadget-shop-starter（GitHubリポジトリ）

プロンプトエンジニアリングとは

プロンプトエンジニアリングとは、生成AIに与える指示文（プロンプト）を設計・最適化する技術です。適切なプロンプトを設計することで、AIの出力品質を大幅に向上させることができます。

プロンプトの例

## 命令
入力されたUIコンポーネント名を、【パターン数】パターンのCSS実装で出力してください。

## 前提条件
- Web制作1年目のデザイナーにも理解できるコードにしてください。
- 各パターンは20行以内のCSSに収めてください。

## 入力
【ここにUIコンポーネント名を入力】

## 出力
- コード量が少ないパターンから順番に出力してください。
- 出力形式は以下に合わせてください。
[番号]. [コンポーネント名]
コード行数：[行数]

マークダウン記法の活用

上記プロンプトの ## 入力 のような書き方はマークダウン記法と呼ばれます。マークダウン記法とは、文章に記号で目印を付けて構造化する書き方です。

マークダウン記法を用いるメリット

プロンプトが構造化され、人間が読みやすく管理しやすくなる
生成AIがプロンプトの構造を把握しやすくなり、精度が向上する

プロンプトの基本構造

プロンプトは 「命令」「文脈」「入力」「出力」 の4要素で構成します。

構成要素	説明	プロンプト例
命令	処理させたいタスク	以下のHTMLコードに対して、モバイルファーストのCSSを作成してください。
文脈	タスクの背景や前提条件	20代女性向けのコスメECサイトです。柔らかい配色が求められます。
入力	処理させたい入力データ	`<header class="site-header">...</header>`
出力	出力させたい情報や形式	CSSは外部ファイル形式で、レスポンシブ対応にしてください。

プロンプトエンジニアリングの進め方

（1）ゴールと要件の明確化

最初に、プロンプトで達成したいゴールと要件を明確にします。

例）ECサイトのCSSを自動生成するプロンプトを作る場合の要件

使用する生成AI：ChatGPT
用途：HTMLワイヤーフレームへのスタイル適用
品質：レスポンシブ対応、アクセシビリティ考慮
入力：HTMLファイル、ペルソナ情報、要求定義
出力：CSSファイル、jQueryファイル

（2）プロンプトの設計

要件を踏まえてプロンプトの構造を設計します。

## 命令
・・・
## 前提条件
・・・
## 入力
・・・
## 出力
・・・

（3）プロンプトの評価

実際にHTMLを与えて、生成AIがペルソナに適したCSSを出力できるか、レスポンシブ対応になっているか等を確認します。

（4）プロンプトの最適化

評価結果をもとにプロンプトを改善します。

不満・改善点	見直し例
出力されたCSSが見づらい	出力形式の指定方法を変更する
期待するスタイルが適用されない	ペルソナ情報や前提条件を追加する
不要なスタイルが大量に出力される	出力の範囲や制限を追加する
プロンプトの変更が大変	情報を整理・共通化して変更箇所を減らす

プロンプトエンジニアリングのテクニック

テクニック	概要
プロンプトチェイニング	複数のタスクに分解して段階的に課題を解決する
フューショットプロンプティング	少数の例を与えて生成AIに文脈を理解させる
CoTプロンプティング	課題を解決するための道筋を示す
メタプロンプティング	生成AI自身の生成物を客観的に処理させる
知識生成プロンプティング	指示に知識を与えて簡易的に学習させる
方向性刺激プロンプティング	方向性を示すことで回答を誘導する

プロンプトチェイニング

「プロンプトチェイニング」とは、複雑なタスクを複数のステップに分割して段階的に処理する手法です。一度に全てを指示するより、精度の高い結果を得られます。

例）BMI計算ツールの作成

HTMLとJavaScriptで体重管理アプリを2ステップで作成します。

ステップ1：計算ロジックの作成

HTMLとJavaScriptを用いてBMIを計算するプログラムを段階的に作ります。
まずは、JavaScriptで身長(cm)と体重(kg)からBMIを算出するcalculateBMI()関数を作ってください。

ChatGPTの回答例：

function calculateBMI(heightCm, weightKg) {
  const heightM = heightCm / 100;
  return Math.round((weightKg / (heightM * heightM)) * 10) / 10;
}

ステップ2：表示用HTMLの作成

次に、BMI計算結果を表示するためのWebページをHTMLで作ります。
身長入力用と体重入力用のinput要素、結果表示用のp要素、計算実行用のbutton要素を持つHTMLコードを作ってください。
計算ボタンを押したときにcalculateBMI()関数を使って結果を表示してください。

ChatGPTの回答例：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BMI計算ツール</title>
  <script>
    function calculateBMI(heightCm, weightKg) {
      const heightM = heightCm / 100;
      return Math.round((weightKg / (heightM * heightM)) * 10) / 10;
    }

    function showResult() {
      const height = parseFloat(document.getElementById("height").value);
      const weight = parseFloat(document.getElementById("weight").value);
      const bmi = calculateBMI(height, weight);
      document.getElementById("result").textContent = "あなたのBMI: " + bmi;
    }
  </script>
</head>
<body>
  <h1>BMI計算ツール</h1>
  <label for="height">身長(cm):</label>
  <input type="number" id="height" name="height"><br><br>
  <label for="weight">体重(kg):</label>
  <input type="number" id="weight" name="weight"><br><br>
  <button onclick="showResult()">計算する</button><br><br>
  <p id="result"></p>
</body>
</html>

生成されたコードを bmi.html として保存し、ブラウザで動作確認しましょう。

フューショットプロンプティング

「フューショットプロンプティング」とは、プロンプト内で数個の例を示すことで、生成AIに出力の文脈やフォーマットを理解させる手法です。

実践：CSS変数の命名規則を統一する

CSSカスタムプロパティの命名規則を例で示し、統一的なコードを出力させます。

命名例と同じルールで、入力されたCSSプロパティをカスタムプロパティに変換してください。

## 入力
font-size: 16px;
background-color: #333;
border-radius: 8px;

## 命名例
- 変換前: color: #ff6600;
- 変換後: --color-primary: #ff6600;

- 変換前: margin-bottom: 24px;
- 変換後: --spacing-bottom-lg: 24px;

ChatGPTの回答例：

--font-size-base: 16px;
--color-bg-dark: #333;
--radius-md: 8px;

命名例を与えなかった場合、以下のような一貫性のない出力になることがあります：

--fontSize: 16px;
--bg: #333;
--border-radius: 8px;

CoTプロンプティング

「CoT（Chain-of-Thought）プロンプティング」とは、生成AIに課題解決の手順を明示的に教える手法です。

実践：最大公約数の算出

56088と78132の最大公約数を求めてください。

## 処理手順
1. ユークリッドの互除法を用いて、引数aと引数bの最大公約数を求めるJavaScript関数を作ります。
2. 関数の引数aに56088、引数bに78132を代入し、戻り値を最大公約数として出力します。

ChatGPTの回答例：

// ユークリッドの互除法で最大公約数を求める関数
function gcd(a, b) {
  while (b !== 0) {
    let remainder = a % b;
    a = b;
    b = remainder;
  }
  return a;
}

const num1 = 56088;
const num2 = 78132;
const answer = gcd(num1, num2);
console.log("最大公約数:", answer); // 最大公約数: 36

処理手順を示さず単に「最大公約数を求めてください」とだけ指示した場合、計算ミスが発生しやすくなります。

メタプロンプティング

「メタプロンプティング」とは、生成AIが出力したものを自分自身でセルフチェックさせる手法です。

実践：方程式の解の検証

方程式：2x^2 - 7x + 3 = 0 の解2つを求めてください。
導出した解を元の方程式に代入し、結果が0となるか検証してください。
0とならない場合は解が間違っているため、正しい解を再度算出してください。

自己検証を含めることで、AIが計算ミスを自ら修正できるようになります。

知識生成プロンプティング

「知識生成プロンプティング」とは、生成AIが持っていない独自の知識を与えて、回答の精度を高める手法です。

実践：独自の数式を解く

方程式：x^3 - 6x^2 + 11x - 6 = 0 における解を3つ求めてください。

## 前提条件
- 方程式を解く際には、PythonライブラリのNumPyを用いてください。

## 知識
- x=1、x=2は自明な解です。
- 3つ目の解は2<x<4の範囲に存在します。

方向性刺激プロンプティング

「方向性刺激プロンプティング」とは、生成AIにヒントを与えて期待する方向へ誘導する手法です。

実践：メールアドレスのバリデーション関数の作成

入力されたメールアドレスが妥当かどうか判定するJavaScript関数を作ってください。

## ヒント
メールアドレスには@が含まれ、ドメイン部分にはドットが必要です。
また、先頭・末尾にスペースがないことも確認すべきです。

ChatGPTの回答例：

function isValidEmail(email) {
  // 前後のスペースチェック
  if (email !== email.trim()) {
    return false;
  }

  // @の存在チェック
  const atIndex = email.indexOf('@');
  if (atIndex <= 0) {
    return false;
  }

  // ドメイン部分のドットチェック
  const domain = email.slice(atIndex + 1);
  if (domain.indexOf('.') === -1) {
    return false;
  }

  // ドメインの末尾がドットでないことを確認
  if (domain.endsWith('.')) {
    return false;
  }

  return true;
}

生成AI活用：デザイン編

Webサイトのデザイン案

ターゲットやテーマに合わせたWebサイトのデザイン案を生成AIに提案させます。

30〜40代の男性をターゲットとした、信頼感のあるガジェット専門ECサイトのデザインを提案してください。
最適な配色やスタイル、レイアウト、ビジュアル要素について教えてください。

ChatGPTの回答例：

配色

ベースカラー：ダークグレー (#2D2D2D)、ホワイト (#FAFAFA)
メインカラー：ディープブルー (#1A3A5C)
アクセントカラー：オレンジ (#E67E22)

スタイル

クリーンで情報密度が高いグリッドレイアウト
フラットデザインに軽いシャドウを組み合わせた立体感
サンセリフフォントで視認性を重視

レイアウト

2〜3カラムのグリッドで商品を整列表示
スティッキーヘッダーでナビゲーションを常に表示
比較機能を目立つ位置に配置

配色とフォントの提案

「清潔感、スピード、テクノロジー」というテーマに合った配色（ベースカラー、メインカラー、アクセントカラー）の
カラーコードとフォントを提案してください。

ChatGPTの回答例：

ベースカラー：#F8F9FA（ライトグレー）
メインカラー：#0066CC（ブライトブルー）
アクセントカラー：#00C853（ビビッドグリーン）
本文フォント：Inter（モダンで読みやすい）
見出しフォント：Montserrat（力強くクリーン）

実践：ワイヤーフレームHTMLからCSS・jQueryを自動生成する

ここからが本記事のメインパートです。既にHTMLワイヤーフレームがある状態から、要求定義とペルソナをもとにCSS・jQueryを生成AIで自動生成するワークフローを紹介します。

前提：要求定義とペルソナ

ペルソナ

項目	内容
名前	佐藤美咲（仮名）
年齢	28歳
職業	都内勤務の会社員
利用端末	主にスマートフォン
利用タイミング	通勤中、休憩時間、帰宅後
よく買うもの	コスメ、ファッション、日用品
重視すること	検索しやすさ、レビュー、配送速度、スマホでの見やすさ

ペルソナから導かれるデザイン方針

ペルソナの特徴	必要な機能・デザイン
通勤中にスマホ利用	スマホ画面最適化（モバイルファースト）
商品を探しづらい	検索・絞り込み機能を目立つ位置に
比較したい	お気に入り・比較機能
レビュー重視	レビューを目立つデザインで表示
配送が気になる	配送予定日を分かりやすく表示

サイト構成

kaden-ec-site
├─ index.html       # トップページ
├─ products.html    # 商品一覧ページ
├─ detail.html      # 商品詳細ページ
├─ style.css        # スタイルシート
└─ script.js        # jQuery処理

HTMLワイヤーフレーム（トップページ）

以下のHTMLが既に用意されている前提です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>家電ショッピングサイト｜トップ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <div class="logo">KADEN SHOP</div>
    <form class="search-area">
      <input type="search" placeholder="商品を検索">
      <button type="submit">検索</button>
    </form>
    <nav class="header-nav">
      <a href="#">ログイン</a>
      <a href="#">お気に入り</a>
      <a href="#">カート</a>
    </nav>
  </header>

  <nav class="category-nav">
    <a href="products.html">テレビ</a>
    <a href="products.html">冷蔵庫</a>
    <a href="products.html">洗濯機</a>
    <a href="products.html">エアコン</a>
    <a href="products.html">掃除機</a>
    <a href="products.html">キッチン家電</a>
  </nav>

  <main>
    <section class="hero">
      <div>
        <p class="label">SUMMER SALE</p>
        <h1>暮らしを快適にする家電をお得に</h1>
        <p>人気の家電製品を豊富に取りそろえています。</p>
        <a class="button" href="products.html">商品を見る</a>
      </div>
    </section>

    <section class="content-section">
      <h2>おすすめカテゴリー</h2>
      <div class="category-grid">
        <a class="category-card" href="products.html">テレビ</a>
        <a class="category-card" href="products.html">冷蔵庫</a>
        <a class="category-card" href="products.html">洗濯機</a>
        <a class="category-card" href="products.html">掃除機</a>
      </div>
    </section>

    <section class="content-section">
      <div class="section-heading">
        <h2>おすすめ商品</h2>
        <a href="products.html">一覧を見る</a>
      </div>
      <div class="product-grid">
        <article class="product-card">
          <div class="image-placeholder">商品画像</div>
          <p class="brand">Sample Brand</p>
          <h3>4K液晶テレビ 50インチ</h3>
          <p class="price">89,800円</p>
          <a class="button secondary" href="detail.html">詳細を見る</a>
        </article>
        <!-- 他の商品カードも同様 -->
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <p>会社情報　｜　利用規約　｜　お問い合わせ</p>
    <p>&copy; 2026 KADEN SHOP</p>
  </footer>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS生成用プロンプト（プロンプトチェイニング＋知識生成）

HTMLワイヤーフレームとペルソナ情報をもとに、CSSを生成します。

## 命令
以下のHTMLワイヤーフレームに対して、ペルソナと要求定義に基づいたCSSを作成してください。

## ペルソナ
- 28歳女性、会社員
- スマートフォンでの利用が中心（通勤中に操作）
- 検索しやすさ、レビュー、配送速度、スマホでの見やすさを重視

## デザイン方針
- モバイルファーストで設計すること
- 検索エリアを大きく目立たせること
- 商品カードはホバー時に浮遊する演出を入れること
- 配色は清潔感と信頼感を意識すること（ベースカラー: #F8FAFB、メイン: #2C5F8A、アクセント: #E8523F）
- フォント: "Noto Sans JP", sans-serif

## 入力
【上記のHTMLコード】

## 出力条件
- 外部CSSファイル(style.css)の形式で出力すること
- レスポンシブデザイン対応（ブレークポイント: 768px）
- CSSカスタムプロパティを活用すること
- コメントで各セクションを区切ること

ChatGPTが生成するCSSの例

/* ===========================
   CSS カスタムプロパティ
   =========================== */
:root {
  --color-base: #F8FAFB;
  --color-main: #2C5F8A;
  --color-accent: #E8523F;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-border: #E0E0E0;
  --color-white: #FFFFFF;
  --font-family: "Noto Sans JP", sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --transition-base: all 0.3s ease;
}

/* ===========================
   リセット・ベース
   =========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-base);
  color: var(--color-text);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===========================
   ヘッダー
   =========================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-main);
}

.search-area {
  display: flex;
  flex: 1;
  max-width: 400px;
  margin: 0 16px;
}

.search-area input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--color-main);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size: 0.9rem;
  outline: none;
}

.search-area button {
  padding: 10px 18px;
  background-color: var(--color-main);
  color: var(--color-white);
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  font-weight: 600;
}

.header-nav {
  display: flex;
  gap: 12px;
}

.header-nav a {
  font-size: 0.8rem;
  color: var(--color-text-light);
  transition: var(--transition-base);
}

.header-nav a:hover {
  color: var(--color-main);
}

/* ===========================
   カテゴリナビ
   =========================== */
.category-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 0 16px;
}

.category-nav a {
  padding: 12px 16px;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--color-text-light);
  border-bottom: 2px solid transparent;
  transition: var(--transition-base);
}

.category-nav a:hover {
  color: var(--color-main);
  border-bottom-color: var(--color-main);
}

/* ===========================
   ヒーローセクション
   =========================== */
.hero {
  background: linear-gradient(135deg, var(--color-main), #4A90D9);
  color: var(--color-white);
  padding: 48px 16px;
  text-align: center;
}

.hero .label {
  display: inline-block;
  background-color: var(--color-accent);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.hero h1 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.hero p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 20px;
}

/* ===========================
   ボタン
   =========================== */
.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition-base);
  border: none;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.button.secondary {
  background-color: var(--color-white);
  color: var(--color-main);
  border: 1px solid var(--color-main);
}

.button.secondary:hover {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* ===========================
   商品カード
   =========================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 16px;
}

.product-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: var(--transition-base);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.image-placeholder {
  background-color: #EEF2F5;
  height: 160px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  margin-bottom: 12px;
}

.product-card .brand {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.product-card h3 {
  font-size: 0.9rem;
  margin: 4px 0 8px;
}

.product-card .price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* ===========================
   レスポンシブ（768px以上）
   =========================== */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero h1 {
    font-size: 2rem;
  }

  .search-area {
    max-width: 500px;
  }
}

jQuery生成用プロンプト

続けて、同じチャット上でjQueryの生成を依頼します。

## 命令
先ほどのHTMLとCSSに対して、以下の機能をjQueryで実装してください。

## 実装する機能
1. スティッキーヘッダー：スクロール時にヘッダーに影を追加
2. 商品カードのフェードイン：スクロールで画面内に入ったときにフェードイン表示
3. カテゴリナビのスムーズスクロール
4. 検索フォームのフォーカス時にハイライト表示
5. 「トップへ戻る」ボタンの表示切り替え

## 前提条件
- jQuery 3.7.1 を使用
- script.jsファイルに記述
- 初心者でも理解できるようコメントを入れること

ChatGPTが生成するjQueryの例

$(document).ready(function () {

  // ===========================
  // スティッキーヘッダーの影追加
  // ===========================
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 50) {
      $('.site-header').addClass('scrolled');
    } else {
      $('.site-header').removeClass('scrolled');
    }
  });

  // ===========================
  // 商品カードのフェードイン表示
  // ===========================
  // 初期状態で商品カードを非表示にする
  $('.product-card').css({ opacity: 0, transform: 'translateY(30px)' });

  // スクロール位置を監視して画面内に入ったらフェードイン
  function checkVisibility() {
    var windowBottom = $(window).scrollTop() + $(window).height();

    $('.product-card').each(function () {
      var elementTop = $(this).offset().top;

      if (windowBottom > elementTop + 50) {
        $(this).animate(
          { opacity: 1 },
          { duration: 600, queue: false }
        );
        $(this).css('transform', 'translateY(0)');
      }
    });
  }

  $(window).on('scroll', checkVisibility);
  checkVisibility(); // 初回チェック

  // ===========================
  // 検索フォームのフォーカスハイライト
  // ===========================
  $('.search-area input').on('focus', function () {
    $(this).parent().addClass('search-focused');
  });

  $('.search-area input').on('blur', function () {
    $(this).parent().removeClass('search-focused');
  });

  // ===========================
  // 「トップへ戻る」ボタンの表示切り替え
  // ===========================
  // ボタンを動的に追加
  $('body').append('<button class="back-to-top">▲</button>');

  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 300) {
      $('.back-to-top').fadeIn(300);
    } else {
      $('.back-to-top').fadeOut(300);
    }
  });

  // クリックでスムーズにトップへ移動
  $('.back-to-top').on('click', function () {
    $('html, body').animate({ scrollTop: 0 }, 500);
  });

});

CSSの追加・修正をプロンプトで行う

HTMLやCSSを追加・修正したい場合も、チャットの続きで依頼します。

先ほどのCSSに、以下の変更を加えてください。
- ヒーローセクションの背景グラデーションを暖色系（オレンジ→ピンク）に変更
- 商品カードのホバー時にボーダーカラーをアクセントカラーに変更

ChatGPTの回答例：

/* ヒーローセクション：暖色グラデーションに変更 */
.hero {
  background: linear-gradient(135deg, #E8523F, #FF8A65);
  color: var(--color-white);
  padding: 48px 16px;
  text-align: center;
}

/* 商品カード：ホバー時にアクセントカラーのボーダー */
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border: 2px solid var(--color-accent);
}

技術的に実装可能な表現一覧

CSS・jQueryで実装しやすい表現をカテゴリ別にまとめます。プロンプトに含めることで、具体的な実装を指示できます。

動き・アニメーション

項目	解説
CSS Transition	要素の色やサイズ、位置を滑らかに変化させる
CSS Animation	キーフレームを使った繰り返しアニメーション
transform	scale()、translate()、rotate()で要素を変形
スクロール連動アニメーション	スクロール位置に応じた要素の表示・移動
フェードイン / スライドイン	要素を徐々に表示する演出
パララックス効果	背景と前景を異なる速度で動かす奥行き演出
ホバーアニメーション	カーソルを合わせた時の拡大・色変更・影付け

商品表示

項目	解説
商品カードの浮遊表現	カードが少し浮き上がるホバー演出
商品画像ズーム	ホバー時に画像を拡大表示
サムネイル切り替え	小画像クリックでメイン画像を切り替え
商品カルーセル	商品を左右にスライド表示
バッジの動的表示	「NEW」「SALE」などを条件に応じて表示

jQueryで実装しやすい処理

メソッド	解説
fadeIn() / fadeOut()	要素の表示・非表示をフェード
slideDown() / slideUp()	上下スライドで表示切り替え
animate()	サイズや位置をアニメーション変更
addClass() / removeClass()	CSSクラスの動的切り替え
Ajax通信	ページ更新なしでデータ取得

プロンプトテンプレート集

HTML/CSS生成テンプレート

以下の仕様をもとに、【Webサイトの種類】の【ページ名】をHTML/CSSで作成してください。

## 仕様
- ヘッダー: 【ヘッダー要素を記述】
- メインセクション: 【メインセクションの内容を記述】
- サイドバー: 【サイドバーの内容を記述】
- フッター: 【フッター要素を記述】
- CSSとJavaScriptは外部ファイルとして読み込む
- レスポンシブデザイン対応
- 【追加の仕様があれば記述】

jQuery機能生成テンプレート

以下の設計情報をもとに、jQueryで機能を実装してください。

## 対象HTML
【対象のHTMLクラス名やID名を記述】

## 実装する機能
【機能の内容を具体的に記述】

## 動作条件
【トリガーとなるイベントを記述（クリック、スクロール、ホバーなど）】

## 前提条件
- jQuery 3.x を使用
- 初心者向けにコメントを入れること

コードレビュー用テンプレート

以下の観点に基づいて、CSSコードをレビューしてください。

## レビューの観点
- レスポンシブデザインの対応状況
- CSSの重複や冗長な記述
- ブラウザ互換性
- パフォーマンス（不要なアニメーション等）
- アクセシビリティ

## コード
【CSSコードを記述】

エラー分析テンプレート

以下のエラーメッセージを分析してください。
エラーの意味をわかりやすく日本語で説明し、原因と解決方法を提案してください。

## エラーメッセージ
【エラーメッセージを挿入】

生成AI活用：プログラミング編

コメントの追加

以下のコードは、配列から重複を除去して昇順に並べ替えるJavaScriptプログラムです。
プログラミング初心者でも処理の流れが理解できるコメントを追加してください。

function uniqueSorted(arr) {
  const unique = [...new Set(arr)];
  return unique.sort((a, b) => a - b);
}
const result = uniqueSorted([5, 3, 8, 3, 1, 5, 9]);
console.log(result);

リファクタリング

あなたはプロのJavaScriptエンジニアです。
以下のコードの可読性、効率性、保守性を向上させるためにリファクタリングしてください。
改善したポイントも説明してください。

let temp = 'Monday';
if (temp === 'Monday') {
  console.log('週の始まりです。頑張りましょう！');
} else if (temp === 'Tuesday') {
  console.log('週の始まりです。頑張りましょう！');
} else if (temp === 'Wednesday') {
  console.log('週の始まりです。頑張りましょう！');
} else if (temp === 'Thursday') {
  console.log('週の始まりです。頑張りましょう！');
} else if (temp === 'Friday') {
  console.log('週の始まりです。頑張りましょう！');
} else if (temp === 'Saturday' || temp === 'Sunday') {
  console.log('週末です。リラックスしましょう！');
} else {
  console.log('有効な曜日を入力してください。');
}

ChatGPTの回答例（リファクタリング後）：

const day = 'Monday';
const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
const weekends = ['Saturday', 'Sunday'];

if (weekdays.includes(day)) {
  console.log('週の始まりです。頑張りましょう！');
} else if (weekends.includes(day)) {
  console.log('週末です。リラックスしましょう！');
} else {
  console.log('有効な曜日を入力してください。');
}

バグの原因調査

以下のJavaScriptコードは、サイコロを振り続けて6が3回出た時点で停止する想定です。
しかし実際には、6が4回出た時点で停止してしまいます。
正しく動作しない原因を調査し、修正案を提示してください。

let rollCount = 0;
let sixCount = 0;

while (sixCount <= 3) {
  const dice = Math.floor(Math.random() * 6) + 1;
  console.log(dice + 'が出ました。');
  rollCount++;
  if (dice === 6) {
    sixCount++;
  }
}
console.log('総試行回数：' + rollCount + '／6の回数：' + sixCount);

ポイント： <=3 を < 3 に修正すると、6が3回出た時点でループが終了します。
「想定している動作」と「実際の動作」を明記するのがバグ調査のコツです。

テストケースの作成

以下のJavaScriptコードを対象に単体テストを実施します。
正常系・異常系を含めてバグを検出できる単体テストケースを作成してください。
テストケースには「No.」「観点」「入力」「期待値」を含め、表形式で出力してください。

function isValidEmail(email) {
  if (email !== email.trim()) return false;
  const atIndex = email.indexOf('@');
  if (atIndex <= 0) return false;
  const domain = email.slice(atIndex + 1);
  if (domain.indexOf('.') === -1) return false;
  if (domain.endsWith('.')) return false;
  return true;
}

実践：生成AIでショッピングサイトのCSS・jQueryを作ろう

ゴール

既に用意されたHTMLワイヤーフレームに対して、要求定義とペルソナ情報をもとにCSSとjQueryを生成AIで作成すること。

要件

項目	内容
CSS	ペルソナに合った配色、モバイルファースト、レスポンシブ対応
jQuery	商品カードのホバー演出、フェードイン、スティッキーヘッダー
ペルソナ	28歳女性会社員、スマホ中心、検索性・レビュー・配送速度重視

作業手順（プロンプトチェイニング）

ステップ1：基本情報の伝達

## 背景
これからショッピングサイトのワイヤーフレームHTML（既存）に対して、
段階的にCSSとjQueryを作成します。

## 作業手順
以下の3ステップに沿って、対話形式で作業を進めます。
各ステップの命令で指示された内容だけを出力してください。

1. 基本情報の把握
2. CSSの実装
3. jQueryの実装

## ステップ1：基本情報の把握

### 命令
以下のペルソナ情報・フォルダ構成・前提条件を把握してください。

### ペルソナ
- 名前：佐藤 美咲（28歳・女性・会社員）
- 利用端末：スマートフォン中心
- 重視すること：検索しやすさ、レビュー、配送速度、スマホでの見やすさ

### フォルダ構成
/kaden-ec-site
  /index.html
  /products.html
  /detail.html
  /style.css
  /script.js

### 前提条件
- HTMLファイルは既に作成済みです。
- jQuery 3.7.1 をCDNで読み込みます。
- CSSはstyle.css、jQueryはscript.jsに記述します。

ステップ2：CSSの実装

## ステップ2：CSSの実装

### 命令
以下のHTMLに対して、ペルソナに基づいたCSSを作成してください。

### デザイン方針
- モバイルファースト（基本はスマホ幅、768px以上でPC対応）
- 配色：ベース #F8FAFB / メイン #2C5F8A / アクセント #E8523F
- フォント：Noto Sans JP
- ヘッダーはスティッキー（固定表示）
- 検索エリアを目立たせる
- 商品カードはホバーで浮遊するエフェクト
- 角丸と柔らかいシャドウで信頼感を演出

### 入力HTML
【index.htmlの内容を貼り付け】

ステップ3：jQueryの実装

## ステップ3：jQueryの実装

### 命令
以下の機能をjQueryで実装してください。

### 実装する機能
1. スクロール時にヘッダーに .scrolled クラスを付与（影を強調）
2. 商品カードがビューポートに入ったときにフェードイン表示
3. 「トップへ戻る」ボタンの表示切り替えとスムーズスクロール
4. カテゴリナビの横スクロール時にグラデーションマスクを表示
5. 検索フォームフォーカス時のハイライト効果

### 前提条件
- jQuery 3.7.1 を使用
- script.jsファイルに記述
- 初心者でも読めるようコメントを入れること

効果的なプロンプトを作るコツ

具体的な情報を盛り込む — ペルソナ、配色、ブレークポイントなど詳細に指定する
できる限りシンプルに指示する — 1つのプロンプトに多すぎる要求を入れない
例を提供する — CSSの命名規則やコメント形式を例示する
禁止事項よりも推奨事項を優先する — 「〇〇しないで」より「△△にしてください」
段階的に進める — プロンプトチェイニングで1ステップずつ確認する

生成AIを活用するときの注意点

見直し・手直しを必ず行う — 生成されたCSS/jQueryが正しく動作するか必ずブラウザで確認
自分で思考・理解してから使う — コードの意味を理解した上で活用する
依存し過ぎない — あくまで効率化ツールとして使い、基礎スキルの習得は怠らない
セキュリティに注意 — 生成されたコードに脆弱性がないか確認する

まとめ

本記事では、プロンプトエンジニアリングの基礎テクニックと、HTMLワイヤーフレームに対してCSS・jQueryを自動生成するワークフローを紹介しました。

ポイントは以下の3つです：

プロンプトの4要素（命令・文脈・入力・出力） を意識して構造化する
プロンプトチェイニング で段階的にHTML→CSS→jQueryと進める
ペルソナと要求定義 をプロンプトに含めることで、デザイン意図に沿った出力を得る

生成AIはWebデザイン・実装の強力なパートナーになります。ぜひ本記事のテンプレートを活用して、効率的なWeb制作を実践してみてください。

次のステップ

次のステップでは、サイトの目的、想定ユーザー、必要な機能、画面構成などを要求定義書として整理します。その後、要求定義の内容をもとにフロントエンド制作プロンプトを作成し、HTML、CSS、JavaScriptを段階的に生成する流れを解説します。

最終的には、以下のファイルを生成します。

HTML：6ファイル
CSS：1ファイル
JavaScript：1ファイル

生成後は、画面遷移、レスポンシブ表示、検索、絞り込み、カート操作などの動作確認を行い、必要に応じてプロンプトやコードを修正しながら完成度を高めていきます。

要求定義からプロンプト作成、コード生成、動作確認までの一連の流れを通して、生成AIを活用した実践的なフロントエンド制作方法を学んでいきます。

👉 実践】生成AIでHTML/CSS/jQueryを自動生成　要件定義から実装まで】

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up