HTML/CSS初心者がAIにコーディングを手伝ってもらうコツと注意点

AIを使ってコーディングをするとき、生成されたコードが上手く動かない。直してもらおうとすればする程、おかしくなっていく・・なんてことはありませんか？

この原因の多くは、「依頼の出し方（仕様の渡し方）」にあります。
今回は、HTML/CSS初心者がAIを上手に使い、手戻りを減らしながらスキルも伸ばすための実践的なコツを整理します。

AIは「正解当て」より「仕様どおりに組み立て」が得意

AIに期待しがちなのは、“画像を見せたら正解のHTML/CSSを当ててくれる” という使い方です。ただ、AIが強いのは「察すること」ではなく、「明文化された要件に沿って構築すること」です。

×「いい感じに作って」
○「この条件を満たすように組んで」

ここが切り替わると、精度も学習効率も一気に上がります。

最初にAIへ渡す「仕様テンプレ」を固定する

AIが迷う原因の9割は、要件が曖昧なことです。毎回これを埋めて投げると精度が安定します。

【仕様テンプレ】

目的：例）LPのFV / 料金表 / カードUI
想定環境：静的HTML / WordPress（テーマ名：◯◯）/ 既存CSSあり・なし
ブレイクポイント：例）<768px、768–1024、>1024
レイアウト要件：横並び→縦、可変、中央揃え、等間隔、最大幅、余白
タイポ：フォント、基本サイズ、行間、見出し階層
画像：比率固定/トリミング/cover、レスポンシブの扱い
NG：position多用禁止、固定px禁止、JS禁止、など

※“要件が明文化された案件”が得意なのは、AIも人間も同じです。

依頼は「完成品」より「差分・1点突破」で頼む

初心者がハマりやすいのは「全部作って」→修正地獄の流れです。おすすめは、目的を1つに絞って依頼すること。

【プロンプトの良い例】

この見出しと金額を、狭い幅のときだけ2段にしたい。CSSだけで
この余白が崩れる原因を特定して、最小修正で直して
このHTML構造を崩さずに、中央揃えにしたい

AIは“完成品ジェネレーター”よりも、デバッグ役として使ったほうが成果が安定します。

WordPressの場合は「制約」を先に宣言する【重要】

WordPressはテーマやブロックエディタの影響で、AIの提案がそのまま刺さらないことがよくあります。先に制約を宣言すると事故が減ります。

【先に言っておくと事故が減る制約】

「空要素に頼る案はNG」
テーマCSSの影響を伝える（例、テーマCSSが入っている。pのmargin等の影響を考慮して）
使えるクラス名ルールを伝える（BEM/命名規則）
既に display:flex / grid を使っている、など

コードを貼るときは「最小再現」で

AIに貼る素材が多いほど丁寧に見えますが、実は逆に迷いやすくなります。崩れている部分だけを最小構成で貼るのが勝ち筋です。

HTML：該当セクションのみ
CSS：該当セレクタ＋影響しそうな親要素（display/width/gap/position/font-size/line-height など）

さらに、「期待結果」と「現状結果」を一文で添えるだけで精度が上がります。

例）

期待：タイトルと価格が同じ行
現状：価格だけ改行される

AIの回答は“そのまま採用”せず、チェック項目で検品する

AIは誤ったことを自信満々に言ってくることもあります。なので、最低限ここだけ検品すると安全です。

【危険サイン（要チェック）】

固定高さ（例：height: 300px）が入っていないか
無理なposition（absoluteで無理やり配置）になっていないか
マジックナンバー（謎の top:-37px など）が増えていないか
モバイルで崩れないか（狭幅で検証）
アクセシビリティ：見出し階層、画像alt、クリック領域

“魔改造CSS”は短期的に動いても、後で自分の首を絞めます。

AIに「説明責任」を求める（学習が加速する）

ここまでの説明で、分からない用語がたくさんあった方には特におすすめしたいのが、
初心者のうちは、生成コードを暗記するより理由を言語化してもらうこと。おすすめの聞き方はこちら。

このCSSでレイアウトが成立する理由を、ボックスモデルとflex/gridの観点で説明して
代替案を2つ。メリット/デメリットも
このコードの壊れやすいポイントは？

AIは“講師”にすると強いです。

よくある初心者×AIの事故パターン（先回り）

gridとflexを混ぜすぎ：どっちで支配するか決める
“中央揃え”の勘違い：text-align / margin:0 auto / place-items は別物
行間・余白のズレ：line-height と margin（特にp）を疑う
画像の崩れ：width:100% + height:auto、必要なら object-fit:cover
スマホで詰む：長い日本語、white-space、overflow-wrap、min-width を確認

実務で使える「AIへの指示例」（コピペOK）

HTMLは変更しないで、CSSだけで解決して
ブロックエディタの制約で空要素は消える。空spanは禁止
狭い幅では“タイトル→リーダー→価格”を2段にしたい。崩れる条件も説明して
既存CSSに影響を与えないよう、セレクタは .c-priceList 配下に限定して
PC/スマホ両方の最終HTML/CSSを提示し、意図をコメントで残して

まとめ

AIはHTML/CSS初心者にとって非常に強力なサポーターです。ただし、成果を安定させるコツは一貫しています。

仕様を明文化する
依頼を1点突破にする
最小再現で渡す
魔改造を検品する
理由を説明させて学ぶ

また、5日間チャレンジでもお伝えしているように、コードは書けなくても良いですが理解している必要があります。
そうでなければ、適切な指示を出すことも、出てきたコードが正しいか確認することもできません。
まずはコードを出してもらう。それでも良いです。
ただし、内容が分からないものが出てきたときは、解説を求めて自分の肥やしにしながら進めてください。