【ベストセラーから話題の新着講座まで】Udemyのガチ推しWebデザイン動画講座10選

【ベストセラーから話題の新着講座まで】Udemyのガチ推しWebデザイン動画講座10選

おまめ

おまめ

お久しぶりです! デザイナーのおまめ(@omame_creator)です。
LIGのWebデザイナーを卒業し、現在UIUXデザイナーとしてサービスデザインファームで働いています。

最近会社に大学生のインターンがきてくれて、「Webデザインもグラフィックデザインも、もっとスキルアップしたいから本や動画教材、YouTubeなどからおすすめを教えてほしい」と言われたので何を紹介するか悩んでいたところ、タイミングよくUdemyのガチ推し講座を教えていただき……!

講座を視聴してみると、「Webデザインを学びたい人におすすめできる内容ばかりだ!」と思ったので、「これからWebデザイン勉強したい!スキルアップしたい!」という人に伝えるような視点で、おすすめ講座とポイントを紹介していきたいと思います!

Udemyユーザーの口コミも紹介しているので、デザイナー目線以外のおすすめポイントも参考になると思います! さらに今、ブラックフライデー(2022/11/18〜25) & サイバーセール(11/27〜28)開催中らしく、すごくお安くなっているのでこの機会に是非みてみてくださいー!

※本記事はUdemyとのタイアップです。

Udemyでブラックフライデー (2022/11/18〜25)&サイバーセール(11/27〜28)開催中!対象講座が1,200円~!

Udemyとは

Udemyは、最新のWebデザインやIT技術、ビジネススキルなどさまざまなテーマを学ぶことができるオンライン学習プラットフォームです。世界中の現場で活躍しているプロフェッショナルから、実践的で最先端のスキルを好きなときに学ぶことができます。そんなUdemyが、ブラックフライデー&サイバーセールを開催中!

ブラックフライデー&サイバーセール開催中!

対象講座が1,200円から学べるチャンス!

今年最大のセールなのでお見逃しのないように!さっそくここからオススメのデザイン講座を、学習目的別にひとつずつご紹介していきます!

Udemyの講座をさっそくチェック!

【王道】未経験でデザインの基礎から学ぶ

デザインからコーディングまでのオールインワン講座

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース《ベストセラ―講座》

https://www.udemy.com/course/web-design-master/

Web制作者としての最初の一歩を踏み出せるように、Webデザイナーの田村さんが優しい声で丁寧にわかりやすく、デザインからコーディングまで網羅的に教えてくれる講座です。Photoshop・ HTML・ CSSについてインプットしてから、実際にサイトを作るアウトプットまでできちゃいます。Photoshopのバージョンが最新ではないですが、基礎的なことはあまり変わらないのでまずWeb制作の仕事内容が知りたい人や、Photoshopではなにができるのか、HTML・CSSでは何ができるのかの大枠を把握したい人におすすめの講座です。

ここが魅力的!

  • Web制作の一連の流れを体験できる
  • Photoshop・HTML・CSSの基礎をインプットできる
  • さまざまなWebサイトコーディングをアウトプットできる

Udemyユーザーからの口コミ

  • 「何度も同じことを繰り返し説明してくれるので、より頭に入りとても良かった。」(Tさん)
  • 「全くの初心者にもわかりやすい説明。全体の半分を受講して、かなりの勉強量だと実感しています。期待以上です。」(E.Kさん)
  • 「知識0から始めるには非常に良い。」(Sさん)

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

「現場でよく使うスキル」を学んで即戦力を目指すPhotoshop講座

【完全版】知識ゼロから最速で即戦力レベルになるPhotoshopマスターコース《ベストセラ―・新着講座》

https://www.udemy.com/course/photoshop-h/

デザインスクールを運営されている新里さんがPhotoshopの使い方をわかりやすく解説されている講座です。膨大にあるPhotoshopの機能の中から現場でよく使うツールにのみ厳選して繰り返し学習できるようになっているので、効率的に勉強することができてスピーディーにスキルを習得できそうです!また、機能の紹介だけでなく、バナーやサムネイルを制作するステップがあるので、飽きずに学べると思います。

ここが魅力的!

  • Photoshopを全く使ったことのない人でも理解しやすい
  • Photoshopの機能が現場で使うツールのみに厳選して紹介されている

Udemyユーザーからの口コミ

  • 「なぜこの作業が必要か」も説明してくれるので、納得して理解を深めながら進めることができました。」(S.Tさん)
  • 「「現場の常識」を知ることが出来ましたし、効率の良いツールの使い方を色々と学ぶことができました。」(Oさん)
  • 「Photoshopで必要なことだけ凝縮された講義になっています。これからPhotoshopを始める方で、手っ取り早くバナーやサムネイルを作るレベルになりたいと思うならおすすめです。」(Wさん)

