2021年度完全版！Web制作(コーディング)の学習ロードマップ。必要なスキルや勉強方法を徹底解説！

こしば、フリーランスになってWeb制作の仕事をしたい…!!

でも、こしば、自分なりにググったりTwitter見たりYouTube見たりしたけど、情報が多すぎて何からはじめれば良いか分からないんだ・・・

あなたも、こしばと同じような悩みはありませんか？

広告やSNSやYouTube、ブログなどの影響もあり未経験からWeb制作フリーランスに興味をもつ人が年々、増えてきました。
今ではWeb制作のロードマップや勉強法についての情報もあふれていますよね。

Web制作に役立つ情報を誰もが手に入れられるようになりました。一方でWeb制作のことを全く知らない人にとって、情報の取捨選択が難しくなってしまったのではないでしょうか。

東京フリーランスが運営するオンラインスクール「デイトラ」では、未経験からでも完走すればWeb制作を仕事にできるだけの実力を身につけられるカリキュラムを提供してきました。

そして実際に多くの稼げるWeb制作フリーランスがデイトラから生まれました。
本記事では実際にWeb制作フリーランスを輩出してきた東京フリーランスが、2021年版のWeb制作学習方法を解説します。

今ならLINE限定で初心者がゼロからWebの仕事をするための知識が学べる「フリーランス・副業の教科書」を無料でプレゼントしてるよ！ 下のバナーをタップして一生使えるWebスキルを学んでね！

こちらから今すぐ無料で受け取る▼

Web制作（コーディング）で仕事をするのに必要なスキルとは？

Web制作で仕事をするのに必要なスキルをご紹介します。

ショーヘー（@showheyohtaki）デイトラ運営
とりあえず、この９つのスキルがあればWeb制作の仕事をはじめられると思います。

え！？こんなにあるの！？

Web制作（コーディング）の学習ロードマップ

Web制作（コーディングの学習ロードマップ）をご紹介します。
市販の書籍やプログラミング学習サービス、有志のつくってくれた学習素材を組み合わせることで学習は可能です。

Web制作を学習して仕事にできるようになるまでのスタートラインには十分にたてます。

STEP１：HTML/CSSの基礎を勉強する

まずHTML/CSSの基礎を学習します。HTMLはWebサイトの骨組みを作り、CSSは装飾するために使います。
ブラウザーでプログラミングの学習ができるProgateのHTML＆CSSコースを一通りやってみましょう。

学習コース・道場コース・コラムまで一通りやってみましょう。
ちなみにProgateは３周もすれば十分です。

ただしProgateはブラウザーで学習できてしまうため、ローカルでの環境開発の力が身につきません。

Progateは学習コースと道場コースがあるけど、道場コースは初めてだと手が止まっちゃうってよく聞くよね！

Progateの道場編は初めてだと少し難しく感じるという意見が多いので、最初はできなくても自信をなくさないで大丈夫です！
Progateが終わったら書籍で勉強します。おすすめの本はこちら。

Web制作に必要なHTMLやCSSの知識が体系的に学べる一冊。
具体的にはHTMLとCSSの基本からレスポンシブやFlexbox、CSSグリッドなど、実際に手を動かしてWebサイトを作りながら学べます。

STEP２：Bootstrapでスピードサイト制作を学ぶ

