【動画で学習】UdemyのWebデザイン 人気／おすすめ講座【セールでお得】

HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。

これら、フロントエンド（表示される画面に関わる要素）を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。

スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。

本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。

なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん（マイナビ出版刊）』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。

★未経験からプロのWebデザイナーとして働けることがゴールの完全マスターコース

こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。

WordやインターネットくらいしかPCを使ったことがないという方でもわかりやすいように作られています。

★全422レッスン ＆ 42時間！ 通学スクール80万円相当の内容

全部で467レッスンがありとても多いですが、１レッスン５分程度なので、空き時間に少しずつ、気軽に進めることが可能です。

Webに関する知識、Photoshop、Webのグラフィックデザイン、HTMLとCSS、実践的なコーディングなど、Webデザイナーとして働いたり、自分１人でサイトを作り上げるのに必要な全てが含まれています。

★授業×チャレンジ課題で実践的なスキルが身につく！

スキルを身につける上で、実際作りながら学ぶことはとても大切です。
オンライン学習では、動画を見るだけで終わってしまい、実践的なスキルがつかないことが多いです。

こちらのコースでは全てのレッスンが、バナーや実際のカフェのWebサイトなど実践的なものを作ります。そして、各章の終わりにはチャレンジ課題として、その章で学んだことの理解を確認する課題があります。

★過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

コースを提供しているNEST Schoolは過去３年間で1100名以上のスクール卒業生を輩出し、その間プログラムの改善を絶えず行ってきました。運営会社である株式会社Campusは、 多数の自社Webサービスの運営やWeb制作事業を行っており、 それらの活動で得たノウハウをこちらのコースで提供しています。
また、主に大学生を中心に年間５０名近くのWebデザイナーを育成し、自社の高度なWebサービスのデザインを手掛けるまでに成長させています。 実際にWebサービスやWeb制作を実施している企業とプロのデザイナーによるプログラムと、「どうすれば効率よくスキルアップできるか」を 考え続けているプログラムの提供が、他にない価値です。

★無駄なく、必要なものだけを、必要な順番で学ぶことの大切さ

ネット上や書店にはたくさんの記事や本がありますが、すべてを見ることはできませんし、特に重要でない知識もたくさんあります。
まずは必要な知識だけを必要な順番で学ばないと、そうでない場合と比べて数十倍の非効率な学習になります。こちらのコースでは最も効率的な学習を目指しました

★内容

【Photoshop】
グラフィックツール定番のPhotoshop ! 基礎の基礎から中級までレベルアップを目指します。1つの動画につき1つの作品を作りながら、難なく楽しく学ぶ事が出来ます。

1. これからはじめるPhotoshop基礎⑴
2. これからはじめるPhotoshop基礎⑵
3. これからはじめるPhotoshop基礎⑶
4. 選択範囲と画像の操作
5. レイヤー
6. ブラシ・シェイプ・グラデーション
7. テキストツール
8. マスク
9. 色調補正とレタッチ

【実践Webデザイン】

Webサイトをデザインする方法をレクチャーします。「ワイヤーフレーム」の制作方法から、実際に仮のWebサイトをまるまるデザインしてみる所まで、Webサイトデザインの全てをお話ししますので、初心者の方でも、どのようにサイト制作を行うのかを実践していただけます。

1. ワイヤーフレーム制作
2. 初心者のためのウェブデザインテクニック
3. 【初級】クリニックのWebサイト〜トップページ編〜
4. 【中級】美容院のWebサイト制作〜トップページ編１〜
5. 【中級者向け】美容院のWebサイト制作〜トップページ編２〜
6. 【中級者向け】美容院のWebサイト制作〜下層ページ編１〜
7. 【中級者向け】美容院のWebサイト制作〜下層ページ編２〜
8. 【上級者向け】Webメディア〜トップページ編１〜
9. 【上級者向け】Webメディア〜トップページ編２〜
10. 【上級者向け】Webメディア〜トップページ編３〜
11. 【上級者向け】Webメディア〜記事ページ編１〜

【HTML】

初めてHTMLを学ぶ方向けに、HTMLの基本文法から、レイアウトするためのHTMLタグの記述方法など、Webサイトをマークアップする上でかかせないスキルをご紹介します。

1. HTML入門 第１回
2. HTML入門 第２章
3. HTML入門 第３回
4. フォーム
5. テーブル
6. テキストとリスト
7. リンクと画像・動画・オーディオ
8. HTMLテクニック
9. 要素のセクショニング

【CSS】

初めてCSSを学ぶ方向けに、CSSの基本文法からCSS3などの応用まで学びます。実際にレイアウトを組んだり、実践しながら学びます。

