Web制作は独学できる？AIを先生に変える学び方

Web制作は独学できます。けれど、教材を10本見るより、自分で1ページを完成させるほうが難しい。そして、たぶん面白い。

今はAIに頼めば、見栄えのするコードが数秒で返ってきます。そこで「できた」と思いたくなりますが、文字を少し大きくしただけで崩れたら、自分のサイトとは呼びにくいものです。

独学の目標は、コードを全部暗記することではありません。何が起きているかをおおまかに理解し、変えたい場所を見つけ、結果の良し悪しを判断できるようになることです。

この記事の要点

最初の教材は、自分で完成させる小さな1ページにする

AIには答えだけでなく、理由と確認方法を聞く

わかったつもりを、ブラウザで手を動かして確かめる

最初の一作は、欲張らない

最初に作るのは、自己紹介や好きな道具の紹介など、1ページで終わる題材がおすすめです。見出し、段落、リンク、画像をHTMLで並べ、CSSで色、文字、余白を整えます。最後にスマートフォンでも開いてみます。

小さいページなら、どこを変えた結果、見た目がどう変わったのかを追えます。完成までたどり着けるので、「自分で作った」という手応えも残ります。

JavaScriptやフレームワークを、最初から同時に抱える必要はありません。メニューを動かしたい、記事を増やしやすくしたい。そんな必要が出てから次へ進めば十分です。

エラーが出るたびに完成コードへ置き換えてもらうと、その場は直っても、次に似た問題が起きたときにまた止まります。修正案と一緒に、原因、変更した場所、確認方法を聞いてください。

このCSSがスマートフォンではみ出す原因を、初心者向けに説明してください。
修正案は一つだけ示し、変更前後の違いと確認方法も教えてください。

説明を読んだら、数字や色を一つ変えてみます。予想どおりなら理解が進んでいます。予想と違ったら、そこが次の質問です。AIとの会話は、正解を受け取る時間ではなく、仮説を試す時間にします。

前の作品を捨てて毎回作り直す必要はありません。1ページにカードを足し、メニューを足し、記事を更新しやすくする。ひとつのサイトを育てると、変更の影響も学べます。

4番目の段階では、Astroのような静的サイト向けの仕組みを使うと、文章ファイルからページが生まれる流れを体験できます。

HTML、CSS、JavaScript、デザイン、SEO。どれも必要に見えるので、全部の入門教材を開きたくなります。すると、勉強している時間は増えるのに、完成品は増えません。

今の作品に必要なものを一つだけ選び、残りは「あとで調べるリスト」へ逃がします。学習時間の半分以上は、ブラウザを開いて作る時間にします。

エラーが出たときも、すぐに全コードを入れ替えないでください。最初のエラー文、直前に変えた場所、再現する操作。この三つをメモすると、AIへ渡す質問も具体的になります。

AIより速くコードを書く競争をする必要はありません。基礎を学ぶ理由は、出てきたものを採用してよいか判断するためです。

文章の構造は読みやすいか。キーボードでも操作できるか。画像を勝手に使っていないか。秘密情報がコードに入っていないか。こうした判断は、サイトを公開する人の仕事として残ります。

今週中に終わる1ページを決めてください。今日は文章と見出し、次は色と余白、最後にスマートフォン確認。三つに分ければ、最初の完成が見えてきます。

完成したら、どこを自分で決め、どこをAIに助けてもらったかを書き残しましょう。それが次の作品で使える、自分だけの教材になります。実際の制作記録を見たい人は、Codexでアフィリエイトサイトを作ってみた｜公開までの全手順も参考にしてください。