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

2021年度完全版!Web制作(コーディング)の学習ロードマップ。必要なスキルや勉強方法を徹底解説!
こしば
こしば、フリーランスになってWeb制作の仕事をしたい…!!
こしば
でも、こしば、自分なりにググったりTwitter見たりYouTube見たりしたけど、情報が多すぎて何からはじめれば良いか分からないんだ・・・

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

・Web制作を仕事にしたいけど何を勉強すればいいの?
・SNSやYouTubeでWeb制作の勉強法を調べたけど情報が多過ぎて混乱している
・独学?スクール?結局、どっちが良いの?

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

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

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

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

デイトラちゃん
今ならLINE限定であなたにピッタリのスキルがすぐに分かる「Webスキル診断」を実施してるよ! 下のバナーをタップして一生使えるWebスキルを30秒で診断してみてね!

こちらから今すぐ診断する▼

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

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

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

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

こしば
え!?こんなにあるの!?

こんなに必要なの?と思う方もいるかもしれませんね。
でも順を追って学習を進めていけば大変ですが、完全未経験からでも十分、習得できます。

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

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

Progate・・・人気のプログラミング学習サービス(税別月980円)
Web制作者向けの学習書籍
Udemy・・・オンライン学習プラットフォーム(買い切りの動画教材が販売されています。セールの時に買うとお得!)
・有志の方の発信しているデザインカンプ(後ほど紹介)

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

STEP1:HTML/CSSの基礎を勉強する

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

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

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

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

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

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

ちなみにエディターは色々ありますが特に拘りがなければ
Visual Studio Code

がおすすめです。動きが軽く機能の拡張性も高く使いやすいエディターです。

STEP2:Bootstrapでスピードサイト制作を学ぶ

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


(Bootstrapを勉強できる動画の一例)

例えば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:5デザインカンプからのコーディング

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

デザインカンプとは?・・・デザインデータの見本。PhotoshopやXD、Figma、中にはillustratorなどで作られています。

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

こしば
あれ?模写はしなくていいの?
よくWebサイトの勉強をする際は実在するWebサイトを見ながら再現してみよう!って聞くんだけど。
ショーヘー
2〜3年前まではコーティング用の教材なんて全くなかったので、実サイトを模写するしか練習法なかったんです。今はデイトラ 始め、コーディング練習用に作られたデザインカンプがたくさんある。オリジナルデザインだから著作権侵害の心配もないし実績公開もできるので、もう模写する必要ないです。

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

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

STEP6:PHPの基礎

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

書籍で勉強するなら

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

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

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

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

STEP7;MySQLの基礎

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

WordPressは

・PHP(プログラム)
・MySQL(データベース)

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

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

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

STEP8:WordPressのオリジナルテーマ制作

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

書籍派なら

動画派なら

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

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

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

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

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

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

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

デイトラが学習ロードマップだった頃の課題
・完走すれば力にはなるが最後まで完走できる人は少ない

・模範解答がない。解答例があっても間違っているところがあって混乱してしまう
・詰まったときに相談できる人がいない
・完走した後の案件獲得で挫折してしまう
・書籍や学習アプリの組み合わせなので内容が一貫しない。無駄なところも出てきてしまう。

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

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

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

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

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

・学習ロードマップだった頃の課題を克服
・既存のWebスクールの価格よりコスパよく学べる
・勉強した後にフリーランスとして稼げる、転職できる、副業できる内容

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

メリット1:コスパ抜群の価格設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こしば
どんな人が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制作の現場で使われているテクニックや考え方も学べるようにしました。
動画を見ながら一緒に手を動かしながらコーディングを学べるようになっています。

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

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

しかし、デイトラは

・一度、買ったら教材はずっと見ることができる
・内容が適宜アップデートされる

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

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

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

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


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

メリット5:挫折させないメンター陣

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

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

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

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

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

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

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

こしば
デイトラの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制作コースも検討してみてはいかがでしょうか。

“一生使えるWebスキル”を60秒で診断しよう。

CTA-IMAGE 「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで実施中です! Web制作・Webデザイン・アプリ開発・動画編集の中から「自分に合った理想の働き方はどれか」を診断し、みなさんの適性を見極めます。 診断後は結果に応じて【スキルの習得に必要な情報】も配信するので、気軽に登録してみてください!

Web制作カテゴリの最新記事