私はWeb制作をほぼ知らない状態で、このサイトを作り始めました。Codexが実装を進めてくれたので、公開までの時間は短くなりましたが、分からないまま採用した部分は、修正するときに自分の言葉で説明できません。
独学で目指したいのは、AIより速くコードを書くことではありません。変更したい場所を見つけ、出てきた案を採用してよいか判断し、公開後の画面を確認できることです。
その練習には、教材を何本も見るより、小さな1ページを最後まで作るほうが向いています。
題材は、自分で内容を判断できるものにする
最初のページには、自己紹介、好きな道具、架空のイベント案内などを選びます。見出し、文章、画像、リンクを置き、CSSで色と余白を整えます。
知らない業界の企業サイトを選ぶと、文章や機能が正しいか判断できません。自分で説明できる内容なら、AIが勝手に足した設定にも気づけます。
想定例（架空）
会社員のリナさんが、架空の読書会の案内ページを作るとします。日時、会場、参加費、申込先は練習用の情報だと明記します。
最初の完成条件は、スマートフォンで日時を読み、申込先まで迷わず進めることです。会員機能や決済は付けません。必要な技術をHTMLとCSSへ絞れます。
AIには、原因と確認方法まで聞く
エラーが出るたびに完成コードへ置き換えると、その場は直っても、似た問題でまた止まります。
このページがスマートフォンで横にはみ出す原因を説明してください。
修正案は一つに絞り、変更する行と、直ったか確認する方法を示してください。修正後は、幅や余白の数字を一つ変えてみます。予想どおりなら仕組みを少し理解できています。予想と違えば、変更前後の画面とコードを添えて、もう一度質問します。
学ぶ順番は、作品に必要なものから決める
HTML、CSS、JavaScript、デザイン、SEOを同時に始めると、教材だけが増えます。
- HTMLで文章の構造を作る
- CSSで文字、色、余白を整える
- スマートフォンで表示を確認する
- 公開URLを作る
- 必要になった機能だけ追加する
メニューを動かしたくなってからJavaScriptを学びます。記事を増やしやすくしたくなったら、AstroやWordPressを比べます。
基礎の確認には、MDNのウェブ開発学習ページを使えます。AIの回答と公式資料が違う場合は、仕様を説明する公式資料を優先します。
エラーを消す前に、三つだけ記録する
AIへ質問するときは、次を残します。
- 最初に出たエラーメッセージ
- 直前に変えたファイルと場所
- 同じ問題を再現する操作
「動きません」だけでは、AIは見えていない状況を推測します。再現条件があれば、関係のないコードを丸ごと変える提案を減らせます。
秘密情報やパスワードは貼りません。画面を共有するときも、メールアドレス、顧客名、管理用URLが写っていないか確認します。
完成したら、他人にURLだけを渡す
作り方を説明せず、第三者にページを開いてもらいます。
「何のページだと思ったか」「次に押す場所で迷ったか」「読みにくい箇所はどこか」を聞きます。「おしゃれだった」より、迷った場所のほうが修正に使えます。
私はこのサイトの公開画面を読み、記事の冒頭から動機が抜けていると気づきました。コードの学習と同じで、作った本人の画面だけでは見落とす問題があります。
独学を続けるか、有料サービスを使うか
まず2週間ほど、無料資料とAIで1ページを作ってみます。学習順序を決められない、同じエラーで何日も止まる、制作物を人に見てほしいと分かったら、質問やレビューへお金を払う理由があります。
有料サービスを検討する場合は、Web制作の学習サービス4つの比較で、総額、質問先、課題レビューを確認してください。デイトラと独学だけを比べたい人向けには、費用と学び方の比較も用意しています。
作った1ページを副業の見本へ育てる順番は、AIを使ったWeb制作副業の実行手順へ続きます。