Udemy スキルアップ 独学ノウハウ

【2023最新Udemy】Web制作フロントエンドにおすすめ講座10選!Web制作初心者中級者向け

             
  • フロントエンドエンジニアになれるUdemy講座を知りたい!
  •  
  • フロントエンドとしてのスキルをさらに高めたい!
  •  
  • どの言語を学習すべきかわからない…
  •  
  • Udemy講座の選択で失敗したくない...

本記事ではこれらの疑問や悩みを解消できる内容になっています。

本記事で紹介する10講座はフロントエンドの現場で必要とされるスキルを厳選しています。
これらの講座を受講し習得できれば、フロントエンドとしてのWeb開発スキルの基礎は十分に担保できるようになっています。

この記事の筆者

フロントエンドエンジニア
Yamato

未経験から独学でフロントエンドエンジニアになりました。上場企業のWeb制作チームマネージャーを4年経験し、現在フリーランスをしながら法人を設立しフロントエンドとして活動しています。JS/WordPress/Vue/Shopifyが得意です。

では解説していきます!

初心者フロントエンド向けUdemyオススメ3講座

この章ではWeb制作の基本であり確実にマスターしておきたい分野の講座を紹介します。

まずはこの3講座を理解してから他の言語の学習をおすすめします。

3講座をマスターすればLPや静的なサイト制作案件(10~20万)を受けても問題なく対応できる力がつきます。

Web制作の超基本スキルのコーディング学習におすすめ講座

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

ベストセラー取得

講師 Jonas Schmedtmann
対象者レベル 初級ー中級レベル
評価(評価人数) 4.8/5 (39,419)
受講者数 186,476人
レクチャー数 126
全動画時間 28時間
言語 英語(字幕あり)
金額 ¥27,800(セール中80〜90%OFF)
権威性 ベストセラー取得
Udemy講師パートナー

講座特徴

本講座の講師であるJonas氏はUdemyが認定したUdemy講師パートナーの一人です。
Udemy講師パートナーになるためには下記の条件をクリアしなければなりません。

  • 高いコース評価: 平均4.4以上の高い評価を維持していること(6か月ごとに確認)
  • Udemy Businessへの参加: Udemy Businessコレクションに現時点で3コース以上含まれていること
  • コースの新しさ: 過去90日以内に新規コースを1つ以上公開しているか、既存のコースを更新していること
  • ポリシーの順守: Udemyの 規約および 信頼と安全性に関するポリシーに従っていること

わかりやすい授業だけでなく、講座を通して制作するのが海外のページなのでデザイン性が高く、モダンな実装を経験することができます。

レスポンシブデザインはもちろん、Flexbox、gridレイアウトやCSSアニメーションの実装も学びます。

またBEMを使ってのCSS設計、npmを使ってのSassのコンパイルなども学べます。

英語での授業ですが、日本語字幕も設定できるので特に心配はありません。

学習期間約1ヶ月(毎日2hと復習込み)

この講座を理解できれば、複雑なデザインでも実装が可能になります。またnpmCSS設計など制作のお作法的なことやマイナーなCSSの紹介もあり目から鱗のテクニックが学べます。


JavaScript完全理解のためのおすすめ講座

The Complete JavaScript Course 2023: From Zero to Expert!

ベストセラー取得

講師 Jonas Schmedtmann
対象者レベル 初級ー中級レベル
評価(評価人数) 4.7/5 (39,419)
受講者数 744,960人
レクチャー数 320
全動画時間 69時間
言語 英語(字幕あり)
金額 ¥27,800(セール中80〜90%OFF)
権威性 ベストセラー取得
Udemy講師パートナー

講座特徴

講師は一つ前に紹介した講座の講師でもあるJonas氏(Udemy講師パートナー)です。

JavaScriptの超基本からの講座なので、JavaScriptの知識0の人でも問題ありません。

この講座で6つのアプリ制作を通して基本はもちろん・DOM操作・オブジェクト思考・Asynch・ES6など最新のJavaScriptの全てを学ぶことできます。

