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

web制作の学習ロードマップはこの記事以外にも、たくさん公開されています。ただし、それらは初心者を脱するための学習ロードマップであることが多いと感じます。

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

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

web制作の学習サイト17選！独学向け・無料あり！

---

---

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

👇 書くこと

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

---

👇 書かないこと

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

---

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

学習ロードマップの概要

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

↑公開されている技術や言語です。

かなり詳しく紹介されているので、英語に抵抗がなく、上の画像にある技術を勉強したい方はぜひ覗いてみてください。

2020年版ですが、Twitterで日本語訳を紹介している方がいました。
参考：2020年版のロードマップ和訳

Developer Roadmapsのフロントエンド版をベースに、web制作にはいらないものは削り、必要なものは追加して、この記事を書きました。

紹介する技術

1. webデザイン
2. インターネットについて
3. HTML・CSS
4. JavaScript
5. WordPress
6. その他

必要ないところは飛ばしてください。デザインしかやらない場合、1,2だけ見れば良いです。コードを書く方は2~6もご覧ください。

webデザインの学習

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

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

基礎学習

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

chot.designの口コミ・評判は？使ってみた感想も紹介！

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

書籍で勉強したい方は、↑こちらがおすすめです。

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

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

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

ツールの使い方を覚える

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

1人で作業する分には、 FigmaもXDもあまり変わりません。サイトの規模が大きかったり、共同作業が必要な場合、Figmaの方が便利だと感じる人が多いと思います。

FigmaとXDは、どちらを使っても良いですし、ツールの使い方も基礎学習と同様に、それほど時間をかけなくて良いです。むしろ、デザインを作りながら、都度調べるでも良いくらいです。

XDの勉強でおすすめは↑こちらです。XDは公式の動画もわかりやすくて良いです。

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

ツール	役割
Figma / XD	webデザイン
Photoshop	画像の加工
Illustrator	ロゴやイラストの制作

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

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

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

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

昔出会ったあるデザイナーは本をよく読み知識豊富だったが、作るデザインはいつも複雑で使いにくく魅力に欠けていた。別のデザイナーは本もあまり読まず決して知識豊富ではなかったが、作るデザインはいつもシンプルで使いやすく魅力的だった。知識獲得を否定したくないが、作る力はまた別問題と思う。

Tweet

↑こちらのツイートはとても共感しました。

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

良さそうだと思うサービスが、PLUS REVIEWです。料金も1時間4,000円で安いので活用すると良いです。MENTAで探しても良いと思います。

メンターの探し方は、下記の記事を参考にしてみてください。

プログラミング学習のメンターの探し方！必要性やスクールとの比較まで解説！

僕たちもメンターをやっています。

本気でプロになりたい方へ！エンジニア/デザイナー向けメンタリングサービスはじめました！

インターネットについての学習

インターネットについては、こちらの1冊がおすすめです。

少しだけ内容が古いと感じた点もあるので、最新の書籍で勉強したい方は、他の書籍でも良いです。web制作の場合、インターネットの仕組みを詳細に理解していないといけないわけではないので、基礎的な書籍を選ぶと良いです。

Developer Roadmapsで紹介されている内容

Developer Roadmapsのフロントエンド版では、下記が勉強すべきこととしてあげられています。

• インターネットの仕組み
• HTTPとは
• ブラウザーとその仕組み
• DNSとその仕組み
• ドメイン名とは
• ホスティングとは

これらの概要は、ほとんど前述した書籍でカバーできます。

レンタルサーバーを触っておくことは必須

レンタルサーバーを触っておくことは必須です。複数契約して、下記をやっておくと良いです。

• サイトを公開
• 新規でWordPressのインストール
• 1つのドメインに複数WordPressをインストール
• サブドメでサイトを作る
• Basic認証をかける
• リダイレクトをかける
• SSL化
• サーバーとドメインの紐付け
• WordPressで作ったサイトのサーバー移行
• メールの設定

実際に仕事をしたときに、サーバー関連で事故るのが1番地獄なので、予め触っておきましょう。

複数契約し続けるのはお金がかかるので、無料期間で試したり、1ヶ月だけ契約するで良いと思います。

自分のテストサーバーとして、ずっと契約しておくのは、エックスサーバーがおすすめです。僕は特別な理由がない限り、クライアントさんにもエックスサーバーをおすすめしています。

【シェアNo.1】安定のエックスサーバーの契約からWordPressのインストールまで解説

実務でよく使うレンタルサーバーは下記の記事で紹介&比較しています。

初心者にもおすすめ！主要レンタルサーバー8商品を徹底比較

HTML・CSSの学習

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

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

基礎学習

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

書籍でおすすめは、Webクリエイターボックスを運営するManaさんの2冊です。

基礎学習のための書籍は、最近出たものであれば、何を使っても良いと思います。あまり大きな差はありません。

デザインデータからコーディングの練習&中級者向けの学習

• デザインデータからコーディングの練習
• CSS設計
• Sass

