【2025年版】Web制作(コーダー)独学ロードマップ！プロを目指すなら見なさい！

web制作の学習ロードマップはこの記事以外にも、たくさん公開されています。ただし、それらは下記の内容が多いと感じます。

• 初心者を脱するための学習ロードマップ
• 稼ぐためのロードマップ

この記事では、脱初心者や稼ぐためではなく、技術面に特化したプロになるための学習ロードマップを紹介します。初めて聞く内容もあるかもしれません。今わからなくても、後で見返すために、ぜひブックマークしてご活用してください。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

特にこんな方におすすめ！

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

まずは、下記リンクから個別ガイダンスへお越しください。

👆 メンターやってます 👆

この記事で書くこと・書かないこと

👇 書くこと

• 勉強する必要がある技術
• おすすめの書籍や教材

👇 書かないこと

• 稼ぐための方法
• 具体的なコードの書き方

フリーランスや副業で稼ぐためのコツや転職・就職に関しては、ほとんど触れません。副業に関しては、下記の記事で紹介しています。

web制作の副業を徹底解説！実はフリーランスになるより難しい？

紹介する技術

下記の順番に進めるのがおすすめです。

1. 事前準備
2. HTML・CSS
3. JavaScript
4. WordPress
5. webの仕組み
6. ドメイン・サーバー
7. その他
8. モダンweb制作

この内容は、弊社が運営しているHello Mentorで教えている内容でもあります。ここまでカバーしている学習支援サービスはなかなかないと思うので、本気でプロになりたい方は、ぜひ下記のサービスサイトもご覧ください。

① 事前準備

• Google ChromeとCursorのインストールする
• Google ChromeとCursorの拡張機能を入れる

様々なブラウザがありますが、ほとんどのエンジニアは、Google Chromeを使っています。

また、エディタは、AI搭載のCursorを使うと、かなり効率化できます。課金すると20ドルかかりますが、十分元を取れると思います。

Google Chromeの便利な拡張機能

おすすめのGoogle Chromeの拡張機能です。

Cursorの便利な拡張機能

おすすめのCursorの拡張機能です。

② HTML・CSS

下記の流れで、進めると良いです。

1. 基礎学習
2. figmaからのコーディング練習
3. 簡単なサイトを作る練習
4. CSS設計とSCSSの学習
5. 実践的なサイトを作る練習

基礎学習

基礎学習はドットインストールや書籍でやるのが良いです。Progateを使っても良いですが、Progateだけだと不十分です。

書籍は初心者向けであれば、何を使っても大きな差はありません。2年以内に出た書籍で、見やすいと思ったものを選びましょう。

figmaからのコーディング練習

基礎学習後はとにかくたくさん作ることが重要です。

実務では、figma等で作ったデザインをもらい、それを忠実に再現することになります。弊社で出している、下記のUdemy教材では、figmaからのコーディング練習ができるようになっています。

簡単なサイトを作る練習

簡単なサイトを作る練習では、ぜひ模写修行をご利用ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

模写修行をやってみて難しかった方は、まずは下記のサイトからやっても良いと思います。

書き方は人によって違うので、どれか1つのサイトを参考にするのではなく、全部やってみて自分に合うものを取り入れると良いです。

CSS設計とSCSSの学習

昨今は、CSS設計とSCSSを必須ではないと言う方もいますが、それはweb開発分野での話しです。

ReactやVueを使ったweb開発では、web制作とは少し違う書き方をするので、CSS設計とSCSSが必須ではない場合もあります。しかし、web制作では必須なので注意してください。

CSS設計

弊社で作った下記のUdemy教材では、Web制作分野で必要なCSS設計の知識を網羅的に解説しました。実際にサイトを作りながら学ぶセクションもあるので、より理解しやすい内容になっています。

このメディアでもいくつか記事を書いています。

【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説 初心者向けCSS設計手法を紹介！カオスなコードを卒業しよう！ 【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり！

SCSS

