【2024年版】web制作でプロになるための独学ロードマップ！

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

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

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

おすすめの学習サイトは下記の記事で紹介しています。

【2024年版】web制作の独学に使える学習サイト15選！

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

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

👇 書くこと

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

👇 書かないこと

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

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

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

学習ロードマップの概要

信頼できる学習ロードマップの1つに、Developer Roadmapsがあります。

かなり詳しく紹介されているので、英語に抵抗がない方はぜひ覗いてみてください。

残念ながらweb制作に関する内容はありません。フロントエンドはあるので、その内容も踏まえつつ、この記事を書きました。

紹介する技術

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

デザインに関しても最後に触れますが、コーディング中心の内容になっています。上記の順番に進めるのがおすすめです。

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

① 事前準備

• Google Chromeをインストールする
• Visual Studio Codeをインストールする
• Google Chromeの便利な拡張機能を入れる
• Visual Studio Codeの便利な拡張機能を入れる

まずは準備として、上記をやりましょう。webサイトを制作後は、様々なブラウザで表示の確認をしますが、制作はGoogle Chromeでやるのがおすすめです。

Google Chromeの便利な拡張機能

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

Visual Studio Codeの便利な拡張機能

おすすめのVisual Studio Codeの拡張機能です。

② HTML・CSS

1. 基礎学習
2. デザインデータからコーディング練習
3. 中級者向けの学習

コーディングはこの順にやりましょう。

基礎学習

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

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

デザインデータからコーディング練習

基礎を勉強した後はとにかくたくさん作ることが重要です。

FigmaやXDからコーディングの練習には、弊社が運営している、模写修行を是非使ってください。まさに『デザインデータからコーディング練習』をするために作ったサービスです。

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

模写修行の教材は少し難しめなので、自信がない方は、まずは下記のサイトからやっても良いと思います。

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

中級者向けの学習

中級者向けとしていますが、必須でやるべきことです。

Developer Roadmapsのフロントエンド版では、CSS設計やSassを必須ではないとしていますが、それはweb開発だからです。

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

CSS設計

CSS設計については、このメディアでもいくつか記事を書いています。

【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説 初心者向けCSS設計手法を紹介！カオスなコードを卒業しよう！

書籍は下記の記事で3冊紹介しています。

【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり！

Sass

【徹底解説】SCSSの書き方まとめ！基本を抑えてコーディング速度向上！
Sassの書き方は、↑こちらの記事がわかりやすくまとまっています。この記事にあるものを自分でも全部書いてみると良いです。

下記の記事では、VSCodeの拡張機能(プラグイン)を使ってDart Sassを利用する方法を解説しています。

Dart SassをVSCodeの拡張機能(プラグイン)で利用する方法を紹介

僕の知る限り、Dart Sass対応かつ1から学べる書籍はありません。もし書籍で勉強したい方は、LibSassを使っている下記の書籍で勉強してから、ググってDart Sassの書き方に変換すると良いかもしれません。Dart SassもLibSassも書き方は大きくは変わりません。※ LibSassは非推奨なだけで今も使えます。

模写修行では、CSS設計も意識して書かれていますし、配布するコードはDart Sassを使っています。

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

Developer Roadmapsでは、CSSフレームワークも紹介されています。

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

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

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

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

• デザインが複雑なため逆に非効率
• 使う機会がほとんどない
• 仮に必要になっても調べながら十分対応できる

僕は今まで2,300サイト作ってきましたが、CSSフレームワークを使ってほしいと言われた案件は、覚えてる限り1件だけです。

もちろん環境にもよるとは思いますが、多くの方にとって使用頻度が低いでしょう。

web開発では、使うことはそこそこあると思います。特に最近は、Tailwind CSSが人気です。Panda CSSも人気が出そうな気がしています。

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

③ JavaScriptの学習

• JavaScriptの基礎
• よくあるUIを作る
• よく使うライブラリの勉強

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

JavaScriptの基礎

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

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

• 最近出た書籍
• 超初心者向けの書籍

これらの条件で選びましょう。動画の方がよければ、ドットインストールやUdemyでも良いと思います。

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

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

さらに深く学びたい場合は、下記の記事でおすすめしている書籍やサイトを使うと良いです。

JavaScriptの勉強ができるおすすめの本やサイト紹介！

よくあるUIを作る

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

• ドロップダウンメニュー
• ハンバーガーメニュー
• モーダル
• タブメニュー
• アコーディオン

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

例えば、モーダルであれば、dialogタグを使う / escで閉じる / 背面にフォーカスが当たらないようにする / 背面のスクールを止めるなど、細かい点もきっちり作れるようになりましょう。

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

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

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

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

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

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

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

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

jQueryもSass同様に最近出た書籍がないので、公式ドキュメントやUdemyなどを活用すると良いです。

下記の記事でjQueryを勉強しなくて良い理由について詳しく解説しています。

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

④ WordPress

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

これらの順でやると良いです。

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

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

WordPressの基礎

Twitterでは、たにぐちまことさんのUdemyを使っている方をよく目にします。たにぐちさんはYouTubeもとてもわかりやすいので、Udemyも良さそうな気がします。

