あなたも、こしばと同じような悩みはありませんか？
・SNSやYouTubeでWeb制作の勉強法を調べたけど情報が多過ぎて混乱している
・独学？スクール？結局、どっちが良いの？
広告やSNSやYouTube、ブログなどの影響もあり未経験からWeb制作フリーランスに興味をもつ人が年々、増えてきました。
今ではWeb制作のロードマップや勉強法についての情報もあふれていますよね。
Web制作に役立つ情報を誰もが手に入れられるようになりました。一方でWeb制作のことを全く知らない人にとって、情報の取捨選択が難しくなってしまったのではないでしょうか。
東京フリーランスが運営するオンラインスクール「デイトラ」では、未経験からでも完走すればWeb制作を仕事にできるだけの実力を身につけられるカリキュラムを提供してきました。
そして実際に多くの稼げるWeb制作フリーランスがデイトラから生まれました。
本記事では実際にWeb制作フリーランスを輩出してきた東京フリーランスが、2021年版のWeb制作学習方法を解説します。
※LINE限定であなたにピッタリのスキルがすぐに分かる「Webスキル診断」を実施中！
こちらから今すぐ診断する▼
Web制作（コーディング）で仕事をするのに必要なスキルとは？
Web制作で仕事をするのに必要なスキルをご紹介します。
HTML/CSS
Bootstrap
サーバーとドメインの基礎
JavaScript
jQuery
Sass(Scss)
PHP
SQLの基礎
WordPress
とりあえず、この９つのスキルがあればWeb制作の仕事をはじめられると思います。
でも順を追って学習を進めていけば大変ですが、完全未経験からでも十分、習得できます。
Web制作（コーディング）の学習ロードマップ
Web制作（コーディングの学習ロードマップ）をご紹介します。
市販の書籍やプログラミング学習サービス、有志のつくってくれた学習素材を組み合わせることで学習は可能です。
・Progate・・・人気のプログラミング学習サービス(税別月980円）
・Web制作者向けの学習書籍
・Udemy・・・オンライン学習プラットフォーム（買い切りの動画教材が販売されています。セールの時に買うとお得！）
・有志の方の発信しているデザインカンプ（後ほど紹介）
Web制作を学習して仕事にできるようになるまでのスタートラインには十分にたてます。
STEP１：HTML/CSSの基礎を勉強する
まずHTML/CSSの基礎を学習します。HTMLはWebサイトの骨組みを作り、CSSは装飾するために使います。
ブラウザーでプログラミングの学習ができるProgateのHTML＆CSSコースを一通りやってみましょう。
学習コース・道場コース・コラムまで一通りやってみましょう。
ちなみにProgateは３周もすれば十分です。
ただしProgateはブラウザーで学習できてしまうため、ローカルでの環境開発の力が身につきません。
Progateの道場編は初めてだと少し難しく感じるという意見が多いので、最初はできなくても自信をなくさないで大丈夫です！
Progateが終わったら書籍で勉強します。おすすめの本はこちら。
Web制作に必要なHTMLやCSSの知識が体系的に学べる一冊。
具体的にはHTMLとCSSの基本からレスポンシブやFlexbox、CSSグリッドなど、実際に手を動かしてWebサイトを作りながら学べます。
ちなみにエディターは色々ありますが特に拘りがなければ
Visual Studio Code
STEP２：Bootstrapでスピードサイト制作を学ぶ
次にBootstrapを簡単に学習します。(*現在Bootstrapの最新バージョンは５）
Bootstrapはフロントエンドライブラリーで使いこなせるとモバイルファーストなレスポンシブWebデザインを素早くカスタマイズできるようになります。
例えばYouTubeやUdemyにBootstrapを学習できる動画コンテンツがあります。
気になる動画を見ながら手を動かしてBootstrapを使ってみてください!!
体系的にBootstrapの知識を学ぶなら公式サイトや書籍がおすすめです。
Bootstrapで作られたサイトを改修したり、部分的に使ったりすることもあるんだって！
STEP3：JavaScriptとjQueryでリッチなアニメーションを作れるようになろう！
JavaScriptとjQueryはWebサイトにアニメーションをつけるために使います。
jQueryはJavaScriptのライブラリで、簡単な記述でJavaScriptの動きを再現できます。
ProgateでJavaScriptとjQueryのコースがあるので、こちらを一通りやってみましょう。
そして、物足りないなと感じたら書籍で
これらに取り組んでみましょう。
新しく発売された『動くWebデザインアイディア帳』もよく使われるアニメーションに必要なコードが実例でまとまっており、とてもおすすめです。
STEP4：Sassを使いこなせるようになろう！
SassはCSSを拡張して扱いやすくしたスタイルシートです。
Sassを使うことで記述を簡略化したり、演算ができたりするメリットがあります。
ProgateのSassコースをやってみましょう。
そして、物足りないなと感じたら
Sassの書籍を読んでみましょう。
Sassを学べば効率よく保守性の高いコーディングができるようになります。
STEP:５デザインカンプからのコーディング
デザインカンプからのコーディングをしてみましょう。
Web制作会社とパートナーを組んで仕事をするとき、Webデザイナーと組んで仕事をする際には
デザインカンプを渡されてコーディングをすることになります。
よくWebサイトの勉強をする際は実在するWebサイトを見ながら再現してみよう！って聞くんだけど。
現在は有志がコーディングを練習できるデザインカンプを提供してくれています。
STEP６：PHPの基礎
ProgateでPHPの基礎を学習しましょう。最後に学習するWordPressがPHPで主に構成されているため、PHPの基本を固めましょう。
まずはProgateのPHPコースに取り組んでみましょう。
書籍で勉強するなら
『気づけばプロ並みPHP 改訂版–ゼロから作れる人になる!』がおすすめです。
「PHPでショッピングカートシステムを作る」という内容がメインで、ショッピングカートの開発をフルスクラッチでしていくため、プログラミングやPHPの基礎力を鍛えられます。
またWeb制作の学習ではPHPはWordPressをカスタマイズするために使うことがほとんどなので、
こちらの書籍もおすすめです。
STEP７；MySQLの基礎
WordPressに必要なデータベースのMySQLの基礎を学びます。
WordPressは
・MySQL（データベース）
で構成されています。WordPressはサイトを表示させる際にPHPプログラムでMySQLのデータベースから情報を取得しています。MySQLの基礎だけでも学んでおくとWordPress制作の理解に役立ちます。
で一通りの基礎を勉強しましょう。
STEP８：WordPressのオリジナルテーマ制作
WordPressでオリジナルテーマを制作する練習をします。
WordPressの制作案件は数も多く制作単価も高いことから、フリーランス を目指すならぜひ取り組みたい分野ですね。
書籍派なら
動画派なら
UdemyのWordPress開発マスター講座がおすすめです。
オリジナルのWordPressテーマの作成を通じ、サイト制作の全体像を把握しながら基礎から応用まで全て学習できるでしょう。
そして最後に力試しとしてデイトラのWeb制作コースの卒業課題に取り組んでみましょう。
デイトラのWeb制作コースの卒業課題はnoteで有料ですが公開されています。
これができればデイトラWeb制作コース卒業レベルの水準に到達ということになります。
あと、分からないところはググって自分で補えば良さそう。
Progateや書籍、YouTube、Udemyなどの動画コースを組み合わせれば完全に無料とはいきませんが、Web制作の学習に必要な知識・技術は十分に身につきます。（それでも色々、揃えると1万円以上かかってしまうかもしれませんが…）
【PR】学習ロードマップからオンラインスクール化したデイトラの強み
デイトラはもともと、Twitterの企画でショーへーさんがWeb制作の学習ロードマップの内容を30日に分けて発信したことが、きっかけではじまりました。
そして学習ロードマップだった頃のデイトラの企画に多くの方が参加してくださり、皆様の応援もあって現在、スクール化することができました。
紹介した学習ステップは2021年現在、デイトラがスクール化せずに学習ロードマップのままだったら？という仮定で考えたロードマップ一例です。
しかし無料の学習ロードマップだった頃のデイトラには課題もありました。
デイトラが学習ロードマップだった頃の課題
・完走すれば力にはなるが最後まで完走できる人は少ない
・模範解答がない。解答例があっても間違っているところがあって混乱してしまう
・詰まったときに相談できる人がいない
・完走した後の案件獲得で挫折してしまう
・書籍や学習アプリの組み合わせなので内容が一貫しない。無駄なところも出てきてしまう。
オンラインスクールにするにあたってデイトラは、これらの課題を克服できるコンテンツづくりにこだわりました。
つまり無料だった学習ロードマップ時代よりもパワーアップしたのが現在のデイトラWeb制作コースです。
そしてデイトラはTwitter発の企画で広く知られていたため、広告費を抑え既存のWebスクールに比べてコスパ抜群の価格で提供することができました。
デイトラWeb制作コースを受講する７つのメリット
デイトラのWeb制作コースでは、ご紹介した学習ロードマップで学ぶ内容を無理なく無駄なく学べるように全てオリジナルのコンテンツで作りました。
しかも市販の書籍や動画にはないWeb制作の現場の知恵や技術まで盛りこんでいます。
そして、オンラインスクール化にあたり
・学習ロードマップだった頃の課題を克服
・既存のWebスクールの価格よりコスパよく学べる
・勉強した後にフリーランスとして稼げる、転職できる、副業できる内容
この３つにこだわりカリキュラムを制作しました。
デイトラのWeb制作コースのメリットをご紹介します。
メリット１：コスパ抜群の価格設定
デイトラは受講生が負担なくWeb制作を学べるようにコスパにこだわりました。
Web制作やWebデザインを学べるスクールは高いところで50万円前後、比較的、受講しやすいオンラインスクールでも15万円前後はします。
となったら、お金ももったいないですよね…
そこでデイトラのWeb制作コースは、カリキュラムの質にこだわりながらも広告費を抑え10万円を切る価格設定を実現しました。
メリット２：未経験からでも完走すれば仕事ができる無駄のないカリキュラム
そのため修了した後に満足してもらえる力がつくカリキュラムづくりにこだわりました。
もしかしたら、一般的なWebスクールのカリキュラムで勉強した人でも難しく感じる位かもしれません。
・もう少し優しい課題にしてほしい
・答えをすぐに教えてほしい
・マンツーマンでもっと丁寧に教えてほしい
このようなリクエストもあります。
しかし、デイトラではカリキュラムを修了してからWeb制作を仕事にできることを目標にしています。
カリキュラムを優しく簡単な課題にすれば、受講中はストレスなく楽しく勉強できます。
しかし、修了しても全然、仕事で通用しなかったとなったら後悔してしまいますよね。デイトラでは受講生の満足度ではなく、修了生の満足度を一番、大切にしています。ただし、スクール化したことで無駄な内容を省き効率的に学習できるようになりました。
メリット３：現役で活躍中のエンジニアやフリーランスが動画講義や学習コンテンツ制作を担当
デイトラのWeb制作コースの動画コンテンツでは、現役で活躍中のエンジニアやフリーランスが講義や学習コンテンツ制作を担当しています。
大手で営業職→プログラマーに転職→フリーランスで2年海外→帰国後に起業して東京フリーランスCMO。
現在は自分の経験をもとに作ったオンラインスクール「デイトラ」を運営中。
東京フリーランス運営メンバー。
営業から転職し、6ヶ月でリードエンジニアになったフルスタックエンジニア。
その後半年でフリーランスとして独立し、ブロックチェーン・機械学習の案件に携わる。
現在はフリーランスエンジニアの経験を活かして、「ゲスエンジニア」という名前でSNS・ブログ・YouTubeにて情報発信をしている。
システムエンジニアやアフィリエイターとしてキャリアを積んだ後、Web制作を中心にフリーランスとして活動。
フリーランスのコーダーとしてこれまで約300件のWordPress案件に対応した実績も持つ。
WEB制作・映像制作フリーランス。
会社員、小学校教師を経てフリーランスになるという異色の経歴を持つ。
現在はフリーランスとして活動しながら、フリーランス向けの講師業も行っている。
2020年1月からフリーランスのWebディレクター・コーダーとして独立。
SESでWebアプリのフロントを担当したのち、制作会社にて受託案件チームに所属。LP制作・WordPressを用いたコーポレートサイトやアパレルなどのブランドサイト制作を主に活動していた。
動画の中ではWeb制作の現場で使われているテクニックや考え方も学べるようにしました。
動画を見ながら一緒に手を動かしながらコーディングを学べるようになっています。
メリット４：無期限で視聴できアップデートされるカリキュラム
多くのスクールでは、学習期間が終わると教科書や動画コンテンツが見れなくなります。
これでは見返したいときに復習できません。
しかし、デイトラは
・一度、買ったら教材はずっと見ることができる
・内容が適宜アップデートされる
このような特徴があります。
これなら復習したいときにいつでも、振り返ることができますね。
また、コースの内容もアップデートされていきます。
デイトラは運営者が実際にコースの制作と監修をしているため、コースの改善とアップデートを積極的に行える体制になっています。
規模が大きすぎるスクールではカリキュラムを作成し、実際に受講者の方にお届けするまでに時間がかかりすぎてしまうところもあります。
しかしデイトラは少数精鋭で運営しているからこそ、受講者の声やWeb業界のトレンドを踏まえた最新のカリキュラムをできる限り早く届けています。
あ！あと上級編の卒業制作の課題も増やします❗️
— ショーヘー@デイトラ運営 (@showheyohtaki) February 5, 2021
いまはマハーバラタ１パターンだけですが、あと３パターンほど増やして『実案件レベルの4つの課題から好きなものを選んで制作できる』ようにしようと思います👍
ぜひポートフォリオに利用してください👨💻
しかもずっと見れるのは復習もできて嬉しい…!!
メリット５：挫折させないメンター陣
独学で挫折する大きな理由は、「聞ける人がいないまま詰まってしまい、モチベを失ってしまう」ことです。
どんなにやる気のある人でも、ひとりで学習しているとどうしてもわからないことが出てきます。
そこで、デイトラではSlackによる公式サポートの質問部屋を用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。
チャットはカジュアルな雰囲気で気軽に質問でき、受講生とメンターの間で活発なやりとりがされています。ときには優しく、ときには自力で考える力を身につけられるようメンター陣がサポートしてくれます。
メリット６：デイトラ修了生の豊富な実績があるから安心して学べる
デイトラを修了して現在、Web制作を仕事にしている人は少なくありません。
Twitterで、「#デイトラ」で検索すると、実際に独立や転職に成功した事例が沢山でてきます。
デイトラのカリキュラムは意図的に自分で調べなければ、いけないところや大変なところもあります。
その代わり完走できれば実案件で仕事ができるレベルのコーディング力が身につきます。
メリット７：卒業生向けの独立・転職サポートサービスがある
Web制作会社に就職したいけど就職活動で何をアピールすればいいか分からない。
こんな不安もあるのではないでしょうか。
スクールは修了した後が大切ですよね。
デイトラでは、そんな人の独立や転職を支援するサポートサービスも用意しています。
完全オンラインの「Web制作フリーランス独立サポート」の紹介～二か月間のメンター&オリジナル教材で独立を後押し！～
例えば独立サポートならば、現役フリーランスのメンターがついて案件獲得のアドバイスや、仕事で詰まったときの技術的な相談なども可能です。また、定期的なミーティングでWeb制作フリーランス最前線の情報を交換したり、同じ独立を目指す受講生と刺激しあったりもできます。
まとめ
2021年版のWeb制作（コーディング）の学習ロードマップをご紹介しました。もちろん、このロードマップだけがフリーランスのWeb制作になる方法ではありません。しかしオンラインスクール化する前からデイトラでは多くのWeb制作のフリーランスを輩出してきた実績があります。ロードマップで学習する内容を全て身につければ、未経験からでも十分、Web制作を仕事にする土台が身につきます。
また、ロードマップで紹介した教材はひとつ、ひとつ本当におすすめなのでデイトラのWeb制作コースの受講生にも参考書、もっと練習したいときの課題としておすすめできます。
Web制作フリーランスになるために必要な知識・技術は実装のためのコーディングだけでも多岐に渡ります。
HTML/CSS
Bootstrap
サーバーとドメインの基礎
JavaScript
jQuery
Sass(Scss)
PHP
SQLの基礎
WordPress
沢山あって大変ですよね。
ひとつひとつの内容を学ぶ教材はありますが、全てを一貫して学べる教材はありません。
だからこそ、デイトラのWeb制作コースではフリーランスとして独立するために必要な内容を、無理なく無駄なく学べるように作りました。
デイトラWeb制作コースは卒業してからフリーランスとして活躍できるように、自力で調べたり考えたりしなければいけない内容もあります。
しかし完走すれば未経験からでも仕事ができるレベルに引きあげられる内容になっています。
本気でWeb制作を勉強してフリーランスになりたい方は、デイトラのWeb制作コースも検討してみてはいかがでしょうか。