【完全版】知識ゼロから最速で即戦力レベルになるPhotoshopマスターコース

ゼロから最短で身につけるIllustrator講座

Illustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる総合Illustratorコース《ベストセラー講座》

https://www.udemy.com/course/illustratgor/

デザイナーだけでなくエンジニアとしても活躍されている村守さんが、丁寧にIllustratorの使い方について解説されています。Illustratorのバージョンが最新ではないので今はもっと簡単にできる機能もあるのですが、機能に頼ることなく基礎知識の応用で制作されている工程はとても参考になると思いました。この講座では、膨大な数の機能が紹介されているので、全て覚えるという意識で見るのではなく、さらっと全体像を把握して、実際に何かを作るときの逆引き辞書的な使い方をするとかなり理解度が増すのではないかと思います!

ここが魅力的!

  • ファイルの開き方から教えてくれるので、Illustratorを全く触ったことのない人にも優しい
  • Illustratorのほぼ全ての機能が網羅されている
  • 後半ではマリオを書いたりアイコンを使ったり、動画を視聴しながら実践できる

Udemyユーザーからの口コミ

  • 「レクチャーを見ながら操作ができるぐらいのちょうどいい進み方と丁寧な解説が素晴らしかったです。」(Y.Sさん)
  • 「丁寧で分かり易い。説明が親しみやすく無駄がない。続けられそうで安心しました!先に進むのが楽しみです。」(E.Nさん)
  • 「本で学ぶより内容の理解が早く助かっています。」(S.Aさん)

Illustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる総合Illustratorコース

Webサイト制作について学ぶ

手軽に始められる!Web制作初心者向け

ノーコードで超速WEB制作 STUDIO学習完全パック(初級〜上級編)《ベストセラー講座》

https://www.udemy.com/course/studio-complete-pack/

8時間弱の動画で、STUDIOの機能をほとんど網羅できちゃいます!初級編・中級編・上級編と3段階に分かれていて、初級編さえクリアしたらまず簡単なサイトが作れてしまう構成も魅力的です!中級編では比較的新しくアップデートされたCMSの作り方や違いもわかりやすく説明されています。最後はChromeの検証ツールを使って、今あるサイトをSTUDIOで模写していくステップがあるのですが、コードへの理解が深まる実践的なトレーニングでとっても良いと思いました!

ここが魅力的!

  • 丁寧でわかりやすい解説
  • 初級編・中級編・上級編と3段階に分かれていて飽きずに進められる
  • インプットだけでなく、実践的なサイト模写も体験できる

Udemyユーザーからの口コミ

  • 「STUDIOの知識全く無い状態から始めましたが、分かりやすい説明でかなり助かりました。」(Kさん)
  • 「説明の仕方が分かりやすいです。声も聞き取りやすい。再生速度を上げても聞こえやすい声、テンポなので嬉しいです。」(Mさん)
  • 「STUDIOをずっと独学で触ってきましたがわからないところも明確に解決できるようになりました。」(Kさん)

ノーコードで超速WEB制作 STUDIO学習完全パック(初級〜上級編)

より自由にカスタマイズしたい中〜上級者向け

HTML/CSS/JavaScript編

ちゃんと学ぶ、HTML/CSS + JavaScript

https://www.udemy.com/course/html-css-js/

多数プログラミング本も執筆されている、たにぐちさんがわかりやすくHTML / CSS / JavaScriptの知識を解説してくれる動画です。セクションごとに作るものが決まっており、ただインプットするだけでなく作りながら学ぶ方式なので、「この知識何に使うんだろ……」とならずに楽しみながら学習できます。しかもコード量が少ない制作物ばかりなので挫折せずに進められそうです。HTMLとCSSを一通り学習した後、それらをテンプレート化して効率的に作業するためのWebフレームワーク、Bootstrapを使ったサイト制作の工程が含まれていて、基礎から応用まで学習できることに魅力を感じました!

ここが魅力的!

  • 作るものありきで楽しみながら学ぶスタイル
  • 難しすぎない制作物
  • Bootstrapまで解説されている

Udemyユーザーからの口コミ

  • 「実際にプログラムを記述して動作を一つ一つ確認していくので、どのプログラムが動作するのかが解りやすいです。」(Cさん)
  • 「html,css,javascript初心者の人にはピッタリのコースだと思います。」(Yさん)
  • 「理屈が分からなければ前に進めないタイプの私にはとてもよかったです。」(Mさん)

ちゃんと学ぶ、HTML/CSS + JavaScript

WordPressテンプレートから作る編

ざっくり学ぶ、WordPress 6.xでノーコードサイト制作講座《新着講座》

https://www.udemy.com/course/wordpress-nocode/

