Webデザイン動画講座最新おすすめ10選！基礎から話題のAIツールまで！

Mayuko Yamazaki

2023.11.17

こんにちは！ LIGのインハウスデザイナーのぱんちゃんです。社内では、「事業推進に関わるクリエイティブなら、Webでも紙でもなんでも作る！」というポジションで毎日元気に働いています。

インハウスで働いていると、Webサイトもバナーもポスターもノベルティも……と仕事内容が本当に多岐に渡るんです。今できることの他にプラスアルファのスキルがあったらもっと仕事の幅を広げられるのに……と思う毎日。最近はAIも話題だし、まだ使ったことのないツールも学んでみたいという気持ちがすごくあります。でも、デザイナーが身につけた方がいいスキルって沢山ありすぎて、次に何を学ぶのがいいかわからない……!

そこで！まずは今注目の分野やツールについて学んでみよう！ということで、私と同じようなお悩みを持つ方のためにも、デザインに関連するさまざまな分野のUdemyオンライン動画講座を視聴してきました！デザイン初学者向けのものから上級者向けのものまで幅広〜く視聴してきたので、この記事を読んでくださるみなさんもきっと興味のある領域が見つかるはずです。デザイナー目線で「これはこんなフェーズの人に合いそう」といった観点と、実際のユーザーの口コミもお伝えしていくのでぜひ参考にしてみてください。

さらにさらに、ちょうどいいタイミングでUdemyではブラックフライデー（2023/11/17〜24）＆サイバーセール（11/26〜27）開催中で、今ならめちゃくちゃお得に学べるみたいなので気になる講座があったら是非チェックしてみてください〜！！

※本記事はUdemyとのタイアップです。
※2つのセールの間となる11月25日（土）はセール対象日ではありませんのでご注意ください。

Udemyでブラックフライデー＆サイバーセール開催中！対象講座が1,200円～！
【初心者向け】基本のWebデザイン
- Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
- 【Photoshop入門コース】ゼロから学べるコンテンツクリエイターのための初心者講座
話題のデザインツールを使いこなす
- 【2023日本語版】FigmaでレスポンシブWEBデザイン作り方！Figmaの基礎からWEBデザイン実践まで完全サポート
- 初心者入門 After Effects（アフターエフェクト）モーショングラフィックス基礎講座【14時間フル学習コース】
最新の画像生成AIツールをキャッチアップ
- 【Midjourney】AIでイラストを描こう！ -人工知能によるテキストからの画像生成-
- AIイラスト生成の新時代：Stable Diffusionで変革を実現する初中級者向け実践講座
3DCGを習得してデザイン業務の幅を広げる
- 【超入門編】Blenderで作る3Dアニメーションマスター講座！ PCさえあれば無料でできる!
- 【はじめて学ぶ人のための】Unreal Engine 5 背景・自然風景制作基礎講座
ChatGPTを使ってデザイン業務を効率化
- ChatGPT × Midjourney × Canvaでサムネイル制作を自動化！簡単３ステップ、AIデザイン入門
- 【ChatGPT】使い方入門-生成AIをビジネス活用！初心者向け講座【Bing、Midjourney】2023年最新版
まとめ
- さらに！ Udemyのお得なキャンペーンと公式LINEがリリース！

Udemyでブラックフライデー＆サイバーセール開催中！対象講座が1,200円～！

Udemyとは

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

ブラックフライデー＆サイバーセール開催中！

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

今年最大級のセールなのでお見逃しのないように！それではさっそくここから各分野の注目デザイン講座をご紹介していきます！

Udemyの講座をさっそく見てみる

【初心者向け】基本のWebデザイン

最初に紹介するのはWebデザインの基礎と、現場で欠かせないAdobeのデザインツールを学ぶ講座です！ Webデザイナーとして働くならまず身につけておきたいスキルを習得することができます。

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

https://www.udemy.com/course/web-designer/

この動画で学べる内容

「Figma for UIデザイン」の著者でもあるUI/UXデザイナーのShunsuke Sawadaさんが講師を務めるこの講座は、未経験からWebデザイナーを目指す人がWebデザインの全体像をまるっと学ぶのにぴったりな内容です。デザイン・コーディングのツールの説明はもちろん、企画・設計、ヒアリング、トンマナの決め方、デザインの考え方など、デザイナーとして仕事をする上で大切な要素が約19.5時間の動画でたっぷり解説されています。