SCSSは、いくつか種類がありますが、現在推奨されているのは、Dart Sassです。それ以外で解説している書籍や記事もあるので気を付けてください。

Dart Sass対応かつSCSSを1から学べる書籍は、下記がおすすめです。

実践的なサイトを作る練習

ここからは、実践的なサイトを作る練習です。

世にある多くの書籍や教材は、実践的とは程遠く、ほとんどがかなり初学者向けの内容になっています。

弊社で運営しているHello Mentorでは、実践的な課題を多数用意しています。課題で作ったものは、ポートフォリオにできるので、転職や独立時にも評価されています。

【補足】CSSフレームワークは必要ない

CSSフレームワークとは、専用のCSSやJavaScriptがあり、それを読み込めば決まったclassを付けるだけで見た目が作れるものです。

例えば、下記のような感じで、各CSSフレームワークで決められたclassを付けるだけで、ボタンが完成します。

<button type="button" class="btn btn-primary">Primary</button>

web制作の場合、CSSフレームワークが必要ない理由が下記です。

今まで約300サイト程度作ってきましたが、CSSフレームワークを使ってほしいと言われた案件は、ほぼないです。

web開発では、使うことがあると思います。興味がある方は、人気のTailwind CSSを触ってみると良いです。

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。

転職成功者や副業・フリーランスデビューした方も出ています。

③ JavaScriptの学習

下記の流れで、進めると良いです。

1. JavaScriptの基礎学習
2. よくあるUIを作る
3. よく使うライブラリの勉強

JavaScriptは奥が深く、色々なことができますが、まずはweb制作に必要なことに絞って勉強するのがおすすめです。

JavaScriptの基礎学習

HTML・CSSの次のステップとして、JavaScriptの勉強を始めると、かなり難しいと感じる方は多いはずです。

挫折しないためにも、まずは超簡単な書籍から始めると良いです。

下記の書籍は、数少ないweb制作に特化されたJavaScriptの書籍なので、まずはこれで勉強するのがおすすめです。

さらに深く学びたい場合は、JavaScript Primerを使うと良いです。※ 入門書ではないため、初めてJavaScriptに触れる方にはおすすめできません。

よくあるUIを作る

よくあるUIは下記のようなものです。

Hello Mentorでもこれらを作る課題を出しています。

例えば、モーダルであれば、下記のような細かい点も抑えて、作れるようになりましょう。

よく使うライブラリの勉強

• Splide (スライダー)
• GSAP (アニメーション)

この2つはweb制作でよく使うので、触っておくと良いです。

ギャラリーサイトに載っているような、おしゃれでアニメーションが多いサイトを作りたい方は、特にGSAPを頑張りましょう。

以前、ギャラリーサイトSANKOU!の1ページ目のサイトを調査したところ、GSAP使用率 = 34 / 69 = 49.3%でした。

【補足】jQueryはやらなくて良い

jQueryはやらなくて良いです。

とは言え、まだ使っている現場もあります。気になる方は、少し触ってみても良いでしょう。

最近出た書籍がないので、公式ドキュメントを活用しながら学ぶのが良いです。

jQueryは古い？オワコン？今から勉強すべきかを解説！

④ WordPress

下記の流れで、進めると良いです。

1. WordPressの基礎学習
2. カスタム3兄弟
3. よく使うプラグインを触ってみる
4. ブロックテーマ(※)

※ ブロックテーマに関しては、最後に触れます。前半はクラシックテーマ(ほとんどの書籍で紹介されている作り方)について書いています。

一般的なサイトを作る場合、WordPressは難しいというよりは、『仕組みを理解して使えるようになるために覚えることが多い』といった感じです。

WordPressの基礎

下記の教材で勉強している方が多く、どちらもおすすめできます。

書籍は下記がおすすめです。

カスタム3兄弟

超初心者向けの書籍や教材でなければ、カスタム3兄弟は紹介されているはずです。実務でかなり使うので、必ず勉強しておくべきことです。

よく使うプラグインを触ってみる

