はじめまして。「Web迷子レスキュー記録帳」を運営している、はるの（@web_haruno）です。
今回の記事では、私自身が「ChatGPTのせいでWeb制作を挫折しかけた」経験を正直にお話しします。
でも今は頼れる相棒になった——そんな転機についてまとめました。
ChatGPTで挫折しかけた理由
Web制作を学び始めた頃、私は「ChatGPTを使えば効率的に学習できる」と思っていました。
でも、実際に触れてみると、便利さ以上に混乱が大きかったのです。
AIが勝手にコードを書いてくれるからこそ混乱
ChatGPTは数秒でコードを書いてくれます。
しかし当時の私には「なぜこのコードで動いているのか」が理解できませんでした。
教材で学んでいるHTMLやCSSの基礎と、AIが提示する答えがかみ合わず、混乱が深まる一方。
「これで正しいのかな？」と疑問を抱えたままコピペして動かす……そんな学習は不安を増幅させるだけでした。
はるの私がお願いするまでコードは勝手に書かないで、と指示することも効果的でした！
間違ったコードに気づけなかった
さらに大きな問題は、ChatGPTの回答がときどき間違っていることです。
当時の私は知識が浅く、その間違いに気づけませんでした。
学習の順序が崩れる
本来であればHTML・CSSの基礎を理解してから進むべきところを、AIのコードでショートカットしてしまいました。
これでは土台がないまま家を建てているようなもの。
当然のようにバグにぶつかり、「もう無理かもしれない」と思ったのです。
はるのChatGPTが書いたコードの間違いに気づけないから、なんで？なんで？が増幅した感じでした……。焦りばかりが大きくなっちゃったんです。
それでもChatGPTが相棒になった理由
そんな私ですが、今はChatGPTを「頼れる相棒」として使っています。
大きな転機になったのは、「ChatGPTをどう位置づけるか」を変えたことでした。
質問の整理役として使う
以前は「正解をくれる先生」として頼っていました。
でも今は「質問を整理してくれる相棒」として使っています。
自分の考えを言語化するために投げかけると、論点を整理しやすいのです。
コードの雛形を作るツール
ChatGPTに「このような構造を作りたい」と伝えると、骨組みとなるコードを出してくれます。
それをそのまま使うのではなく、自分で修正・検証しながら理解する。
この流れに変えてから、知識が定着するようになりました。
孤独な学習の伴走役
独学は孤独です。
疑問を抱えたまま何時間も悩むと、心が折れそうになるもの。
ChatGPTは100％正しいわけではないけれど、「誰かに話しかけられる」こと自体が支えになりました。
初心者がChatGPTをうまく使うコツ
ここからは、実際に私が取り入れているChatGPT活用の工夫を紹介します。
コードはコピペせず理解しながら書く
ChatGPTの回答をそのまま使うのではなく、文章とコードを交互に見ながら学ぶのがおすすめです。
例えば自己紹介ページを作る場合——まずHTMLの文章を見ます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己紹介</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="profile">
<h1>はるのです</h1>
<p>Web制作を学び直している途中です。ChatGPTと一緒に成長中！</p>
</section>
</body>
</html>次にCSSでデザインを調整します。
body {
font-family: sans-serif;
background: #f9f9f9;
color: #333;
text-align: center;
padding: 50px;
}
.profile {
background: #fff;
border: 1px solid #ddd;
padding: 20px;
display: inline-block;
border-radius: 8px;
}このようにコードを少し書いては、どうしてこのCSSなのか、なんで？なんで？と続けていくと、「なぜこの指定をしているのか」が整理できます。
間違いを見抜くために検証する
ChatGPTの出力は必ずしも正解ではありません。
エラーや動作の違和感があれば、Chromeの検証ツールやVS Codeで確認する習慣をつけましょう。
AIの言葉をうのみにせず、自分で検証する力が大切です。
プロンプトはできるだけ細かく
何をどうして欲しい、求める結果はなんなのか、できるだけ細かくChatGPTに伝えることが大切だと気づきました。
私だってクライアントから受注したときは、できるだけ細かくヒアリングします。
ChatGPTだって同じ。私が入力したことがすべてなんです。理解してもらうには細かく伝えないとですよね。
AIを「先生」ではなく「相棒」として扱う
ChatGPTを万能の先生と考えると、期待外れに感じてしまいます。
「一緒に考える相棒」として使えば、間違いすら学びの材料になります。
完璧ではないからこそ、学習者にとってちょうどよい刺激になるのです。
はるのちょっとこのコード違うんじゃない？私はこうだと思うんだけど、ChatGPTはどう思う？
なんて時々問いかけています。
実際に作ってみた体験から
自己紹介ページの例をもう少し広げてみます。
たとえば写真を追加する場合、HTMLには以下のように書きます。
<section class="profile">
<img src="me.jpg" alt="はるのの写真" class="profile-img">
<h1>はるのです</h1>
<p>Web制作を学び直している途中です。ChatGPTと一緒に成長中！</p>
</section>そしてCSS側で画像を丸く整えます。
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
}このように、ChatGPTの回答を「素材」として受け取り、自分なりに加えていくと理解が深まります。
単なるコピペでは得られなかった達成感も味わえますよ。
まとめ
- ChatGPTに振り回されて、私は一度は挫折しかけた
- でも「先生」ではなく「相棒」として使うようにしたら学習が続けられた
- コードをコピペするのではなく、理解しながら修正・検証することが大切
AIに頼るのではなく、一緒に考える。
そのスタンスがあれば、ChatGPTは挫折を防ぎ、むしろ成長を支えてくれる頼もしい存在になります。
今回は「ChatGPTに振り回されて挫折しかけた体験」をもとに書きました。
同じように迷っている方にとって、少しでも参考になればうれしいです。
より多くの学習Tipsやつまづきポイントの解説は、このブログ「Web迷子レスキュー記録帳」で発信しています。
ぜひ他の記事もチェックしてみてくださいね。