学習ロードマップの作り方｜未経験は案件から逆算して順序を決める

学習ロードマップの作り方は、いま実際に発注されている案件を見て、そこから逆算するのが出発点です。作りたいものだけで順序を決めると、趣味の学習計画になってしまいます。市場で求められているものと自分が作りたいものが重なる場所を見つけて、そこへ向かう順番に並べ直す。これが手順の骨格です。

プログラミングを学び始めた人から一番よく聞くのが「何をどの順番でやればいいか分からない」という声です。ネットにはロードマップが無数にありますが、読んでも迷いが消えないのは、それらが網羅的すぎるからではありません。市場と切り離されているからです。「HTMLの次はCSS、その次はJavaScript」と言われても、それがどの仕事に繋がるのかが見えないままだと、自分がいまどこにいるのか判断できません。

この記事では、未経験からWeb制作・プログラミングを学ぶ人が、自分専用の学習ロードマップを作る手順を5ステップで解説します。誰かのロードマップをなぞるのではなく、自分で引けるようになるための手順です。

なぜ配られたロードマップで迷子になるのか

世の中のロードマップは、たいてい「この職種になるには、これらを全部覚える必要がある」という形で書かれています。網羅されているぶん正確ですが、未経験の人が読むとゴールが遠すぎて、いまやるべき1つが決まりません。

加えて、こうしたロードマップは職種が先に決まっている前提で書かれています。フロントエンドエンジニアのロードマップ、バックエンドエンジニアのロードマップ、というように。でも未経験の段階では、その職種が自分に合うのかも、そもそも仕事があるのかも分かりません。決められない前提で作られた地図を渡されて、決められないまま歩き出すことになります。

順序が決まらない本当の理由は、判断の材料が足りないことです。そして足りていない材料は、たいてい「その勉強が、どんな仕事に繋がるのか」という情報です。これは教材の中には書かれていません。市場を見に行くしかありません。

なお、どんな職種がどこまでを担当するのかを先に俯瞰したい場合は、作りたい成果物から逆引きするWeb業界の職種一覧が地図として使えます。この記事は「その地図の上で、自分はどの順番で歩くか」を決める手順です。

ステップ1：いま発注されている案件を見る

最初にやるのは勉強ではありません。市場を見ることです。未経験の人が見るべき市場は、求人サイトではなくクラウドソーシングです。

理由は3つあります。求人票が「会社が欲しい人材像」という抽象的な条件で書かれているのに対して、クラウドソーシングの案件は「いま誰かが実際にお金を払って解決したい具体的な困りごと」だからです。実務経験を問われない案件が多く、未経験でも応募の可能性がある。そして金額が書いてあるので、その仕事の相場が分かります。

見に行く先は、国内の主要なクラウドソーシングで構いません。クラウドワークス、ランサーズ、ココナラあたりが代表的です。会員登録しなくても案件の一覧と内容は読めます。まずは1つだけ開けば十分です。

やることはシンプルです。興味のあるカテゴリの案件を20件ほど、応募せずに読むだけ。そして次の3つをメモします。

1. 繰り返し出てくる技術名 — WordPress、HTML/CSS、JavaScript、Shopifyなど。何度も見る名前が、その市場で需要のある技術です
2. 成果物の形 — LP1枚なのか、サイト全体なのか、既存サイトの修正なのか。作るものの単位が分かります
3. 金額の幅 — 同じような案件で、安いものと高いものの差が何から来ているか。たいてい「対応範囲の広さ」です

20件も読むと、驚くほどはっきり傾向が見えます。「思ったよりWordPressの案件が多い」「デザインまで求められる案件と、コーディングだけの案件がある」といったことが、自分の目で確認できます。この時点で、学ぶべき技術の候補が勝手に絞られます。誰かに教わった順序ではなく、市場が示した順序です。

