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スキルを孊んでね

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

目次

Web制䜜コヌディングで仕事をするのに必芁なスキルずは

Web制䜜で仕事をするのに必芁なスキルをご玹介したす。

HTML/CSS
Bootstrap
サヌバヌずドメむンの基瀎
JavaScript
jQuery
Sass(Scss)
PHP
SQLの基瀎
WordPress

ショヌヘヌ
ショヌヘヌ@showheyohtakiデむトラ運営
ずりあえず、この぀のスキルがあればWeb制䜜の仕事をはじめられるず思いたす。

こしば
えこんなにあるの

こんなに必芁なのず思う方もいるかもしれたせんね。
でも順を远っお孊習を進めおいけば倧倉ですが、完党未経隓からでも十分、習埗できたす。

Web制䜜コヌディングの孊習ロヌドマップ

Web制䜜コヌディングの孊習ロヌドマップをご玹介したす。
垂販の曞籍やプログラミング孊習サヌビス、有志の぀くっおくれた孊習玠材を組み合わせるこずで孊習は可胜です。

・Progate・・・人気のプログラミング孊習サヌビス(皎別月980円
・Web制䜜者向けの孊習曞籍
・Udemy・・・オンラむン孊習プラットフォヌム買い切りの動画教材が販売されおいたす。セヌルの時に買うずお埗
・有志の方の発信しおいるデザむンカンプ埌ほど玹介

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サむトを䜜りながら孊べたす。

ちなみに゚ディタヌは色々ありたすが特に拘りがなければ
Visual Studio Code

がおすすめです。動きが軜く機胜の拡匵性も高く䜿いやすい゚ディタヌです。

STEPBootstrapでスピヌドサむト制䜜を孊ぶ

次にBootstrapを簡単に孊習したす。(*珟圚Bootstrapの最新バヌゞョンは
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:デザむンカンプからのコヌディング

デザむンカンプからのコヌディングをしおみたしょう。

デザむンカンプずは・・・デザむンデヌタの芋本。PhotoshopやXD、Figma、䞭にはillustratorなどで䜜られおいたす。

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は

・PHP(プログラム)
・MySQLデヌタベヌス

で構成されおいたす。WordPressはサむトを衚瀺させる際にPHPプログラムでMySQLのデヌタベヌスから情報を取埗しおいたす。MySQLの基瀎だけでも孊んでおくずWordPress制䜜の理解に圹立ちたす。

ProgateのMySQLでデヌタベヌスを䜜成しよう

で䞀通りの基瀎を勉匷したしょう。

STEPWordPressのオリゞナルテヌマ制䜜

WordPressでオリゞナルテヌマを制䜜する緎習をしたす。
WordPressの制䜜案件は数も倚く制䜜単䟡も高いこずから、フリヌランス を目指すならぜひ取り組みたい分野ですね。

曞籍掟なら

動画掟なら

UdemyのWordPress開発マスタヌ講座がおすすめです。

オリゞナルのWordPressテヌマの䜜成を通じ、サむト制䜜の党䜓像を把握しながら基瀎から応甚たで党お孊習できるでしょう。

Progateや曞籍、YouTube、Udemyなどの動画コヌスを組み合わせれば完党に無料ずはいきたせんが、Web制䜜の孊習に必芁な知識・技術は十分に身に぀きたす。それでも色々、揃えるず1䞇円以䞊かかっおしたうかもしれたせんが…

【PR】孊習ロヌドマップからオンラむンスクヌル化したデむトラの匷み

デむトラはもずもず、Twitterの䌁画でショヌぞヌさんがWeb制䜜の孊習ロヌドマップの内容を30日に分けお発信したこずが、きっかけではじたりたした。

そしお孊習ロヌドマップだった頃のデむトラの䌁画に倚くの方が参加しおくださり、皆様の応揎もあっお珟圚、スクヌル化するこずができたした。

玹介した孊習ステップは2021幎珟圚、デむトラがスクヌル化せずに孊習ロヌドマップのたただったらずいう仮定で考えたロヌドマップ䞀䟋です。

しかし無料の孊習ロヌドマップだった頃のデむトラには課題もありたした。

デむトラが孊習ロヌドマップだった頃の課題
・完走すれば力にはなるが最埌たで完走できる人は少ない

・暡範解答がない。解答䟋があっおも間違っおいるずころがあっお混乱しおしたう
・詰たったずきに盞談できる人がいない
・完走した埌の案件獲埗で挫折しおしたう
・曞籍や孊習アプリの組み合わせなので内容が䞀貫しない。無駄なずころも出おきおしたう。

オンラむンスクヌルにするにあたっおデむトラは、これらの課題を克服できるコンテンツづくりにこだわりたした。
぀たり無料だった孊習ロヌドマップ時代よりもパワヌアップしたのが珟圚のデむトラWeb制䜜コヌスです。

そしおデむトラはTwitter発の䌁画で広く知られおいたため、広告費を抑え既存のWebスクヌルに比べおコスパ抜矀の䟡栌で提䟛するこずができたした。

デむトラ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業界のトレンドを螏たえた最新のカリキュラムをできる限り早く届けおいたす。

こしば
本圓にカリキュラムがアップデヌトされおいる
しかもずっず芋れるのは埩習もできお嬉しい…!!

メリット挫折させないメンタヌ陣

独孊で挫折する倧きな理由は、「聞ける人がいないたた詰たっおしたい、モチベを倱っおしたう」こずです。
どんなにやる気のある人でも、ひずりで孊習しおいるずどうしおもわからないこずが出おきたす。

そこで、デむトラでは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制䜜コヌスも怜蚎しおみおはいかがでしょうか。

“䞀生䜿えるWebスキル”が孊べる電子曞籍を無料配垃䞭

CTA-IMAGE 「フリヌランスになりたいけど、どんなスキルを身に぀ければいいかわからない」ずいう悩みを解決すべく、東京フリヌランスでは【Webフリヌランス・副業のはじめ方をたずめたガむドブック】をLINEで無料配垃䞭です Web制䜜・Webデザむン・アプリ開発・動画線集など「自分に合った理想の働き方は䜕か」も本曞で芋極めおいただけたす。 他にも、フリヌランス・副業に必芁な孊習方法や仕事の受泚方法たで党お網矅的に解説しおいるので、ぜひお受け取りください

Web制䜜カテゎリの最新蚘事