このコースが終わる頃には、
・JavaScriptを綺麗に書くことができるようになる
・動きのあるページ実装ができるようになる
・APIでデータを取得しページに反映させられるようになる

学習期間約2ヶ月(毎日2hと復習込み)

過去5つほどJavaScriptの講座を購入しましたが、この講座が一番良かったです。毎年アップデートされ今でも復習で見返すことがあります。私のフロントエンドとしてのスキルを3段階ぐらい引き上げてくれた講座です。

Jonas氏本人がこの講座の概要を解説してくれています。

この講座のレビュー記事

【2023ベストセラー】UdemyおすすめJavaScript講座を徹底解説

続きを見る


1日でアニメーションをつけてリッチなサイト制作ができる

Master JavaScript Animations with Greensock

講師 Enzo Ustariz
対象者レベル 初級ー中級レベル
評価(評価人数) 4.5/5 (199)
受講者数 912人
レクチャー数 33
全動画時間 2時間18分
言語 英語
金額 ¥5,600(セール中80〜90%OFF)
権威性

講座特徴

大企業のホームページなどでも使われるGSAPというアニメーションに特化したJavaScriptのライブラリについて学びます。

リッチなアニメーションの実装を2時間30分でできるようになります。

単純なアニメーションだけでなく、ローディングアニメーションやスクロールアニメーションなどかっこいいサイト制作ができるようになります。

このコースが終わる頃には、
リッチでスムーズなアニメーション実装ができる
・ローディングアニメーションの作成ができる
・スクロースアニメーションが実装できる

学習期間約1日

2時間30分でサイトに素敵なアニメーションの実装ができるようになるのが魅力的です。アニメーションをつけるだけでサイトの見栄えも案件の単価もぐっと上がるので、一石二鳥です。

この講座の詳細記事

【GSAP 1/4】アニメーションが簡単に作られるJavaScriptライブラリ「GSAP」

続きを見る

中級フロントエンド向けUdemyオススメ5講座

この章ではサイト制作、チーム開発、開発環境構築のレベルを上げたい方におすすめの5講座を紹介します。

より実践的で少し難しい内容になっていますが、これらができるようになればどんな案件でも自信を持って対応ができるようになります。

この5講座をマスターすればSPAやWordPressでのサイト制作案件(30~100万)を受けても対応できる力がつきます。

SPA制作を経験したい方におすすめ

Vue - The Complete Guide (incl. Router & Composition API)

ベストセラー取得

講師 Maximilian Schwarzmüller
対象者レベル 中級レベル
評価(評価人数) 4.7/5 (57,682)
受講者数 213,472人
レクチャー数 330
全動画時間 31時間51分
言語 英語(字幕あり)
金額 ¥26,800(セール中80〜90%OFF)
権威性 ベストセラー取得

講座特徴

モダンJavaScriptのフレームワークの一つであるVue.jsを学びます。

基礎から応用までしっかりカバーされています。説明も丁寧で省くことなくしてくれるのでとてもわかりやすいです。

最近主流になってきているSPA(シングルページアプリケーション)の制作ができるようになります。

このコースが終わる頃には、
モダンなJSフレームワークが理解できる
SPAが作成できるようになる
・React.jsなど新たなフレームワークの理解が進む

学習期間約1ヶ月(毎日2hと復習込み)

私のポートフォリオVue.jsで作っています。これをクライアントに見せて案件をいくつか獲得できました。


本格的にGit/Githubを学び方におすすめ

Git:もう怖くないGit!チーム開発で必要なGitを完全マスター

ベストセラー取得

講師 山浦 清透
対象者レベル 中級レベル
評価(評価人数) 4.4/5 (8,946)
受講者数 48,477人
レクチャー数 68
全動画時間 5時間54分
言語 日本語
金額 ¥11,800(セール中80〜90%OFF)
権威性 ベストセラー取得

講座特徴