ここで大事なのは、応募できるかどうかを気にしないことです。いまの実力で受けられる案件を探しているのではありません。市場が何を求めているかを調べています。読むだけなら失うものは何もありません。

ステップ2：作りたいものを1つだけ決める

市場の傾向が見えたら、次は市場が求めているものと、自分が作りたいものが重なる場所を探します。ここで作るものを1つ決めます。

市場だけを見て決めると続きません。興味のないものを作り続けるのは苦痛だからです。逆に、作りたいものだけで決めると仕事に繋がりません。両方が重なるところを選ぶのが、続くロードマップの条件です。

コツは小さくすることです。「ECサイトを作る」ではなく「商品ページを1枚作る」。大きすぎる目標は、分解の段階で挫折します。1〜2週間で形になる大きさが目安です。

ステップ3：成果物を機能に分解する

作るものが決まったら、それを部品に割ります。「LPを1枚作る」なら、こう分解できます。

• ページ全体の骨組みを作る（見出し・段落・画像の配置）
• 見た目を整える（色・余白・文字サイズ）
• スマホで崩れないようにする
• ボタンを押したときの動きを付ける
• 問い合わせフォームを設置する
• インターネット上に公開する

分解のポイントは、技術名ではなく「できること」で書くことです。「HTMLを学ぶ」ではなく「ページの骨組みを作る」。技術名で書くと、どこまでやれば終わりなのかが分からなくなります。できることで書けば、できたかどうかを自分で判定できます。

この分解ができると、それがそのまま順序になります。骨組みがないと見た目は整えられないし、見た目が決まらないとスマホ対応もできない。作る順番は、部品の依存関係が教えてくれます。誰かに順序を教わる必要がなくなるのは、この段階です。

ステップ4：分解を学習単位に変換する

部品が並んだら、それぞれに「これを作るために必要な知識」を紐づけます。ここで初めて技術名が出てきます。

この表で一番大事なのは右の列です。「どこまでやれば十分か」を先に決めておかないと、教材を最後まで読まないと不安になり、いつまでも次に進めません。作るものが決まっているから、必要な範囲も決まる。これが市場から逆算する方式の一番の利点です。

環境をどう用意するかで止まってしまう場合は、ブラウザだけで始めるプログラミング練習環境5選で先に手を動かせる状態を作ってから戻ってきてください。環境構築は学習ではなく準備です。ここで何日も使うのはもったいないです。

ステップ5：「作れたか」で進捗を判定する

ロードマップが機能するかどうかは、進捗の測り方で決まります。「教材を何ページ読んだか」で測ると、読んでいるのに作れない状態に気づけません。測るべきは作れたかどうかです。

判定はシンプルで、教材を閉じた状態で、その部品を作れるかを試すだけです。作れなければ、その単位はまだ終わっていません。作れたら次へ進みます。読み返した回数は関係ありません。

練習問題で「作れるか」を試す

自分で判定用の課題を考えるのは難しいので、練習問題を使うのが早いです。CodeQuestの練習問題はこの順序で並べてあります。上から順に、教材を閉じた状態で解けるかを試してください。解けない単位が見つかったら、そこが戻る場所です。

1. HTML基礎練習問題｜ページの骨組みが作れるか
2. CSS初心者向け練習問題｜見た目を変えられるか
3. JavaScript練習問題23選｜基礎文法が書けるか
4. JavaScript DOM操作の練習問題｜クリックで表示を変えられるか
5. JavaScript 非同期処理の練習問題｜外部からデータを取れるか
6. JavaScript 配列メソッド練習問題｜データを加工できるか
7. Node.js練習問題集｜サーバー側の処理が書けるか

全部やる必要はありません。ステップ4の表に出てきた単位だけで十分です。LPを作るのが目標なら、1〜4まででゴールに届きます。5以降は次の成果物のときに戻ってくればいい範囲です。

ひと通り作れるようになったら、次は既存のサイトを真似て作る練習が効きます。模写コーディング一覧に難易度順で課題を用意しています。実際の案件に近い形で、自分の到達度を測れます。

