Web制作を学んでいると、「このコード、どこが間違っているの？」
と悩む場面が必ず来ますよね。
実は、その一次チェックはAIの得意分野です。
この回では、練習用サイトのHTMLとCSSを行番号つきで添削してもらった結果と、自分のポートフォリオサイトを診断してもらった結果を紹介します。
Web制作を学んでいる方は、ぜひ読んで下さい！
コードのチェックは、AIに向いている
Web制作の仕事をしたい方に、知っておいてほしいことがあります。
コードのチェックや添削は、AIに頼んだほうが早いかもしれません。
私は、メンター以外に、Web制作の職業訓練も受けていました。
ソースコードのチェックは、プロでも、とても時間がかかります。
そのため、生徒からの質問が多いと、返事が来るまでに時間がかかっていました。
ところが、生成AIをよく使うようになった私は、あることに気づきました。
ソースコードの最初のチェックは、AIに任せるほうがよいのではないか、ということです。
HTMLやCSSは、規則性のある言語です。
コードは、規則に沿って書かなければいけません。
そして、AIは、規則性のあるものをチェックするのが大得意です。
人間と同じ水準で見抜くのは難しいかもしれませんが、最初のチェックには十分使えます。
HTMLの添削：行数を教えてもらう
以前はサイト全体を添削してもらいましたが、今回はソースコードそのもののチェックです。
ファイルを読み込ませるとエラーになることがあるので、ソースコードを直接貼り付けて入力しました。
練習で作ったWebサイトがあります。
HTMLをテキストで貼り付けるので、直すべき箇所をすべて指摘してください。
直すべき行の番号も教えてください。
具体的かつ明確に教えてください。
ワンポイントの助言もお願いします。
「行数を教えてください」と頼むと、どこを直せばよいか、すぐに分かります。
指摘は、次のとおりです。
- 28行目：h1タグの中にpタグが入っている。h1は見出しなので、通常はテキストだけにする。spanタグなどを検討する（メンターにも指摘された点）
- 64行目ほか：「</br>」は正しくない形式。brは自己終了タグなので、閉じタグは不要（VSCodeで自動変換されたものでした）
- 172行目：リンクにする画像のimgタグに、alt属性を付けてアクセシビリティを高める
- 191行目：コメントアウトされたXのリンクは、使わないなら削除する
ワンポイントアドバイスは、セマンティックなマークアップでした。
見出しタグの階層を適切に使い（h1は1ページに1つ）、リストにはul、olとliを使い、section、article、aside、navなどで意味的に区分けし、alt属性などでアクセシビリティを高めます。
私は、レイアウトを整えるために、brタグを使っている箇所があります。
本来は、CSSのmarginやpaddingで調整しなければいけません。
ただ、これはAIが指摘してくれませんでした。
明らかな間違いは指摘してくれるので、AIの学習データが増えて、精度が上がることに期待しましょう。
CSSの添削
CSSも、同じ方法でレビューしてもらいました。
指摘は、次のとおりです。
- グローバルスタイルとリセット：全体セレクタ「*」でmarginとpaddingをリセットしているのに、後から個別の要素にも同様のリセットをかけている。冗長なので、後者は削除する
- メディアクエリの整理：同じブレークポイントのメディアクエリが、複数の場所に散らばっている。1つのブロックにまとめて、見やすくする
- コメントアウトされたコード：不要なら削除する
- セレクタの一貫性：特定のクラスのスタイルが複数の場所に分かれている。近くに置いて、まとめる
- 未使用のスタイルの確認：クラス名のタイプミスの疑いがある
- font-styleの値：「Italic」は小文字の「italic」が慣習
ワンポイントアドバイスは、CSSのカスケードと詳細度（特異性）でした。
クラスセレクタを中心にして、IDセレクタは再利用するスタイルには避ける。
body全体にフォントや色を定義し、必要な箇所だけ具体的なセレクタで上書きする。
フォントサイズなどの継承を使って、重複を避ける。
Web制作を勉強中の方は、ぜひ試してみて下さい。
ただし、案件のデータの取り扱いには、注意が必要です。
学習に使われない設定にするか、個人情報や機密データを別の文字に置き換えてから質問しましょう。
ポートフォリオサイトを添削してもらう
最近は、Web制作を副業にして頑張る方が増えています。
私も、Web制作の案件を取るために、プロのWebデザイナーさんにメンターになってもらい、ポートフォリオサイトを作りました。
残念ながら、現時点で案件は獲得できていませんが。
Web制作のスクールやオンライン講座は充実していて、お金さえかければ、いくらでも学べます。
ただ、案件が取れるかも分からないのに、高額な教材にお金は出せない、という方も多いですよね。
プロのメンターにアドバイスをもらうのがいちばんですが、お金も時間もかかります。
ChatGPT-4の添削は、精度に難はあるものの、聞きたいときにすぐ質問できる強みがあります。
しかも、何度質問しても月額20ドルの定額です。
日常の学習の疑問は、ChatGPTに聞き、ポートフォリオの最終調整や実際の案件は、メンターや先輩に相談する。
（原稿の執筆時の話です。2026年10月時点でもPlusは月20ドルですが、GPT-4は選べません）
AIと人間の特性を見極めながら、効率よくスキルアップしましょう。
公開中のポートフォリオサイトから個人情報を取り除いたindex.htmlとstyle.cssをアップロードして、添削してもらいました。
Web制作の仕事を取りたいフリーランスです。
プロのデザイナーさんの助言を受けながら、ポートフォリオサイトを作りました。
案件に提案するとき、クライアントに見せる必要があります。
最終的に手直ししたいので、添削をお願いします。
【添削の注意点】index.htmlとstyle.cssの両方を見てから添削すること。
サイトの良い点と改善点を、2〜3点ずつ箇条書きで。
その後に理由も。
改善が必要なら、改善すべき箇所を明確に。
診断の結果
日本語のプロンプトを投げたところ、英語で回答されたので、日本語に訳してもらいました。
良い点は、レスポンシブデザイン（メディアクエリが使われていて、スマホなどの画面サイズが考慮されている）と、構造的でクリーンなコード（HTMLとCSSが、明確なセクションと命名規則で整理され、保守しやすい）です。
改善点は、メタタグとSEO（より詳細なdescriptionや、具体的なkeywordsを入れる）、タイポグラフィとデザインの一貫性（日本語サイトに合うNoto Sans JPを使っているのはよい選択だが、サイト全体で一貫させ、配色がブランドやメッセージと合っているかを見る）でした。
具体的な提案は、ランディングページの強化（魅力的なヒーローセクションと、説得力のある行動喚起を加える）、ナビゲーションの改善（直感的に使えるようにする）、作品の効果的な展示（ギャラリーやカルーセルを使い、ケーススタディや詳細な説明にリンクする）です。
せっかくなので、コード固有の提案も頼みました。
HTMLは、header、nav、main、footerなどのセマンティックなタグを使う、画像にalt属性を付ける、リンクやボタンにaria-labelなどを付けて、アクセシビリティを高める、titleとmetaを見直してSEOを強化する。
CSSは、フォントサイズ、配色、余白に一貫性があるかを確認し、メディアクエリで微調整する、不要なルールやコメントを削除し、font-display: swap;で読み込み時の表示の遅れを減らす。
aria-label属性は、視覚的には表示されませんが、障害のある方が読み上げソフトなどのアクセシビリティ支援技術を使うときに役立つ属性です。
私はまったく知らない知識で、勉強になりました。
おすすめの使い方
- 分からないことがあったら、ChatGPTに質問する
- 自作のサイトに問題がないかを、点検してもらう
- サイトの強みと弱みを、指摘してもらう
最終的には、スクールやメンターの指導がベストです。
ただ、エラーが出て、すぐ解消したいときは、ChatGPTに頼ってもよいでしょう。
これまでは、分からないことをWeb検索で調べていましたが、キーワードがうまく引っかからず、時間がかかることもありました。
これからはChatGPTが味方になってくれます。