講師はご自身でもエンジニア育成サービスを展開されている山浦氏。データベース、AWSなどのインフラに精通されています。

チーム開発で必須スキルであるGit。この講座では基本コマンドやブランチやマージ、コンフリクトの解消方法、GitHubを利用した開発フローなどGitの全てを体系立てて学ぶことができます。

このコースが終わる頃には、
Git/Githubが使えるようになる
チーム開発ができるようになる
・クライアントとのやりとりがスムーズになる

学習期間約2週間(毎日2hと復習込み)

Gitを知らなければチーム開発に参加すら難しくなります。クライアントによってはGit対応がマストになっていたりするので、ぜひこのコースで習得しておきましょう。


本気でフロントエンドになりたいのなら必須

Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)

ベストセラー取得

講師 Shunsuke Sawada
対象者レベル 中級レベル
評価(評価人数) 4.6/5 (380)
受講者数 2,842人
レクチャー数 87
全動画時間 8時間16分
言語 日本語
金額 ¥27,800(セール中80〜90%OFF)
権威性 ベストセラー取得

講座特徴

Webサイト制作を圧倒的に効率的にできるようになります。

Webpackとは複数のファイルを一つにまとめて出力してくれるツールです。
Sass、JavaScript、画像圧縮などをコマンド一つで管理できるようになります。

Git/Githubを使いながら複数ページのサイトをWebpackを通して制作します。

このコースが終わる頃には、
Webサイト制作を圧倒的に効率的にできるようになる
最新の開発環境を自分で設定できるようになる

学習期間約1週間(毎日2hと復習込み)

複数ページあるサイト制作やJavaScript記述量が多くなるときはファイルを分けて管理することで開発がしやすくなります。そんなとき開発者にとってWebpackはかなり強力なツールでストレスなく作業ができる環境を作れます。


WordPress初心者に超おすすめ講座

ちゃんと学ぶ、WordPress テーマ開発講座

ベストセラー取得

講師 たにぐちまこと(ともすた)
対象者レベル 中級レベル
評価(評価人数) 4.5/5 (4,430)
受講者数 28,059人
レクチャー数 118
全動画時間 13時間17分
言語 日本語
金額 ¥27,800(セール中80〜90%OFF)
権威性 ベストセラー取得
Udemy講師パートナー

講座特徴

本講座の講師であるたにぐちまこと氏はUdemyが認定したUdemy講師パートナーの一人です。
Udemy講師パートナーになるためには下記の条件をクリアしなければなりません。

  • 高いコース評価: 平均4.4以上の高い評価を維持していること(6か月ごとに確認)
  • Udemy Businessへの参加: Udemy Businessコレクションに現時点で3コース以上含まれていること
  • コースの新しさ: 過去90日以内に新規コースを1つ以上公開しているか、既存のコースを更新していること
  • ポリシーの順守: Udemyの 規約および 信頼と安全性に関するポリシーに従っていること

このコースはオリジナルのテーマを0から作っていきます。同時に基本的なWordPressの設定や使い方も学ぶことできます。カスタムフィールドや、自作のプラグインの作成まで網羅されています。

このコースが終わる頃には、
WordPressでオリジナルのテーマ開発ができるようになる
・WordPress全般の操作方法が理解できる

学習期間約1ヶ月(毎日2hと復習込み)

WordPressの基本の全てはこの講座で学ぶことができます。WordPress開発ができるようになると案件の価格がグッと上がります。50万以上の案件の獲得もざらにあります。


本格的にWordPressを学びたい方におすすめ講座

Become a WordPress Developer: Unlocking Power With Code

ベストセラー取得

講師 Brad Schiff
対象者レベル 中級ー上級レベル
評価(評価人数) 4.7/5 (20,474)
受講者数 91,329人
レクチャー数 207
全動画時間 42時間3分
言語 英語(字幕あり)
金額 ¥27,800(セール中80〜90%OFF)
権威性 ベストセラー取得