実は私も、未経験からWebデザイナーを目指し始めたときにまずこの動画を受講した経験があります。実体験からも、未経験でWebデザインを学びたいという方はまずこの動画を選べば間違いないと思っています！

デザイナー視点でのおすすめポイント

解説がとにかく丁寧でわかりやすい
企画からデザイン、コーディング、Webサイトの公開まで一気通貫で学べる
ツールの使い方以外にデザインの考え方や仕事の進め方まで学ぶことができる
インプットだけではなく、実際にサイトを作って公開する実践的な内容も含まれている

Udemyユーザーの口コミ

・「デザインから構築までを丁寧な説明でゆっくり進めてくれたので、とても分かりやすかったですし、作っていてとても楽しかったです。これをまた何もない状態から一人で作るにはぜんぜん知識が足りないですが、何度も見直す良いお手本ができました。最後までやりきるとゼロから成果物を作り上げる自信になり、とても有益な講座でした。」（Mさん）

・「HTML/CSSの本を一冊読んでからスタートしましたが、完成図が先にあり事前に整備されたコードを学習する本のスタイルとは異なり、その場でデザインを考えながら修正し、コードも修正していく、リアルなデザイン体験ができたと思います。」（７さん）

講座の詳細をチェックする

【Photoshop入門コース】ゼロから学べるコンテンツクリエイターのための初心者講座

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

この動画で学べる内容

フリーランスの映像クリエイターとして活躍されている三上さんが講師を務めるPhotoshopの入門講座です。約4.5時間の講義にPhotoshopの基礎がぎゅっと凝縮されているので、「Photoshopを全く触ったことがないが、一通り使えるようになりたい」と思う方に最適な講座だと思います！個人的にPhotoshopの魅力は、「加工や合成で自分の思い通りの世界観を作れること」だと思っていて、そんな写真の加工や合成、ギラギラ光る文字の作成など、「やってみて楽しい！」と思える作例解説が後半にあるので、楽しみながらPhotoshopを学べるはずです。

デザイナー視点でのおすすめポイント

一緒に手を動かしながら進めることで、Photoshopの基礎が一通り身に付く
基礎の基礎から学べるので、完全初心者でも安心
ショートカットキーも紹介されていて実践的

Udemyユーザーの口コミ

・「何回か見返したり、実践で紹介されている加工をトレースしたりして、技術を定着させたいと思います。非常にわかりやすい講座をありがとうございました！」（Mさん）

・「丁寧で分かりやすい説明でまずは覚えておくべき基本操作に絞って解説されているので、初めてPSを触る方や久しぶりにPS触る方などにサクッと学べて良いと思います。」（eさん）

講座の詳細をチェックする

こちらの講座もおすすめ

話題のデザインツールを使いこなす

次に紹介するのは今話題のデザインツールが学べる講座です！私も新しいデザインツールの習得でさらに仕事の幅を広げたいと思っているので、注目している領域です。

【2023日本語版】FigmaでレスポンシブWEBデザイン作り方！Figmaの基礎からWEBデザイン実践まで完全サポート

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

この動画で学べる内容

XDがメンテナンスモード(※)に入った今、Figmaに乗り換えなきゃだけどなかなかできていない……という現役デザイナーの方も多いのではないでしょうか？そんな現役の方にも、これからWeb制作を学ぶ初学者の方にもおすすめしたいのがこの講座です。Figmaの基本操作や便利機能の紹介、レスポンシブ対応、プロトタイプの作成まで、FigmaでWebサイトを作る上で必要な知識がこの動画一本でまるっと学ぶことができます。Figma特有のコンポーネントやバリアントなどの概念の説明がとてもわかりやすかったので、私もFigmaを触りたてのころに出会いたかった……と感じました！

デザイナー視点でのおすすめポイント

Figmaの使い方だけではなく、デザインの考え方やTipsも教えてもらえるので初学者にもおすすめ
後半の実践動画が充実！レスポンシブ対応、プロトタイプ作成まで学べるので、他のデザインツールから乗り換えを検討している方にもぴったり
Fimgaのアップデートにも対応した内容になっている

