2021/09/12 （最終更新日：2022/11/21）

【保存版】Web制作のおすすめ独学ロードマップ【転職・脱サラも可能】

Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ

※本サイトはアフィリエイト広告を利用しています。

【Web制作のロードマップを知りたい人】

「Web制作のスキルを最短最速で身に付けられる、おすすめの独学ロードマップが知りたいなぁ」

こういった疑問に答えます。

この記事を書いている僕は、
今回紹介する手順で
独学でWeb制作を勉強し、
過去に未経験からWeb制作会社へ
エンジニアとして転職したり、
フリーランスエンジニアとして独立
するなどしてきました。

Web業界への転職を目指すにせよ、
フリーランスとしてやっていくにせよ、
この記事通りに学習を進めていけば
どちらも十分に実現が可能ですよ。

Web制作の独学ロードマップ【転職・脱サラも可能】

ロードマップの全体像が、以下の通り。

その①：HTML・CSSの学習【Web制作の基礎】
その②：Sassの学習【CSSを楽に書こう】
その③：jQueryの学習【サイトに動きをつけてみよう】
その④：ドメインとサーバーの基礎知識【サイトを世の中に公開】
その⑤：WordPressの学習【身に付けて単価をアップ】
その⑥：SEOの学習【Googleに評価されるページとは】
その⑦：【番外編】Shopifyの学習【ECサイトを簡単に構築】

順番に解説していきます。

その①：HTML・CSSの学習【Web制作の基礎】

こちら2つの言語は、
HTMLはマークアップ言語、
CSSはスタイルシート言語
とそれぞれ呼ばれ、サイトの見た目を作るもの。

ここの学習ゴールは、以下の2つ。

ゴール①：サイト模写の習得
ゴール②：デザインカンプからのコーディングの習得

ゴール①：サイト模写の習得

サイト模写とは、
既存のWebサイトのコピーを作成すること。

詳しい手順は、以下の記事で解説しています。

≫【Web制作】サイト模写のやり方を徹底解説【スキル向上におすすめ】

ゴール②：デザインカンプからのコーディングの習得

もうひとつの学習ゴールが、
デザインカンプからのコーディング。

こちらはその名の通り、
「デザインカンプ」を参考に
そのデザイン通りにコーディングすること。
#デザインカンプとは「サイトのデザインの完成見本」みたいな感じ

このデザインカンプですが、
ネット上で無料公開されているもの
がいくつかあるので、そちらを利用して
コーディングしてみてください。

その際、
「文字のサイズ」や「余白」などを
自分で取得しないといけないのですが、
その取得方法を、XDとPhotoshop
という、デザインカンプによく使われる
2つに分けて、以下の記事でそれぞれ解説しました。

『XD』に関する記事

『Photoshop』に関する記事

≫ Photoshopのデザインカンプからコーディング【データの書き出し方法】

動きをつける（JavaScriptの実装）は後回しでOK

ちなみに、模写するサイトを見ると、
スライダーやアコーディオンなど
所々で動きがついていると思いますが、
これらは一旦無視して、とりあえず
見た目の部分だけ実装すればOK。

これらの動きは、後ほど紹介する
JavaScript（以降、JS）という
プログラミング言語で実装されており、
難易度が少し上がるので
まだ今の段階では無視して先に進みましょう。

その②：Sassの学習【CSSを楽に書こう】

ここまでで、HTMLとCSSを
ある程度書けるようになったら、
次にCSSを書きやすくする
『Sass』を勉強することをおすすめします。

こちらに関しては、
導入・学習方法を以下の記事で解説しています。

≫【VSCode版】Sassの使い方を解説【初心者向け】

その③：jQueryの学習【サイトに動きをつけてみよう】

次に、サイトに動きを付ける方法を学んでいきます。

動きと言われても
パッとしない方もいるかもなので、
頻出の実装を下記にまとめました。

ハンバーガーメニュー
スムーズスクロール
スライダー
トップへ戻るボタン
アコーディオンメニュー

これらを実装するためには
jQueryというライブラリを使います。
これは、先ほどチラっと出てきた
『JS』を書きやすくするための言語
みたいなものだと思っていただければOK。

勉強方法ですが、下記の手順がおすすめです。

手順①：Progate（jQueryコース）
手順②：過去のサイト模写に動きをつける

手順①：Progate（jQueryコース）

まずは、ProgateのjQueryコースで基礎を学習します。

たまに聞かれる意見として
「jQueryの前にJSを勉強すべき」
というものがありますが、
Web制作においては正直
とりあえずJSは後回しでOK。

こちら実体験ですが、
JSとjQueryでは微妙に記述方法が違い、
駆け出しのうちにどちらも勉強すると
頭の中でごちゃ混ぜになり混乱してしまうため。

まずはjQueryで
頻出の基礎的な実装が
出来るレベルを目指しましょう。

それが出来るようになり
まだ余裕があるなら、JSにも挑戦してみてください。

手順②：過去のサイト模写に動きをつける

Progateをやってみて
jQueryがどんなものかが分かったら、
次のステップとして
過去に取り組んだサイト模写に
動きをつけていきましょう。

かなり苦戦すると思いますが、
このググりながら実装する過程が最も成長します。

とはいえ「まだ難しい」という人へ【おすすめ書籍を紹介】

とはいっても、
Progateだけではまだ難しい
という方もいると思うので、
そんな方には、下記の書籍をオススメします。

jQuery最高の教科書

【 jQuery最高の教科書】

Amazon Kindle 楽天ブックス楽天KOBO

こちら、「jQueryといえばこの本」
と言われるぐらい有名な書籍なので、買っておいて損はしません。

その④：ドメインとサーバーの基礎知識【サイトを世の中に公開】