1. CSS入門 第一回
2. CSS入門 第二回
3. テキストのスタイル
4. ボックスのスタイル
5. 背景・シャドウ・リスト
6. レイアウト
7. セレクタ
8. セレクタ応用

【実践コーディング】

実際にHTMLとCSSを利用して、様々なタイプのWebサイトをいちからマークアップする方法をレクチャーしていきます。量をこなして、一人でWebサイトをマークアップ出来るようになりましょう！

1. 【初心者向け】クリニックサイトのマークアップ(1)
2. 【初心者向け】クリニックサイトのマークアップ(2)
3. 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
4. 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
5. 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
6. 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
7. 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
8. 【上級者向け】Webマガジンサイトのマークアップ(1)
9. 【上級者向け】Webマガジンサイトのマークアップ(2)
10. 【上級者向け】Webマガジンサイトのマークアップ(3)
11. 【上級者向け】Webマガジンサイトのマークアップ(4)

※NESTonlineの他の講座を受講されている方は、一部内容が重複いたしますので、ご注意下さい

「基礎レベルの事はわかるようになったけど、どうやってプロが作成するような本格的なサイトを組み立てていけばいいの！？」

「CSSやJSの基本的な文法や書き方は習得した。で、次は何を学べばいいの？」

「コードを整理するためにはどのように記載したらいいの？」

「もう一歩高いレベルの事を学びたい。」

「基本的な文法はなんとなく知っているけど、その先どのようにして成長していけばよいのかわからない？」

そんな悩みを持った方に最適のコースです。

私がまだ駆け出しエンジニアだった頃、基本的な文法を学んだ段階でまず思ったことは、

「で、どうやってこれで本格的なWEBサイトを組み立てていけばいいの？」

ということでした。

書籍やインターネットを探してみても、簡単なサイトを作りながら本当に基礎的な部分を教えているものばかりで、

もう一歩上のレベルの事を説明してくれるものは見つかりませんでした。

「どういった知識が必要なのか？どのようにして本格的なサイトを組み立てていくのか？何を覚える必要があって、何を覚えなくていいのか？」

私が初学者の時にはそんなことを思っていました。

今になって思うと随分遠回りをしたと思います。

今だと一瞬でできることでも、どのようにして実現すればよいのかがわからない状態では、
全く適切でない方法で１週間くらいかかって開発を行っていた時もありました。

「誰か実践的な書き方や方法を教えてくれないかな～。」

当時の私はそんな風に思っていました。

「こちらのコースでは今の私が当時の私に伝えたい、CSSとJavaScriptの知識を凝縮しました。」

WEB開発では覚えることがたくさんあります。

一方、皆さんの時間は有限でとても貴重なものです。

馬鹿正直に使わないHTMLタグを覚える必要はありませんし、すべてのCSSのスタイルについて覚える必要はありません。もちろん、JavaScriptの関数やメソッドについても同様です。

それよりも、もっと根本的なところで、「なぜ、そのような動きになるのか？」「なぜそのように実装するのか？」「どういったところに気を付けて学んでいけばよいのか？」について、学んでいきましょう。

「なぜそうするのか？」がわかっていれば、状況に応じて自分で最善の解決法を実装がでるようになります。そして、基礎を固めましょう。CSS、JavaScriptの基礎がわかっているとWEB開発が何倍も楽になります。また、新しくJavaScriptフレームワークやCSSフレームワークを使う際にも、学習効率は何倍にもなるでしょう。

こちらのコースは基本的な事を学んだレベルのWEB開発者をプロレベルまで一気に引き上げます。

• もし、あなたが体系的にJavaScript、CSSの基礎について学びたいのであれば、こちらのコースを是非受けてみてください。

• もし、あなたがCSS、JavaScriptの実装が思い通りにいかず、悩んでいるのであれば是非こちらのコースを是非受けてみてください。

• もし、あなたがCSS、JavaScriptの実践的な記述方法からコードの最適化について学びたいのであれば、こちらのコースを是非受けてみてください。

• もし、あなたがCSS、JavaScriptの中級者レベルに最短でなりたいのであればこちらのコースを是非受けてみてください。

１９時間のコースを終えた時、あなたにはこれまでと違う世界が見えているはずです。

＊＊こちらのコースでは以下の内容については扱いませんのでご承知おきください＊＊

• サーバーとの通信やサーバーへのデータリクエストの方法については扱いません。

• JavaScriptを使ったフォームのチェックや非同期通信については扱いません。

• サーバー側の実装（バックエンド開発）については扱いません。

• JSフレームワーク（ReactやVue）やCSSフレームワーク（Bootstrap等）を使った実装については基本的に扱いません。

  ※一部、JSライブラリを使用します。