Udemyユーザーの口コミ

・「WebデザイナーではないけどWebデザインをある程度知っておきたい者としては、Webデザインの流れやポイントの基本が学習できとても有益でした。有難うございます！」（Tさん）
・「お手本サイトは様々な機能を説明するためによく考えられたデザインだと思いました。作業中に入るデザインのポイントも興味深かったです。」（Cさん）

※Adobe XDについて詳しくは公式ページをご確認ください。

講座の詳細をチェックする

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

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

この動画で学べる内容

最近はモーションを取り入れた魅力的なWebサイトも増えているので、After EffectsはWebデザイナーにとっても相性の良いスキルだと思います。

私はAfter Effectsは完全に未経験なので難しそうなイメージを持っていたのですが、講師のかもさんが基礎から懇切丁寧に教えてくれるのでスッと内容が頭に入ってきました。初学者がAfter Effectsの基礎を身につけるのにぴったりです！ 説明だけのパートが少なく、とにかく手を動かして制作しながら学ぶスタイルなので、細かいところを一つずつ完璧に覚えていくより、まずは一通りやってみることを意識して進めると、より習得が早いかと思います！

デザイナー視点でのおすすめポイント

説明のパートが少なく、とにかく手を動かして学ぶスタイルなので楽しい！
一度説明した操作でも省略せずに都度説明をしてくれるので、初学者でもつまづきにくい
実際に講義で作る作例が豊富で実践的！

Udemyユーザーの口コミ

・「llustrator、Photoshopの経験はありましたが、映像系は何もわからない状態から視聴しました。前述の操作画面とは全く異なるUIや最初は聞きなれない言葉ばかりで不安でしたが、ちょうどよく感じる長さのワークを繰り返し重ねることで、だんだんアプリケーションに慣れていく感覚を体験し、最後までやり遂げることができました。」（Yさん）

・「とても丁寧でわかりやすく解説して頂き感謝しています。各セクションで作る作品はとてもセンスの良いレベルの高いものばかりでしたが初めてAfter Effectsをさわった自分にも指示通りに操作していけば全て完成させられました。」（Aさん）

講座の詳細をチェックする

こちらの講座もおすすめ

【脱 Canva初心者！】ダサくならない制作方法とチームのデザインに統一感を出す方法

3DCGを習得してデザイン業務の幅を広げる

Webデザイン以外にも仕事の幅を広げていきたい方は3DCGを学ぶのもおすすめです！ Webデザインと3DCGアニメーションや3Dグラフィックエンジンのスキルの掛け合わせで、市場価値をあげていきたい方は注目です！

【超入門編】Blenderで作る3Dアニメーションマスター講座！ PCさえあれば無料でできる!

https://www.udemy.com/course/blender3d-pc/

この動画で学べる内容

アニメーターとしてCG業界で10年以上活躍されているレオンさんが講師のBlenderの超入門講座です。Blenderは無料なのにクオリティの高い3DCGが作成できることが魅力で、気になっているWebデザイナーの方も多いのではないでしょうか？ツールの使い方レクチャーが中心の講座は多いですが、この講座はそれだけではなくアニメーションの仕組みや基本の考え方など本質的な部分を理解できることが魅力だと感じました！ 3DCGアニメーションのスキルを身につけてデザイン業務の幅を広げていきたい方にとって、ベースの考え方をしっかり身につけることができるのでおすすめです！

デザイナー視点でのおすすめポイント

Blenderの使い方だけではなくアニメーションの基礎が学べる
いきなり人型のキャラクターを動かすなどではなく、丸や四角などのシンプルな形状を用いた基礎が学べるので3DCGアニメーション初学者におすすめ
アニメーションの基本の考え方である「アニメーションの12原則」を実演を交えながらわかりやすく解説している

Udemyユーザーの口コミ

・「数日に分けて少しずつでも、最後までやる気を維持して受講することができました。Blenderの操作は、特に最初のうちはよく分からないところもありましたが、何回も動画を見直したり、操作方法を調べたりしつつ進めるのも含めて、とにかくすごく楽しかったです！何よりアニメーションを作る上での基本の考え方を学べたことがよかったと思います。」（Hさん）