ここまでで、次に紹介する
WordPressを使わないサイト、
いわゆる静的サイトは
作れるようになったわけですが、
まだこれでは仕事を受けるには不十分。

というのも、Web制作の仕事では、
制作の途中経過を共有したり、
最終的な成果物を納品する時のために、
作成したファイルをサーバーにアップ
出来るようになっておく必要があります。

というわけで、この段階で
ドメインとサーバーを契約しておきましょう。

ドメインとサーバーについては、
レンタルサーバー大手の『Xserver』
が圧倒的におすすめでして、
その評判と契約手順を、以下の記事で解説しました。

≫【初心者ならコレ】レンタルサーバーにエックスサーバー[Xserver]をオススメする5つの理由

こちらのサーバーは国内シェアNo.1で、
あの有名ブロガーのマナブさんが使っているのも、このXserver。

Web制作をしている人は皆
自分のドメイン・サーバーを持っている
というぐらいの必要経費なので、
こんなところでケチっていてはダメです。

忘れずに契約するようにしておきましょう。

その⑤：WordPressの学習【身に付けて単価をアップ】

このWordPressを使った
サイト制作が出来るようになると
Web制作の単価が跳ね上がるので、
これはかならず身に付けておきたいスキル。

ちなみに、WordPressは、
世界で最も使われているCMS
（Contents Management System）です。

CMSとは、サイトを更新したい時にわざわざHTML・CSSを書き換えなくても、管理画面から記事や画像を登録・更新できるシステムのこと。

WordPressの学習方法に関しては、以下の記事で解説しています。

≫【Web制作者必見】WordPressの学習方法を解説【テーマも自作可能】

その⑥：SEOの学習【Googleに評価されるページとは】

SEOとは、簡単に説明すると、
Google検索の画面で上位表示をする施策のこと。

Web制作をするなら
基礎的なSEOの知識は必須でして、
学習方法として、下記の2つをオススメします。

マナブさんのSEO対策の動画講義【YouTube】
現場のプロから学ぶ SEO技術バイブル【書籍】

マナブさんのSEO対策の動画講義【YouTube】

少し長いですが、
SEOに関する知識を
網羅的に学ぶことのできる
とてもオススメの動画です。

現場のプロから学ぶ SEO技術バイブル【書籍】

現場のプロから学ぶSEO技術バイブル

【現場のプロから学ぶ SEO技術バイブル】

Amazon Kindle 楽天ブックス楽天KOBO

書籍なら上記のものがおすすめ。

以上の2つに載っていない
SEO関連の知識というのは
これまでの経験上ほとんど無いので、
あとは最新のSEO関連のニュースを
随時キャッチアップしておけばOKです。

その⑦：【番外編】Shopifyの学習【ECサイトを簡単に構築】

これまでの知識でも十分稼げますが、
最近需要が増しているECサイト
を簡単に構築できるサービス
『Shopify』も学習しておくと、
ライバルとかなり差別化できます。

Shopifyは、2004年にカナダで創業されたECサイト作成サービスで、2021年時点で時価総額10兆円を超え（ホンダが約5兆円なので倍）、創業からわずか10数年でECサイトの世界No.1のシェア数を誇るサービスに。

今後もまだまだ伸び続ける
と言われているサービスなので、
「ECサイトの構築を仕事にしたい」
という人は、このShopifyを学習しておけば間違いなし。

Shopifyの勉強方法は？【デイトラが最強】

Shopifyの勉強方法ですが、
デイトラというオンラインスクール
が圧倒的にオススメでして、
Shopify Japanの公式サイト
にも特設LPが用意されているほど。

「これだけコスパ良くShopifyを学べる環境は他には無い…！」

と断言できるレベルなので、
興味のある方はぜひ、下記のリンクから覗いてみてください。
≫【公式】デイトラShopifyコース

ちなみに、僕自身も過去に
このShopifyコースを受講していて、
そちらの感想を下記の記事にまとめています。

≫【衝撃】デイトラShopifyコースの内容・評判を徹底解説【Shopify Japanも公認】

Web制作の独学ロードマップ完走後の未来

この記事のロードマップを順にこなせば、
毎月、今の収入にプラスで5〜50万円、
専業でやっていけば100万円以上稼ぐことも十分に可能。

実際に僕自身も、
独立した初月から月収50万円以上
稼ぐことが出来たし、複業の今でも稼げている状態です。

このように、
Web制作のスキルを身に付けると、
副業で稼ぐことも、独立をして
会社に依存せず好きな場所で働く
ことも実現が可能になります。

とはいえ、ここまで読んで、

「そんなうまい話があるわけ…。」

と考える人が、もしかしたらいるかもです。

確かに、誰しもが実現可能だとは思っていません。
誰でも出来るんだったら
市場が飽和状態になってしまってますからね（笑）

こんなに魅力的に見える
Web制作というビジネスが、
今もなお飽和状態になっていない理由は
途中で諦めてしまう人が一定数いるため。

その理由は様々で、
『勉強が習慣化出来ない人』
『難しくて途中で挫折してしまう人』などなど。

しかし、下記のように、
Web制作というのは
諦めず継続できる人が勝つ世界で、
これを逆にチャンスと捉えるべきです。

Web制作はホントに辞めない人が勝つ世界です。

僕が駆け出しの時期に周りにいた方で、1年が経った今も継続されている方は本当にごくわずか。
現状Twitter上にはとても沢山のWeb制作者の方がいらっっしゃいますが9割型は途中で挫折します。

どれだけ辛い時でも
淡々と継続できるかが勝負の分かれ道

— ユースケ@Web制作×Web広告 (@yusuke_weband) March 25, 2021