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