WordPressには便利なプラグインがたくさんあります。ただし、よく使うものは限られています。

下記の記事で紹介しているので、ぜひご覧ください。

web制作でよく使うWordPressのプラグイン17選

ブロックテーマ

WordPressのオリジナルテーマ開発には、下記の2つの方法があります。

• クラシックテーマ(従来の作り方)
• ブロックテーマ(WordPressが推している作り方)

ブロックテーマでは、クラシックテーマ開発では使わなかった技術を使うので、現状ブロックテーマ開発ができない方はたくさんいると思われます。

今販売されている書籍もほとんどがクラシックテーマを前提にしています。ブロックテーマをメインで扱っている書籍は、下記しかないと思います。

今後ブロックテーマが主流になるかはわかりません。ただ、クラシックテーマがなくなると作れる方がかなり減るので、まだまだクラシックテーマの方が主流なのでは？と個人的に思っています。

まずはクラシックテーマ開発の勉強をして、その後、興味があればブロックテーマ開発の勉強もする流れで良いです。

⑤ webの仕組み

webの仕組みを深く学ぶために、下記の書籍をやるのがおすすめです。

⑥ ドメイン・サーバー

実際の仕事でサーバー周りで事故ると大変なので、あらかじめ触っておくのがおすすめです。

副業やフリーランスをやる方は、自分のサーバーとドメインが必要です。クライアントワークでよく使う組み合わせが、下記です。

• ドメイン：お名前.com
• サーバー：エックスサーバー

管理画面に慣れる意味でも、上記を契約するのがおすすめです。

⑦ その他

今まで紹介したもの以外にも、下記がやっておくべきことです。

SEOの基礎

SEOの専門家のように、詳しくなる必要はありませんが、何が検索結果に影響するのか、わかっていた方が良いです。

検索上位を取ることで大きなメリットがあるサイトを作る際は、特に重要です。SEOを分かっている人とそうじゃない人では出せる結果がかなり変わります。

Googleのアップデートが頻繁にあり、検索結果を決めるアルゴリズムに調整が入ります。したがって、最新の情報で勉強しないとあまり意味がありません。

1番良い勉強方法は、ブログを作ってみることです。(ただ、そこまでしなくてもOK)

Git / GitHub

Git / GitHubはweb開発では、どんなプロジェクトでも、ほぼ確実に使います。

web制作かつ1人で制作する場合、使わない人もいる印象です。ただ、どんなプロジェクトでも使った方が良いことは確かです。

• 複数人で制作・開発する
• GitHubで管理している既存サイトの改修をする

これらの場合、使うケースが多いので、勉強しておきましょう。

GitHub DesktopやSourcetreeなどのGitクライアントやエディタの拡張機能(Git Graphなど)を使って扱えれば良いです。

アクセシビリティ対応

下記の書籍を一通りやっておくと良いです。

アクセシビリティに関しては、あまり意識してない制作者も多い印象です。

ビルドツール

web制作で使うビルドツールはViteがおすすめです。gulpを使っている方も多いですが、Viteの方が高速で快適にコーディングできます。

Viteを使うと例えば、下記のようなことができます。

ここでnpmやyarnという、パッケージマネージャも使うことになります。

⑧ モダンweb制作

最近は『モダンなフレームワーク × ヘッドレスCMS』を使って、静的サイトにするケースも増えてきました。

今どきのweb制作手法を学びたい方は、下記をやりましょう。

※ 必須ではないので、飛ばしても良いです。

まとめと補足

この記事では、やるべきことの概要を紹介しました。

どう感じるかは人それぞれですが、やるべきことがかなりあると個人的には思っています。この仕事が好きで、長く続けたい人にしかおすすめできません。

すべてクリアしてからじゃないと転職や独立をできないわけではありません。

優先度の付け方や学ぶ手順などは、その人の状況によって変わるので、ぜひこの記事の内容も参考に計画を立ててみてください。

メンターを使って本気でプロを目指しませんか？