こんにちは、現在web制作フリーランスとして3年ほど活動しているしょーご（@samuraibrass）です。
最近はプログラミング学習を始める人が急増しているのに伴って、学習情報が氾濫してきたように思います。
2021年は特に、「Web制作のロードマップ」をいろんな人が出しておりますね。
Web制作実務までの最新&完全なロードマップを把握することができる（ロードマップ添付）
- 4.02 おすすめサーバー追加
- 4.21 ロードマップを目安期間と共に、わかりやすくテーブルにまとめました
5.31 エクストラ課題（Photoshopからのコーディング課題）を追加しました。
6.01 FTPについて追加、激励のメッセージ記事追加
- この記事の信憑性（権威性）について
- このWeb制作独学ロードマップの感想・レビュー（定期更新）
- 前提：独学はいばらの道です
- Progate終了後に学習すべき重要な点
- Progateからweb制作案件までのロードマップ公開
- 営業・就職に十分なポートフォリオが手に入る
- 先輩たちからのメッセージ
- Web制作ロードマップ-序盤
- 1冊で全て身につくHTML&CSSとwebデザイン入門講座
- コーディング教材初級編3つ
- HTML,CSS総復習
- Web制作ロードマップ-中盤
- ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
- jQueryの学習方法
- Sassの学習方法
- コーディング教材中級編2つ
- ポートフォリオとして公開する
- 閑話休題：ブログをアップしよう
- Web制作ロードマップ-終盤
- ProgateでPHP1（2~4はできれば一周*任意）
- WordPressレッスンブック5.X対応版
- WordPress開発マスター講座
- ビジネスサイトを作って学ぶ WordPressの教科書Ver5.x対応版
- デイトラ卒業制作【公開停止】
- 【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】
- WordPress課題をアップロード
- エクストラ課題【取り組みは任意】
- ポートフォリオサイトの作成【任意】
- ここでゴール、おめでとうございます！！
- モチベーションの管理の手法
- 独学の自身がない、メンター付きでコスパよく学習したい場合
- 案件獲得までスクールでサポートしてほしい！という場合
- 穴場案件の獲得サービス
- 実案件の進め方
- Web制作会社への営業講座出しました！
この記事の信憑性（権威性）について
web制作歴3年目、納品数は100件以上。
2019年からメンター業に関わることが増え、述べ100人以上フリーランスとしての独立成功をみてきた（iSaraで50人、東京フリーランス独立サポートで60人）
クラウドソーシング、制作会社でコーディング案件をいただくことができる、または就職転職ができる
HTML,CSS,Sass,jQuery,WordPressをカバー
JavaScript、Gulp,Webpackは範囲外（不要不急なため）
このWeb制作独学ロードマップの感想・レビュー（定期更新）
前提：独学はいばらの道です
私個人の考えとしては、「良質なスクール」を活用してほしいというのが率直な考えです。
Web制作はサーバーサイドプログラミング（RubyやPHPエンジニア）に比べて独立しやすいと言われますが、
それでもフリーランス独立するには相当な数の壁がそびえ立っています。
それを乗り越える最良の手段の一つは私は「デイトラ」だと考えています。
2021年になってから、実案件納品まで半年間メンターのサポート付きで学べる「Web制作副業コース」なる怪物も出てきました。
しかし、これらスクールにはそれなりのお金がかかります。
お金を払うことに躊躇する人もいるだろうと思い、今回は私が考える「最強のWeb制作学習ロードマップ」を公開しようと思いました。
Progate終了後に学習すべき重要な点
- ローカル環境での開発
- デザインデータからのコーディング
- webサイトの公開方法
- WordPressの自作テーマ開発
やるべきことは多いですが、このあと解説していきます。
Progateからweb制作案件までのロードマップ公開
| 前半 | |
| 1冊で全て身につくHTML&CSSとwebデザイン入門講座 | 目安期間；1週間〜2週間 |
| コーディング教材初級編3つ | 目安期間；1ヶ月以内 |
| 中間課題：【初級Ex】 XDデザインからのコーディング練習 | 目安期間：6日 |
| 中盤 | |
| ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 | 目安期間：7日間 |
| jQueryの学習 | 目安期間；2週間 |
| Sassの学習 | 目安期間：7日間 |
| コーディング教材中級編2つ | 目安期間：3週間程度 |
| ポートフォリオとして公開 | 目安期間；1日 |
| 閑話休題 | |
| ブログを準備してWordPressに慣れる | 目安期間：2日 |
| 後半 | |
| ProgateでPHP1 | 目安期間：1週間 |
| WordPress本かudemy | 目安期間：1週間～2週間 |
| WordPressの教科書 | 目安期間；2週間～3週間 |
| 【上級】XDデザインからのコーディング実践演習 | 目安期間：10日 |
| エクストラ課題【取り組みは任意】 | |
| 【即戦力編】Photoshopデザインからのコーディング演習 | 目安期間：5日間 |
前半は静的サイトコーディング、後半はWordPress制作を身につけていきます。
またこの学習期間は基本的に「平日3h/休日6h」で達成できる期間です。個人的には短時間で一気に身に付けるのがいいと考えますが、
本業のある方はこの時間を目安に頑張ってみてください。
営業・就職に十分なポートフォリオが手に入る
このロードマップでは複数教材を紹介していますが、その中でも私が出しているコーディング教材は基本的に「コーディングのポートフォリオ」として利用することが可能です。
なので、このロードマップを完走すれば、自然と十分なポートフォリオが揃っていて、即案件獲得や就職転職の行動に移せる状態となります。
先輩たちからのメッセージ
すでにこのロードマップ内で紹介している教材をクリアした方たちから、みなさんに激励のメッセージを頂いています（順次更新中）
挫折しそうなときは、こちらで心を癒やしていただければと思います(*^^*)
Web制作ロードマップ-序盤
1冊で全て身につくHTML&CSSとwebデザイン入門講座
まずは一冊ですべて身につくHTML&CSSとwebデザイン入門講座で学ばれるのがいいかと思います。
ポイント①網羅的に学べる
まず出版年度が2019年で内容的にも新しいです。flex-boxからCSS Gridにも対応し、内容にも過不足がありません。
ポイント②内容が優しく挫折しない
個人的に一番いいと思ったポイントで、おすすめできる所以です。
著者のManaさんはWebクリエイターボックスで情報発信されているのですが、とにかく初心者向けに優しい解説をされており、一冊ですべて身につくHTML&CSSとwebデザイン入門講座に置いても文体や表現が機械的でなくあったかみがあるのがよきだなと。
ポイント③作っていても楽しい
従来のHTML本だと、作る完成物のデザインが微妙でモチベーションが上がりづらいという問題があったのですが、
一冊ですべて身につくHTML&CSSとwebデザイン入門講座では作るサイトもデザインが今時なのと、ゆるふわな感じなので、作っていてモチベーションが上がります。
コーディング教材初級編3つ
ここから「デザインカンプからのコーディング」に挑戦していきます。
コーディング教材は１つ目が肝心！
コーディング教材2つ目以降は少し難しいものを
最初に行ったものより少し難易度の高いものをやるといいです。
クリ★スタ【コーディング課題】XDからコーディングをしよう【初級編】
コーディングの練習をしよう〜その２〜
ピクセルパーフェクトを前提にする！
教えてくれたりコードレビューが存在しない独学の場合、デザインデータを忠実に再現するのが代々大前提になります。
実務でデザインデータ通りにコーディングを行えないと、普通に差し戻しを受けます。
コーディングを３つ行ったころに慣れてくる
HTML,CSSはとにかく書きまくって試行錯誤することが一番成長の近道です。
3つほどこなすことで、だいぶ定着してくると思います。このあとのSassやjQueryをスムーズに身に付けるために、ここでHTML,CSSを固めておくことが重要です。
HTML,CSS総復習
慣れてきたところで、中間課題です！
HTML.CSSのみで、現状のレベル感でぎりぎりできて、かつポートフォリオにできるぐらい実践形式の課題を作成しましたので、こちらに挑戦してみてください。
正直結構難しいと思います笑
ただ基礎が徹底していないと、この先のフロントエンド技術も満足に身につかないので、コーディング力を底上げして初級ラストを飾りましょう。
Web制作ロードマップ-中盤
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
2/20に発売しました新書です。
内容が一冊ですべて身につくHTML&CSSとwebデザイン入門講座に比べてだいぶ発展的で、
HTML,CSSの基礎がわかった状態で読むと、かなり鍛えられます。
- レスポンシブ対応
- 疑似要素を使った装飾
- グラデーションカラー
- CSSアニメーション
- カスタムプロパティ（CSS変数）
- CSSフィルター
- 要素の変形
- ダークモード対応
- Emmet
- Sass
とはいえ内容が膨大なので、やらない部分を設けたほうがいいですね（後日追記予定）
jQueryの学習方法
ここでサイトに動くをつけていくためのjQueryの学習を進めていきます。jQueryを使わずにこなせる案件は非常に限られてくるため、
案件をとるために必須になります。
①まずはProgateで学習する
上級編までさらっとやることで大まかに理解をすることができます。
②jQuery標準デザイン講座
jQueryで何ができるのかというのと、書き方に慣れることを目指します。
書き方を暗記するというより、思考の流れに慣れるという感じです。
jQuery標準デザイン講座はwebサイトでよく使われるコンポーネントを中心に学習することができるので、モチベ高く続けられて一押しの本です。
完璧を目指さない
すべてを完璧に理解することは不可能なので、全体的に眺めて書いてみたら次に進んでOK。
ただ見るだけではなくて、書くことが大事です。
jQueryをどこまで理解すればいいかは、ゴールがありません。目安としては教本に書いてある流れが自分で一からかけなくとも、「見て全て理解できる」なら先に進んでいいかと思います。
書く練習はこのあとします。
Sassの学習方法
次にSassの学習を行っていきます。ほとんどのコーディング案件でSassが活用されているため、2020年現在学習はほぼ必須となっています。
①まずはProgate
Sassコースで結構基礎的なことが網羅できるため、Progateで学習をしてください。
②Sassの環境構築を行う
VSCodeにlive sass compilerを導入し、コンパイルできるようにしてください。
Sassはそのままだとブラウザが読み込めないため、CSSにコンパイルしたものを読み込む必要があるのです。
【任意】cssをSassに置き換えてみる
最初に模写コーディングしたもののcssをSassに置き換えてみてください。
その際に絶対に利用して欲しいSassの機能があるので紹介します。
詳しくはSassの教科書かネットで調べてみてください。私自身もお世話になった本です。
コーディング教材中級編2つ
ではここまでで学んだSassとjQueryを活用してコーディングしてみましょう！
css命名規則BEMを取り入れる
css命名規則は保守性の面から大事です。
このあたりはcss設計完全ガイドが参考になります。全コーダーがいますぐ買うべき神本なので、ぜひ購入してみてみてください。
cssの本で最高峰の本で、初心者からベテランまで有用の本です。本当に神本です。
jQuery,JSのライブラリ（プラグイン）を使ってみる
実務ではプラグインを利用して機能実装することが非常に多いです。ほぼ毎回です。
それをコーディングの段階から取り入れてみましょう。
例えば先ほど紹介させていただいた私のコーディング教材では「swiper」というプラグインを利用前提にしています。
swiperは実務でスライダーを実装する際にはほぼ毎回使用することになります。制作会社の友人もこれしか使っていないと言っているほどですw
ここで作ったものは実績公開する前提なので、公開許可が出ているものを選定してください。
ポートフォリオとして公開する
ポートフォリオとして機能させるにはネットで動く状態で見せる必要があります。
ここまで作成した静的サイトをサーバーにあげて公開していきます。
公開方法については動画で述べています。
- Github pagesやNetlify、xfreeを使用する（動画で紹介している手法、無料だが…）
- レンタルサーバーでアップロード（実務と同様、有料だがおすすめの手法）
個人的にはレンタルサーバー（ConoHa WING 
）を契約してポートフォリオを上げる方法を推奨したいです。
無料サーバーはサイトが飛ぶ可能性があったり、広告が入ったりすることがありますし、
何より実案件では無料サーバーではなく、レンタルサーバーにアップロードすることが大半なためです。
一つサーバーを持てば、いくつもポートフォリオを公開することが可能です（Conohaでは無料ドメインが2つもついてきます）
この後のWordPress編でも活躍します。
FTPツールに触れておく
余裕がある人は、ぜひFTPツールを利用してファイルをアップロードして公開してみてください。
Web制作の案件では相手のサーバーにファイルをアップロードして公開するまでは案件のことが非常に多いのに、
練習する機会がないからテンパりやすい場所です。
私のおすすめはWindowsにもMacにも対応しているFileZillaです。
私のnote記事内でも案内していますが、ここでも参考リンク（conoha&Filezillaの場合）を添付しておきます。
閑話休題：ブログをアップしよう
ブログを実験場練習場として活用する
webサイトを世界に公開する手順を皆さんはご存知でしょうか？
- 独自ドメインを取得し
- サーバーを契約して取得したドメインと紐付け
- 全世界にwebサイトを公開して
- できればブロックエディタで記事を書いてみる
ブログをアップする狙い
実務では公開までを代行することがあるため
例えば美容室のサイトを作ることになったとして、オーナーさんにコーディングしたデータを渡して「あとよろしく！！」なんてことにはならないわけです。
当然こちら側でアップロードまでしなければなりません。その場合に自分でサイトを公開した経験がないと苦戦することになります。
特にWordPressは難解です。
そのため自分でブログをアップロードすることでその練習をします。ブログは実験場です。
ブロックエディタなどWordPressのシステムに早めに慣れておく
WordPressのブロックエディタは仕様に慣れが必要です。
当然非ITのお客様にお渡しする場合、説明書を添付したり説明する必要があるわけです。
また昨今はブロックエディタを活用した開発が盛んで、ブロックでページを組み上げていく流れができています。
web制作者としてもブロックエディタを自分で活用しておくことはとても重要です。
このブログも最近クラシックエディタではなくブロックエディタで書いていますが、執筆が非常に早くなりました。
Google Analyticsやサーチコンソール導入までできると良い
お客さんのサイトを納品する場合、大抵の場合はGoogle Analyticsやサーチコンソールを利用したサイトマップの送信までやることが多いです。
自分のブログで練習できますし、どうせ導入するなら分析しがいのある自分のブログに入れてPDCA回せば、マーケティングも学べて一石二鳥です。
web制作をする上で、自分のサーバー上でテスト環境を用意することがままあるため、Web制作フリーランスとして活動するなら、１つレンタルサーバーを契約しておくことが重要です。
おすすめはConoHa WING
ConoHa WING 
ならとても簡単にWordPressサイトを公開することができます。
以下の記事で爆速で構築しておきましょう。
Web制作ロードマップ-終盤
ProgateでPHP1（2~4はできれば一周*任意）
PHPはWordPressの基礎部分
WordPressはPHPの基礎を知らないと完全に呪文と化してしまうため、Progateをまず軽く回しておくといいです。
PHP2以降のオブジェクト指向は雰囲気だけでいい
クラスやコンストラクタ、インスタンスなど出てきますが、雰囲気だけでいいです。
完全に理解は無理なので、つまずいたら先に進んだ方がいいです。
また、道場コースも行う必要はありません。
WordPressレッスンブック5.X対応版
WordPressの基礎を一番優しく
WordPressの書籍を10冊以上みてきましたが、WordPressレッスンブックを導入にするとわかりやすくていいです。
周りのフリーランスに聞いても、評判がいいですし、5.X版になってから内容もブラッシュアップされ、カバー範囲が広くなりました。
グーテンベルク対応教材
WordPress本は2019年より前の出版のものはブロックエディタに未対応なのですが、この本は2019年11月に出ているので、
内容も新しいです。
WordPress開発マスター講座
動画で学びたいあなたへ
上記のWordPressレッスンブックと同等レベルで、動画で解説してくれている教材があります。
それがWordPressテーマ開発マスター講座
です。2020年10月7日に販売開始しました。作成者はたにぐちまことさんというPHPの教材を十年以上出されている方なのですが、この方の解説はめちゃくちゃわかりやすいため、
本より動画で学びたい人は「WordPress開発マスター講座」を選ぶといいかなと思います。
内容的にも「全くの初心者から基礎をまんべんなく」といった理想のカリキュラムとなっており、
- サイトのバックアップ方法まで学べる
- カスタム三兄弟まで含んでいる
と言った点が、既存教材とは一線を画しています。
弊コーディング教材と一緒にツイートしてくださる方が多いです。ありがたい限りですし、両者ともおすすめです！笑
ビジネスサイトを作って学ぶ WordPressの教科書Ver5.x対応版
WordPressの応用まで
WordPressの教科書では、基本的なテンプレートタグの使い方だけではなく、PHPの知識も結構使うので、なかなか鍛えられます。
前者２つの教材より明らかに解説されるソースコードも実務最前線の実態に近くなっています。
どうしてもPHPの知識がないとコピペ＆応用が聞かない人材になってしまうので、プログラミングチックではありますが、ここで慣れておきましょう。
ビジネスサイトという題材のよさ
ビジネスサイト（コーポレートサイト）が案件としては一番多いのと、プライムストラテジーが実勢に仕事で制作しているレベル感のものができると公言されているので、
非常に実用的と言えます。
デイトラ卒業制作【公開停止】
【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】
デイトラ卒業制作と同等レベルのもので、私が作成した上級編コーディング教材もとても取り組みやすいと思います。
- 実案件ライクでありながら、完走できる難易度
- ポートフォリオとして受けの良い「コーポレートサイト型」
- 最後の表示確認特典付き
- 下層ページ6枚程度
- 実案件なら12~20万くらいの難易度
難易度的には、WordPressレッスンブックが終わった後から取り組むことができます。
WordPressは本で学習した後は実践で鍛えるしか無いのですが、上級編では実案件を想定しておりますので、仕様書を添付しそのとおりにコーディングしていただきます。
模擬案件のように取り組むことが可能です。詳細はnoteを御覧ください。
WordPress課題をアップロード
ポートフォリオになるので、絶対アップロードしておく
ローカル環境で開発したものを本番にアップロードします
（方法など詳しくは【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】に記載）
できれば自分のサーバーに上げてほしい
All in one WP Migrationというプラグインで簡単にできます。
実務ではこれから頻繁に行うことになるため、自分のサーバーでできれば、勉強になります。
最近のサーバーは「WordPress簡単インストール機能」などを備えているので、あまり身構える必要はないです。
超簡単にWordPressサイトを公開する方法
無料がいいならxfreeなどにアップロードする
もしくは、無料でWordPressサイトを公開できるサーバー（xfree）もあるので、そう言った場所に公開し、いつても見せられる状態にしてもいいと思います。
ここまでで実案件レベルに到達することができました！
ここからはエクストラ課題で取り組みは任意になります。
エクストラ課題【取り組みは任意】
ここまででAdobe XDデザインからのコーディングを練習してきました。
しかし、実案件では大半のデザインがPhotoshopかIllustratorでくることになります。
私は職業柄多くの駆け出しフリーランスをサポートしていますが、多くの方が苦戦しているのを見て、Photoshop編の課題をリリースすることにしました。
取り組みは任意で、Photoshopの準備が必要になりますが、デザインも仕様も実践仕様なため、ポートフォリオの強化にも繋がります。
難易度が高いため、ライバルとのポートフォリオの被りはだいぶ減らせるのではないかと思います。
- Photoshopに成熟したデザイナーによるデザイン
- スマホカンプも用意
- 実案件志向のデザイン
ポートフォリオサイトの作成【任意】
ここでゴール、おめでとうございます！！
あとは営業するだけ
ここまでで月30万稼げるスキルは身につきました。
しかしここからが真のスタートなのです。
また、フリーランスでなく就職転職目的の方でも、ここまででコーディングやWordPressでの開発ができるわけなので、
制作会社への就職転職も十分に可能です。
案件の中で成長していくだけ
ここまでで必要最低限のスキルは揃っています。
今回解説しなかった
- JavaScript
- gulpやwebpack
- git
これらは実案件で必要とされたときに学習すればいいです。遅延評価学習法で十分間に合います。
勉強はいったんやめて、案件をまずはとりましょう！
案件のとり方はこの下で紹介している記事にまとめています。
モチベーションの管理の手法
ここまででロードマップは頭に入ったかと思いますが、しかし実際に完走するのは苛烈を極めるでしょう。
諦めないことが重要
プログラミング学習は苦難の連続です。特に環境に左右されます。
- やらなければならない環境に自分を追い込む（メンター付きスクールなど）
- やる気のある人たちと頑張れる環境に飛び込む（もくもく会を企画する参加する）
いずれにせよ諦めないことが一番重要です。
ここを考えて最善の道を取れるようにしましょう！！
自分の場合はiSaraというスクールでみんなで頑張った期間に一気に成長することができた過去があります。
おすすめ書籍
デッドラインは「いつまで終えるか」だけでなく、「いつ始めるかのデッドラインも敷け」という具体的で効果的なアドバイスが多数掲載されている名著になります。
独学の自身がない、メンター付きでコスパよく学習したい場合
「デイトラ」が圧倒的におすすめです。徹底レビューしておりますので、参考にしてみてください。
案件獲得までスクールでサポートしてほしい！という場合
6ヶ月間メンターに質問できて案件も獲得できる
つい最近、テックアカデミーが出した『Web制作副業コース』がすごくて、
なんと案件獲得も可能で、その案件を現役エンジニアがサポートしてくれます。
タイトルに副業と冠していますが、フリーランス独立も可能だと思いますね。
穴場案件の獲得サービス
クラウドソーシング系は激戦と言われていますが、完全に穴場となっているサービスをまとめて紹介しています！
クラウドソーシングも様々ありますし、マッチングサービスなどのフル活用も必要です。
私も駆け出し期から使っており、最近案件を取っている駆け出しの方も「ここで紹介しているサービスから案件獲得できた」という報告を受けており、非常におすすめです！
実案件の進め方
以下記事では、実際の案件はどう進むのかを解説しています。
- 実案件の進め方
- 実案件前に準備しておいたほうがいいこと
準備することとして特に大事なのは、実案件ではフォトショイラレでデザインデータをもらうことが大半なので、Adobe CCは必須だということです（特に制作会社）
こちらの記事を一読しておくといいです。知らないとパニクりますからね笑
Web制作会社への営業講座出しました！
満を持してついに出しました。ノウハウ面が強いため、売れすぎた場合は競合を防ぐために販売制限をかけようと思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- XD,PSDデザインからのコーディング
- 2回の表示確認特典
- ポートフォリオOK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
さらに、まとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
このロードマップは新しい教材が出るごとにアップデートしており常に最新最良です。