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

こちらでは、UdemyのWebデザイン講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのWebデザイン講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるWebデザインの最新の人気講座ランキング(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

人気
Rank
学習コース評価
1
(4.5)
総評価数 6052件
2
(4.3)
総評価数 7727件
3
(4.5)
総評価数 2771件
4
(4.4)
総評価数 4006件
5
(4.3)
総評価数 1132件
6
(4.2)
総評価数 1166件
7
(4.4)
総評価数 239件
8
(4.6)
総評価数 258件
9
(4.2)
総評価数 769件
10
(4.3)
総評価数 117件
11
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
発売日 2020/12/23
受講者 300人
通常 24,000円
新規 1,610円
(4.5)
総評価数 45件
12
(4.4)
総評価数 170件
13
WebデザインのためのPhotoshop実践講座
発売日 2015/10/15
受講者 1,979人
通常 4,200円
新規 1,610円
(4.1)
総評価数 279件
14
(4.5)
総評価数 324件
15
(4.2)
総評価数 226件
16
(3.9)
総評価数 203件
17
(4.2)
総評価数 45件
18
(4.3)
総評価数 157件
19
(4.3)
総評価数 152件
20
(4.2)
総評価数 73件
21
(4.1)
総評価数 26件
22
(4.5)
総評価数 19件
23
(4.4)
総評価数 64件
24
(3.5)
総評価数 97件
25
誰でもわかる HTML基礎&CSS基礎
発売日 2018/04/26
受講者 194人
通常 21,000円
新規 1,610円
(3.9)
総評価数 22件
26
Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース...
発売日 2018/02/15
受講者 1,412人
通常 12,000円
新規 1,890円
(4.4)
総評価数 255件
27
HTMLやCSSをどんどん書こう! Brackets基礎講座
発売日 2016/09/08
受講者 124人
通常 3,000円
新規 1,680円
(4.2)
総評価数 29件
28
(4)
総評価数 18件
29
Webの新しいデザイン「CSS3」入門
発売日 2015/10/02
受講者 205人
通常 3,000円
新規 1,750円
(4.5)
総評価数 26件
30
(4.3)
総評価数 20件
31
HTMLやCSSをサクサク書こう! Emmet基礎講座
発売日 2016/10/24
受講者 288人
通常 4,200円
新規 1,890円
(4.6)
総評価数 49件
32
(4.3)
総評価数 187件
33
(4)
総評価数 78件
34
(4.2)
総評価数 55件
35
(3.6)
総評価数 35件
36
初心者向けHTML & CSS基礎講座
発売日 2018/04/05
受講者 94人
通常 2,400円
新規 1,680円
(3.5)
総評価数 23件
37
(4.2)
総評価数 76件
38
(2.9)
総評価数 29件
39
(4.1)
総評価数 9件
40
(4.4)
総評価数 7件
41
(3.1)
総評価数 4件
42
(3.4)
総評価数 4件
43
Japanese style:初めての和風WEBデザイン<傾向・分析>
発売日 2017/12/04
受講者 23人
通常 2,400円
新規 1,680円
(4.8)
総評価数 2件
44
[HTML/CSS]未経験から最速でフロントエンジニアになるためのHTML/CSS入門...
発売日 2020/08/08
受講者 8人
通常 5,400円
新規 1,610円
(4)
総評価数 1件
45
5日で覚える!HTML/CSS【超入門】
発売日 2020/06/29
受講者 3人
通常 2,400円
新規 1,610円
(0)
総評価数 0件
 

UdemyのWebデザイン 人気・おすすめの5講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
発売日 2017/08/29
(4.5)

9 total hours
Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。

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

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

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

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

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


↓全て表示↑少なく表示
 
Users Voice
充実した内容で、大変満足しています。 html~css~JavaScriptまで、Bootstrap,Webフォント,ajax,JSON,jQuery,デベロッパーツールの使い方など、気になるキーワードがふんだんに組み込まれ、また説明も計算された積み上げ式で、丁寧で、本当にありがたく思いました。 おかげさまで、今まで手持ちの本の理解しずらかった多くの部分も、すっと読めるようになりました。 本当にどうもありがとうございます。 ともすた先生の落ち着いたお話のし方は、心地よかったです。 先生の他の講座もぜひ受講したいです。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • Udemyでの受講について
    • Webの開発環境を整えよう(Windows編)
    • Webの開発環境を整えよう(macOS編)
  2. 入会フォームを HTML/CSSで作成しよう
    • サンプルファイルのダウンロード
    • 簡単なHTMLを作ってみよう
    • Visual Studio CodeでのHTML編集
    • テキストフィールドを作ろう
    • ボタンを作ろう
    • headタグの中に記述する決まり文句
    • CSSで見た目を調整しよう
    • CSSの内部参照でページ内の共通パーツのスタイルを調整しよう
    • CSSの外部参照で複数ページに共通のスタイルを記述しよう
    • sanitize.cssでブラウザーのデフォルトCSSをリセットしよう
    • divタグと class属性で要素を区分けしよう
    • marginプロパティの autoを使ってエリアを中央に揃えよう
    • box-shadowプロパティで浮いたボタンを作ろう
    • 適切な HTMLタグを利用しよう
    • spanタグで「必須」ラベルを作ろう
  3. レスポンシブWebデザインで、スマホ対応のサイトを作ろう
    • HTML/CSS:CDアルバムの紹介ページを作ろう
    • HTML:セクショニングコンテンツ(header, section)
    • CSS:タイトルの CSSを整える
    • CSSのセレクターの種類
    • 画像を配置しよう - img
    • CSS:floatを使った回り込み
    • CSS:clearで回り込みを解除する
    • HTML: リンクを張る aタグ
    • HTML:「実体参照」でコピーライト表記を追加する
    • CSS:Webフォントを使う
    • CSS:レスポンシブWebデザイン(RWD)のレイアウトを作る(メディアクエリー・リキッドデザイン・ブレイクポイント)
    • CSS:CSSアニメーションを使う(Transition)
  4. Bootstrapで素早く Webページを作ろう【2021年版】
    • このセクションで作るものを確認しよう
    • Bootstrapを CDN(Content Delivery Network)で利用しよう
    • Bootstrapの Containerを使って画面をレイアウトしよう
    • スタイルシートを調整しよう
    • Bootstrapのグリッドシステムで画面をレイアウトしよう
    • Bootstrapのフォームコントロールを使おう
    • プレイスホルダー(placeholder)の使い方
    • ドロップダウンリストを追加しよう
    • チェックボックスを追加しよう
    • ラジオボタンを追加しよう
    • テキストエリアを追加しよう
    • バッヂを使って、必須項目を示そう
  5. JavaScriptで今日の日付を表示しよう
    • HTML/CSS:画面を作り上げよう
    • JavaScript:オブジェクト・メソッド・パラメーター
    • JavaScript:文字列・数字と四則演算、文字列連結
    • JavaScript:変数の扱い
    • JavaScript:オブジェクトとインスタンス
    • JavaScript:Dateオブジェクトを使ってプログラムを仕上げよう
  6. イベントドリブンな、ストップウォッチプログラムを作成しよう
    • HTML/CSS:画面の見た目を作成しよう
    • JavaScript:getElementByIdとプロパティで要素を書き換えよう
    • JavaScript:if構文で条件に沿ったプログラムを作ろう
    • JavaScript:function(関数)定義をしよう
    • JavaScript:イベントドリブンなプログラムを作成しよう
    • JavaScript:setIntervalで定期的に実行されるプログラムを作ろう
    • JavaScript:変数のスコープを理解しよう
    • JavaScript:秒数から、分と時を計算しよう
    • JavaScript:thisを使って、STOPボタンを実装しよう
  7. Ajax通信でフォトライブラリーを作成しよう
    • HTML/CSS:ページを形作っていこう1 - position: fixed
    • HTML/CSS:ページを形作っていこう2 - position: relative, absolute
    • JavaScript:JSONデータを配列で操ろう
    • JavaScript:createElementと appendChildで HTML要素を作ろう
    • JavaScript:for構文で繰り返し処理をしよう
    • 【補足】利用した画像ファイルは次のレクチャーでも利用してください
    • JavaScript:Ajax通信を行なおう
    • JavaScript:Ajax通信で受信したデータを処理しよう - 論理演算子
    • JavaScript:画面を仕上げよう
  8. JavaScriptライブラリーを利用しよう
    • jQuery:jQueryを使ってみよう
    • jQuery:Ajax通信を行なってプログラムを仕上げよう
    • Vue.js:Vue.jsを使ってみよう
    • Vue.js:Vue.jsで画面を作り上げよう
    

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

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
発売日 2015/10/22
(4.3)

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

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

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

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


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

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

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


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

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

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


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

コースを提供しているNEST Schoolは過去3年間で1100名以上のスクール卒業生を輩出し、その間プログラムの改善を絶えず行ってきました。運営会社である株式会社Campusは、 多数の自社Webサービスの運営やWeb制作事業を行っており、 それらの活動で得たノウハウをこちらのコースで提供しています。
また、主に大学生を中心に年間50名近くの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サイト制作〜トップページ編1〜
  5. 【中級者向け】美容院のWebサイト制作〜トップページ編2〜
  6. 【中級者向け】美容院のWebサイト制作〜下層ページ編1〜
  7. 【中級者向け】美容院のWebサイト制作〜下層ページ編2〜
  8. 【上級者向け】Webメディア〜トップページ編1〜
  9. 【上級者向け】Webメディア〜トップページ編2〜
  10. 【上級者向け】Webメディア〜トップページ編3〜
  11. 【上級者向け】Webメディア〜記事ページ編1〜


【HTML】

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

  1. HTML入門 第1回
  2. HTML入門 第2章
  3. HTML入門 第3回
  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の他の講座を受講されている方は、一部内容が重複いたしますので、ご注意下さい



↓全て表示↑少なく表示
 
Users Voice
講座内のphotoshopのバージョンが古いようです。セクションによっては操作通りにしてもうまくいかないところがあります。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. 【Photoshop】これからはじめるPhotoshop基礎⑴
    • Photoshopでできること
    • 画面構成を理解し、パネルやツールバーの基本操作を知ろう
    • ファイルを新規作成する方法を学ぼう
    • まずはじめに覚えたい、基本ツールの使い方
    • 画像の貼り付けや拡大・縮小する方法
    • フィルター機能で写真をイラスト風に変えよう
    • 長方形選択ツールで画像の一部分にのみ編集を加える方法
    • ブラシツールを使って、写真にキラキラした演出を加える方法
    • ファイルをjpg形式に変換する方法
  2. 【Photoshop】これからはじめるPhotoshop基礎⑵
    • 画面を拡大縮小したり並べて表示する方法
    • 色調補正パネルで画像の明るさやコントラストを調整する方法
    • 色調補正パネルを使って、画像の一部分をモノクロに変える方法
    • 色の置き換えツールを使って、色を置き換える方法
    • ぼかしツールを使って、写真をミニチュア風に加工する方法
    • [実践]様々なツールを駆使してトイカメラ風の画像に加工しよう
    • Photoshopのレイヤー機能について
    • クイック選択ツールで、複雑な形の写真を綺麗に切り抜く方法
    • [実践]曇り空の写真を晴れの写真に合成してみよう
    • [チャレンジ]人物を綺麗に切り抜いて、写真に合成させよう
  3. 【Photoshop】これからはじめるPhotoshop基礎⑶
    • テキストツールを使って文字を入力する方法
    • 範囲内で自動改行させる、テキストボックスの作り方
    • ワープ機能を使って、文字に変形を加える方法
    • シェイプツールを使って、図形やイラストを追加する方法
    • レイヤースタイルの基本のかけ方
    • [実践]ドロップシャドウで、思わず押したくなるボタンを作ろう
    • クリッピングマスクを使って、レイヤーを好きな形に切り抜く方法
    • クリッピングマスク機能でFacebookのカバー写真を作ろう
    • スライス機能を使って、画像をパーツ毎に書き出す方法
    • [チャレンジ]WEBサイトのメイン画像を作ってみよう
  4. 【Photoshop】選択範囲と画像の操作
    • 切り抜きツールを使って画像を指定のサイズに切り抜くする方法
    • 長方形選択ツールを使って、2つの画像を合成する方法
    • 楕円形選択ツールを使って、2つの画像を合成する方法
    • [実践]選択ツールを使って、画像を違和感なく合成してみよう
    • クイック選択ツールを使って、複雑な輪郭の画像を切り抜く方法
    • マスクモードで選択範囲を微調整する方法
    • 自動選択ツールを使った、同じ色の部分を選択する方法
    • 様々な選択ツールを駆使してネットショップの商品画像を作ろう
    • Photoshopを使って、髪の毛を綺麗に切り抜く方法
    • [チャレンジ]様々な選択ツールを駆使して、コラージュ作品を制作してみよう
  5. 【Photoshop】レイヤー
    • Photoshopのレイヤーの仕組みとレイヤーパネルの操作
    • Photoshopレイヤーの不透明度、表示非表示の設定方法
    • レイヤーにカラーラベルを設定し、効率よく管理する方法
    • [実践]レイヤーの不透明度を調整するアイキャッチ画像を作ろう
    • レイヤースタイルで、レイヤーにドロップシャドウをかける方法
    • レイヤースタイルの光彩で、レイヤーをネオン風に光らせる方法
    • パターンオーバーレイで、レイヤーにざらざらした質感を加えよう
    • [実践]レイヤースタイルで、お申込みリンクのバナーを作ろう
    • Photoshopでオリジナルパターンを制作する方法
    • [チャレンジ]レイヤースタイル駆使してプロ並みのポスターを作ってみよう
  6. 【Photoshop】ブラシ・シェイプ・グラデーション
    • Photoshopで段々と透明になるグラデーションの作成方法
    • ブラシツールを使って自由に絵を描く方法
    • 無料のカスタムブラシを使ってポスターを制作する方法
    • [実践]ブラシツールを使って、女性の顔に化粧を施してみよう
    • シェイプツールを使って、グラデーションのボタンを作成する方法
    • ペンツールを使って、自由な線を描く方法
    • パス選択ツールでアンカーポイントの位置やハンドルを操作しよう
    • 無料のカスタムシェイプを使って、フラットなボタンを作成しよう
    • ペンツールやパス選択ツールで、吹き出しアラートを作ろう
    • [チャレンジ]シェイプツールを駆使して、ポストカードをデザインしてみよう
  7. 【Photoshop】テキストツール
    • テキストツールで文字入力し、文字パネルでスタイルを変更しよう
    • 自動改行できる、テキストボックスの作成とスタイルの変更方法
    • [実践]テキストツールを使って、雑誌のページを作ってみよう
    • シェイプツールで作成したパスに沿って、文字を入力する方法
    • ペンツールで作成したパスに沿って、文字を入力する方法
    • ワープテキストを利用して、文字を変形させる方法
    • 遠近法ワープを使って、立体的に文字を変形させる方法
    • [実践]テキストツールで、ビンテージロゴを制作してみよう
    • [チャレンジ]様々なテキスト変形ツールで、ボトルラベルをデザインしよう
  8. 【Photoshop】マスク
    • レイヤーマスクを使って画像を切り抜く方法
    • レイヤーマスクを使って、画像を徐々に透明にする方法
    • クイックマスクモードで、細かく選択範囲を微調整する方法
    • [実践]レイヤーマスクを使って、カリグラフィポスターを作ろう
    • レイヤーマスクを使って、曇り空を晴れに変える方法
    • Photoshopのレイヤーマスクで、髪の毛の色を変える方法
    • クリッピングマスクを使って画像を切り抜く方法
    • クリッピングマスクを使って、本のカバー柄を変える写真合成方法
    • [実践]クリッピングマスクで、Webサイトメイン画像を作ろう
    • [チャレンジ]様々なマスクツールで、Webサイトのメイン画像を作ろう
  9. 【Photoshop】色調補正とレタッチ
    • アクションを使ってボタン一つで画像をレトロ風に加工する方法
    • レベル補正を使って食べ物を美味しそうに補正する方法
    • フィルター機能を使って、写真をイラスト風に加工する方法
    • 自動処理の機能を使って写真をHDR風にしよう
    • シャープツールを使って、人物の目をはっきりさせる方法
    • スポット修正ブラシツールを使って、ニキビやシワを消す方法
    • Photoshopで人の歯を白くしたり、目の充血をなくす方法
  10. 【実践Webデザイン】ワイヤーフレーム制作
    • ワイヤーフレームとは何かを理解しよう
    • Web制作のためのワイヤーフレーム作成手順と使用ツール
    • 失敗しないWebサイト制作のヒアリングのコツ
    • Webサイト制作のためののヒアリング方法
    • Webサイトを構成するレイアウトパーツの役割と名称
    • 初心者のためのワイヤーフレーム作成方法
    • 失敗しないワイヤーフレーム作成方法
  11. 【実践Webデザイン】初心者のためのウェブデザインテクニック
    • 初心者のためのWebデザインの方法・勉強法
    • パンくずリストの作り方
    • 押したくなるダウンロードボタンの作り方
    • バナーの作り方
    • Webサイトのメインビジュアルの作り方
    • ナビゲーションの作り方
    • ガイドを使ったWebデザインのベースを作成する方法
    • Webデザインで役立つ参考サイトの探し方
    • Web制作でよく使用するツール
  12. 【実践Webデザイン】[初級]クリニックのWebサイト〜トップページ編〜
    • 第一回:デザイン前の環境設定と新規作成をしよう
    • 第二回:シェイプを使ってWebサイトのベースを作成してみよう
    • 第三回:無料のアイコンを使ってロゴを配置してみよう
    • 第四回:整列ツールを使って綺麗なナビゲーションを作ってみよう
    • 第五回:色調補正パネルを利用した、メイン画像を作ってみよう
    • 第六回:無料のアイコンを利用したバナーを作ってみよう
    • 第七回:テキストツールを使って、記事一覧を作ってみよう
    • 第八回:レイヤー複製機能を使って、即座にフッターを作ろう
    • 第九回:シェイプツールを使って、ページトップへを作ろう
    • 最終回:スライスツールを使って、画像を書き出してみよう
  13. 【実践Webデザイン】[中級]美容院のWebサイト制作〜トップページ編1〜
    • 第1回:Webサイト用のファイルを新規作成しよう
    • 第2回:ガイドを使ってWebサイトのレイアウトを作る方法-1
    • 第2回:ガイドを使ってWebサイトのレイアウトを作る方法-2
    • 第3回:Webサイトに背景画像を設定する方法
    • 第4回:無料のアイコンを利用したロゴを作成する方法-1
    • 第4回:無料のアイコンを利用したロゴを作成する方法-2
    • 第5回:お問い合わせバナーを作成する方法-1
    • 第5回:お問い合わせバナーを作成する方法-2
    • 第6回:テキストツールでナビゲーションを作成する方法-1
  14. 【実践Webデザイン】[中級者向け]美容院のWebサイト制作〜トップページ編2〜
    • 第6回:テキストツールでナビゲーションを作成する方法-2
    • 第7回:レイヤースタイルを使用したメイン画像を作成する方法
    • 第8回:テキストボックスを使って新着情報一覧を作成しよう-1
    • 第8回:テキストボックスを使って新着情報一覧を作成しよう-2
    • 第9回:写真を使ったバナーを作成する方法-1
    • 第9回:写真を使ったバナーを作成する方法-2
    • 第9回:写真を使ったバナーを作成する方法-3
    • 最終回:コピーライト付きフッターを作成する方法
  15. 【実践Webデザイン】[中級者向け]美容院のWebサイト制作〜下層ページ編1〜
    • 第1回:記事ページ用のファイルの複製と修正
    • 第2回:変形ツールで、メインビジュアルを見出しに変える方法
    • 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-1
    • 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-2
    • 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-3
    • 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-4
    • 第4回:フッターを調整する方法
    • 第4回:ご予約ページ用のファイルの複製と修正
    • 第5回:ナビゲーションの修正と小見出しの修正
  16. 【実践Webデザイン】[中級者向け]美容院のWebサイト制作〜下層ページ編2〜
    • 第6回:ご予約フォームの注意文を作成する方法-1
    • 第6回:ご予約フォームの注意文を作成する方法-2
    • 最終回:ご予約フォームを作成する方法-1
    • 最終回:ご予約フォームを作成する方法-2
    • 最終回:ご予約フォームを作成する方法-3
    • ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールを使って作成したシェイプツールを、ラベルに合わせて大きさを変えていきます。
    • 最終回:ご予約フォームを作成する方法-5
    • 最終回:ご予約フォームを作成する方法-6
  17. 【実践Webデザイン】[上級者向け] Webメディア〜トップページ編1〜
    • 第1回:Webサイト用新規ファイルの作成方法
    • 第2回:ガイドを使ってサイト全体のレイアウト組みをしよう-1
    • 第2回:ガイドを使ってサイト全体のレイアウト組みをしよう-2
    • 第3回:シェイプツールでヘッダーの背景を作成する方法
    • 第4回:無料アイコンでロゴとナビゲーションを作成する方法-1
    • 第4回:無料アイコンでロゴとナビゲーションを作成する方法-2
    • 第5回:特集記事部分を作成する方法-1
    • 第5回:特集記事部分を作成する方法-2
    • 第5回:特集記事部分を作成する方法-3
    • 第6回:人気記事ランキングを作成する方法-1
  18. 【実践Webデザイン】[上級者向け] Webメディア〜トップページ編2〜
    • 第6回:人気記事ランキングを作成する方法-2
    • 第6回:人気記事ランキングを作成する方法-3
    • 第6回:人気記事ランキングを作成する方法-4
    • 第6回:人気記事ランキングを作成する方法-5
    • 第6回:人気記事ランキングを作成する方法-6
    • 第7回:カテゴリー一覧を作成する方法-1
    • 第7回:カテゴリー一覧を作成する方法-2
    • 第7回:カテゴリー一覧を作成する方法-3
    • 第8回:新着記事一覧を作成する方法-1
    • 第8回:新着記事一覧を作成する方法-2
  19. 【実践Webデザイン】[上級者向け] Webメディア〜トップページ編3〜
    • 第8回:新着記事一覧を作成する方法-3
    • 第8回:新着記事一覧を作成する方法-4
    • 第8回:新着記事一覧を作成する方法-5
    • 第8回:新着記事一覧を作成する方法-6
    • 第9回:ページネーションを作成する方法
    • 最終回:フッターを作成する方法-1
    • 最終回:フッターを作成する方法-2
    • 最終回:フッターを作成する方法-3
    • 第1回:記事ページ用新規ファイルの作成方法
    • 第2回:パンくずリストの作成方法
  20. 【実践Webデザイン】[上級者向け] Webメディア〜記事ページ編1〜
    • 第2回:記事ページのサイドバーの作成方法-1
    • 第2回:記事ページのサイドバーの作成方法-2
    • 第3回:記事ページの本文の作成方法-1
    • 第3回:(続き)記事ページの本文の作成方法-2
    • 第3回:記事ページの本文の作成方法-3
 
Preview Video
   

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)
発売日 2019/12/16
(4.5)

