Web制作 独学ロードマップ｜働きながら30代から始める順番と、転職への分かれ道

「働きながらWeb制作を独学したいけど、何から手をつければいいか分からない」。30代で、仕事終わりに使えるのは1日1時間くらい。そんな人に向けて、僕が実際に通った道をもとに、独学の順番をまとめました。

僕は30歳だった2020年2月に、Web制作の独学を始めました。スクールには通っていません。Progateで基礎を3か月ほど学び、自分のサイトを作り、3か月目には高校時代の友達から5万円でホームページ制作を頼まれました。独学を始めて10か月目には、2つの制作案件をまかされて50万円を稼げました。今はWeb制作に加えて、同じく独学で覚えた営業やマーケティングが仕事になっています。

このロードマップは、ゴールを2つに分けています。Web制作を副業やフリーランスの仕事にしたい人と、会社員のままIT・Web系の仕事に転職したい人です。途中までは同じ道で、途中から分かれます。

ただ、僕の勉強時間は多かったです。始めてすぐ、コロナで本業が1か月半ほどほぼ止まり、その間は「1日10時間じゃ足りない」と思いながら、起きている時間はほとんど勉強していました。仕事に戻ってからも、朝と夜で毎日5時間以上。累計でだいたい1,000時間になったころ、ようやく仕事にできたという感覚です。

1日1時間なら、同じところまで行くのにもっと時間がかかります。それでも順番さえ間違えなければ、進みは止まりません。このロードマップは、その順番をまとめたものです。

はじめに：ゴールを1つ決める

独学で手が止まるのは、たいてい「今やっていることが何につながるのか」が見えなくなったときです。僕も途中で何度かそうなりました。だから最初に、ざっくりでいいのでゴールを決めておきます。

• A：副業・フリーランス…自分で仕事を取ってきて、Web制作で稼ぎたい
• B：転職…会社員のまま、IT・Web・AIを使う仕事に移りたい
• まだ決められない…STEP1〜2をやってから決めれば大丈夫

働きながら続けるための準備

1. 時間を決める。平日は夜1時間、休日に少し長め、くらいで十分です
2. 家族に話しておく。勉強の時間を確保しやすくなります
3. 分からないことはAIに聞く。ChatGPTやClaudeなど、使い慣れたものを1つで構いません

AIについて1つだけ注意があります。基礎を学んでいる間は、AIにコードを書かせないでください。エラーの意味を聞く、分からない用語を説明してもらう、学習計画を一緒に立てる。こういう「先生役」として使うと、独学で何日も止まることが減ります。僕が独学していたころには、こんな相手はいませんでした。

STEP1：HTMLとCSSで基礎を作る（目安：数か月）

最初は、Webページの骨組み（HTML）と見た目（CSS）です。

1. Progateなどの入門教材で、HTMLとCSSのコースを一周する。満点を目指して何周もする必要はありません
2. 入門書を1冊選んで、本と同じサイトを自分の手で作る
3. デザインカンプ（完成見本の画像）を見ながら、白紙から1ページ作ってみる

僕がProgateで必要なところをひととおり終えるまでは、3か月ほどでした。終わったあとに迷う人は、Progateが終わったら次にやることも読んでみてください。

STEP2：自分のサイトを1つ公開して、人に見せる

ここがいちばん大事です。練習で作ったものを、身近な人に見てもらってください。

僕の最初の仕事は、ここから生まれました。自分のサイトをFacebookに載せたら、高校時代の友達が「じゃあ私のホームページ作って」と言ってくれた。金額は5万円でした。見せなければ、この依頼はありませんでした。

ゴールが転職の人にとっても、作ったものは「独学で何ができるか」を説明する材料になります。

ここから分かれ道

A：副業・フリーランスを目指す人

1. JavaScript（jQuery）でページに動きをつける
2. WordPressで、更新できるサイトを作れるようにする
3. 作ったサイトをまとめたポートフォリオを用意する
4. 身近な人や地元のお店など、知っている人から仕事を受ける

Web制作の仕事を続けるうえで、僕が独学してよかったと思うのが営業とマーケティングです。お客さんが欲しいのは、きれいなサイトより「問い合わせが増える」といった結果。そこまで考えて提案できると、仕事が取りやすくなります。

B：会社員のまま、IT・Web系の仕事に転職したい人

先に正直に書いておくと、僕は会社員としての転職をしたことがありません。なのでここは体験談ではなく、進め方の整理として読んでください。

1. どんな職種を目指すかを決める。Web制作の会社だけでなく、社内のIT担当（社内SE）やITサポートのように、今の仕事の経験が活きる職種もあります
2. 転職エージェントに相談して、自分の年齢や職歴で現実的な求人を知る。多くの場合、求職者は無料で使えます
3. 目指す職種に合わせて、足りないスキルを学ぶ。スクールを使うなら、国の給付金の対象かどうかも確認する

スクールを考えている人は、料金と給付金の対象かどうかを公式情報で比べた生成AIスクール比較が参考になるはずです。「未経験歓迎」の求人に応募する前には、SESはやめとけと言われる理由と、避けたい会社の見分け方も読んでおいてください。

迷ったら、小さく確かめる

AとBのどちらか決めきれなくても大丈夫です。STEP2まで進めば、自分が「作るのが楽しい」のか、「ITを使って働き方を変えたい」のかが見えてきます。

今日やることは、平日に1時間とれる時間帯を1つ決めて、カレンダーに入れること。このブログ全体の読む順番ははじめての方へにまとめています。