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

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

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

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

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

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

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

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

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

その①：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

正しい努力を諦めずに継続するだけで毎月、数十万円から数百万円のお金を個人で稼げるスキルが身に付くのに、やらない理由が無くないですか？

人生を変えたい
個人で稼げるスキルを身に付けたい
時間と場所に囚われずに働きたい

上記のような人には、Web制作はまじでおすすめ。

本気で人生を変えたい人は “今”このタイミングから動き始めましょう！

フォロワーの方はTwitterで質問受け付けてるので、お気軽に😌 ≫ ユースケ。｜Web特化マーケター（@yusuke_weband）｜Twitter