・「前から興味のあったBlenderの使い方が分かればと思ってコースを受講したのですが、３Dアニメーション作りがどうゆうものかということも分かって期待以上でした。」（Kさん）
講座の詳細をチェックする

【はじめて学ぶ人のための】Unreal Engine 5 背景・自然風景制作基礎講座

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

この動画で学べる内容

主にゲーム開発で使用される、高度な3Dグラフィックエンジン「Unreal Engine」を使った風景制作を学べる講座です。最近市場が急成長しているVR/ARにも適しているツールなので、デザイナーとして市場価値をあげていきたい方や3DCGデザイナーとしても活躍していきたい方にとっておすすめの講座です。

講師のうめちゃんさんは「初心者に優しく、丁寧に」をモットーに活動されていることもあり、モチベートしてくれる細やかなコミュニケーションが学習者としてすごく嬉しいと感じました。なお、ロジックを作るブループリントは講座の内容に含まれないので、「プログラミングのような難しい内容はちょっと……」という方も安心して3DCGの学習を始めることができると思います！

デザイナー視点でのおすすめポイント

テンポの良い解説で楽しく学べる
Unreal Engineを全く触ったことのない初心者でも安心して学べるレベル設定が嬉しい
動画を見直さなくても復習できる、要点をまとめたテキストが付いてくる

Udemyユーザーの口コミ

・「ゼロからのスタートでしたが、丁寧な説明でとても分かりやすかったです。自画自賛してしまうほど素敵な島が出来上がりました。楽しかったです！」（Yさん）

・「UE歴が１年と少しの者です。いままでなんとなくランドスケープを扱ってきましたが、今回初めてしっかりと学びました。また、苦手だったライティングの知識が少し深まってよかったと思います。BPを使わなくてもこのような演出が可能なことをUE初心者の方々に知っていただきたいと思いました。」（Rさん）

講座の詳細をチェックする

こちらの講座もおすすめ

【最初に学びたい】最新Blender3.3LTS 3DCGモデリング集中講座Part1

ChatGPTを使ってデザイン業務を効率化

最後はChatGPTが学べる講座です！ ChatGPTを活用することでペルソナ設計やキャッチコピーの生成などができたり、Midjourneyと組み合わせると簡単に画像生成ができたりと、デザイン周りの業務の効率化にも非常に役立ちます。

ChatGPT × Midjourney × Canvaでサムネイル制作を自動化！簡単３ステップ、AIデザイン入門

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

この動画で学べる内容

ChatGPT、Midjourney、Canvaの三つを組み合わせたサムネイル制作を学べる講座です。ChatGPTで作成したプロンプトを使ってMidjourneyで画像を作り、Canvaでデザインアレンジを加える流れで講義が進みます。もちろんノンデザイナーの方にもおすすめですが、「デザイン制作にAIツールを取り入れたいけれど、うまく取り入れる方法が思いつかない」というデザイナーの方にもぜひおすすめしたいです。ビジュアルアイデアをAIに考えてもらうための指示の出し方や、ChatGPTにMidjourney用のプロンプトを出してもらうための方法が個人的に勉強になりました。AIツールを触ってみる最初の一歩としてちょうどいい講座だと思います！

デザイナー視点でのおすすめポイント

三つのツール（ChatGPT、Midjourney、Canva）の使い方について登録するところから丁寧に教えてもらえる
ノンデザイナーだけど、サムネイルやプレゼン資料用の画像、SNSの投稿画像を時間をかけず高品質に作成したいと思っている人に特におすすめ
ChatGPTをどうやってデザインに生かせるか、どんなプロンプトを入れたら良いかを学べるので、AIを業務に生かしたいデザイナーにもおすすめ

Udemyユーザーの口コミ

・「わかりやすく説明してくださっており、画像を生成することができました。とても楽しむことができました。これから様々な画像を作るのが楽しみです。」（Mさん）

講座の詳細をチェックする

【ChatGPT】使い方入門-生成AIをビジネス活用！初心者向け講座【Bing、Midjourney】2023年最新版

https://www.udemy.com/course/chatgpt-aibingmidjourney2023/