次にBootstrapを簡単に学習します。(*現在Bootstrapの最新バージョンは５）
Bootstrapはフロントエンドライブラリーで使いこなせるとモバイルファーストなレスポンシブWebデザインを素早くカスタマイズできるようになります。

例えばYouTubeやUdemyにBootstrapを学習できる動画コンテンツがあります。
気になる動画を見ながら手を動かしてBootstrapを使ってみてください!!

体系的にBootstrapの知識を学ぶなら公式サイトや書籍がおすすめです。

実案件では使わないっていう意見もあるみたいだけど、一通り勉強しておくとBootstrapで素早くサイトを作れるよ！
Bootstrapで作られたサイトを改修したり、部分的に使ったりすることもあるんだって！

STEP3：JavaScriptとjQueryでリッチなアニメーションを作れるようになろう！

JavaScriptとjQueryはWebサイトにアニメーションをつけるために使います。
jQueryはJavaScriptのライブラリで、簡単な記述でJavaScriptの動きを再現できます。

ProgateでJavaScriptとjQueryのコースがあるので、こちらを一通りやってみましょう。

そして、物足りないなと感じたら書籍で

これらに取り組んでみましょう。

JavaScriptとJQueryが使えるとリッチなアニメーションを実装できるようになるよ！

新しく発売された『動くWebデザインアイディア帳』もよく使われるアニメーションに必要なコードが実例でまとまっており、とてもおすすめです。

STEP4：Sassを使いこなせるようになろう！

SassはCSSを拡張して扱いやすくしたスタイルシートです。
Sassを使うことで記述を簡略化したり、演算ができたりするメリットがあります。

ProgateのSassコースをやってみましょう。

そして、物足りないなと感じたら

Sassの書籍を読んでみましょう。
Sassを学べば効率よく保守性の高いコーディングができるようになります。

STEP:５デザインカンプからのコーディング

デザインカンプからのコーディングをしてみましょう。

Web制作会社とパートナーを組んで仕事をするとき、Webデザイナーと組んで仕事をする際には
デザインカンプを渡されてコーディングをすることになります。

あれ？模写はしなくていいの？
よくWebサイトの勉強をする際は実在するWebサイトを見ながら再現してみよう！って聞くんだけど。

2〜3年前まではコーティング用の教材なんて全くなかったので、実サイトを模写するしか練習法なかったんです。今はデイトラ 始め、コーディング練習用に作られたデザインカンプがたくさんある。オリジナルデザインだから著作権侵害の心配もないし実績公開もできるので、もう模写する必要ないです。

現在は有志がコーディングを練習できるデザインカンプを提供してくれています。

こんなに練習用のデザインカンプがあれば模写をする必要はないね…!

STEP６：PHPの基礎

ProgateでPHPの基礎を学習しましょう。最後に学習するWordPressがPHPで主に構成されているため、PHPの基本を固めましょう。
まずはProgateのPHPコースに取り組んでみましょう。

書籍で勉強するなら

「PHPでショッピングカートシステムを作る」という内容がメインで、ショッピングカートの開発をフルスクラッチでしていくため、プログラミングやPHPの基礎力を鍛えられます。

またWeb制作の学習ではPHPはWordPressをカスタマイズするために使うことがほとんどなので、

こちらの書籍もおすすめです。

PHPはWordPressのオリジナルテーマを作る際に使うんだね！

STEP７；MySQLの基礎

WordPressに必要なデータベースのMySQLの基礎を学びます。

WordPressは

で構成されています。WordPressはサイトを表示させる際にPHPプログラムでMySQLのデータベースから情報を取得しています。MySQLの基礎だけでも学んでおくとWordPress制作の理解に役立ちます。

ProgateのMySQLでデータベースを作成しよう

で一通りの基礎を勉強しましょう。

STEP８：WordPressのオリジナルテーマ制作

WordPressでオリジナルテーマを制作する練習をします。
WordPressの制作案件は数も多く制作単価も高いことから、フリーランス を目指すならぜひ取り組みたい分野ですね。

書籍派なら

動画派なら

オリジナルのWordPressテーマの作成を通じ、サイト制作の全体像を把握しながら基礎から応用まで全て学習できるでしょう。

Progateや書籍、YouTube、Udemyなどの動画コースを組み合わせれば完全に無料とはいきませんが、Web制作の学習に必要な知識・技術は十分に身につきます。（それでも色々、揃えると1万円以上かかってしまうかもしれませんが…）

【PR】学習ロードマップからオンラインスクール化したデイトラの強み

デイトラはもともと、Twitterの企画でショーへーさんがWeb制作の学習ロードマップの内容を30日に分けて発信したことが、きっかけではじまりました。

そして学習ロードマップだった頃のデイトラの企画に多くの方が参加してくださり、皆様の応援もあって現在、スクール化することができました。

紹介した学習ステップは2021年現在、デイトラがスクール化せずに学習ロードマップのままだったら？という仮定で考えたロードマップ一例です。

しかし無料の学習ロードマップだった頃のデイトラには課題もありました。

オンラインスクールにするにあたってデイトラは、これらの課題を克服できるコンテンツづくりにこだわりました。
つまり無料だった学習ロードマップ時代よりもパワーアップしたのが現在のデイトラWeb制作コースです。

そしてデイトラはTwitter発の企画で広く知られていたため、広告費を抑え既存のWebスクールに比べてコスパ抜群の価格で提供することができました。

デイトラWeb制作コースを受講する７つのメリット

デイトラのWeb制作コースでは、ご紹介した学習ロードマップで学ぶ内容を無理なく無駄なく学べるように全てオリジナルのコンテンツで作りました。
しかも市販の書籍や動画にはないWeb制作の現場の知恵や技術まで盛りこんでいます。

そして、オンラインスクール化にあたり

この３つにこだわりカリキュラムを制作しました。
デイトラのWeb制作コースのメリットをご紹介します。

メリット１：コスパ抜群の価格設定

デイトラは受講生が負担なくWeb制作を学べるようにコスパにこだわりました。

Web制作やWebデザインを学べるスクールは高いところで50万円前後、比較的、受講しやすいオンラインスクールでも15万円前後はします。

高額な学費を払ってWeb制作を勉強してみたけど向いていなかった…

となったら、お金ももったいないですよね…

そこでデイトラのWeb制作コースは、カリキュラムの質にこだわりながらも広告費を抑え10万円を切る価格設定を実現しました。

メリット２：未経験からでも完走すれば仕事ができる無駄のないカリキュラム

デイトラのコアバリューは未経験からでも完走すればWeb制作を仕事にできるところです。

そのため修了した後に満足してもらえる力がつくカリキュラムづくりにこだわりました。

もしかしたら、一般的なWebスクールのカリキュラムで勉強した人でも難しく感じる位かもしれません。

・もう少し優しい課題にしてほしい
・答えをすぐに教えてほしい
・マンツーマンでもっと丁寧に教えてほしい

このようなリクエストもあります。

しかし、デイトラではカリキュラムを修了してからWeb制作を仕事にできることを目標にしています。

カリキュラムを優しく簡単な課題にすれば、受講中はストレスなく楽しく勉強できます。

しかし、修了しても全然、仕事で通用しなかったとなったら後悔してしまいますよね。デイトラでは受講生の満足度ではなく、修了生の満足度を一番、大切にしています。ただし、スクール化したことで無駄な内容を省き効率的に学習できるようになりました。

メリット３：現役で活躍中のエンジニアやフリーランスが動画講義や学習コンテンツ制作を担当

どんな人がWeb制作コースに関わっているの？

デイトラのWeb制作コースの動画コンテンツでは、現役で活躍中のエンジニアやフリーランスが講義や学習コンテンツ制作を担当しています。

ショーヘー（@showheyohtaki）初級・中級・上級編を通して担当。
大手で営業職→プログラマーに転職→フリーランスで2年海外→帰国後に起業して東京フリーランスCMO。
現在は自分の経験をもとに作ったオンラインスクール「デイトラ」を運営中。

とだこうき（@cohki0305）主に上級編のPHPを担当。
東京フリーランス運営メンバー。
営業から転職し、6ヶ月でリードエンジニアになったフルスタックエンジニア。
その後半年でフリーランスとして独立し、ブロックチェーン・機械学習の案件に携わる。
現在はフリーランスエンジニアの経験を活かして、「ゲスエンジニア」という名前でSNS・ブログ・YouTubeにて情報発信をしている。

はにわまんさん(@haniwa008)主に中級編のカリキュラム制作を担当
システムエンジニアやアフィリエイターとしてキャリアを積んだ後、Web制作を中心にフリーランスとして活動。
フリーランスのコーダーとしてこれまで約300件のWordPress案件に対応した実績も持つ。

ちづみさん（@098ra0209）主に上級編のWordPressのブロックエディターのサイト制作を担当
WEB制作・映像制作フリーランス。
会社員、小学校教師を経てフリーランスになるという異色の経歴を持つ。
現在はフリーランスとして活動しながら、フリーランス向けの講師業も行っている。

すーさん(@belltreeWeb)中級編のライブコーディングを担当
2020年1月からフリーランスのWebディレクター・コーダーとして独立。
SESでWebアプリのフロントを担当したのち、制作会社にて受託案件チームに所属。LP制作・WordPressを用いたコーポレートサイトやアパレルなどのブランドサイト制作を主に活動していた。

Twitterで見かけたことあるWeb制作関係の人達だ…!!

動画の中ではWeb制作の現場で使われているテクニックや考え方も学べるようにしました。
動画を見ながら一緒に手を動かしながらコーディングを学べるようになっています。

メリット４：無期限で視聴できアップデートされるカリキュラム

多くのスクールでは、学習期間が終わると教科書や動画コンテンツが見れなくなります。
これでは見返したいときに復習できません。

しかし、デイトラは

このような特徴があります。
これなら復習したいときにいつでも、振り返ることができますね。

また、コースの内容もアップデートされていきます。

デイトラは運営者が実際にコースの制作と監修をしているため、コースの改善とアップデートを積極的に行える体制になっています。
規模が大きすぎるスクールではカリキュラムを作成し、実際に受講者の方にお届けするまでに時間がかかりすぎてしまうところもあります。

しかしデイトラは少数精鋭で運営しているからこそ、受講者の声やWeb業界のトレンドを踏まえた最新のカリキュラムをできる限り早く届けています。

あ！あと上級編の卒業制作の課題も増やします❗️
いまはマハーバラタ１パターンだけですが、あと３パターンほど増やして『実案件レベルの4つの課題から好きなものを選んで制作できる』ようにしようと思います👍

ぜひポートフォリオに利用してください👨‍💻

— ショーヘー@デイトラ運営 (@showheyohtaki) February 5, 2021

本当にカリキュラムがアップデートされている！
しかもずっと見れるのは復習もできて嬉しい…!!

メリット５：挫折させないメンター陣

独学で挫折する大きな理由は、「聞ける人がいないまま詰まってしまい、モチベを失ってしまう」ことです。
どんなにやる気のある人でも、ひとりで学習しているとどうしてもわからないことが出てきます。

そこで、デイトラではSlackによる公式サポートの質問部屋を用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。

チャットはカジュアルな雰囲気で気軽に質問でき、受講生とメンターの間で活発なやりとりがされています。ときには優しく、ときには自力で考える力を身につけられるようメンター陣がサポートしてくれます。

メリット６：デイトラ修了生の豊富な実績があるから安心して学べる

デイトラを修了して現在、Web制作を仕事にしている人は少なくありません。

Twitterで、「#デイトラ」で検索すると、実際に独立や転職に成功した事例が沢山でてきます。
デイトラのカリキュラムは意図的に自分で調べなければ、いけないところや大変なところもあります。
その代わり完走できれば実案件で仕事ができるレベルのコーディング力が身につきます。

メリット７：卒業生向けの独立・転職サポートサービスがある

デイトラのWeb制作コースを修了しても実際にどう営業すればいいか分からない。
Web制作会社に就職したいけど就職活動で何をアピールすればいいか分からない。

スクールは修了した後が大切ですよね。
デイトラでは、そんな人の独立や転職を支援するサポートサービスも用意しています。

完全オンラインの「Web制作フリーランス独立サポート」の紹介～二か月間のメンター&オリジナル教材で独立を後押し！～

例えば独立サポートならば、現役フリーランスのメンターがついて案件獲得のアドバイスや、仕事で詰まったときの技術的な相談なども可能です。また、定期的なミーティングでWeb制作フリーランス最前線の情報を交換したり、同じ独立を目指す受講生と刺激しあったりもできます。

こしばもWeb制作コースを卒業して独立サポートか転職サポートお願いしちゃおうかな…!

まとめ

2021年版のWeb制作（コーディング）の学習ロードマップをご紹介しました。もちろん、このロードマップだけがフリーランスのWeb制作になる方法ではありません。しかしオンラインスクール化する前からデイトラでは多くのWeb制作のフリーランスを輩出してきた実績があります。ロードマップで学習する内容を全て身につければ、未経験からでも十分、Web制作を仕事にする土台が身につきます。

また、ロードマップで紹介した教材はひとつ、ひとつ本当におすすめなのでデイトラのWeb制作コースの受講生にも参考書、もっと練習したいときの課題としておすすめできます。

Web制作フリーランスになるために必要な知識・技術は実装のためのコーディングだけでも多岐に渡ります。

HTML/CSS
Bootstrap
サーバーとドメインの基礎
JavaScript
jQuery
Sass(Scss)
PHP
SQLの基礎
WordPress

沢山あって大変ですよね。
ひとつひとつの内容を学ぶ教材はありますが、全てを一貫して学べる教材はありません。
だからこそ、デイトラのWeb制作コースではフリーランスとして独立するために必要な内容を、無理なく無駄なく学べるように作りました。

デイトラWeb制作コースは卒業してからフリーランスとして活躍できるように、自力で調べたり考えたりしなければいけない内容もあります。

しかし完走すれば未経験からでも仕事ができるレベルに引きあげられる内容になっています。
本気でWeb制作を勉強してフリーランスになりたい方は、デイトラのWeb制作コースも検討してみてはいかがでしょうか。