19.5 total hours
基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。

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

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

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

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

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


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


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

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

ということでした。


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

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


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


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


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

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


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


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


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


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

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


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


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


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


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

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

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

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

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


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


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

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

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

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

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

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

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

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


↓全て表示↑少なく表示
 
Users Voice
私自身全くの未経験です。Progate、ドットインストールでひと通り基礎を学び、もう少しレベルアップしたいと思い、こちらのコースを購入致しました。 正直、難易度が高く、修了するまで数ヶ月を要しましたが、先生のとても丁寧なレクチャーや、質問への素早い回答のお陰でやり切ることができました。 基礎をひと通り学び、次に何を学ぼうか迷っている方であれば、こちらのコースは大変満足できると思います。 私はまだ知識が不足しているところがありますので、曖昧な部分は復習して、自分のポートフォリオを製作したいと思います。 CodeMafia先生、ありがとうございました! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • コース紹介
    • コース受講の準備を行おう Part.1
    • コース受講の準備を行おう Part.2
    • プロジェクトの構成とコースの進め方
    • Udemyでの学習方法のアドバイス
  2. 超初心者の方はここからスタート
    • HTMLとは?HTMLの概要と文法について
    • HTMLのこれだけは知っておいて!インライン要素とブロック要素の使い分け
    • CSSとは?CSSの概要と文法について
    • CSSのこれだけは知っておいて!詳細度について
  3. コード記述の効率化を学ぼう
    • 【Tips】コードの自動補完を使おう
    • 【Tips】Visual Studio Codeのショートカットを使おう
  4. CSSの基礎から始めよう(Transition編)
    • 【導入】セクション紹介
    • 【丁寧に解説】まずはボタンを作りながら、CSSプロパティーを設定してみよう!
    • Transitionプロパティーの使い方を学ぼう(ボタンにホバーアクションを追加!!)
    • 【Sass】CSSをSassで記述してみよう!
    • 【Tips】Chromeの開発ツールの使い方について学ぼう
    • 【おさらい】CSSセレクターとSassネスティング
    • SassからCSSへの変換がうまくいかない時の対処法
    • ホバーで影ができるボタンを作ってみよう
    • 【演習】色々なエフェクトのボタンを作ってみよう
    • 【解答】色々なエフェクトのボタンを作ってみよう
    • Transformプロパティーの使い方をマスターしよう
    • PositionとZ-indexをマスターして思い通りのレイアウトを組もう!!
    • Transform, Position, Z-indexの復習!背景色がスライドするボタンを作ってみよう!
    • ::before?::after?疑似要素を使って無駄な記述を減らそう!
    • タイミングファンクション(a.k.a easing-function)でアニメーションをオサレにしよう!
    • 【発展】3Dアニメーションでより豊かな表現方法を身に着けよう
    • 【発展】【演習】3Dアニメーション ~ キュービックのボタンを作成してみよう
    • HTML要素を思った通りに配置するレイアウト方法まとめ
    • 【参考】開発ツールでの編集のローカルファイルへの自動反映方法
    • セクション修了!お疲れ様です!
  5. CSSを極めよう(Animation編)
    • 【導入】セクション紹介
    • 【簡単!】アニメーションを使って簡単なローダーを作ってみましょう!
    • 【文法】AnimationとKeyframesの文法を学ぼう!
    • 【Sass】@Mixinを使った一歩上のSassコーディング!!
    • 【Tips】疑似セレクターを使ってみよう!nth-childのハマりやすい罠とは!?
    • 【Sass】@for文で一歩上のSassコーディング!!
    • 【演習】Animationで色んなローダーを作ってみよう
    • 【解答 Part. 1】Animationで色んなローダーを作ってみよう
    • 【解答 Part. 2】Animationで色んなローダーを作ってみよう
    • 【実践】よく巷で見かけるオサレなやつ!メニューアイコンを作ってみよう!!
    • 【実践】オサレな文字列のアニメーションを作ってみよう!!
    • 【Sass】@Each文で配列をループ!フェードインアニメーションをサクッと作ってみよう!
    • 【Tips】今時の画像の表示方法まとめ ~ <img srcset>, <picture>, background-imageの使い分け
    • 【実践】画像にオサレなカバースライドアニメーションを適用してみよう!!
    • 【実践】画像にオサレなホバーアニメーションを適用してみよう!!
    • 【Tips】Background-imageを画像タグのようにアスペクト比を保ちながら表示する小技
    • 【Tips】アニメーションに最適なプロパティー
    • セクション修了!お疲れ様です!
  6. JavaScriptの基礎を固めよう!
    • 【導入】JavaScriptとは?
    • 【文法編】変数の宣言方法とデータ型について学ぼう!
    • 【文法編】関数の定義と使い方!
    • 【文法編】メソッドとプロパティーについて学ぼう!
    • 【文法編】配列の使い方をマスターしよう!
    • 【文法編】オブジェクトを使ってデータを管理しよう!
    • 【文法編】ループの記述方法基礎
    • 【文法編】ループの記述方法(for inとfor of)
    • 【文法編】ループの記述方法(実践)
    • 【文法編】if文と判定処理の正しい記述方法について学ぼう!
    • 【文法編】アロー関数を使って省略記法をマスターしよう!
    • 【文法編】コールバック関数をマスターしよう!
    • 【文法編】コールバック関数とループ処理
    • 【文法編】配列とforEachメソッド
    • 【文法編】配列とreduceメソッド
    • 【文法編】reduce関数を作ってみよう
    • 【DOM編】JavaScriptでHTML参照・更新!セレクターAPIを学ぼう!
    • 【DOM編】画面に機能を追加!イベントリスナーでイベントを登録!
    • 【DOM編】超基礎!画面初期化時にコードを実行!DOMContentLoadedとLoadの違いについて学ぼう!
    • 【DOM編】【演習】文字列をHTMLタグに分割してみよう!!
    • 【レベルアップ】Classを使ったコードの整理方法!!クラスでコードの再利用性を高めよう!
    • 【レベルアップ】thisを学んでクラスやオブジェクトを変幻自在に操ろう!!
    • 【おさらい】Classとオブジェクト
    • 【おさらい】thisとオブジェクト
    • 【おさらい】thisとbindの関係
    • 【おさらい】TextAnimationクラスをもう一度見てみよう。
    • 【レベルアップ】クラス継承でコードを有効利用しよう!!不要なコードは書かないようにしましょう!
    • セクション修了!お疲れ様です!
  7. JavaScriptのより実践的な記述について学ぼう!
    • 【導入】セクション紹介
    • 【Tips】スクロール検知の達人!IntersectionObserverを学ぼう!
    • 【実践】文字アニメーションをスクロールに合わせて発動しよう!
    • 【レベルアップ】スクロール監視クラスを作成してコードの最適化を行おう!
    • 【実践】スライドアニメーションをスクロールに合わせて発動しよう!
    • 【実践】クラスの記述に慣れよう!スマホメニューの作成 Part. 1!!
    • 【レベルアップ】BEMでCSSを記述してみよう!スマホメニューの作成 Part. 2!!
    • 【実践】スマホメニューを完成させよう!
    • 【実践】ページローダーでイライラ解消!ページローダーの作り方!
    • 【ライブラリ導入編】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.1】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.2】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.3】ヒーロースライダーでページをオサレにしよう!
    • セクション修了!お疲れ様です!
  8. Webサイト作成(序)
    • 【導入】セクション紹介
    • 【スマホ対応】レスポンシブデザインとは?スマホでも見やすいサイトを作るために!
    • 【スマホ対応】レスポンシブデザインの基礎を学ぼう!メディアクエリとビューポートについて学ぼう!
    • 【スマホ対応】モバイルファーストCSSの実装方法を学ぼう!
    • ヒーロースライダーの組み込みから始めて行こう!
    • 【Tips】最初にやっておくべきノーマライズとは?|マルチブラウザ対応
    • 【Tips】Webフォントでデバイス間の表示を統一しよう!
    • 【Tips】サイト表示に統一感を!共通クラスで記述を最小限に効果を最大限に!
  9. Webサイト作成(完)
    • あともう少しです!後半戦も頑張っていきましょう!
    • 【実装開始!】まずは以前作成したモジュールを移行してこよう!
    • スマホ画面から作成していこう!(Houseセクションの作成 Part.1)
    • Flexboxで超簡単にレスポンシブ画面を実装しよう!(Houseセクションの作成 Part.2)
    • 【復習】Flexboxを使ったレスポンシブ画面の実装の復習!!(Popularセクションの作成)
    • 【実践】Flexboxを使ったレスポンシブ画面の実装(Travelセクションの作成)
    • 【実践】Z-indexと疑似要素を使った実践的な記述方法について学ぼう!
    • 【実践】Flexboxでフッター作成!
    • 【ちょっと休憩】emとremについて
    • 【実践】ヘッダーを作ろう!Part. 1!
    • 【実践】ヘッダーを作ろう!Part. 2!
    • 【実践】サイドバーを作成しよう
    • 【実践】ベースデザインを完成しよう
    • 【実践】ページローダー追加
    • 【いよいよ完成へ!】JavaScriptを整理しよう!Part. 1
    • 【いよいよ完成へ!】JavaScriptを整理しよう!Part. 2
    • 【完】サイトを完成させよう
  10. インターネットに公開してみよう
    • インターネット公開前の準備(リリース準備をしよう)
    • インターネットにWebサイトを公開しよう
  11. さいごに
    • [ボーナスレクチャー]大変お疲れ様でした!
 
