この章では、Web制作のコーディング作業でAIをどう使うかを学びます。
AIは、HTML構造の相談、CSS設計、JavaScript実装、レスポンシブ対応、アクセシビリティ確認などに使えます。
ただし、生成されたコードをそのまま使うのではなく、既存の設計や目的に合うかを確認することが大切です。
HTML構造を相談する
HTMLを書く前に、セクションの構造をAIに相談できます。
採用サイトの「社員インタビュー一覧」セクションを作ります。
次の情報を表示します。
- 社員写真
- 名前
- 職種
- 入社年
- 短いコメント
- 詳細ページへのリンク
HTMLの意味が自然になるように、section、ul、li、articleなどを使った構造案を出してください。AIにHTMLを作らせるときは、見た目ではなく情報の意味を伝えます。
HTML構造が自然だと、CSSやJavaScriptも書きやすくなります。
CSS設計を相談する
CSSでは、レイアウト、余白、class名、レスポンシブ対応などを相談できます。
カード一覧をCSS Gridで作りたいです。
条件:
- PCでは3列
- タブレットでは2列
- スマホでは1列
- gapは24px
- 画像は16:9
- class名は既存のcard-list、card、card-image、card-titleを使う
HTMLは変えずにCSSだけ出してください。制約を入れると、AIが勝手にHTMLを変更するのを防ぎやすくなります。
JavaScript実装を補助してもらう
JavaScriptでは、UIの開閉、classの切り替え、フォームチェックなどの実装を相談できます。
複数設置できるアコーディオンを作りたいです。
条件:
- HTMLはdetailsとsummaryを使う
- JavaScriptは基本的に不要にしたい
- 1つだけ開く仕様にする場合だけJavaScriptを使う
- アクセシビリティ上の注意点も教えてくださいAIにコードを書かせる前に、そもそもJavaScriptが必要かを相談するのも大切です。
HTMLやCSSだけで自然に実現できるものは、無理にJavaScriptを使わない方が保守しやすくなります。
レスポンシブ対応を相談する
レスポンシブ対応では、崩れやすい箇所をAIに確認してもらえます。
次のHTMLとCSSを見て、スマホ幅で崩れそうな箇所を指摘してください。
観点:
- 横スクロールが出そうな指定
- 固定幅になっている要素
- 文字が詰まりそうな箇所
- 画像の比率が崩れそうな箇所
まず問題点だけ出してください。AIにいきなり修正させるのではなく、最初は問題点を洗い出してもらうと確認しやすくなります。
アクセシビリティを確認してもらう
AIは、アクセシビリティの観点を確認する補助にも使えます。
次のモーダル実装について、アクセシビリティ上の問題がないか確認してください。
観点:
- buttonとaの使い分け
- キーボード操作
- フォーカス管理
- aria属性
- dialogタグを使えるか
問題点と改善案を分けて出してください。アクセシビリティは、チェック項目が多いため、AIに観点を出してもらうと抜け漏れを減らしやすくなります。
ただし、最終的にはブラウザやキーボード操作で自分でも確認します。
既存コードを読み解いてもらう
既存案件では、自分が書いたコードではないものを読むことがあります。
AIには、既存コードの役割を説明してもらえます。
次のJavaScriptが何をしているか、処理の流れに沿って説明してください。
そのあと、Web制作初心者が注意すべきポイントを3つ挙げてください。コードを理解する前に修正すると、別の部分を壊すことがあります。
まずは「何をしているコードか」を整理してから修正します。
リファクタリングしてもらう
コードが長くなった時は、AIに整理案を出してもらえます。
次のJavaScriptを、動作を変えずに読みやすく整理したいです。
条件:
- 関数名をわかりやすくする
- 早期returnを使ってよい
- 複数設置に対応する
- 変更点を説明する
- 既存のclass名は変えないリファクタリングでは、見た目や動作を変えないことが重要です。
AIに依頼するときも、「動作を変えずに」と明記します。
実装方針を複数案出してもらう
AIは、複数の実装方針を比較する時にも役立ちます。
ハンバーガーメニューを作ります。
次の3案を比較してください。
- divとbuttonで自作する
- dialogタグを使う
- 既存ライブラリを使う
比較項目:
- 実装の簡単さ
- アクセシビリティ
- 保守性
- Web制作案件での使いやすさ複数案を比較すると、なぜその実装を選ぶのか説明しやすくなります。
生成コードを確認する習慣
AIが出したコードは、必ず確認します。
確認するポイントは次の通りです。
- 実際に動くか
- 既存HTMLやCSSと合っているか
- class名が勝手に変わっていないか
- 不要に複雑になっていないか
- スマホ幅で崩れないか
- キーボード操作できるか
- エラーが出ていないか
この章のまとめ
- AIは、HTML構造、CSS設計、JavaScript実装、レビューに使える
- 既存案件では、変更範囲と制約を明確に伝える
- いきなり修正させず、問題点や方針を先に出してもらうと安全
- 生成コードは必ず自分で動作確認する
- AIを使っても、最終的な品質管理は人間が行う