• こちらのコースではES moduleを使ったJavaScriptの整理は行いません。
  WebpackでのJSファイルのバンドルも行いません。
  ※こちらのコースではJavaScriptのコード整理にclassを使用しますので、私が別で出しているWebpackのコースを参考にして、こちらのコースで作成した成果物のバンドルを是非試してみてください。

• こちらのコースではIE11へのブラウザ対応は行っていません。最新の記述方法をお教えしていますので、IE11ではうまく動かないことをご了承ください。（IE11は脆弱性への対応も遅く、Microsoftもサポートを停止しているため、使わないことを推奨しております。）

プログラミングを学んで、ITエンジニアを目指そう！

このコースは、プログラミング初心者の方がプログラミングを1から学び、ITエンジニアを目指すためののコースです。

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。20時間の大型コースでお得に学べます。

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを60分公開しております。ぜひご覧ください！！☆☆

IT人材は、2030年に最大78万人不足すると経済産業省から発表がされました。

現在、ITエンジニアの転職市場は売り手市場です。また、自らWebアプリケーション開発ができるようになり、素早くアイディアを形にできれば、システム開発の費用が削減できて、起業への挑戦もハードルが下がります。

基本的なWebページの（HTML, CSS）の構築方法を学習したあと、画面サイズによって動的にレイアウトが変わるモバイルフレンドリーでレスポンシブ対応のWebサイトの作り方を学習します(Bootstrap)。

その後に、プログラミングを学習します。主にブラウザ側で動作させるJavaScriptと、サーバー側で動かすRubyを学習します。

よく使う機能が用意されていて、高速に開発が行えるWebアプリケーションフレームの使い方を学習します。スタートアップ企業でもよく使われるフレームワークを使用します（Ruby on Rails）。

Webアプリケーションを開発を行う上でキーポイントとなるデータを体系的に扱うデータベースの使い方を、学習します(MySQL)。

開発環境構築も丁寧に手順を追って説明します(AWS Cloud9)。

私は約10年の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師、大手ITスクールでのティーチング・アシスタント経験があるのが強みです。ベテランになるにつれて、初心者のころに困っていたことを忘れてしまうものですが、初心者の時によくつまずく箇所が、分かっているので講座では丁寧な解説をしています。

皆さんの今後の自己実現のためのお役に立てるコースとなれば幸いです。
それでは、皆さんとコースの中でお会いできることを楽しみにしております。

想定する受講生

• 実務未経験からITエンジニアに転職したいですか？

• 自らWebアプリケーションを開発して公開できるようになりたいですか？

• 駆け出しのWeb開発者の方でさらにスキルアップしたいですか？

⇒ あなたの答えが１つ以上YESなら、これはまさにあなたが探しているコースです！

※Web開発初心者向けの講座です。実務経験豊富なエンジニアの方にとっては、物足りない可能性がありますので、ご注意ください。

利用ソフトウェアとバージョン

下記を使用してWebアプリケーション開発を学習します。

• HTML5 ・・・Webページの文章を構造化して記述

• CSS3・・・Webページの見た目を整える

• JavaScript (ES5)・・・Webページを動的に操作することができるプログラミング言語

• Bootstrap4 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク

• MySQL 5.7・・・データベース

• Ruby 2.5・・・サーバ側で動かすプログラミング言語

• Ruby on Rails 5・・・Webアプリケーションを高速で開発するためのフレームワーク（現時点ではver6系での動作確認はしておりません）

• AWS Cloud9・・・アマゾン ウェブサービスが提供するWebブラウザで動作開発環境

• Git 2.13・・・ソースコードのバージョン管理

• Visual Studio Code 1.x,  Atom 1.x・・・テキストエディタ

• Google Chrome ・・・Webブラウザ

学習環境について

• パソコン(Mac または Windows)が必要。

• 動画内ではmacOSを使用。Windows環境での学習については補足説明。

• インストールして使うアプリケーションとして、Webブラウザ Google Chromeとテキストエディタ Visual Studio Code（レクチャーによってはAtom）を使います。MacでもWindowsでもOK。無料。

• 開発環境には、AWS Cloud9というブラウザでWeb開発が行えるアマゾンのサービスを利用。無料枠で1年間学習可能。

• アマゾン ウェブ サービスのアカウント作成が必要で、メールアドレス、クレジットカード、電話番号の用意が必要（認証のためクレジットカード登録が必要ですが、無料枠内で学習すれば課金発生しません）

• GitHubアカウント（無料プラン）

更新履歴

• 2021/1/22 セクションリニューアル「CSS入門」

• 2020/9/26 セクションリニューアル「実践：ウェブサイトのコーディング」

• 2020/6/2 セクションリニューアル「HTML入門」「HTMLステップアップ」

• 2019/6/25 「Atomの設定 不可視文字」 Windows版Atomの操作について補足

