こんにちは、かたすけです！
「独学でWeb制作を勉強しているけれど、エラーが解決できなくて挫折しそう…」
「コードの意味がわからなくて、誰かに質問したいけど周りに聞ける人がいない」
そんな悩みを抱えていませんか？
僕も大学でプログラミングを学んでいますが、学習を始めたばかりの頃は、たった一つのエラーで数時間も止まってしまうことがよくありました。独学の一番の敵は、「わからないことをすぐに聞ける相手がいないこと」なんですよね。
でも、今は時代が変わりました。私たちには「AI」という最強の味方がいます。
今回は、ChatGPTやGeminiといったAIツールを、「24時間365日付き合ってくれる自分専用のメンター（先生）」にしてしまう活用術をご紹介します。
これを読めば、あなたの学習スピードは間違いなく2倍、3倍に加速します。「AIなんて難しそう」と思っている方にこそ読んでほしい、コピペで使えるプロンプトも紹介しますので、ぜひ最後までご覧ください！
AIを上手に使う力は、今の時代には必要不可欠ですよね！
Web制作初心者がAIをメンターにすべき3つの理由
なぜ、初心者の学習にAIが最適なのでしょうか？
現役大学生の視点から、AIを導入するメリットを3つにまとめました。
1. 24時間365日、即レスで解決してくれる
独学で一番辛いのは、エラーが出た時です。
Googleで検索しても、自分の状況にぴったりの答えが見つかるとは限りません。質問サイト（TeratailやStack Overflowなど）で質問しても、回答が来るまでには時間がかかりますし、必ず回答がもらえるとも限りません。
しかし、AIは違います。
深夜2時でも、早朝5時でも、質問を投げれば数秒で回答が返ってきます。
学習の熱が冷めないうちに疑問を解決できるスピード感は、一度体験すると手放せません。
2. 「こんなこと聞いてもいいのかな？」という遠慮が不要
人間相手だと、どうしても気を使ってしまいますよね。
「こんな初歩的なことを聞いたら怒られるかな？」「さっきも同じことを聞いたばかりだしな…」と躊躇してしまい、結局わかったふりをして進めてしまう。これが一番の挫折の原因です。
AIには感情がありません（今のところは！）。
同じことを100回聞いても、どれだけ初歩的な質問をしても、AIは絶対に怒りません。
「<code><div></code>と<code><span></code>の違いって何？」なんて、今さら人には聞きにくい質問も、AIなら堂々と聞くことができます。
3. あなたのレベルに合わせて解説してくれる
技術書やドキュメント（MDNなど）は正確ですが、初心者には言葉が難しすぎることがあります。
AIなら、「小学生でもわかるように教えて」「野球に例えて教えて」といったリクエストが可能です。あなたの現在の知識レベルに合わせて、言葉を選んで解説してくれる柔軟性も、AIメンターの大きな強みです。
【コピペOK】AIへの「賢い聞き方」プロンプト集
では、実際にどうやって聞けばいいのでしょうか？
ここからは、僕が普段の学習や制作で実際に使っている「プロンプト（指示文）」の具体例を紹介します。
そのままコピペして、自分の状況に合わせて少し書き換えるだけで使えますよ！
ケース1：コードの意味がわからない時
ネットで見つけたコードをコピペして動いたけれど、「なぜ動いているのかわからない」という時。そのままにしておくと応用が利きません。そんな時はこう聞きましょう。
プロンプト例：
以下のCSSコードの役割を、Web制作初心者にもわかるように、行ごとに丁寧に解説してください。専門用語はなるべく使わず、例え話を使って説明してくれると嬉しいです。
.container { display: flex; justify-content: center; align-items: center; height: 100vh; }
ポイント：「初心者にもわかるように」「行ごとに」「例え話で」と指定することで、驚くほどわかりやすい解説が返ってきます。
ケース2：エラーの原因がわからない時
「書いたコードが動かない！」「崩れている！」という時こそAIの出番です。
プロンプト例：
HTMLとCSSを書きましたが、画像の横並びがうまくいかず、縦に並んでしまいます。
下記のコードの問題点と、修正後のコードを教えてください。
【現状のHTML】
（ここにHTMLコードを貼り付け）
【現状のCSS】
（ここにCSSコードを貼り付け）
ポイント：「何が起きているか（現状）」と「どうしたいか（理想）」を伝え、必ずコードをセットで貼り付けるのがコツです。
ケース3：サンプルコードを書いてほしい時
「お問い合わせフォームを作りたいけど、最初から書くのは大変…」という時は、土台を作ってもらいましょう。
プロンプト例：
初心者向けのシンプルな「お問い合わせフォーム」を作りたいです。
以下の項目を含むHTMLとCSSのサンプルコードを書いてください。
【必要な項目】
・お名前
・メールアドレス
・お問い合わせ内容
・送信ボタン
デザインは清潔感のある青色ベースで、スマホでも見やすいレスポンシブ対応にしてください。
ポイント：具体的な項目やデザインの要望（青色ベース、レスポンシブなど）を伝えると、より理想に近いコードが一発で出力されます。
情報系学生が教える、AI活用の「落とし穴」と対策
ここまでAIの便利さを伝えてきましたが、「AIを使えば勉強しなくていい」わけではありません。
情報系の学部で学んでいる身として、注意してほしい「落とし穴」もお伝えしておきます。
1. AIは平気で嘘をつく（ハルシネーション）
AIは、もっともらしい顔をして間違った情報を教えることがあります。これを専門用語で「ハルシネーション（幻覚）」と呼びます。
特に、最新のCSSプロパティや、マイナーなライブラリの使い方などは間違っていることも多いです。
【対策】
AIの回答を鵜呑みにせず、「必ず実際にコードを動かして確認する」癖をつけてください。「動けば正義」ですが、動かない場合はMDNなどの公式ドキュメントで裏取りをする習慣を持ちましょう。
2. 「コピペ職人」にならないこと
AIが出してくれた修正コードを、意味もわからずコピペして「はい、解決！」としてしまうのは危険です。それではあなたの実力になりません。
【対策】
コピペする前に、「どこが間違っていて、なぜこの修正で直るのか？」を必ず読んで理解してください。もしわからなければ、「修正箇所の理由を教えて」とさらにAIに質問しましょう。このひと手間が、半年後の実力に大きな差を生みます。
おすすめのAIツールは？（ChatGPT vs Gemini）
現在、無料で使える優秀なAIは主に「ChatGPT（OpenAI）」と「Gemini（Google）」の2つです。
どちらを使えばいいか迷う方に、僕なりの使い分けを紹介します。
ChatGPT (GPT-4o miniなど)
- 得意なこと： 会話のラリー、論理的な説明、コードの生成。
- おすすめシーン： エラーの原因を深掘りしたい時や、複雑なロジック（JavaScriptなど）を書いてほしい時。
Gemini
- 得意なこと： Google検索との連携、最新情報の取得、画像認識。
- おすすめシーン： 最新のWebトレンドを知りたい時や、「参考サイトのスクリーンショット」を読み込ませて「これと同じデザインにするコードを書いて」と頼みたい時。（これはGeminiの得意技です！）
- ※Geminiを使った画像生成については、過去記事「【もう探さない】Geminiでブログのアイキャッチ画像を無料・簡単作成！」でも解説していますので、ぜひチェックしてみてください。
まとめ：AIは「魔法の杖」ではなく「優秀な相棒」
Web制作の学習において、AIは革命的なツールです。
しかし、あくまで主役は「あなた」です。AIは、あなたの指示があって初めて力を発揮する「優秀な相棒（ナビゲーター）」に過ぎません。
「AIに全部やらせよう」とするのではなく、「AIを使って自分の学習効率を最大化しよう」というスタンスで付き合うのが、Web制作上達の近道です。
さあ、今すぐブラウザでChatGPTやGeminiを開いてみてください。
そして、試しにこう聞いてみましょう。
「Web制作の勉強を始めたばかりです。初心者が最初に覚えるべきHTMLタグを10個、クイズ形式で出題してくれませんか？」
きっと、頼もしいメンターとの楽しい授業が始まるはずです！
これからも「かたすけのWebづくり」では、AIとWeb制作を掛け合わせた役立つ情報を発信していきます。一緒に頑張りましょう！