アキユキさんが運営している、unazukiも評判が良さそうです。

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

カスタム3兄弟

• カスタム投稿
• タクソノミー
• カスタムフィールド

上記の3つがカスタム3兄弟と呼ばれています。

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

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

WordPressには便利なプラグインがたくさんあります。

プラグインはどのサイトでも使うので、事前に触っておきましょう。

よく使うものは下記の記事で紹介しています。プラグインを使用する際の注意点などにも触れているので、ぜひご覧ください。

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

ブロックテーマ

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

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

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

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

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

まずはクラシックテーマ開発の勉強をして、その後Reactやブロックテーマ開発の勉強もする流れが良いと思います。

⑤ webの仕組み

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

どちらも内容はほぼ同じなので好きな方で良いです。『この一冊で全部わかるWeb技術の基本』は多くの方がおすすめしていますが、出版時期が少し古く、内容も古い箇所がほんの少しあります。

⑥ ドメイン・サーバー

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

特殊な要件とは、例えば、本ドメインはA社のサーバー / サブドメインはB社のサーバー / メールはC社のサーバーで運用するような要件です。

副業やフリーランスをやる方は、自分のサーバーとドメインが必要です。クライアントワークでもよく使うので、エックスサーバーがおすすめです。

⑦ その他

今まで紹介したもの以外にも、下記がやっておくべきことです。中には必須ではないものもあります。

これらについて、1つずつ紹介します。

Prettier / ESLint

PrettierとESLintは、かなりざっくり説明すると下記になります。

JavaScriptをゴリゴリ書くようなサイトを作らない場合、ESLintはなくてもさほど不便はありませんが、Prettierはいますぐ入れた方が良いです。

設定方法も含め、一通り見ておくと良いです。

SEOの基礎

SEOはアフィリエイターのように、超詳しくなる必要はありませんが、何が検索結果に影響するのか、わかっていた方が良いです。

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

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

1番良い勉強方法は、ブログを作ってアフィリエイトをやることです。(ただ、そこまでしなくてもOKです)

Git / GitHub

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

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

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

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

ターミナルやコマンドプロンプトに抵抗がある方は、GitHub DesktopやSourcetreeなどのGitクライアントやVSCodeの拡張機能のGit Graphなどを使っても良いです。

アクセシビリティ対応

アクセシビリティ対応に関するおすすめの書籍が下記です。

ネット上の情報も書籍も少ない分野ですが、しっかり勉強しましょう。(僕もあまり自信がない分野なので、頑張ります。)

ビルドツール

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

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

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

⑧ モダンweb制作

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

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

• Astro
• React / Next.js
• microCMS
• Newt

⑨ webデザイン

1. 基礎学習
2. ツールの使い方を覚える
3. とにかくたくさん作ってフィードバックをもらう

デザインの勉強に必要なことは、上記の3つです。

基礎学習

webデザインの基礎学習には、chot.designがおすすめです。

chot.designでは、デザイン理論だけでなく、ツールの使い方 / ディレクション / コーディングに関しても学習できます。

書籍で勉強したい方は、下記が有名でおすすめです。

オーソドックスでシンプルなデザインから練習しましょう。駆け出しの方を見ていると、オリジナリティを出すことを意識しすぎて、わかりにくいデザインになっているケースが多いです。

そして、とにかくたくさんwebサイトを見ると良いです。

特にギャラリーサイトばかり見ないのは重要です。ギャラリーサイトはおしゃれに振り切ったデザインも多く、そればかり参考にしても、見やすい・使いやすいデザインができないからです。

サイトを見る際は、制作者目線だけでなく、ユーザー目線で見るとなお良いです。

ツールの使い方を覚える

webデザインであれば、Figmaの使い方を覚えましょう。

AdobeはXDに力を入れないとのことなので、今後はwebデザインのツール = Figmaになると思われます。

基礎学習と同様に、それほど時間をかけなくて良いです。むしろ、デザインを作りながら、わからないことは都度調べるでも良いくらいです。

PhotoshopとIllustratorも使う機会はありますが、webデザインであれば、まずはFigmaに慣れましょう。

画像の加工 / ロゴやイラストの制作は、それを専門にやる人がいます。ただし、簡単なものはwebデザイナーでもできた方が良いです。

とにかくたくさん作ってフィードバックをもらう

• 基礎学習
• ツールの使い方を覚える
• とにかくたくさん作ってフィードバックをもらう

これらの比率は、1：0.5：8.5くらいで良いです。それくらい自分でたくさん作ることが大事です。

また、プロにフィードバックをもらう機会は、絶対に作った方が良いです。

Hello Mentorでは、模写修行のデザインを作ったデザイナーがメンターをします。

デザインにおいて、プロからのアドバイスが超重要なので、興味がある方はまずは無料相談へお越しください。

まとめと補足

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

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

すべてクリアしてからじゃないと転職活動等をできないわけではありません。また、転職や副業希望の方は、ポートフォリオも作らないといけません。

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

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