【月10万稼ぐ】本物のWeb制作3ヶ月独学ロードマップ

【もう失敗しない】Udemy『Webデザイン』おすすめ講座7選|独学でWeb制作

  • Webデザイン・Web制作を手軽に学習したい・・
  • WebデザイナーになれるUdemy講座を知りたい・・
  • 極力安くWebデザインの学習をしたい・・

 

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

ふたご

 

この記事の信頼性(ゆうけんブログの筆者はこんな人)

  • 現役Webデザイナーが執筆
  • 最高月収7桁のフリーランス
  • 完全未経験から独学でWeb制作スキルを習得
  • Twitterフォロワー数2,000人超(→@twinzvlog_yk
  • Web制作のメンター経験多数
  • 認定ランサー(ランサーズ最高ランク)

     

    これからご紹介するUdemy講座を見ていただく前に『まだAdobeソフトの購入が済んでいない方』は前もってインストールしましょう。今後必須となるソフトです。

    ちなみに現役Webデザイナーの筆者はコンプリートプランを使っています。

     

    本体価格5,680 円 / 月

     

    14日間無料で使ってみる >>

    Adobeのプランは14日間の返金保証あり

     

     

    Udemyを使うべき5つの特徴

    【Udemyを使うべき5つの理由】

     

    1. 新規受講生割引
      Udemy新規登録で6時間限定のセール発生。ほぼ全講座が90%割引
    2. 30日間の返金保証
      理由問わず30日間の返金保証。気に入らないなら即返金
    3. 動画の速度調整
      0.5, 0.75, 1, 1.25, 1.5, 1.75, 2倍で速度を調整可能。学習時間の短縮
    4. 講座購入後の学習期限なし
      Udemyアカウントを持っている限り、購入後はいつまでも講座を受講できる
    5. 毎月不定期に発生する大特価セール
      通常価格の90%OFFが基本。セール中を狙って購入するのが鉄則

     

     

    【オススメ順】Udemy『Webデザイン・Web制作』おすすめ講座7選|評判あり【独学】

    今回ご紹介する講座はWebデザイナーの現場で即戦力として働けるように厳選しています。これらの講座を全て受講しておけば、実際のWeb制作案件でも失敗しません。

    Webデザイナーに必要な全てのスキルが身につくので、普段Twitterでコンサルしている方々にも7講座全てを受講しておくことを推奨しています。(学習開始から2ヶ月で初案件を獲得した方もいます)

     

    まず大前提としてAdobeツールをインストールは済ませておいてください。

     

    全て14日間は無料で使えます。(Adobeのプランは14日間の返金保証

     

    【WordPress】おすすめWeb制作講座(コーディング学習)

    WordPress開発マスター講座
    値段
    (3.0)
    学習しやすさ
    (5.0)
    わかりやすさ
    (5.0)
    学習効率
    (5.0)
    費用対効果
    (5.0)
    汎用性
    (5.0)
    オススメ度
    (5.0)
    総合評価
    (5.0)
    この講座のポイント

    レッスン時間
    10時間

    値段
    24,000円(セール中90%OFF)

    Udemy公式サイト
    WordPress開発マスター講座

     

    この講座の特徴

    WordPress学習の決定版!この講座では主にPHPを利用してWordPressのオリジナルのテーマを作成する講座となります。具体的な内容としては、『開発環境の準備』『オリジナルテーマ作成』『カスタムフィールドの実装』『ブログ機能の設定』など実際のWordPress案件でも必ず必要となってくるスキルを学ぶことができます。Web制作案件を受注していきたい方にはこれ以上ないほどにおすすめしたい講座なのでぜひとも受講していただきたいです。

     

    筆者はこの講座のおかげで現場でも使えるWordPressスキルを習得しました。これ以上の学習教材はないと断言できます。

    ふたご

     

     講座の詳細ページ >>

     

    WordPress学習を始める前にポートフォリオ用のレンタルサーバーを用意しておきましょう。レンタルサーバーを用意する理由や導入方法は全て下の記事で説明しています。

    【徹底解説】ポートフォリオおすすめレンタルサーバーと公開方法|無料/有料比較あり

    サーバー代をかけずにWordPressブログも一緒に作りたい方は下の記事から作っていきましょう!

    【副業】初心者のための「WordPressブログ」開設方法|ConoHa

     

     

    【Photoshop+HTML / CSS】おすすめ講座(Webデザイン学習)

    未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
    値段
    (4.0)
    学習しやすさ
    (5.0)
    わかりやすさ
    (5.0)
    学習効率
    (4.0)
    費用対効果
    (5.0)
    初心者向け
    (5.0)
    オススメ度
    (5.0)
    総合評価
    (5.0)
    この講座のポイント

    レッスン時間
    約42時間

    値段
    24,000円(セール中90%OFF)

    Udemy公式サイト
    未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコースの詳細ページ

     

    この講座の特徴

    本講座は以下の4講座をひとつに凝縮した内容となっています。ちなみにこの4講座はどれも定価9,600円なので合計すると38,400円!それを24,000円で受講できるので15,000円もオトク。

    しかもセール中に購入すればその上さらに90%OFF。これ以上コスパの良いWebデザイン教材は見たことがありません。

     

    注意

    この講座ではAdobeからPhotoshopのインストールが必須になります。前もって準備しておきましょう。

     Adobeのプランは14日間の返金保証あり

     

    こちらは購入必須の講座です。

    ふたご

     

     講座の詳細ページ >>

     

     

    【Illustrator】おすすめ講座(Webデザイン学習)

    Illustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる講座
    値段
    (4.0)
    学習しやすさ
    (4.0)
    わかりやすさ
    (5.0)
    学習効率
    (4.0)
    費用対効果
    (5.0)
    初心者向け
    (5.0)
    オススメ度
    (5.0)
    総合評価
    (4.5)
    この講座のポイント

    レッスン時間
    約23時間

    値段
    23,000円(セール中90%OFF)

    Udemy公式サイト
    Illustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる講座

     

    この講座の特徴

    通学スクール30万円相当の内容。正直にいうと、レッスン時間が長いので『なんとなくIllustratorをやってみようかな』くらいの気持ちだと挫折してしまうかもしれません。しかし、もし『Illustratorを今すぐにでも習得して仕事に使いたい!』というやる気に満ちた方なら間違いナシの講座です。この講座ではIllustratorの基本的な使い方から実践的な『作品制作』までを体系的に学ぶことができます。現場で使えるスキルを最短で身に付けたい方はぜひ受講してみてください。失敗ナシの超ベストセラー講座です。

     

    注意

    この講座ではAdobeからIllustratorのインストールが必須になります。前もって準備しておきましょう。

     Adobeのプランは14日間の返金保証あり

     

    Illustratorを学ぶならはずせない講座です。

    ふたご

     

     講座の詳細ページ >>

     

     

    【Adobe XD】おすすめ講座(Webデザイン学習)

    Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
    値段
    (4.0)
    学習しやすさ
    (5.0)
    わかりやすさ
    (4.0)
    学習効率
    (4.0)
    費用対効果
    (5.0)
    初心者向け
    (4.0)
    オススメ度
    (5.0)
    総合評価
    (4.5)
    この講座のポイント

    レッスン時間
    約12時間

    値段
    19,800円(セール中90%OFF)

    Udemy公式サイト
    Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ

     

    この講座の特徴

    この講座では最新の『Adobe XD』を基礎から徹底的に学習できます。『Adobe XD』の基本的な使い方から、デバイスごとのワイヤーフレーム作成や実践的な内容まで全てをたったの12時間弱で習得できる『Adobe XD』学習の決定版。XDを習得したい方は迷わず受講して大丈夫です。

     

    注意

    この講座ではAdobeからAdobe XDのインストールが必須になります。前もって準備しておきましょう。

     Adobeのプランは14日間の返金保証あり

     

    XDを短期間で習得したいならこの講座は間違いナシ。

    ふたご

     

     講座の詳細ページ >>

     

     

    【JavaScript】おすすめWeb制作講座(コーディング学習)

    【HTML/CSS/JavaScript】フロントエンドエンジニアになりたい人のWebプログラミング入門
    値段
    (4.0)
    学習しやすさ
    (5.0)
    わかりやすさ
    (4.0)
    学習効率
    (4.0)
    費用対効果
    (5.0)
    汎用性
    (5.0)
    オススメ度
    (5.0)
    総合評価
    (4.5)
    この講座のポイント

    レッスン時間
    9時間

    値段
    24,000円(セール中90%OFF)

    Udemy公式サイト
    [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門の詳細ページ

     

    この講座の特徴

    この講座ではフロントエンドエンジニアとしては必須言語であるJavaScriptを基礎から学ぶことができます。現役フロントエンドエンジニアの筆者としてはJavaScriptを習得する講座の中ではピカイチだと思っています。わかりやすいのでプログラミング初心者でも大丈夫。

    具体的には

    • 必要最低限のコーディングスキル(HTML,CSS)が身に付く
    • フロントエンドエンジニアとしても活躍できるコーディングスキル(JavaScript)が身に付く
    • JavaScriptコーディングで動きのあるWebサイトを作成できるようになる

     

    注意

    HTML, CSSも若干触れますが少し応用的なのでコーディング初心者はまず『未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース』から学習を始めるとスムーズに受講できます。

     

    筆者イチオシのWebデザイナー向けコーディング講座です。

    ふたご

     

     講座の詳細ページ >>

     

     

    【レスポンシブデザイン】おすすめWeb制作講座(コーディング学習)

    レスポンシブル・スマートフォンサイト制作講座
    値段
    (4.0)
    学習しやすさ
    (5.0)
    わかりやすさ
    (5.0)
    学習効率
    (4.0)
    費用対効果
    (5.0)
    汎用性
    (5.0)
    オススメ度
    (5.0)
    総合評価
    (5.0)
    この講座のポイント

    レッスン時間
    約5.5時間

    値段
    9,600円(セール中80%OFF)

    Udemy公式サイト
    レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる!

     

    この講座の特徴

    レスポンシブデザインをたった5時間のレッスンでマスターできます。この講座は未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコースと同じ講師(NEST onlineのたむらゆみさん)なので非常にわかりやすく、初心者がつまずきやすいレスポンシブデザインも難なく乗り越えられる内容となっています。筆者はこの講座を受講したことで1週間ほどの学習でレスポンシブ対応を習得できました。まず失敗はしません。

     

    レスポンシブデザインを最速で習得したいなら迷わず購入すべき講座です。

    ふたご

     

     講座の詳細ページ >>

     

     

    【jQuery】おすすめWeb制作講座(コーディング学習)

    即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう
    値段
    (4.0)
    学習しやすさ
    (5.0)
    わかりやすさ
    (4.0)
    学習効率
    (4.0)
    費用対効果
    (5.0)
    汎用性
    (4.0)
    オススメ度
    (4.0)
    総合評価
    (4.0)
    この講座のポイント

    レッスン時間
    6時間

    値段
    7,200円(セール中約80%OFF)

    Udemy公式サイト
    即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう

     

    この講座の特徴

    この講座ではjQueryを基礎から体系的に学べます。知識や経験がゼロの初心者でも6時間の講座を受講するだけで『Web制作でも使えるjQueryアニメーション』を習得できます。スライドショーやドロップダウンメニューを習得できるのはこの講座だけ!

    具体的には

    • jQueryの基礎文法を理解できる
    • Webサイトに画像のスライドショーやドロップダウンメニューなどの機能を実装
    • 『画像をタップしたら拡大表示する』応用的なアニメーションの実装
    • 必要最低限のJavaScriptスキルが身に付く

     

    注意

    HTML, CSSも若干触れますが少し応用的なのでコーディング初心者はまず『未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース』から学習を始めるとスムーズに受講できます。

     

     講座の詳細ページ >>

     

     

    筆者おすすめのデザイン本を4つご紹介!

    MEMO
    ノンデザイナーズ・デザインブックは独学でデザインを学習するなら絶対に読んでほしい。デザインの基礎を固めるならこれ以外ないかな、と思います。筆者が駆け出しの頃に『デザインってこうやって作るんだ〜ふむふむ』と感心しながら読んでいたのを覚えています。スクールに通う前にまずはこれを読み込んでみてください。

     

    MEMO

    ノンデザイナーズ・ブックは『絶対的な入門書』、なるほどデザインは『デザインを楽しく学べる参考書』のような本です。ページをぱらぱらめくるだけでも楽しさに溢れていて『これこれ。こういうのが作りたい』と好奇心がくすぐられること間違いなしです。Webデザインを楽しく学びたい方はぜひ手にとってみてください!

     

    MEMO

    ほんとに、フォント。は『ベテランのデザイナーが新米デザイナーの作ったデザインをフィードバックする』というレビュー形式で書かれています。なので、読んでいて『うっ。これ自分だ。。』と思ってしまうツッコミも多々あり勉強になります。筆者は、いまいちなフォントデザインでも言語化することで、思わず『これ!』と声に出てしまうようなデザインに変貌するんだな、と感心しながら読んでいました。

     

    MEMO

    けっきょく、よはく。は見開きで『OK / NG例』が解説されていて見やすい。そしてわかりやすい。あまり意識していなかった、余白の使い方でここまでデザインの幅が広がるんだなと終始目を光らせながら読んでしまいました。実例が豊富なので案件のデザインで困った時でも参考にできます。

     

    Udemy学習を活かして稼ぐ

    ここまでにご紹介した講座はあくまでスキル習得のための学習。学習を終えたら『副業』や『フリーランス』として案件を受注したいですよね。これからご紹介する記事を読んでいただくことで案件受注で悩むことは恐らくなくなると思います。とにかく、どうせ貴重な時間を使って勉強をするのだから稼ぎましょう!ということです。

    ふたご

    下の記事で得られること
    • Webデザイナーになるためのロードマップ(道筋)がわかる
    • ポートフォリオの作成方法がわかる
    • 案件を受注できるようになる(具体的な手順あり)

    それでは【もう失敗しない】Webデザイナー独学ロードマップ(Web制作で稼ぐ)をご覧ください(Webデザインスキルを活かして副業やフリーランスで稼ぎたい方には必須です)

    【高評価】Web制作・Webデザイン3ヶ月独学ロードマップ|Webデザイナー監修

     

    番外編①:『絶対にリモートワーク!』という方におすすめの求人サイトをご紹介!

    クラウドテック
    Web制作案件の数
    (5.0)
    案件の単価
    (4.0)
    使いやすさ
    (5.0)
    案件獲得効率
    (5.0)
    初心者向け
    (5.0)
    オススメ度
    (5.0)
    総合評価
    (5.0)
    この講座のポイント

    対象
    Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター

     

    公式サイト
    クラウドテック公式ページ

    特徴

    • クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
    • 実務未経験者でもOK
    • 登録社数14万社
    • フリーランス・個人事業主向け案件がケタ違いに多い
    • 報酬額や勤務地・職種など希望が通りやすい
    • Web制作・コーディングの高単価案件が多い
    • リモートワーク案件数は業界トップクラス
    • 最短3日で案件を獲得できる

     

    現役Webデザイナーの筆者イチオシの求人サイト!フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。

    ふたご

     

    無料で登録してみる >>

     

     

    番外編②:『Web制作会社の直営業』で案件獲得したい方におすすめのやり方【筆者実証済み】

    Web制作の仕事のとり方が分からない人に捧ぐ『直営業』の教科書

    値段
    (5.0)
    学習しやすさ
    (5.0)
    わかりやすさ
    (5.0)
    熟練度
    (4.5)
    初心者向け
    (5.0)
    オススメ度
    (5.0)
    総合評価
    (5.0)
    この講座のポイント

    値段
    2,980円

     

    この講座の特徴

    この講座ではショーへーさんがフリーランス2年目で月収7桁を達成するまでに蓄積したWeb制作「直営業」ノウハウの全てが詰まっています。読んでみるとわかりますが、そのまま使えて普通に契約取れます。

     

    コピペOKの営業メールのテンプレートも記事内に貼ってあり、要点まで詳しく解説してくれています。正直これを読んで実践すれば、メール営業で50件送って返信が1件も来ないなんてことは起こり得ないと断言できます。大丈夫です。普通に返信がきます。

     

    また、メールに添付するポートフォリオの作成方法や、概算の見積もり金額の相場等も記載されており、初心者にはかなり嬉しい内容が盛り沢山です。エンドクライアントへの直営業のやり方にも触れているので、「高単価案件が欲しい方」「自由に制作したい方」にとっては喉から手が出るほど有益な情報ですよね!

     

    今Web制作営業で苦労している方、全員に読んでもらいたいNo.1の商材です。冗談抜きで案件に困らなくなります。

    ちなみに、以前はnoteで販売されていた商材ですが、現在はBrainでのみ販売されています。

     

    この講座の内容(目次)

    1. 直営業に必要なスキルレベルと準備物紹介
    2. 直営業で意識するべき3つのポイント【本質】
    3. おすすめの営業先と見つけ方紹介
    4. 相手に響く提案文を書くコツ
    5. 提案文のテンプレ公開+解説
    6. 【第2の選択】エンドクライアントに直営業して『作って楽しい』案件を取ろう
    7. 【追記】直営業の成功率をさらにあげる小技
    8. 【追記】副業で案件を取りたいという方へ
    9. 【追記】キャリアの短さや副業であることをプラスに変えるコツ

     

    この講座の特典

    • 直営業用の提案文テンプレート
    • 提案文の添削 1回無料

     

    Web制作『直営業』の教科書

     

     

    まとめ

    最後まで読んでいただきありがとうございます。筆者自身が体験したUdemy講座をこれでもかと思いを込めて紹介してみました。実際に講座をやり終えてみたらわかると思いますが、目を見張るほどに成長しているはずです。それだけ価値のある講座のみに絞っています。最後に、ほんのちょっとでもあなたが初めの一歩を踏み出すきっかけになれたのなら幸いです。

     

    本記事でご紹介したUdemy講座学習を完了された方は次のステップとしてポートフォリオサイトを作ることをおすすめします。

    ポートフォリオは『自分はこれだけのことができるんだぞ!』とアピールする際に使います。また、クライアントに自分のスキルをアピールするために重要な役割も持っています。例えば、Web制作会社にメール営業する際にも優れたポートフォリオがあれば数倍も返信率や契約率が変わってきます。逆にいうとポートフォリオサイトを持っていない場合、あなたがどれだけスキルを持っていようと、どれだけ魅力的な人物だろうと『判断材料がない』ことで見向きもされないのでこの機会に必ず作りましょう。

    下の記事を読めば、WordPressのポートフォリオサイトを自作できます。Googleにも高い評価を受けている間違いナシの記事なのでブックマークして常に見れる状態にしておくことを推奨します。

    【無料】自作「WordPressテーマ」作り方|ポートフォリオに最適