• 2019/6/6 フォントオーサム公式サイトの仕様変更に対応

• 2019/4/2 AWS請求アラートのUI変更（設定→Billling設定）に対応

• 2019/1/29 「Rubyのバージョン管理 1」rvmの設定手順を一部変更

• 2019/1/17 「AWS Cloud9による開発環境構築」セクション テキストエディタの設定レクチャーをアップデート

• 2019/1/5 「AWS Cloud9による開発環境構築」セクションの、RVMインストール手順を修正

• 2018/11/06 「HTML入門」セクションのコードの文字が小さい問題を修正

• 2018/8/28 セクション8 Bootstrap 4入門の「ナビゲーションバー」 class指定について補足

• 2018/8/8 実践：Webサイトのコーディング「CSSによるスタイルの設定 2」補足テロップ追加

• 2018/6/15 レクチャー新規追加「JavaScriptのエラーを自力で解決するための方法」

• 2018/5/22 動画アップデート 「コース紹介動画」

• 2018/5/16 レクチャー新規追加 「リモートリポジトリからプル」

• 2018/4/25 誤植修正 イントロダクション - Ruby入門

• 2018/4/2  レクチャー新規追加「ビデオ速度の変更」

• 2018/2/16 セクションを新規追加「Git/Git Hub入門」

初学者を対象にしたWebデザイナーになるため講座です。
Webデザイナーになるための取っ掛かりが欲しい、Web制作の全体像を学習したいといった方に向けて、
企画からWebサイトの公開まで一気通貫して学べる講座を作成しました。

デザインセクションでは、Webデザイン制作の現場で実際に使用される Sketch というアプリケーションを使用します。
ツールの使い方はもちろんですが、デザインの考え方やデザインパターンなども解説していきますので、デザインに対するより深い理解が得られます。

またこの講座では、実際に手を動かす作業的な内容だけでなく、制作を始める前に必要な「企画力」を大事にしています。
最終的なゴールを見据えて仕事を始める大切さ、効率的な進め方、見積もりの作り方など、ツールよりも大事なことについて学ぶことによって、本当に必要とされるウェブデザイナーになりましょう！

企画

Webデザイナーに必要なのは、ツールの習得だけではありません。
本当に必要とされているのは、クライアントの立場になって考えられるコンサルティング能力です。

プロジェクトに必要な「ゴール設定」をどう作っていくのか、ヒアリングのポイントを解説します。

Sketch

この講座では、最近のWeb制作現場で大きなシェアを獲得した Sketch というアプリケーションを使用します。

従来は Adobe Photoshop が業界の主流アプリケーションでしたが、軽量で安価、そしてWebに特化した機能を持つ Sketch に人気が集まっています。

Sketch は有料のアプリケーションですが、30日間の無料トライアルがありますので、お金をかけずにレッスンが進められます。

トレース

Sketch をマスターするために、既存ウェブサイトのトレース（写し）を講座に組み込みました。
トレースはツールの習得とデザインの感覚を覚えるのに最適な方法です。
Udemy のウェブサイトを Sketch で再現する方法を学びます。

デザイン

デザインの能力はセンスではありません。
与えられた制限の中で、美しさと機能を両立させる工夫であり、そこには理由があります。

単純化されたデザインパターンを解説し、各種パターンが使われている既存事例を紹介していきます。
「ゼロからデザインを考える必要はない」ということを学びましょう。

コーディング（マークアップ）

HTMLとCSSの基礎を学習して、Webサイト制作に必要なコードの書き方を学びましょう。
HTMLで構造を作り、CSSで装飾を加えていきます。

最初は難しく見えるかもしれませんが、HTML & CSSはとても単純な仕組みであることが理解できると思います。

モバイル対応

最近では、アクセスの大半がスマートフォン等のモバイル端末からということも珍しくありません。
その意味で、スマートフォンに最適化されたWebサイト表示は必須と言って良いと思います。

この講座では、レスポンシブレイアウトという手法を使って、デスクトップ用に作られたWebサイトをモバイルでも適切に表示させる方法を学びます。

実践

実際にWebサイト制作の現場を体験するために、架空のヒアリングメモとペルソナを用意しました。
この資料をもとに、以下の順で実際にWebサイトを制作します。

• ウェブサイトの企画

• ワイヤーフレーム

• デザイン

• コーディング

• モバイル最適化

1ページのみのシンプルなウェブサイトですが、
Google Maps の埋め込みや、Instagram へのリンク、実際のモバイル端末でのテスト等、学習する内容は多岐に渡ります。ここで学んだ技術を応用することで、様々なウェブサイトの制作が可能になります。

サーバーにアップロード（おまけ）

実際にインターネットに公開して、自分のスマートフォンで確認する方法を紹介します。

Course images: Design vector created by Freepik