基礎を勉強した後にやるべきことです。

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

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

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

模写修行の教材は少し難しめなので、自信がない方は、まずは下記がおすすめです。

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

CSS設計

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

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

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

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

Developer Roadmapsのフロントエンド版では、CSS設計やこの後説明するSassを必須ではないとしていますが、それはweb開発だからです。確かに、ReactやVueを使ったweb開発では、CSS設計とSassを気にしなくても良い場合もあります。しかし、web制作では必須なので注意してください。

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が人気です。

JavaScriptの学習

• JavaScriptの基礎
• jQuery(必須ではない)
• よく使うライブラリ

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

JavaScriptの基礎

HTML・CSSの次のステップとして、JavaScriptの勉強を始めると、かなり難しいと感じる方は多いはずです。従って、まずは簡単な書籍から始めると良いです。

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

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

特にJavaScript Primerは難しめなので、最初の勉強にはおすすめしません。基礎ができてから、もっと深く学ぶにはとてもおすすめです。

jQuery(必須ではない)

jQueryをやるかやらないかには賛否あります。

jQueryを使わないとできないことや、使うことでの大きなメリットはありません。ただし、web制作ではまだまだ使われているので、やっておいても良いでしょう。改修などでは触る機会があるはずです。

また、初めてプログラミングを勉強する方にとって、素のJavaScriptを使うよりもわかりやすいと感じると思います。

jQueryもSass同様に最近出た書籍がないので、Udemyなどを活用すると良いです。

jQueryの現状や勉強すべきかに関しては、下記の記事で詳しく解説しています。

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

よく使うライブラリ

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

これらはweb制作でよく使うので、触っておくと良いです。slickはjQueryとセットで使わないといけないので、必須ではありません。

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

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

WordPressの学習

• WordPressの基礎
• カスタム3兄弟
• よく使うプラグイン

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

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

WordPressの基礎

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

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

• ちゃんと学ぶ、WordPress テーマ開発講座
• unazuki | Web制作のためのオンライン動画学習サービス

カスタム3兄弟

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

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

この3つは初心者向けの書籍では紹介していないかもしれません。しかし、web制作ではかなり使うので、必ず勉強しておくべきことです。

よく使うプラグイン

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

プラグインはどのプロジェクトでも必ず使うので、よく使うものは触っておきましょう。

web制作で使うものは下記の記事で紹介しています。紹介している17個でweb制作で使うものは、かなりカバーできると思います。プラグインを使用する際の注意点などにも触れています。

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

その他の学習

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

• タイピング / ショートカットキー / Emmet / VSCodeの拡張機能
• Prettier / ESLint
• SEO
• Git / GitHub
• アクセシビリティ対応
• タスクランナー / モジュールバンドラー

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

タイピング / ショートカットキー / Emmet / VSCodeの拡張機能

• タイピング
• ショートカットキー
• Emmet
• VSCodeの拡張機能

必須ではありませんが、自分の作業効率化のためにやった方が良いことです。

Prettier / ESLint

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

Prettier / ESLint	役割
Prettier	コードを自動でフォーマットするもの。
ESLint	JavaScriptのコードが正しいか自動でチェックもの。

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

SEO

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

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

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

1番良い勉強方法は、ブログを作ってアフィリエイトをやることです。

Git / GitHub

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

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

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

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

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

↑１つ目はGitHub Desktop、2つ目がSourcetreeを使った解説記事です。

アクセシビリティ対応

アクセシビリティ対応を勉強できる書籍はほとんどありません。ネット上の情報もあまり多くありませんが、ググりながら勉強するしかないです。

おそらく唯一の書籍が↑こちらですが、2015年出版で古いのが難点です。また、海外の本を翻訳したもので、とても読みにくいです。

僕もあまり自信がない分野なので、今後少しづつ勉強したいと思っています。

タスクランナー / モジュールバンドラー

タスクランナー / モジュールバンドラーを使うと、例えば下記のことが自動化できます。

↓web制作でよく使われるタスクランナー / モジュールバンドラーです。

• npm scripts
• Vite
• gulp
• webpack

どれか1つでやりたい事は全部できますが、勉強だと思って3つとも触っておくと良いです。ここでnpmやyarnという、パッケージマネージャも使うことになります。

まとめと補足

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

必須ではないけど、できると良いことも含めると、もっとたくさんあります。

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

挫折しないことが大切なので、効率よくスムーズに勉強したい方は、メンターや質問出来るサイトも活用すると良いです。

プログラミング学習のメンターの探し方！必要性やスクールとの比較まで解説！プログラミング質問し放題サイト7選！有料・無料に分けて紹介！

---

最後に少しだけ宣伝...

模写修行はデザインデータからコーディングの練習ができるサービスです。CSS設計やSassの具体的で実践的な書き方もわかるようになっています。

登録すると無料の教材も見れるので、ぜひご利用ください。

メンターもやっています。

本気でプロになりたい方へ！エンジニア/デザイナー向けメンタリングサービスはじめました！