AIでコーディングがぐっと速くなった今だからこそ、公開前の「人の目によるチェック」が欠かせません。
AIが書いたコードで見落としがちな落とし穴を、Web制作の現場目線で9項目にまとめました。
ClaudeやChatGPTでコードを書いている方は、公開前のチェックリストとしてぜひ活用してください。
AIのコードは「それっぽく動く」から危ない
ここ最近、Web制作の現場でもAIを使ったコーディングがすっかり当たり前になりました。
私も普段から、コーディングにはClaude（Claude Code）、ちょっとした調べものや文章のたたき台にはChatGPT、という感じで使い分けています。
正直、これまで40時間ほどかかっていた作業が、10時間以内に収まるくらいまで短縮できるようになりました。
ただ、使い始めた頃にいちばん不安だったのが「このコード、本当にちゃんと動くの？」ということ。
AIのコードは見た目がとても整っていて、一見すると完璧に見えます。だからこそ、パッと見で「大丈夫そう」と思ってしまい、確認が甘くなりがちなんです。
AIはあくまで優秀なアシスタント。公開するコードの責任は、最終的に私たち制作者にあります。
AIコード品質チェック9項目
実際に動くか確認する
まずは基本中の基本、「本当に動くか」の確認です。
AIは、実在しない関数やプロパティを、さも当然のように書いてくることがあります。また、JavaScriptのエラーは画面上では気づきにくく、裏でこっそりエラーが出ていることも。
ブラウザの開発者ツール（Chromeなら F12キー）でコンソールを開き、エラーが出ていないかを必ずチェックしましょう。
ボタンを押す、フォームを送信する、メニューを開閉するなど、実際に手を動かして一通り操作してみるのが一番確実です。
古い書き方が混ざっていないか
AIは過去の膨大なコードから学習しているので、今ではあまり使われない古い書き方や、非推奨のコードが混ざることがあります。
例えば、<center>タグや<font>タグのような廃止されたHTMLタグ、今は不要になったブラウザ向けの記述などですね。
動くことは動くので見落としやすいのですが、将来的に表示が崩れる原因にもなります。
気になる書き方があったら、MDNなどの公式リファレンスで確認するクセをつけておくと安心です。
参考：HTML 要素リファレンス – MDN Web Docs
altやlabelが抜けていないか
AIが書いたHTMLで意外と多いのが、画像のalt属性やフォームのlabelの抜けです。
<label for="email">メールアドレス</label><input type="email" id="email" name="email">このように、labelのfor属性とinputのid属性をセットにしておくと、ラベルをクリックしても入力欄が選択されるようになり、読み上げソフトにも正しく伝わります。
altについては、装飾画像には空のalt、情報を伝える画像には説明を入れるのが基本です。
AIに「altも入れて」と頼めば書いてくれますが、画像の中身までは分かっていないことも多いので、内容が合っているかは自分の目で確認しましょう。
見出し構造とHTMLの意味づけ
AIのコードは、見た目は整っていても中身がdivだらけ、ということがよくあります。
header、nav、main、footerなどの意味を持ったタグが使われているか、見出し（h1〜h6）の順番がバラバラになっていないか、h1が1ページに複数入っていないかをチェックしましょう。
見出し構造は、検索エンジンがページの内容を理解するための大事な手がかりです。見た目が同じでも、HTMLの構造次第でSEOの評価は変わってきます。
レスポンシブ・ブラウザ毎の表示確認
AIはコードを書くことはできても、実際の画面を見て確認しているわけではありません。
PCでは綺麗に見えても、スマホで横スクロールが出てしまったり、文字が重なってしまったりすることがあります。
PC・スマホの両方で、主要ブラウザでの見え方を必ず確認しましょう。
ブラウザ毎のチェック方法は、公開前の品質チェック記事で詳しく紹介しています。
不要なコード・CSSの重複
AIに何度も修正をお願いしていると、使われなくなったCSSや、同じ指定の重複がどんどん溜まっていきます。
一つひとつは小さくても、積み重なるとファイルが重くなり、表示速度にも影響します。
修正がひと段落したら、「このコード、今も使ってる？」と見直す時間を取るのがおすすめです。
GoogleのPageSpeed Insightsで速度を確認しながら、不要なコードは削除しておきましょう。
WordPressのセキュリティ対策
WordPressのテーマやプラグインのコードをAIに書いてもらう場合は、セキュリティ面のチェックが特に重要です。
<?php echo esc_html( $title ); ?><a href="<?php echo esc_url( $link ); ?>">リンク</a>画面に出力する値は、esc_html()やesc_url()などでエスケープするのが基本です。
これが抜けていると、悪意のあるコードを埋め込まれる危険があります。
また、APIキーやパスワードがコードに直書きされていないかも必ず確認しましょう。AIは動かすことを優先して、こうした情報をそのまま書いてしまうことがあります。
参考：Escaping Data – WordPress Developer Resources
既存コードとの整合性
AIは、あなたのサイトのルールまでは知りません。
クラス名の付け方がサイト内でバラバラになっていたり、既存のCSSと同じクラス名を使って別のパーツの表示が崩れてしまったり、ということもあります。
Claude Codeのようにプロジェクトのファイルを読んでくれるツールなら多少は防げますが、それでも追加したコードが他のページに影響していないかは、一通り確認しておくと安心です。
AIにクライアント情報を渡していないか
最後はコードそのものではありませんが、とても大切なポイントです。
AIに相談するとき、クライアント様のサーバー情報やパスワード、公開前の情報などをそのまま貼り付けていませんか？
ツールや設定によっては、入力した内容がAIの学習に使われる場合もあります。
利用しているAIツールのデータの扱いや設定を確認し、機密情報は伏せ字にしてから相談するなど、取り扱いには十分注意しましょう。
AIは最強のアシスタント、最終チェックは自分の目で
AIのおかげで、コーディングのスピードは本当に劇的に変わりました。
私自身、これまで40時間かかっていた作業が10時間以内に収まるようになり、その分をデザインの調整やクライアント様とのやり取りに使えるようになっています。
一方で、使い始めた頃は「このコード、本当に動くのかな…」と不安で、結局一行ずつ確認していたこともありました。
でも今振り返ると、その確認の時間こそが、AIを安心して使うための土台になっていたと思います。
AIが書いたコードでも、公開すればそれは「あなたが作ったサイト」です。
今回の9項目を参考に、スピードと品質を両立した、信頼されるサイトづくりを目指していきましょう！
