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

「働きながらWeb制作を独学したいけど、何から手をつければいいか分からない」

そんな人に向けて、僕が実際に通った道をもとに、独学の順番をまとめました。

仕事が終わってから使えるのは、1日1時間くらい。
それでも順番さえ間違えなければ、進みは止まりません。

ひとつでも当てはまるなら、30歳で独学を始めたころの僕と、かなり近いところにいると思います。

僕も、30歳・ITの経験ゼロから始めました

僕がWeb制作の独学を始めたのは、30歳だった2020年2月です。

会社員のままで、ITの経験はありませんでした。スクールにも通っていません。

Progateで基礎を3か月ほど学んで、自分のサイトを作り、Facebookに載せました。

それを見た高校時代の友達が「じゃあ私のホームページ作って」と言ってくれた。
金額は5万円。独学を始めて3か月目の、最初の仕事です。

10か月目には、2つの制作案件をまかされて50万円になりました。
今も会社員を続けながら、5年以上Webの仕事をしています。

勉強時間も、正直に書いておきます。仕事のある日も、朝と夜で毎日5時間以上。
累計でだいたい1,000時間になったころ、ようやく「仕事にできた」と感じました。

でも、最初の依頼が来たのは、それより前の3か月目です。

依頼につながったのは、勉強した時間の長さではなく、作ったものを人に見せたことでした。

見せることは、1日に何時間勉強しているかに関係なくできます。

平日1時間の人も、やることと順番は同じです。かかる月日が違うだけで、遠回りをしているわけではありません。働きながら学ぶなら、それがふつうのペースです。

だからこのロードマップでは、早いうちに「人に見せる」を入れています。

途中までは全員同じ道を進んで、STEP2のあとで「副業・フリーランス」と「転職」に分かれます。全体はこんな形です。

まず、ゴールをざっくり1つ決める

独学で手が止まるのは、たいてい「今やっていることが何につながるのか」が見えなくなったときです。僕も途中で何度かそうなりました。

だから最初に、ゴールを決めておきます。細かい目標はいりません。

迷ったら、「収入を増やしたいのか」「働き方そのものを変えたいのか」で考えると決めやすいと思います。前者ならA、後者ならBです。

あとから変えてもかまいません。ゴールは、今日の勉強が何のためかを思い出すための目印です。

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

始める前に、3つだけ決めておきます。

時間は、平日の夜1時間、休日に少し長め、くらいで十分です。

大事なのは長さより、曜日と時間帯まで決めてカレンダーに入れておくこと。「時間ができたらやる」だと、仕事が忙しい週にそのまま止まってしまいます。

家族や同居している人がいるなら、先に話しておくと、その時間を確保しやすくなります。

AIは、ChatGPTやClaudeなど、使い慣れたものを1つで構いません。

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

僕が独学していたころには、こんな相手はいませんでした。
今から始める人は、そこは僕より有利です。

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

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

JavaScriptもWordPressも、HTMLとCSSが分かっている前提で話が進みます。ここを飛ばすと、結局あとで戻ってくることになります。

入門教材は、満点を目指して何周もする必要はありません。一周したら、本や見本を使って「自分で作る」ほうに移ってください。

3つ目の「白紙から1ページ」で、たぶん手が止まります。教材では書けたのに、何もない画面だと最初の1行が出てこない。

止まるのは普通のことです。そこで調べながら書いた部分が、いちばん身につくところだと思ってください。

僕がProgateで必要なところをひととおり終えるまでは、3か月ほどでした。

Progateが終わったあとに迷う人は、Progateが終わったら次にやることも読んでみてください。

次へ進む目安：見本を見ながら、白紙から1ページ作れたらSTEP2へ。

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

このロードマップで、いちばん大事なのがここです。

練習で作ったものをネットに公開して、身近な人に見てもらってください。

最初に書いた5万円の仕事も、ここから生まれました。Facebookにサイトを載せていなかったら、友達は僕がWeb制作を始めたことすら知らなかったはずです。

見せなければ、この依頼はありませんでした。

独学していることは、自分から言わないかぎり、周りの人は知りません。知らない人には、頼みようがないんです。

最初に見せるときは、たぶん少し恥ずかしいと思います。でも、見せるのは出来の良さではありません。「こういうことを始めた」と伝われば十分です。

ゴールが転職の人にとっても、作ったものは「独学で何ができるか」を説明する材料になります。面談で言葉だけで話すより、伝わりやすくなります。

次へ進む目安：誰か1人に見てもらえたら、ここから先は分かれ道です。

ここから分かれ道

ここからは、最初に決めたゴールで進む道が変わります。

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

JavaScriptは、最初から深くやらなくて大丈夫です。メニューを開け閉めする、くらいの動きから始めれば十分です。

WordPressは、お客さんが自分で更新できるサイトを作るために覚えます。頼む側からすると、「作ってもらったあと、自分で直せるか」は気になるところです。

最初の仕事は、知らない人より、知っている人からのほうが受けやすいと思います。僕の最初の1件も、高校時代の友達からでした。

Web制作の仕事を続けるうえで、僕が独学してよかったと思うのが営業とマーケティングです。今はWeb制作に加えて、この2つも仕事になっています。

お客さんが欲しいのは、きれいなサイトより「問い合わせが増える」といった結果。そこまで考えて提案できると、仕事が取りやすくなります。

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

行き先はWeb制作の会社だけではありません。社内のIT担当（社内SE）やITサポートのように、今の仕事の経験が活きる職種もあります。

30代・未経験でどこに入口があるかは30代未経験でエンジニアは無理？にまとめました。

職種が見えてきたら、転職エージェントに相談してみてください。多くの場合、求職者は無料で使えます。相談先の選び方は30代未経験のIT転職エージェント選びに書きました。

足りないスキルをスクールで学ぶなら、国の給付金の対象かどうかも確認してください（教育訓練給付金の使い方）。料金と給付金の対象かどうかを公式情報で比べた生成AIスクール比較も参考にしてください。

「未経験歓迎」の求人に応募する前には、SESはやめとけと言われる理由と、避けたい会社の見分け方も読んでおいてください。

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

AとBのどちらか決めきれなくても大丈夫です。

STEP2まで進めば、自分が「作るのが楽しい」のか、「ITを使って働き方を変えたい」のかが見えてきます。決めるのは、そのあとで間に合います。

独学を続けるか、スクールや転職相談を使うかで迷うなら、判断表で今の状況から選べます。

今日やることは、1つだけです。

平日に1時間とれる時間帯を1つ決めて、カレンダーに入れる。

入れた最初の1時間は、ProgateのHTMLのコースを開くだけでも十分です。

このブログ全体の読む順番は、はじめての方へにまとめています。