ロードマップを更新するタイミング

一度作ったロードマップは、そのまま使い続けるものではありません。成果物が1つ完成したら、ステップ1に戻ります。もう一度クラウドソーシングの案件を20件読む。前に読んだときとは、見え方がまったく違うはずです。

1周目は「何が書いてあるか分からない」だった案件が、2周目には「これは自分にもできそう」「これは足りない技術がある」と判断できるようになります。読める案件が増えることが、実力がついた証拠です。そして読めるようになった案件が、次のロードマップの起点になります。

この往復が回り始めると、「次に何をやればいいか分からない」という状態には戻りません。市場が次のお題を出してくれるからです。

よくある失敗

いちばん多いのは2つ目です。チュートリアルは終わらせると達成感がありますが、終わらせても作れるようにはなりません。作るものが決まっていない状態で教材だけを消化していくと、いつまでも「まだ足りない」と感じ続けます。足りないのは知識ではなく、作る対象のほうです。

よくある質問

Q. 学習ロードマップとは何ですか？

到達したい成果物から逆算して、学ぶ項目を順序づけた計画のことです。作り方は「市場を見る→作るものを決める→部品に分解する→必要な知識を紐づける→作れたかで判定する」の5ステップになります。

Q. なぜ求人サイトではなくクラウドソーシングを見るのですか？

求人票は「会社が欲しい人材像」という抽象的な条件で書かれているのに対し、クラウドソーシングの案件は「いま誰かがお金を払って解決したい具体的な困りごと」だからです。未経験の段階では、後者のほうが必要な技術を特定しやすくなります。

Q. どのくらいの期間で作れるようになりますか？

成果物の大きさによります。だからこそステップ2で「1〜2週間で形になる大きさ」に絞ることを勧めています。期間から逆算するのではなく、作るものを小さくして、完成までの距離を短くするのが先です。

Q. 案件を見ても専門用語が分からず判断できません

それで正常です。1周目は「何度も出てくる単語を書き出す」だけで十分で、意味が分からなくても構いません。書き出した単語をあとで調べれば、それがそのまま学ぶ候補のリストになります。

Q. 作りたいものが特に思いつきません

その場合は、市場で件数が多かった案件をそのまま模擬課題にしてください。実在の案件文を読んで、自分が受注したつもりで作ってみる形です。ゼロから発想するより早く、実務に近い練習になります。

Q. 学ぶ順番を間違えたらやり直しですか？

やり直しにはなりません。順序は部品の依存関係から決まるので、作りながら「先にこれが必要だった」と気づいた時点で入れ替えれば済みます。ロードマップは一度で完成させるものではなく、成果物が1つ終わるたびに引き直すものです。

まとめ

学習の順序が決まらないのは、意志が弱いからでも、情報が足りないからでもありません。判断の材料が「市場」の側にあるのに、教材の側だけを見ているからです。材料を取りに行けば、順序は自然に決まります。

• クラウドソーシングの案件を20件読む。応募はしない
• 市場と自分の興味が重なる成果物を1つ、小さく決める
• 成果物を「できること」の単位に分解する。順序は依存関係が教えてくれる
• 各単位に「どこまでやれば十分か」を先に書く
• 教材を閉じた状態で作れるかで判定する
• 1つ完成したら、また案件を20件読む

まずは今日、案件を20件読むところから始めてください。勉強を始めるより先に、これをやったほうが早く進みます。

自分のロードマップの引き方で迷ったら、直接相談する

関連記事

• 作りたい成果物から逆引きするWeb業界の職種一覧と担当範囲
• ブラウザだけで始めるプログラミング練習環境5選【環境構築不要・無料】
• 模写コーディング一覧【初級〜上級・Figma模写の全31記事】
• JavaScript学習ガイド【練習問題・実践アプリ・フレームワーク入門まとめ】