初心者からWEBデザイナーに！おすすめのUdemy講座

在宅で副業や仕事と言えば、WEBデザイナーやプログラマー、エンジニアを思い浮かべる人も多いのではないでしょうか？

そこで今回は、「初心者からWEBデザイナーになる」ために最適な講座を「オンライン学習サイトのUdemy（ユーデミー）」の中から厳選して紹介したいと思います。

私もUdemyにはお世話になっていて、2024年5月現在、66コースを購入済みです。

なお、Udemyでは定期的にセールを開催しています。

セール時は通常価格より、90%以上の値引きされた価格で購入する事ができます。

新規受講生割引などがある場合もありますので、まずは公式サイトで確認してみてください。

初心者がWebデザイナーになるためのロードマップ

初心者が挫折しないでWebデザイナーになるには、達成可能なステップを踏んでいくことが大切です。

そのため、講座の紹介をする前に、基本的なステップと必要な技術について説明させてください。

【STEP１】基本ツール及び、デザインの概要を学ぶ

最初はWebデザインの基本を学ぶために、Photoshop（フォトショップ）やIllustrator（イラストレーター）、Figma（フィグマ）などのデザインツールの使い方を習得しましょう。

これらのツールを使って、バナーやロゴ、シンプルなグラフィックの作成から始めるといいと思います。

Photoshopは画像の編集や合成に強く、Illustratorはベクターグラフィックの作成に適しています。

Figmaはプロトタイプ作成やチームでのデザイン作業に便利なツールとなります。

【STEP２】 HTMLとCSSの基礎を学ぶ

次に、Webページの基本構造を作るHTMLと、その見た目をスタイル付けするCSSを学びます。

これにより、静的なWebページを作成できるようになります。

レイアウトやテキストのスタイリング、基本的なリンクの設定などから始めて、Webページの構造を理解し、まずはシンプルな１ページのサイト（ペラページ）を作ることを目指しましょう。

【STEP３】JavaScriptの基礎を学ぶ

JavaScriptは、Webページに動きやインタラクティブな機能を追加するための言語です。

最初は、簡単なクリックイベントなど、基本的なスクリプトを書いてみるといいと思います。

なお、JavaScriptはつまずきやすいので、「難しいな･･･」と思ったら、何ができるのかを理解するだけでもいいと思います。

つまり、必ずしもコードが書けるようになる必要はないです（自分も読めますが書けません）。

ひとまず、これらを習得することで、Webデザイナーへの第一歩は踏み出せると思います。

今回、上記を学ぶために最適な、Udemyの講座を自分が購入したものを中心に紹介しています。

Udemyのおすすめ講座（STEP１.基本ツール・デザイン概要）

最初に紹介するのは、画像編集ソフトの定番「Photoshop」の講座です。

講座名	【画像生成AI Fireflyに対応】Photoshopの全てを23時間の動画と演習で完全マスター　初心者から使えます
講師名	むらもり こう（村守康）
時間	23.5時間
内容	画像生成AI、FireflyをPhotoshopで使えるようになります 初心者レベルの方でもWEB、出版などのデザイナーとしてスタートできるスキルを持つことができます 精密な選択範囲の作成、複雑な画像合成、高度なレタッチ、カラー補正などを使った高いレベルの表現が可能になります。 すべての機能や操作は実際に作品を制作する演習を使って解説しているので、実践的で即役に立つスキルが身につきます。

また、講師のむらもりさんは、購入者限定の無料クーポンをよく配布されます。

その為、１つ講座を買っておくと定期的に新しい講座を無料で学べるかも･･･。

---

続いて紹介するのは、ベクターグラフィックツールの「Illustrator」の講座です。

講座名	【超初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】
講師名	Chiba Meizin（千葉名人）
時間	26.5時間
内容	illustratorの基本的操作からプロになるために必要な基本と応用を習得できます Photoshopと連携した画像をリンク配置した印刷物が作れるようになります レイヤー、整列、パス作成、色をつける、マスク（切り抜き）、画像配置など重要基本スキルが身につきます 初心者が段階的に中上級者レベルのセクションに挑戦できる体系学習式だから難しいセクションからスタートも可能！ プロが実際に作る作品を練習素材で制作するので実務で必要な能力を獲得できます 「テキストからベクター生成機能」でベクターデータを生成できるようになります