講座特徴

本講座は一つ前のWordPress講座の応用バージョンとなります。難しいところも出てきますが、確実にあなたのWordPress開発のスキルはつきます。

内容自体はある大学のホームページをWordPressで0からテーマ作りをします。

イベントやキャンパス、教授と関連する授業などを紐付けてページに反映させるなど複雑な仕様の実装を体験できます。

このコースが終わる頃には、
WordPressで規模が大きく複雑なオリジナルのテーマ開発ができるようになる
・Wordpress全般の操作方法が理解できる

学習期間約1.5ヶ月(毎日2hと復習込み)

WordPressでゴリゴリ開発したい方におすすめです。私はこれを習得したあとに約70万のサイト制作案件を獲得しました。またこのブログのカスタマイズもできるようになりました。

もうワンランク上のフロントエンドになるための2講座

ここからは中級で学んだことをさらに深く学んだり、ECサイトの構築ができるようになるための講座を紹介します。

想定している獲得案件としては100万以上の案件になってきます。

サーバーサイドの基本を知っておきたい方おすすめ講座

ちゃんと学ぶ、PHP+MySQL(MariaDB)入門講座

ベストセラー取得

講師 たにぐちまこと(ともすた)
対象者レベル 中級ー上級レベル
評価(評価人数) 4.6/5 (4,935)
受講者数 27,878人
レクチャー数 103
全動画時間 11時間1分
言語 日本語
金額 ¥27,800(セール中80〜90%OFF)
権威性 ベストセラー取得
Udemy講師パートナー

講座特徴

本講座の講師であるたにぐちまこと氏はUdemyが認定したUdemy講師パートナーです。

この講座ではサーバーサイド言語のPHPとMySQLでWebシステム開発を学びます。

PHPの基礎知識とMySQLの基礎が習得でき、簡単なデータベース設計を行います。

ログイン機能、ユーザー登録機能、ひとこと掲示板アプリを作成します。

このコースが終わる頃には、
簡単なデータベース設計ができる
簡単なWebアプリを作成することができる
・バックエンドとフロントエンドの繋ぎこみが理解できる

学習期間約1ヶ月(毎日2hと復習込み)

データベースからデータを引っ張ってくることができるようになります。フロントエンドとはいえバックエンド側の基礎知識を身につけたいという方におすすめです。


ECサイト構築したい方におすすめ講座

Shopify Theme Development: Online Store 2.0 + TailwindCSS

講師 Brad Schiff
対象者レベル 中級レベル
評価(評価人数) 4.5/5 (434)
受講者数 3,193人
レクチャー数 89
全動画時間 15時間47分
言語 英語
金額 ¥19,800(セール中80〜90%OFF)
権威性

講座特徴

Shopify(ECサイト)の構築を1から学びます。ShopifyCLIでの構築なので本格的にShopifyについて学べます。またShopifyCLIの導入からサポートしてくれるので開発環境の構築も心配ありません。

オリジナルのおしゃれなECサイトを実際に手を動かしながら学べ、同時にCSSのフレームワークのTailwind CSSも学べます。

このコースが終わる頃には、
・ShopifyでのECサイトの方法がわかる
・Online Store2.0での実装が可能になる
・Shopifyの店舗を動的に実装することができる

学習期間約1.5ヶ月(毎日2hと復習込み)

ハードルが高く感じるECサイトですが、実際はそんなことありません。一つ作ってしまえば、ほぼフロントエンドの実装と変わらないと感じるはずです。最近需要の高いShopifyのでEC構築。私も一番最近で獲得した案件が約100万のShopify案件でした。

まとめ

今回は初心者と中級者抜けのフロントエンドにおすすめするUdemy講座を紹介しました。

まずは前半の8講座の中であなたに合うものを集中してインプットすることをおすすめします。

余力があれば最後2つもぜひチャレンジしてみてください。

では今回は以上です!
ほな🙌🏻

-Udemy, スキルアップ, 独学ノウハウ