Preview Video
   

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!
発売日 2017/11/25
(4.4)

25 total hours
カフェのウェブサイト制作やフォトギャラリーの制作、Ruby on Rails を使ったタスク管理アプリ開発、 MySQL、Bootstrap、AWS Cloud9、GitなどWeb開発に必要な様々なスキルを1つのコースで沢山学ぼう!

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

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

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, GitGitHubを用いた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開発者の方でさらにスキルアップしたいですか?

⇒ あなたの答えが1つ以上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入門」


↓全て表示↑少なく表示
 
Users Voice
独学で本を読んで何となく理解が出来ても何をどうしたらいいのか?と色んな所で疑問が出てきます。初歩の初歩を導いてくれるので言葉は知っているけど…何となくパソコンは使えるけどどうしたら…等の初心者の方や未経験の方にお勧めです。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. コース概要
    • コース紹介
    • 受講オリエンテーション
    • 補足:受講オリエンテーション
    • 学習の進め方
    • macOS Catalina環境でZipファイルが解凍できない場合
  2. フロントエンド開発概容
    • イントロダクション -フロントエンド開発概容-
    • インターネット入門
    • フロントエンド開発で重要な3要素
    • Google Chromeのインストール
    • テキストエディタについて
    • 【macOS】Visual Studio Codeのインストール
    • 【Windows】Visual Studio Codeのインストール
  3. 新HTML入門
    • イントロダクション - HTML入門
    • HTMLの歴史
    • HTMLの基本構文
    • HTML文書の基本構造
    • 【macOS】はじめてのHTML
    • 【Windows】はじめてのHTML
    • 技術ドキュメント MDN
    • HTML文書のインデントと改行
    • 【macOS】Visual Studio Codeの設定
    • 【Windows】Visual Studio Codeの設定
    • よくあるHTMLの記述間違い
    • 補足:構文チェック
    • 構文チェック
    • 演習:HTMLのエラーを取り除く
    • 演習回答:HTMLのエラーを取り除く
    • よくあるご質問:要素の書き順
    • HTMLのコメント
    • 改行
    • 区切り線
    • リスト
    • 入れ子になったリスト
    • 演習:リスト
    • 演習解答:リスト
    • 説明リスト
    • 見出し
    • 属性と画像の表示
    • リンク
    • 強調
    • 著作権表記
    • 情報のグループ化
    • span要素
    • 演習 : HTML基礎
    • 演習回答 : HTML基礎
  4. 新HTMLステップアップ編
    • イントロダクション - HTMLステップアップ
    • はじめてのテーブル
    • 行と列の覚え方
    • ヘッダーのあるテーブル
    • thead、tbody、tfootがあるテーブル
    • キャプション
    • セルの結合
    • 演習 : テーブル
    • 演習回答:テーブル
    • フォーム概要
    • はじめてのフォーム
    • お問い合わせフォームの制作① - 単一行のテキスト入力欄
    • お問い合わせフォームの制作② - プルダウンメニュー
    • お問い合わせフォームの制作③ - ラジオボタン
    • お問い合わせフォームの制作④ - テキストエリア
    • お問い合わせフォームの制作⑤ - チェックボックス
    • お問い合わせフォームの制作⑥ - 送信ボタン
    • お問い合わせフォームの制作⑦ - ラベル
    • フォームバリデーション
    • 演習:フォーム
    • 演習回答:フォーム
  5. 新・CSS入門
    • イントロダクション - CSS入門
    • CSSの基本をマスターしよう
    • はじめてのCSSを書いてみよう
    • コメントアウトをしよう
    • 色の指定ができるようになろう
    • 背景を指定しよう
    • ボックスモデルの基本を理解しよう
    • マージンを指定しよう
    • マージンの相殺について理解しよう①
    • マージンの相殺について理解しよう②
    • パディングを設定しよう
    • ボーダーを設定しよう
    • ボックスの横幅と高さを指定しよう
    • マージンとパディングの違いを学ぼう
    • 3つのセレクターを使えるようになろう
    • 結合子を使ったセレクタを指定しよう
    • 複数のセレクタを指定しよう
    • リンクで使用する疑似クラスを指定しよう
    • フォントを指定しよう
    • ウェブフォントを利用しよう
  6. 実践:ウェブサイトのコーディング
    • イントロダクション - 実践:新ウェブサイトのコーディング
    • よくあるご質問(必ずご確認ください)
    • ファイルの作成
    • HTMLによるマークアップ①
    • HTMLによるマークアップ②
    • HTMLによるマークアップ③
    • CSSによるスタイルの設定①
    • CSSによるスタイルの設定②
    • CSSによるスタイルの設定③
    • CSSによるスタイルの設定④
    • レスポンシブ対応
    • 画像の設定
    • メタデータの設定
    • よくあるご質問(本セクション)
  7. Bootstrap 4入門
    • イントロダクション - Bootstrap 4入門 -
    • テキストエディタについて
    • Bootstrapとは
    • 【重要】補足情報(Bootstrapの読み込み方法のアップデートについて)
    • はじめてのBootstrap 1
    • はじめてのBootstrap 2
    • ナビゲーションバー
    • グリッドシステム 1
    • グリッドシステム 2
    • グリッドシステム 3
    • グリッドシステム 4
    • 実践:フォトギャラリーの制作 1
    • 実践:フォトギャラリーの制作 2
    • 実践:フォトギャラリーの制作 3
    • 補足:フォントオーサム公式サイトについて
    • 実践:フォトギャラリーの制作 4 フォントオーサムの導入
    • 実践:フォトギャラリーの制作 5 仕上げ
  8. JavaScript入門
    • イントロダクション - JavaScript入門 -
    • JavaScriptの歴史
    • JavaScriptの開発環境構築
    • はじめてのJavaScript
    • JavaScriptのエラーを自力で解決するための方法
    • コメント
    • 演算
    • 変数
    • インクリメントとデクリメント
    • 条件分岐
    • 条件分岐 if / else
    • 条件分岐 if / if else / else
    • 条件分岐 switch
    • 演習:テーマパークの入場料計算
    • 演習回答:テーマパークの入場料計算
    • 繰り返し処理とは
    • 繰り返し処理 for
    • 繰り返し処理 while
    • 繰り返し処理 do while
    • 演習:繰り返し処理
    • 演習回答:繰り返し処理
    • 配列
    • 連想配列
    • 演習:配列を使ったテストの点数の集計
    • 演習回答:配列を使ったテストの点数の集計
    • 関数とは
    • function命令
    • 関数リテラル
    • Functionコンストラクタ
    • 演習:関数
    • 演習回答:関数
  9. JavaScript DOM操作
    • イントロダクション - JavaScript DOM操作 -
    • DOMとは
    • IDをキーに要素を取得
    • タグ名をキーに要素を取得
    • name属性をキーに要素を取得
    • class属性をキーに要素を取得
    • ノードを追加
    • 補足:ノードを追加
    • ノードの置換
    • ノードの削除
    • 演習 : DOM操作
    • 演習回答:DOM操作
    • 補足:演習回答:DOM操作
  10. JavaScript イベントとイベントハンドラ
    • イベントとイベントハンドラを関連付ける方法
    • 開始タグの中で関連付ける方法
    • プロパティで関連付ける方法
    • loadイベント
    • addEventListener
    • 演習 : イベントとイベントハンドラ
    • 演習回答 : イベントとイベントハンドラ
  11. AWS Cloud9による開発環境構築
    • イントロダクション - AWS Cloud9による開発環境構築 -
    • AWSの無料利用枠について
    • !!!【重要】よくあるご質問!!!
    • AWS利用時の注意事項 !!必ず確認してください!!
    • AWSアカウント作成
    • IAMの設定
    • 無料利用枠の使用のアラートの受信設定
    • 【重要】プラットフォーム選択について
    • Cloud9のセットアップ
    • Cloud9の画面説明
    • 補足:AWS Cloud9のテキストエディタの設定について
    • 新・Rubyのバージョン管理1
    • Rubyのバージョン管理 2
    • Rubyのバージョン管理 3
  12. Ruby入門
    • イントロダクション - Ruby 入門 -
    • Rubyとは
    • 動作確認環境について
    • はじめてのRubyプログラミング
    • コメント
 