また、千葉名人さんの講座は、PhotoshopやIllustatorのアップデートに対して、高頻度で更新をしてくれる（講座を追加してくれる）サービス精神満点なのも魅力です。

---

【STEP１】の最後は、デザインのプロトタイプ作成ツール「Figma」の講座です。

講座名	【最新版】FigmaでレスポンシブWEBデザイン作り方！Figmaの基礎からWEBデザイン実践まで完全サポート
講師名	STAND 4U
時間	6.5時間
内容	Figmaの基本操作 Figmaならではの便利な機能の使い方とその応用方法 FigmaでWEBデザインする時の「一連の工程」 PC版・スマホ版・タブレット版のWEBデザインを作るレスポンシブデザインの作り方 Figma公式のアプリを使って、スマホの実機でミラーリングしながらデザインする方法 ページ遷移やアニメーションをつけたメニューの出し方などの「プロトタイプの作成」 美しく見やすいデザインにするためのコツ

「何故、このパーツをここに配置するのか？」などの説明をしながら、お洒落なデザインをFigmaで構築していくオススメの講座です。

講師のSTAND 4Uさんは、この他にも「Figma×Photoshop」「Figma×HTML」の講座もあるので、ステップアップして学んでいくこともできます（自分はどちらも購入済）。

なお、今まではWEBデザインの作成ツールと言えば、「Adobe XD」が定番でしたが、現在は開発を停止しています（メンテナンスモード）。

その為、これから学ぶのであれば「Figma」一択でいいと思います。

Udemyのおすすめ講座（STEP２.HTMLとCSSの基礎）

HTMLとCSSの基礎から学べる講座を紹介します。

講座名	ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
講師名	中村 祐太（Yuta Nakamura）
時間	27.5時間
内容	HTML5、CSS3（Flexbox、グリッドレイアウトを含む）を使ってウェブサイトのコーディングができるようになります Bootstrapを使ってレスポンシブ対応のウェブサイトのコーディングができるようになります JavaScriptを使って動的なウェブサイトを開発できるようになります MySQLを使ってデータベースの設定と操作が行えるようになります RubyとRuby on Railsを使ってウェブアプリケーションが構築できるようになります AWS Cloud9を使ったクラウド統合開発環境を設定して利用できるようになります Git / GitHubを使ったソースコードのバージョン管理ができるようになります

基礎を幅広く網羅した内容です。

その為、RubyやBootStrapなど、人によっては必要ないものも含まれると思います（自分はこの２つが目的で買いましたが･･･）。

演習形式で進んでいくので、学んだ内容を復習できるのが嬉しいポイントです。

すでに、4万人以上が学ばれている人気講座です。

Udemyのおすすめ講座（STEP３.JavaScriptの基礎）

JavaScriptの基礎と、CSSの応用を学べる講座を紹介します。

講座名	【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
講師名	CodeMafia
時間	24.5時間
内容	本格的なWEBサイトを作成する方法について学びます Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます CSS、JavaScriptの実践的な記述について深く学びます CSS、JavaScriptアニメーションの実装について学びます 最新の実践的なWEB画面の作成方法について深く学びます CSS、JavaScriptのコードの最適化、安定化について学びます 維持管理、持続可能なコードの記述方法について学びます

CSSは、Sassとアニメーション、JavaScriptはスライダーを中心として学ぶことができます。

この講座の魅力は、サンプルとして作成するアイテムのセンスがいいことです。

ただし、講座自体の難易度は高めなので、何度も繰り返したり、書籍などで知識を補完する必要があるかもしれません。

また、WEBだけではなく、印刷物などのデザインを頑張りたいのであれば、この講座の内容はオーバースペックです。

その為、そういった方は、STEP1で紹介した千葉名人の、PhotoshopやIllustratorの中級・上級編の講座を勉強されることをオススメします。

以上、初心者からWEBデザイナーになり対人へのおすすめしたいUdemy講座でした。

なお、動画を視聴して学ぶなら、大画面のモニターか、デュアルディスプレイがオススメです。