1つ前に紹介した講座と同じ講師の方の動画で、WordPressサイトの作り方を解説する動画です。私が初学者の頃、WordPressのセットアップや独自ドメインの設定、レンタルサーバー設定などでかなり迷ったので、あの頃にこの動画見たかったなと思いました!テンプレートを0から作るのではなく、既存のテンプレートから編集していってブログのような記事の投稿ができるホームページの作り方が解説されています。静的なサイトではなく動的なサイトが作りたい人や、仕事でWordPressを使う人にぴったりな講座だと思いました!

ここが魅力的!

  • HTML / CSSの知識がなくても既存テンプレートを使って動的なサイトが作れる
  • セットアップから公開作業まで網羅的につまずきやすいところを紹介されている
  • 元のテンプレートからカスタムを加える方法も学べる

Udemyユーザーからの口コミ

  • 「WordPressを初めて使う方でも基本的な操作を理解し、使えるようになると思います。」(Sさん)
  • 「初心者ですが、ノーコーディングでWPでのWebサイトの作成から公開まで、一通りの流れが分かりました。セキュリティー対策についての説明もあり、とても参考になりました。」(S.Mさん)
  • 「最新のブロックエディターを細かく実践を交えながら講義頂いているので大変わかりやすいです。」(Yさん)

ざっくり学ぶ、WordPress 6.xでノーコードサイト制作講座

UIデザインを学ぶ

Figmaで初心者から始めるアプリデザイン

初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能《ベストセラー講座》

https://www.udemy.com/course/figma-app-design/

UIUXデザイナー、PM、エンジニアなどさまざまな領域でデジタルプロダクト制作をされているSawadaさんが、Figmaの使い方からアプリデザインの実践方法を解説している動画です。前半は1つひとつのFigmaの機能の使い方を学び、後半は実際にアプリデザインを作る上で、動的なアニメーションをつけたりプロトタイプを作ったりする実践編です。Figmaでアプリを作ってみたい人はこれだけで網羅的に学べる内容になっています!Webデザインにも応用できるので、UIデザインはやっていないけどFigmaを使ってみたいと思っている人も必見です!

ここが魅力的!

  • Figmaの使い方から実践的なアプリデザイン・プロトタイプ制作が網羅的に学べる
  • Webデザインにも応用可能

Udemyユーザーからの口コミ

  • 「Web初心者がFigmaを使いこなすための最短ルートとして、1番初めに受講することをオススメします。基本的なwebの考え方とツールの使い方から応用までしっかり学ぶことができると思います。」(H.Nさん)
  • 「figmaの使い方が基礎からかなり応用まで幅広く学ぶことが出来ました。UIデザインにはかかせないデザインの事が深く学べました。」(Oさん)
  • 「基本的なデザイン作成から詳細なプロトタイピング、拡張性のある設定、そしてアニメーションの作成まで詳細かつ丁寧な内容となっているので、この講座を修了するだけでかなりFigmaが使えるようになりますし、Figmaの良さも感じることができるのではないかと思います。」(S.Tさん)

初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能

Adobe XDとFigmaのデザイン・設計手法を網羅的に学ぶ

ちゃんと学ぶ、Figma&Adobe XD《最高評価・新着講座》

https://www.udemy.com/course/chanto-xd/

Adobe XDについてわかりやすく解説している動画です。短い時間で基本操作からスマホアプリの設計までを網羅的に学ぶことができます。まずは基礎を学びながらボタンデザインを作り、その後これまで学んだ内容を応用しながら実際にバナーを作ります。最後にはPhotoshop、Illustratorで作るような静的なデザインではなく、スマホ用アプリの動的なプロトタイプを制作。作りながら学べて、1つ1つがあまり時間をかけずに作ることができるので飽きずに進められます。

Adobe XDだけではなく、Adobe社が買収し注目を集めるFigmaについての解説も追加されているので、XDと同様にボタンデザインの作成を通して基礎から学ぶことができます! XDやFigmaを学びたいけど何から始めたらいいかわからない人におすすめの動画です。

ここが魅力的!

  • 短時間でAdobeXDとFigmaの使い方が網羅的に学べる
  • UIだけでなく、バナーの作り方も学べ、Webデザインにも応用できる

Udemyユーザーからの口コミ

  • 「以前、XDだけの環境で、XDの学習が挫折してしまっていたのですが、この講座ではアドビCCの利用の仕方も含めて、活用法を丁寧に説明してくださっているので、理解しやすいです。また、バナーはXDで画像を書き出せばいいという発想に、目からウロコでした。フロントエンジニアとしても、是非、習得にあたって良い講座だと思います。」(S.Oさん)

ちゃんと学ぶ、Figma&Adobe XD

スキルのかけ合わせでキャリアの幅を広げる

After Effects入門編! モーショングラフィックスを網羅的に学ぶ

初心者入門 After Effects(アフターエフェクト)モーショングラフィックス基礎講座【14時間フル学習コース】《ベストセラー講座》

