弊社で作った教材がセール中!
セール中
※ 上記リンクからご購入いただければ、割引価格(1,500円)で購入できます。
web制作の学習ロードマップはこの記事以外にも、たくさん公開されています。ただし、それらは下記の内容が多いと感じます。
- 初心者を脱するための学習ロードマップ
- 稼ぐためのロードマップ
この記事では、脱初心者や稼ぐためではなく、技術面に特化したプロになるための学習ロードマップを紹介します。初めて聞く内容もあるかもしれません。今わからなくても、後で見返すために、ぜひブックマークしてご活用してください。
おすすめの学習サイトは下記の記事で紹介しています。
【2025年版】おすすめのコーディング練習サイト14選!(無料あり)👇 メンターやってます 👇
模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。
特にこんな方におすすめ!
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
まずは、下記リンクから個別ガイダンスへお越しください。
👆 メンターやってます 👆
この記事の目次
この記事で書くこと・書かないこと
👇 書くこと
- 勉強する必要がある技術
- おすすめの書籍や教材
👇 書かないこと
- 稼ぐための方法
- 具体的なコードの書き方
フリーランスや副業で稼ぐためのコツや転職・就職に関しては、ほとんど触れません。副業に関しては、下記の記事で紹介しています。
web制作の副業を徹底解説!実はフリーランスになるより難しい?紹介する技術
下記の順番に進めるのがおすすめです。
- 事前準備
- HTML・CSS
- JavaScript
- WordPress
- webの仕組み
- ドメイン・サーバー
- その他
- モダンweb制作
この内容は、弊社が運営しているHello Mentorで教えている内容でもあります。ここまでカバーしている学習支援サービスはなかなかないと思うので、本気でプロになりたい方は、ぜひ下記のサービスサイトもご覧ください。
① 事前準備
- Google ChromeとCursorのインストールする
- Google ChromeとCursorの拡張機能を入れる
様々なブラウザがありますが、ほとんどのエンジニアは、Google Chromeを使っています。
また、エディタは、AI搭載のCursorを使うと、かなり効率化できます。課金すると20ドルかかりますが、十分元を取れると思います。
生成AIも利用して、効率的に学習すると良いです。これからの時代、AIを活用して制作を進める流れは、加速するでしょう!
Google Chromeの便利な拡張機能
おすすめのGoogle Chromeの拡張機能です。
Cursorの便利な拡張機能
おすすめのCursorの拡張機能です。
- Live Server:保存不要でローカルサーバーとライブリロード
- Prettier – Code formatter:コードを自動整形
- Markuplint:正しいHTMLを書けているかチェック
- CSSTree validator:CSSの文法エラーをチェック
- ExtractionCssSelector:HTML要素からCSSセレクタを生成
- HTML CSS Support:HTML 内で CSS クラス補完
- Auto Rename Tag:タグ名変更を自動で反映
- Highlight Matching Tag:対応タグを強調表示
- indent-rainbow:インデントに色付け
- Japanese Language Pack for Visual Studio Code:VSCodeを日本語化
- Trailing Spaces:文末スペースを削除
- vscode-icons-mac/vscode-icons:ファイルにアイコンを表示
- Path Intellisense:パス補完
- Code Spell Checker:スペルチェック
- Git Graph:Git 操作を GUI 化
- JavaScript (ES6) code snippets:JS コード補完
- CSS Variable Autocomplete:CSS カスタムプロパティ補完
- html tag wrapper:コードをタグでラップ
- CSS Peek:HTML から CSS 定義へジャンプ
- Live Sass Compiler:SCSS をコンパイル
- WordPress Snippet:WordPress 関数補完
② HTML・CSS
下記の流れで、進めると良いです。
- 基礎学習
- figmaからのコーディング練習
- 簡単なサイトを作る練習
- CSS設計とSCSSの学習
- 実践的なサイトを作る練習
基礎学習
基礎学習はドットインストールや書籍でやるのが良いです。Progateを使っても良いですが、Progateだけだと不十分です。
書籍は初心者向けであれば、何を使っても大きな差はありません。2年以内に出た書籍で、見やすいと思ったものを選びましょう。
書籍でもWebの教材でも、学べるのは基礎の基礎のみです。実務で必要なことの50%もカバーしていないものが多いです。
figmaからのコーディング練習
基礎学習後はとにかくたくさん作ることが重要です。
実務では、figma等で作ったデザインをもらい、それを忠実に再現することになります。弊社で出している、下記のUdemy教材では、figmaからのコーディング練習ができるようになっています。
【95%OFF】弊社で作った教材がセール中!
ベストセラー&かなり高評価もいただいています!他にも教材を出しているので、ぜひご購入ください!
簡単なサイトを作る練習
簡単なサイトを作る練習では、ぜひ模写修行をご利用ください。
コーディング教材の【模写修行】は他の教材と何が違うのか?模写修行をやってみて難しかった方は、まずは下記のサイトからやっても良いと思います。
書き方は人によって違うので、どれか1つのサイトを参考にするのではなく、全部やってみて自分に合うものを取り入れると良いです。
模写修行は全教材が無料!
さっそく練習する
CSS設計とSCSSの学習
昨今は、CSS設計とSCSSを必須ではないと言う方もいますが、それはweb開発分野での話しです。
ReactやVueを使ったweb開発では、web制作とは少し違う書き方をするので、CSS設計とSCSSが必須ではない場合もあります。しかし、web制作では必須なので注意してください。
CSS設計
弊社で作った下記のUdemy教材では、Web制作分野で必要なCSS設計の知識を網羅的に解説しました。実際にサイトを作りながら学ぶセクションもあるので、より理解しやすい内容になっています。
【95%OFF】弊社で作った教材がセール中!
このメディアでもいくつか記事を書いています。
【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フレームワークを使ってほしいと言われた案件は、ほぼないです。
CSSが書ける人にとって、CSSフレームワークは使って欲しいと言われれば使えるので、わざわざ勉強しなくてOK!
web開発では、使うことがあると思います。興味がある方は、人気のTailwind CSSを触ってみると良いです。
基礎学習後...迷子になっていませんか?
Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか?
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。
転職成功者や副業・フリーランスデビューした方も出ています。
③ JavaScriptの学習
下記の流れで、進めると良いです。
- JavaScriptの基礎学習
- よくあるUIを作る
- よく使うライブラリの勉強
JavaScriptは奥が深く、色々なことができますが、まずはweb制作に必要なことに絞って勉強するのがおすすめです。
JavaScriptの基礎学習
HTML・CSSの次のステップとして、JavaScriptの勉強を始めると、かなり難しいと感じる方は多いはずです。
挫折しないためにも、まずは超簡単な書籍から始めると良いです。
下記の書籍は、数少ないweb制作に特化されたJavaScriptの書籍なので、まずはこれで勉強するのがおすすめです。
さらに深く学びたい場合は、JavaScript Primerを使うと良いです。※ 入門書ではないため、初めてJavaScriptに触れる方にはおすすめできません。
よくあるUIを作る
よくあるUIは下記のようなものです。
- ドロップダウンメニュー
- モーダル
- ハンバーガーメニュー
- タブメニュー
- アコーディオン
- スムーススクロール
- Intersection Observerを使った機能
Hello Mentorでもこれらを作る課題を出しています。
例えば、モーダルであれば、下記のような細かい点も抑えて、作れるようになりましょう。
- dialogタグを使う
- escで閉じる
- 背面にフォーカスが当たらないようにする
- 背面のスクールを止める
よく使うライブラリの勉強
- Splide (スライダー)
- GSAP (アニメーション)
この2つはweb制作でよく使うので、触っておくと良いです。
ギャラリーサイトに載っているような、おしゃれでアニメーションが多いサイトを作りたい方は、特にGSAPを頑張りましょう。
以前、ギャラリーサイトSANKOU!の1ページ目のサイトを調査したところ、GSAP使用率 = 34 / 69 = 49.3%でした。
一般的なweb制作では、あまり多くのライブラリは使いません!
【補足】jQueryはやらなくて良い
jQueryはやらなくて良いです。
- jQueryを使わないとできないことはない
- jQueryを使うメリットは今の時代ない(昔はありました)
とは言え、まだ使っている現場もあります。気になる方は、少し触ってみても良いでしょう。
最近出た書籍がないので、公式ドキュメントを活用しながら学ぶのが良いです。
jQueryは古い?オワコン?今から勉強すべきかを解説!④ WordPress
下記の流れで、進めると良いです。
- WordPressの基礎学習
- カスタム3兄弟
- よく使うプラグインを触ってみる
- ブロックテーマ(※)
※ ブロックテーマに関しては、最後に触れます。前半はクラシックテーマ(ほとんどの書籍で紹介されている作り方)について書いています。
一般的なサイトを作る場合、WordPressは難しいというよりは、『仕組みを理解して使えるようになるために覚えることが多い』といった感じです。
WordPressの基礎
下記の教材で勉強している方が多く、どちらもおすすめできます。
書籍は下記がおすすめです。
カスタム3兄弟
- カスタム投稿
- タクソノミー
- カスタムフィールド
超初心者向けの書籍や教材でなければ、カスタム3兄弟は紹介されているはずです。実務でかなり使うので、必ず勉強しておくべきことです。
よく使うプラグインを触ってみる
WordPressには便利なプラグインがたくさんあります。ただし、よく使うものは限られています。
下記の記事で紹介しているので、ぜひご覧ください。
web制作でよく使うWordPressのプラグイン17選ブロックテーマ
WordPressのオリジナルテーマ開発には、下記の2つの方法があります。
- クラシックテーマ(従来の作り方)
- ブロックテーマ(WordPressが推している作り方)
ブロックテーマでは、クラシックテーマ開発では使わなかった技術を使うので、現状ブロックテーマ開発ができない方はたくさんいると思われます。
今販売されている書籍もほとんどがクラシックテーマを前提にしています。ブロックテーマをメインで扱っている書籍は、下記しかないと思います。
今後ブロックテーマが主流になるかはわかりません。ただ、クラシックテーマがなくなると作れる方がかなり減るので、まだまだクラシックテーマの方が主流なのでは?と個人的に思っています。
まずはクラシックテーマ開発の勉強をして、その後、興味があればブロックテーマ開発の勉強もする流れで良いです。
⑤ webの仕組み
webの仕組みを深く学ぶために、下記の書籍をやるのがおすすめです。
最初から完全理解は目指さなくてOK!概要を理解する程度で良いです!
⑥ ドメイン・サーバー
実際の仕事でサーバー周りで事故ると大変なので、あらかじめ触っておくのがおすすめです。
- WordPressで作った自分のサイトを公開する
- サブドメでサイトを公開する
- Basic認証をかける
- リダイレクトをかける
- SSL化する
- サーバーとドメインの紐付けをする
- サーバー移転をできるようにする
副業やフリーランスをやる方は、自分のサーバーとドメインが必要です。クライアントワークでよく使う組み合わせが、下記です。
- ドメイン:お名前.com
- サーバー:エックスサーバー
管理画面に慣れる意味でも、上記を契約するのがおすすめです。
⑦ その他
今まで紹介したもの以外にも、下記がやっておくべきことです。
- SEOの基礎
- Git / GitHub
- アクセシビリティ対応
- ビルドツール
SEOの基礎
SEOの専門家のように、詳しくなる必要はありませんが、何が検索結果に影響するのか、わかっていた方が良いです。
検索上位を取ることで大きなメリットがあるサイトを作る際は、特に重要です。SEOを分かっている人とそうじゃない人では出せる結果がかなり変わります。
- 書籍で勉強するなら最新の書籍にする
- YouTubeや記事も最新のものを参考にする
Googleのアップデートが頻繁にあり、検索結果を決めるアルゴリズムに調整が入ります。したがって、最新の情報で勉強しないとあまり意味がありません。
1番良い勉強方法は、ブログを作ってみることです。(ただ、そこまでしなくてもOK)
Git / GitHub
Git / GitHubはweb開発では、どんなプロジェクトでも、ほぼ確実に使います。
web制作かつ1人で制作する場合、使わない人もいる印象です。ただ、どんなプロジェクトでも使った方が良いことは確かです。
- 複数人で制作・開発する
- GitHubで管理している既存サイトの改修をする
これらの場合、使うケースが多いので、勉強しておきましょう。
GitHub DesktopやSourcetreeなどのGitクライアントやエディタの拡張機能(Git Graphなど)を使って扱えれば良いです。
アクセシビリティ対応
下記の書籍を一通りやっておくと良いです。
アクセシビリティに関しては、あまり意識してない制作者も多い印象です。
ビルドツール
web制作で使うビルドツールはViteがおすすめです。gulpを使っている方も多いですが、Viteの方が高速で快適にコーディングできます。
Viteを使うと例えば、下記のようなことができます。
- 画像の圧縮
- webpの自動生成
- コードの圧縮
- SCSSのコンパイル
- ベンダープレフィックス自動付与
- 保存するとブラウザに自動反映(ホットリロード)
- ...
ここでnpmやyarnという、パッケージマネージャも使うことになります。
⑧ モダンweb制作
最近は『モダンなフレームワーク × ヘッドレスCMS』を使って、静的サイトにするケースも増えてきました。
今どきのweb制作手法を学びたい方は、下記をやりましょう。
- Astro
- React / Next.js
- microCMS
- Newt
※ 必須ではないので、飛ばしても良いです。
個人的にAstroを使ったサイトは、今後も増えていくと思っています!弊社でも使っています!
まとめと補足
この記事では、やるべきことの概要を紹介しました。
どう感じるかは人それぞれですが、やるべきことがかなりあると個人的には思っています。この仕事が好きで、長く続けたい人にしかおすすめできません。
すべてクリアしてからじゃないと転職や独立をできないわけではありません。
優先度の付け方や学ぶ手順などは、その人の状況によって変わるので、ぜひこの記事の内容も参考に計画を立ててみてください。
自分が駆け出しの時にこんな情報が欲しかったので、かなり詳しく書いてみました!👍
メンターを使って本気でプロを目指しませんか?
模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。
下記のような、基礎学習後にやるべきことがわからず、迷子状態になっている方に特におすすめです
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
メンターは、全員が現役のプロです。駆け出しの方やメンターだけをやっている方はいません。
少数精鋭で運営しているため、受け入れ人数に限りがあります。本気でWeb制作業界を目指している方は、ぜひご検討ください。
弊社で作った教材がセール中!
セール中
※ 上記リンクからご購入いただければ、割引価格(1,500円)で購入できます。
当メディア運営メンバーでメンターやってます!👉
詳しく見る
基礎学習後に迷子になっていませんか?脱初心者したいなら、私たちにお任せください!