HTML/CSSで生成AIを使おう！実務直結の活用アイデア集【プロンプト例つき】

あなたはWebサイトのコーディングで生成AIを利用していますか？
私は実務でかなりAIにサポートしてもらっており、作業効率がぐんと上がった実感があります。

実際に生成AIをどんな場面で利用しているのか、具体的なプロンプトも合わせて紹介します！

HTMLの叩きを作ってもらう

1から書こうとするとあまり覚えていないマークアップや、繰り返しが多いマークアップは、最初AIにざっくり作ってもらっています。

form

項目を羅列して叩きを作ってもらっています。
自分で１から書くと、何かの属性が抜けてしまったりしませんか？まとめてAIに書いてもらった方が早いです。

プロンプト例：

お問い合わせフォームのHTMLを作って。

- 名前（必須）
- メール（必須）
- 問い合わせ種類（セレクトボックス）
- プライバシーポリシーの同意チェック
- 送信ボタン

出力例：

<form action="#" method="post">
  <div>
      <label for="name">名前（必須）</label>
      <input type="text" id="name" name="name" required>
  </div>

  <div>
      <label for="email">メール（必須）</label>
      <input type="email" id="email" name="email" required>
  </div>

  <div>
      <label for="type">問い合わせ種類</label>
      <select id="type" name="type">
          <option value="select1">サービスについて</option>
          <option value="select2">採用について</option>
          <option value="select3">その他</option>
      </select>
  </div>

  <div>
      <input type="checkbox" id="policy" name="policy" required>
      <label for="policy">プライバシーポリシーに同意する</label>
  </div>

  <button type="submit">送信</button>
</form>

table

複数セル分タグを複製する作業を短縮しています。
中身を空っぽにして作ってもらうことで、あとはタグの中に文字を入れるだけで済みます。

プロンプト例：

5列3行のテーブルを作って。
一番上の行と、一番左の列が見出しです

出力例：

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

コンポーネントの拡張・パターンの洗い出し

ボタンのバリエーション違いの作成

サイズ・色・アイコンのありなしなど、複数パターンがあるmixinを作る時に使っています。
１つ自分で書いてから、パターンを投げて編集してもらうことが多いです。

プロンプト例：

サイズがS、M、L
色がプライマリー・セカンダリー
afterのアイコンあり・なし
のパターンがあります。拡張して

@mixin button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  &:after {
    font-family: 'Material Symbols Outlined';
    content: "arrow_forward_ios";
    font-weight: 400;
  }
}

出力例：

@mixin button($size: M, $color: primary, $hasIcon: true) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;

  @if $size == S {
    padding: 4px 8px;
    font-size: 12px;
  } @else if $size == L {
    padding: 12px 24px;
    font-size: 18px;
  } @else {
    padding: 8px 16px;
    font-size: 14px;
  }

  @if $color == secondary {
    background-color: #6c757d;
    color: #fff;
  } @else {
    background-color: #007bff;
    color: #fff;
  }

  @if $hasIcon {
    &:after {
      font-family: 'Material Symbols Outlined';
      content: "arrow_forward_ios";
      font-weight: 400;
      margin-left: 8px;
    }
  }
}

AIに１から書いてもらうことはあまりしません。
デザインをAIに伝える手間の方が多いのと、デザイン調整（paddingの値など）は、あとから修正する方が面倒だと感じるからです。
また、サンプルコードの編集漏れを避けることもできます。

全バリエーションの表示チェック

とりうる全パターンのHTMLを書いてもらって、表示チェックをしています。
パターンの抜け漏れがないようにしたいためです。
こういった作業は、AIがいるとありがたいなと感じます。

プロンプト例：

表示検証がしたいので、とりうる全パターンのHTMLを書いて

出力例：

<button class="btn-s-primary-icon">S / Primary / Icon</button>
<button class="btn-s-primary-noicon">S / Primary / No Icon</button>
<button class="btn-s-secondary-icon">S / Secondary / Icon</button>
<button class="btn-s-secondary-noicon">S / Secondary / No Icon</button>

<button class="btn-m-primary-icon">M / Primary / Icon</button>
<button class="btn-m-primary-noicon">M / Primary / No Icon</button>
<button class="btn-m-secondary-icon">M / Secondary / Icon</button>
<button class="btn-m-secondary-noicon">M / Secondary / No Icon</button>

<button class="btn-l-primary-icon">L / Primary / Icon</button>
<button class="btn-l-primary-noicon">L / Primary / No Icon</button>
<button class="btn-l-secondary-icon">L / Secondary / Icon</button>
<button class="btn-l-secondary-noicon">L / Secondary / No Icon</button>

リファクタリング

何回も同じことを書いてるな・同じ作業をしているな、と思った時に利用しています。

計算

固定値を相対値に変える時は、AIにお願いしています。

プロンプト例：

画面幅375pxの時の↓サイズを最大のpxとして、小さくなったら拡大縮小するようにして

①width 32px
②width 67px
③width 45px
④width 67px
⑤width 32px

出力例：

.item-1 {
  width: 8.533vw;
  max-width: 32px;
}

.item-2 {
  width: 17.867vw;
  max-width: 67px;
}

.item-3 {
  width: 12vw;
  max-width: 45px;
}

.item-4 {
  width: 17.867vw;
  max-width: 67px;
}

.item-5 {
  width: 8.533vw;
  max-width: 32px;
}

まとめて作成してくれるので、計算をしなくても良いです。

単位の変換

プロンプト例：

1rem→10pxです。
rem→pxに置き換えて。

p {
  font-size: 1.2rem;
}

出力例：

p {
  font-size: 12px;
}

単純作業はどんどん任せるのが良いですね！

共通して送っているプロンプト

class・コメントはつけなくて良いです。 と伝えることが多いです。

• 自分でclass名を振りたい
  • AIに送っていない場所の文脈をふまえて決めたいため
  • 文脈までをAIに説明して往復する時間があれば、自分が書いた方が早い
• コメントを見ない
  • 自明なことが多いため
  • 実際にコミットしない文字を消す作業が増えるため

まとめ

いかがでしたでしょうか？

AIのコピペだとしても、自分が書いたコードです。
責任持って世に出すためにも、AIが出したアウトプットを評価できるスキルは身につけておきましょう。

Web開発のご相談は株式会社レクトへ

Re:ProSメディアを運営している株式会社レクトでは、Webサイトの開発をお受けしております。
開発等の相談 | 株式会社レクトからお問い合わせください。