この動画で学べる内容

ChatGPTをはじめとする生成AIツールの全体像と、実務への取り入れ方をしっかり学べる講座です。各セクションの内容が濃いのが嬉しいポイントだと感じました！講座ではChatGPTだけではなく、Bing Image CreatorやMidjourneyを使用した画像生成など複数のAIツールについて学べるので、この講座を受ければ業務に合わせて適したAIツールを選択できるようになると感じました。「ChatGPT×サービス開発」のセクションでは、ChatGPTでペルソナ設計やキャッチコピーの生成、ユーザーインタビューを行う方法の説明があり、Web制作の現場でもすぐに取り入れられる内容が魅力的です。

デザイナー視点でのおすすめポイント

基礎〜応用までたっぷり解説されているので、AIツールが初めてな方でもしっかり基礎を身につけられる
Web制作の現場ですぐに取り入れられるような実用的なプロンプトが解説されている
今後もコンテンツアップデートの予定あり！（GPT-4、Midjourney、DALL-E、Perplexity AI）

Udemyユーザーの口コミ

・「Chat GPT始め生成AIの効率的な使い方を広く、深く学ぶことができました。語り口も優しく分かりやすく説明して頂いており、くじけることなく学べました！」（Hさん）

・「大変良質で実用的なコンテンツなので同僚にも勧めました。終始初心者に寄り添うスタイルが安心感を与えますが、内容は英語圏の最新情報もチェックされているんだろうと思わせるtipsがスパイスとなっていて最後まで一気に学習できました。アップデート有との事で楽しみです。」（Yさん）

講座の詳細をチェックする

こちらの講座もおすすめ

まとめ

いかがでしたか？みなさんの学んでみたい講座は見つかりましたか？
私は今回さまざまな領域の講座を実際に視聴してみて、AIについて学びたい欲がさらに高まってきました！今年もあと少しだから……ラストスパート……勉強がんばります……!!!

もし「これを学んでみたい！」という講座が見つかったら、ブラックフライデー（2023/11/17〜24）＆サイバーセール（11/26〜27）開催中の今、ぜひスキルアップに挑戦してみてください！
ちなみに対象講座が1,200円から学べるのは今年最大級のチャンスみたいなので、お見逃しのないように……！記事で紹介しきれなかったいい講座もたくさんあるので、ぜひぜひ期間内にチェックしてみてくださいね。

それでは、最後までご覧いただきありがとうございました！

セール中のUdemyで他の講座もチェック！

さらに！ Udemyのお得なキャンペーンと公式LINEがリリース！

【Udemyクレジット 3,000円分が当たる！】

「受講してよかった」「他の受講生にもおすすめしたい！」と思うお気に入りのUdemy講座を、X（Twitter）でシェアする『#Udemyおすすめ講座キャンペーン』を実施中。
▶️▶️キャンペーンの詳細はこちら

【Udemy公式LINEがリリース！】
新たな学びに出会えるLINE講座診断、セールや注目講座など、学びに役立つ情報をLINEでタイムリーに受け取れますので、ぜひ友だち登録してみてください。
▶️▶️友だち登録はこちら

※本記事ではUdemyユーザーからの口コミを一部抜粋して紹介しています。
※表示している価格は本キャンペーン期間中の価格で、期間終了後の価格は異なります。紹介した講座名や講座内容は、2023年11月17日時点のものです。
※本記事で紹介する講座の中には、セール外の講座も含まれます。

〜Udemyとは〜
Udemyは、米国法人Udemy, Inc.が運営する世界6,400万人以上が学ぶオンライン学習プラットフォームで、世界中の「教えたい人（講師）」と「学びたい人（受講生）」をオンラインでつなげています。また、法人向けの「Udemy Business」は、Udemyで公開されている世界21万以上の講座の中から、日本の利用者向けに厳選した日本語及び英語約12,000講座を、サブスクリプション（定額制）で利用することができるオンライン学習サービスです。（株）ベネッセコーポレーションは、一生涯の学びを通して社会と人々の人生が豊かになるよう、社会人の学びを支援しており、Udemy社とは日本における独占的業務提携を2015年より行っています。(2023年6月時点)