https://www.udemy.com/course/aftereffects-beginner-eizouworld-kamo/

簡単なアニメーションを実際に手を動かしながら作ることによってAfter Effectsの使い方について学べる講座です。シンプルなシェイプアニメーションからテキストアニメーション、写真を使ったアニメーションなど、どれもWebデザインと掛け合わせやすい制作物を作ることができます。それぞれつまずきやすいポイントもあわせて解説してくれるので挫折せず続けられると思いました!個人的には講師の方の制作環境も見せてもらえたのが面白く、参考になりました!

ここが魅力的!

  • 説明ばかりではなく実際に手を動かして学んでいくスタイル
  • Webデザインにも使えるアニメーションを作れる

Udemyユーザーからの口コミ

  • 「反復的な初歩的な操作も繰り返し教えてくれるので詰まらず進められるのでとても学びやすいです。」(C.Bさん)
  • 「一度教わった機能でも異なるセクションの作品の中で繰り返し使うように構成されているので忘れることがなく確実に身につけることができました。」(Kさん)
  • 「Ae最初のステップには最適だと思いました。とっつきにくいと思われるAeが苦手意識なくひたすら進める事が出来ました。」(Yさん)

初心者入門 After Effects(アフターエフェクト)モーショングラフィックス基礎講座【14時間フル学習コース】

After Effects初~中級編! タイトルアニメーションに特化して沢山アウトプットする

After Effects【脱初心者】タイトル・アニメーション8種+課題1種【モーショングラフィックス】

https://www.udemy.com/course/aftereffects-title-animation-eizouworld-kamo/

先ほどご紹介した初心者入門編の動画を見終わった後に見ると、よりAfter Effectsについての理解が深まりそうな講座でした。タイトルアニメーションに特化した講座なので、Webデザインでタイトルにアニメーションをつけたい人はいろんな手法やパターンを効率よく学ぶことができます。8個も簡単なアニメーションが制作できるので、制作物を増やしたい人にもぴったりな講座だと思いました!

ここが魅力的!

  • たくさん実制作ができ、制作物が増える
  • テキストアニメーションに特化している

Udemyユーザーからの口コミ

  • 「初心者入門講座から続いてのタイトルアニメーション講座でした。エフェクトの組み合わせ技やアイデアに驚きです!」(F.Nさん)
  • 「非常にわかりやすくてつまずくことなく勉強することができました。ショートカットなども都度説明を入れられているのですぐに覚えることができます」(T.Iさん)
  • 「繰り返しの作業で復習しつつ、新しいテクニックも混ぜながらの講義なので楽しく学べました。」(K.Rさん)

After Effects【脱初心者】タイトル・アニメーション8種+課題1種【モーショングラフィックス】

まとめ

いかがでしたでしょうか?

もし良いなと思うものがあれば、今ブラックフライデー(2022/11/18〜25) & サイバーセール(11/27〜28)をしているので、この機会に是非みてみてくださいー!

最後にもう一度、対象講座が1,200円から学べる今年最大のチャンスです! 記事で紹介した講座以外にもいろいろあるので期間内に要チェックです!

私もSTUDIOの講座を早速インターン生におすすめしてこようと思います!ここまでみていただきありがとうございました!

今年最大のセール講座をチェック

※本記事ではUdemyユーザーからの口コミを一部抜粋して紹介しています
※新着講座:2022年に公開された講座
※ベストセラー・最高評価:2022年11月10日時点でUdemyのベストセラータグ、最高評価タグがついたもの
※表示している価格は本セール期間中の価格で、期間終了後の価格は異なります。また、紹介した講座名や講座内容は2022年11月18日時点のものです。あらかじめご了承ください。
〜Udemyとは〜
Udemyは、米国法人Udemy, Inc.が運営する世界5,700万人以上が学ぶオンライン学習プラットフォームです。Udemyは、C to C(Consumer to Consumer)プラットフォームで世界中の「教えたい人(講師)」と「学びたい人(受講生)」をオンラインでつなげます。最新のIT技術からビジネススキルまで幅広いテーマの講座をオンラインで学ぶことができ、世界で7.4万人以上の講師が21.3万本を超える講座を公開しています。隙間時間にPC・スマートフォンなど好きなデバイスからのアクセスが可能で必要な時に必要なだけ学習を進められます。(株)ベネッセコーポレーションは、一生涯の学びを通して社会と人々の人生が豊かになるよう社会人の学びを支援しており、Udemy社とは日本における独占的業務提携を2015年より行っています。

(2022年11月時点)

この記事のシェア数

デザイナー、フォトグラファーのおまめです。好奇心が尽きません。 ギターとバイクと青春と旅が好きです。何かを作り出すことに喜びを感じます。 古代文明を研究するメディアを作っています。 このまま好きなことに夢中になる人生を送りたいです。

このメンバーの記事をもっと読む