Preview Video
   

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

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
発売日 2018/06/19
(4.3)

19.5 total hours
ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML / CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース

初学者を対象にした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

  



↓全て表示↑少なく表示
 
Users Voice
バックエンドエンジニアです。 一連のwebページの作成手法がとても分かりやすかった。 まったく初めて学習する人は、一度入門書を流し読みしてから視聴するとより効果的ではないかと感じました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • この講座で学べること
  2. ウェブサイトの企画 / ヒアリング
    • 企画の大切さ
    • ヒアリングは企画の第一歩
    • 共通認識を持ってもらおう
    • 誰のためのウェブサイト?
    • 何のためのウェブサイト?
    • 制限とクリエイティビティ
    • クライアントが本当に欲しいもの(ウェブサイトは必要?)
    • クライアントが本当に欲しいもの(代替手段 1)
    • クライアントが本当に欲しいもの(代替手段 2)
    • それでもウェブサイトが必要なら
    • 運営方法 / 誰が情報を更新するのか
    • 運営方法 / いつ情報を更新するのか
    • 運営方法 / テスト環境の構築は必要か
    • ラップアップ
  3. ウェブサイトの企画 / トンマナ
    • トンマナとは
    • トンマナの決め方
    • 既存事例を集める 1
    • 既存事例を集める 2
    • 既存事例を集める 3
    • 既存事例の集め方
    • グルーピング
    • グルーピングの修正
    • グルーピングの選択
    • ラップアップ
  4. ウェブサイトの企画 / モバイル対応
    • モバイル対応とは
    • モバイル対応の方法 / レスポンシブレイアウト
    • モバイル対応の方法 / モバイル専用レイアウト
    • モバイル対応の予算
  5. ウェブサイトの企画 / 予算
    • 納品型と非納品型
    • 自分の単価を決めておこう
    • 見積もりの作成
    • 見積書の体裁
    • ラップアップ
  6. Sketchの基本
    • Sketchとは
    • Sketchをインストールする
    • Sketchを使う理由 / Photoshopとの違い
    • Sketchの画面構成
    • アートボード
    • いろいろな図形を描いてみる
    • 図形のグループ化
    • 図形の結合
    • 立方体を描いてみる
    • ベクターツールの基本
    • ベクターツールで曲線を描く
    • ベクターにおける頂点の違いを学ぶ
    • ベクター画像とビットマップ画像の違い
    • 【練習】簡単なパスを描いてみる
    • 【練習】パスの結合を使った応用編
    • 【練習】パスでロゴをトレースする
    • テキストツールの基本
    • テキストボックスを理解する
    • テキストのオプション
    • フォントをインストールして表現力を豊かに
    • 【練習】ロゴのトレースを完成させる
    • 【練習】図形 / パス / テキストを使ってカードUIを再現
  7. Sketchの応用
    • このセクションの説明
    • パスのアウトライン化と図形の結合
    • テキストのアウトライン化と4つの結合モード
    • 【実践】アイコンをつくる 1
    • 補足:線のオプションについて
    • 【実践】アイコンをつくる 2
    • 【実践】アイコンをつくる 3
    • 【実践】アイコンをつくる 4
    • 【実践】アイコンをつくる 5
    • 【実践】アイコンをつくる 6
    • 【実践】アイコンをつくる 7
    • 【実践】アイコンをつくる 8
    • 【実践】アイコンをつくる 9
    • アイコンのSketchファイル
    • 画像素材
    • 画像サイズの確認と縮小
    • 画像の加工
    • 画像の色調補正
    • 画像のぼかしエフェクトとマスク処理
    • 画像の差し替え機能で時間短縮
    • 画像を塗りに設定する便利な方法
    • 塗りや線に使うカラーを登録する
    • ノイズオプションの変更点
    • 塗りにグラデーションやノイズを設定する
    • Blending Mode オプションの捕捉
    • 【練習】Instagramのような画像をつくってみよう
    • シンボルを作成する
    • アイコンのシンボル化<アイコンを作成する>
    • アイコンのシンボル化<シンボルのネスト>
    • アイコンのシンボル化 / ★アイコンの改善
    • アイコンのシンボル化<シンボルの改善 1>
    • アイコンのシンボル化<シンボルの改善 2>
    • 画像の書き出し
    • 複数同時書き出しと透過オプション
    • アートボードを画像として書き出す
    • ラップアップ
  8. ワイヤーフレームを作成する
    • ワイヤーフレームとは
    • 共通認識をつくる
    • 仕様を決める
    • タスクを明確にする
    • 完成後の確認
    • ワイヤーフレームの作成 1
    • ワイヤーフレームの作成 2
    • ワイヤーフレームの作成 3
    • ワイヤーフレームの作成 4
  9. トレースからデザインを始める
    • デザインのトレースとは
    • デザイントレースの下準備
    • ヘッダーのデザインをトレースする 1
    • ヘッダーのデザインをトレースする 2
    • ヘッダーのデザインをトレースする 3
    • 作成済のアイコンを読み込んでシンボルに登録
    • カテゴリーメニューをトレースする 1
    • カテゴリーメニューをトレースする 2
    • アラートをトレースする
    • アイコンの修正
    • Sketchでボーダーを引くテクニック
    • 作成済のシンボルを使ってデザイントレースを効率化する
    • レコメンデーションのトレース 1
    • レコメンデーションのトレース 2
    • レコメンデーションのトレース 3
    • レコメンデーションのトレース 4
    • レコメンデーションのトレース 5
    • ピックアップのトレース 1
    • ピックアップのトレース 2
    • フッターのトレース 1
    • フッターのトレース 2
    • デザイントレースの確認
  10. デザインの原則
    • デザインとは
    • よくある勘違い
    • 直線・波線・ジグザグ
    • 色とスケールのコントラスト
    • スペース
    • 近接・情報のグループ化
    • ヒエラルキー・情報の階層化
    • シンメトリー・アシンメトリー
    • 反復・繰り返しのデザイン
    • グリッドレイアウト
    • 色の選択 1
    • 色の選択 2
    • 書体
    • 書体の事例
    • ラップアップ
  11. カフェのウェブサイトを企画
    • 講座の進め方
    • ペルソナ / 架空のミーティングメモ
    • タスクの整理
    • ワイヤーフレームをざっくりと描く
    • ワイヤーフレーム / コンテンツの最大表示幅を決める
    • ワイヤーフレーム / コンテンツの構成を決める
    • ワイヤーフレーム / 文章
    • ワイヤーフレーム / 文章を流し込む
  12. カフェサイトのデザイン
    • デザイン / 準備
    • デザイン / 写真素材サービスの使い方
    • デザイン / シンメトリーを使った対称的なレイアウト
    • デザイン / キーワードを工夫して写真を探す
    • デザイン / 写真を切り抜く
    • デザイン / 背景とスペーシングの調整
    • デザイン / シンメトリーを使った落ち着きのあるレイアウト
    • デザイン / コーヒー豆のイラストを描く
    • デザイン / ピザのイラストを描く
    • デザイン / スペーシングの調整
    • デザイン / メニューの背景画像を探す
    • デザイン / メニューを組み立てる
    • デザイン / 写真のトリミングを調節する
    • デザイン / 店舗情報のラフ
    • デザイン / ロゴの変更と文字間設定
    • デザイン / 想像上のボックス、近接、繰り返し
    • デザイン / 店舗情報の仕上げ
    • デザイン / Instagramとフッター
    • デザイン / ヒーローイメージを変更する
    • デザイン / レイヤーを整理して完成!
  13. HTMLの基本
    • 必須ソフトのインストール / HTMLとCSSの役割
    • このセクションについて
    • はじめてのHTML
    • インデントを使って分かりやすくコードを書く
    • ウェブサイトの基本型をコーディング
    • <h>タグとブラウザによる挙動の違い
    • <p>タグ
    • <small>タグと<br>タグ
    • <ul>タグ
    • <img>タグ
    • <table>タグ
    • HTMLのおさらい
  14. CSSの基本
    • CSSを書いてみよう
    • <style>タグを使ったCSSの書き方
    • 外部ファイルからCSSを読み込む
    • class属性を指定してCSSを適応する
    • CSSの優先順位(記述順)
    • CSSの優先順位(インラインCSS)
    • CSSの優先順位(HTMLの構造による優先度)
    • CSSの優先順位(HTMLの階層に合わせたCSS)
        

関連:Webデザインを本でも学ぼう

UdemyのWebデザイン講座は上述したとおり、Webデザインの基礎から実用まで、幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

Webデザインの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました