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

Web知識、Photoshop、Webグラフィックデザイン、HTML、CSS、実践的なコーディングなど、Webデザイナーとして働いたり、自分1人でサイトを作り上げるのに必要な全てが含まれています
  • レクチャー 422
  • ビデオファイル 42 時間
  • スキルレベル 初心者向け
  • 言語 Japanese
  • その他: 学習期限なし
    30日間返金保証
    iOS・Androidどちらも受講可能
    修了証明書

コースのご紹介

★未経験からプロの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の他の講座を受講されている方は、一部内容が重複いたしますので、ご注意下さい


推奨条件

  • 全くの未経験な人でも大丈夫です。事前に習得すべきスキルなどはありません
  • PhotoshopとSublimeTextを授業で使用します

学習内容

  • 422本のレクチャーと41.5 時間のコンテンツ!
  • Webサイト制作の一連の流れを理解できるようになります
  • Photoshopで、バナーやフライヤーが作れるようになります
  • 実践的なWebサイトグラフィックデザインができるようになります
  • HTMLとCSSができるようになります
  • 実践的なWebサイトのコーディングができるようになります

こんなかたにおすすめ

  • 自分1人でWebサイトを作り上げられるスキルを身に着けたい方
  • プロのWebデザイナーを目指している方
  • デザイナーやエンジニアの上司や同僚

カリキュラム

セクション 1: 【Photoshop】これからはじめるPhotoshop基礎⑴
04:55

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

06:42
まず初めに覚えるべき、Photoshopの画面構成について学びます。
07:05

ファイルを新規作成する方法を学ぼう

06:20
まずはじめに覚えるべき、Photoshopの基本のツールの使い方を学びます。
05:06
Photoshopファイル上に、画像を貼り付ける方法と、その画像を拡大縮小、回転させる方法について学びます。
04:02
フィルター機能を使って、写真をイラスト風に変える方法について学びます。
04:35

長方形選択ツールを使って、画像の一部分のみにエフェクトを加える方法について学びます。

06:12
Photoshopのブラシツールを使って、写真にキラキラした演出を加えます。
04:26

Photoshopで作成したファイルをjpgに変換する方法を学びます。

セクション 2: 【Photoshop】これからはじめるPhotoshop基礎⑵
04:05
Photoshopの画面を拡大縮小したり、ウィンドウを並べる方法を学びます。
04:25
色調補正パネルの「明るさ・コントラスト」を調整する方法について学びます。
05:45

色調補正パネルを使って、女性の唇以外の部分をモノクロに変えます。

04:52
色の置き換えツールを使って、紫色のファイルを青色に変えます。
08:01
ぼかしツールを使って、写真にぼかしを加え、ミニチュア風になるように色調補正を加えます。
04:22
色調補正系のツールや、様々な選択範囲の作成ツールを駆使して、画像をトイカメラ風になるように加工します。
04:29

Photoshopの基本である、レイヤー機能について学びます。

03:17

クイック選択ツールを使って、人物を選択し、綺麗に切り抜きます。

01:44
クイック選択ツールを使って、空の部分を綺麗に選択し、その部分に晴れの画像を合成させます。
08:33
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
セクション 3: 【Photoshop】これからはじめるPhotoshop基礎⑶
07:15
テキストツールを使用して、テキストを入力し、フォントの種類や大きさなどのスタイルを変更します。
05:05
Photoshopのファイル上に、テキストボックスを作成し、範囲内で自動で改行させる文章を入力します。
05:19
Photoshopのワープ機能を使って、テキストに変形を加え、レトロ風のロゴを作成します。
04:56
シェイプツールを使って、ボタンの背景を作成し、インストールしたカスタムシェイプを使ってイラストを追加し、会員ログインボタンを作成します。
06:10
Photoshopのレイヤーに、ドロップシャドウや境界線などのレイヤースタイルをかけて、メイン画像を作成します。
06:40
Photoshopのレイヤーに、ドロップシャドウや境界線などのレイヤースタイルをかけて、メイン画像を作成します。
03:48

楕円形ツールを使って、楕円を作成し、クリッピングマスクを使って、作成した楕円の形に写真を切り抜きます。

03:14
クリッピングマスク機能を使って、写真を切り抜き、コルクの背景に合成させたFacebookのカバー写真を制作します。
05:05
スライス機能を使って、スライスを作成し、photoshopファイルをパーツ毎に画像として書き出します。
09:31
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
セクション 4: 【Photoshop】選択範囲と画像の操作
04:31
切り抜きツールを使用し、画像を指定のサイズに切り抜き(トリミング)します。
05:05
長方形選択ツールを使用し、海の写真をコピーし、窓枠に違和感なく貼り付けます。
07:21
楕円形選択ツールを使用し、ピザの写真をコピーし、お皿の上に違和感なく合成します。
06:24
様々な選択ツールを利用して、レモンの写真をコピーし、別の写真に違和感なく合成します。
04:13
クイック選択ツールを使って、人物を選択し、切り抜きます。
04:25

クイック選択ツールを使って選択した範囲を、マスクモードでさらに微調整し、綺麗な選択範囲を作成します。

04:27
自動選択ツールを使用し、バラの写真を切り抜き、花嫁が持っているような画像を作成します。
11:04

様々な選択ツールを利用して、シャツやネクタイの画像を切り抜き、必要なテキストを入力し、よくあるネットショップのアイキャッチ画像を制作します。

04:10
Photoshopのクイック選択ツールや自動選択ツール、境界線を調整するなどして、髪の毛を綺麗に切り抜きます。
05:27
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
セクション 5: 【Photoshop】レイヤー
06:15
Photoshopのレイヤーの仕組みを理解して、レイヤーパネルの操作方法(移動や名前の変更、グループ化など)をマスターします。
05:57

Photoshop上のレイヤーの不透明度を調整し、違和感なく画像を合成します。

07:47

レイヤーをリンクさせ、複数のレイヤーを一気に編集します。カラーラベルを設定し、管理しやすくレイヤーパネルを設定します。

07:27
バラバラに配置された写真を整列させ、長方形の不透明度を調整し、感じの良いアイキャッチ画像を作成します。
09:01
レイヤースタイルのドロップシャドウを使って、レイヤーに影をつけます。
06:15

レイヤースタイルの光彩を使って、テキストをネオン風に光らせたクリスマスカードを作成します。

04:39
パターンオーバーレイを使って、背景のレイヤーにざらざらした質感を加え、リッチなウェブサイトのデザインを作成します。
09:54

様々なレイヤースタイル機能を使って、単純なレイヤーにエフェクトを加え、かわいい商品のお申込みリンクのバナーを作成します。

08:17

Photoshopを使って、オリジナルのパターンを作成し、パターンオーバーレイを使ってAirmailの枠線を作ります。

14:35
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
セクション 6: 【Photoshop】ブラシ・シェイプ・グラデーション
03:20
レイヤーから選択範囲を作成し、選択範囲をグラデーションで塗りつぶし、段々と透明になるグラデーションを作成します。
08:34
ブラシツールを使って、クレヨン調のブラシを設定し、黒板に文字を描きます。
07:46
無料のカスタムブラシをインストールし、そのブラシでスタンプのように絵を描き、一瞬でポスターデザインを完成させます。
07:16
ブラシツールを使って、女性の頬に赤いブラシを描き、不透明度を下げて違和感なく化粧を施します。
08:24

シェイプツールを使って、角の丸い長方形を作成し、グラデーションを設定して押したくなるボタンに編集します。

07:46

アンカーポイントとパスについて理解し、ペンツールを使ってアンカーポイントを作成し、ハンドルを操作して、英語の文字をトレースします。

07:09

パス選択ツールを使って、アンカーポイントの位置を調整し、ハンドルを操作して丸みを出し、様々なデザインのリボンを作成します。

06:54

無料のカスタムシェイプをインストールし、一瞬でフラットなボタンを作成します。

04:46

長方形ツールで作成した四角形に、ペンツールを使ってアンカーポイントを追加し、パス選択ツールでポイントの位置を調整し、ふきだしになるようにデザインします。

11:41
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
セクション 7: 【Photoshop】テキストツール
05:30
テキストツールを使って文字を入力し、文字パネルでサイズや色の設定方法を学びながら、名刺を制作していきます。
04:34
長い文章を範囲内で自動改行できるテキストボックスを作成し、効率よく制作する方法を学びながら、カクテル紹介ポスターを制作していきます。
06:13

単純なテキストの入力と、テキストボックスでの入力との違いやメリットを理解した上で、2つの入力方法を使い分けつつ、雑誌のページデザインを作っていきます。

04:12

シェイプツールで雨の形を作成し、雨の中にテキストを入力して、かわいいポスターを作成します。

03:52

ペンツールで半円のパスを入力し、そのパスに沿ってテキストを入力し、ビンテージ風のロゴを作成します。

02:52
テキストツールを使って入力した文字を、ワープさせ、変形させます。
05:35
テキストツールを使って入力した文字を、遠近法ワープを使って、ビルから垂れ下がったポスターのように変形させます。
01:53
デザインに合った無料の新規フォントをインストールし、ビンテージ感のあるロゴを完成させます。
08:02
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
セクション 8: 【Photoshop】マスク
05:17
Photoshopのレイヤーマスク機能を使って、画像を切り抜く方法について学びます。
03:34

Photoshopのレイヤーマスク機能を使って、画像を徐々に透明にする方法について学びます。

04:30

クイックマスクモードで、作成した選択範囲をさらに細かく微調整し、複雑な写真を綺麗に切り抜きます。

05:45

レイヤーマスク機能を使って、アーティスティックなカリグラフィポスターを制作します。

03:24

レイヤーマスク機能を使って、写真の曇り空部分を切り抜き、代わりに晴れの写真を貼り付けて合成します。

06:01
クイック選択ツールを使って、髪の毛を綺麗に選択し、色調補正をかけて、髪の毛の色を変えます。
05:44
クリッピングマスクの特性を理解し、実際にクリッピングマスクを使って、画像に直接変更を加えずに画像を切り抜きます。
06:33
本のカバーの形にシェイプを作成し、クリッピングマスクを使って、本のカバーを革の画像に合成させます。
08:10

ペンツールでシェイプを作成し、作成したシェイプの形に、クリッピングマスクを使って画像を切り抜き、綺麗なウェブサイトメイン画像を作成します。

10:13
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
セクション 9: 【Photoshop】色調補正とレタッチ
05:45
無料のアクションをインストールし、単純な画像にボタンひとつでレトロ風になるエフェクトを加えます。
08:31
色調補正のレベル補正を使って、食べものの写真を美味しそうに補正します。
07:03
フィルター機能を使って、写真をイラスト風に加工します。
04:19
Photoshopの自動処理機能を使って、普通の写真をHDR風に加工します。
02:42
写真に直接変更を加えれるように画像をラスタライズし、写真に直接変更を加え、シャープツールを使って、人物の目をはっきりさせます。
05:21

スポット修正ブラシツールを使って、人物のニキビやシワを消し、ぼかしツールで肌をなめらかにするレタッチを行います。

06:33

クイック選択ツールで歯の部分を綺麗に選択し、明るさを調整して白くします。目の部分も同様に白く補正します。

セクション 10: 【実践Webデザイン】ワイヤーフレーム制作
05:31
ワイヤーフレームとはなにか、なんのために作るのかを理解し、ワイヤーフレーム制作で大事なポイントについて学びます。
05:48

ワイヤーフレームをどのような手順で作成すれば良いかを知り、ワイヤーフレームを作成するためのツールをレクチャーします。

04:37

そもそもヒアリングとはなにかを知り、ヒアリングすることの目的を知ります。失敗しないためにどのようにヒアリングしていけばよいのかなどをお伝えします。

05:06

クライアントの状況に応じたヒアリングを行うことができるように、ワイヤーフレームを作成するために、何を聞けば良いのかを知ります。

05:59

Webサイトの一般的なレイアウトを知り、各パーツがそれぞれどんな役割を果たしているのかを知ることで、ワイヤーフレームを作れるようになります。

03:37
実際のワイヤーフレームの作成手順を知り、どんなツールを使用してワイヤーフレームを作成するのかをお話します。
05:46
実際のワイヤーフレームを見て、どんなものを作れば良いのかお話します。
セクション 11: 【実践Webデザイン】初心者のためのウェブデザインテクニック
05:00
Webサイトデザインの勉強方法を知り、独学でWebサイトデザインができるようになるようレクチャーします。
18:19

四角形ツールを使って背景を作成し、テキストツールやペンツールを利用してパンくずリストをデザインします。 ガイドを作成、表示して、1px単位の綺麗なデザインを目指します。

25:00

四角形ツールを使って基盤のボタンを作成し、グラデーションにします。レイヤースタイルで浮いたようにエフェクトをかけ、無料でダウンロードしたアイコンを使って「押したくなるダウンロードボタン」を作成します。

14:33

四角形ツールでバナーの背景を作成し、テキストツールで文字の入力とスタイルの変更を行い、よくある「セールのバナー」を作成します。

11:06

四角形ツールで基盤の背景を作成し、写真を配置し、クリッピングマスクをかけて、綺麗なウェブサイトのメインビジュアルを作成します。デザインにあった無料のフォントをダウンロードして使用します。

09:58

ペンツールでシェイプを作成し、レイヤーのグループ化で作業を効率化しつつ、Webサイトのナビゲーションを作成していきます。

18:47
ウェブサイトの横幅が決定したら、横幅に合わせてガイドを引きます。その方法についてお話します。
03:20

参考にするウェブサイトのデザインギャラリーの紹介と、実際にWebサイトを制作していく際、どのように活用していくのか、お話します。

講師プロフィール

NEST online , ウェブデザイン / プログラミング

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。


★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです


Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座


Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-


など


レビュー

平均評価
4.5
詳細
  1. 5つ星
    1
  2. 4つ星
    1
  3. 3つ星
    0
  4. 2つ星
    0
  5. 1つ星
    0
    • 中村佑介

    この値段でこれだけ学べるのはすごいと思いました。

    同じ内容のものが、Webデザインスクールだと70万円近くだったので。

    • 林凛

    幅広い知識が身についた

    photoshopでの画像加工やサイトデザインに加え、htmlやcss、コーディングまで、幅広いWeb制作の知識を身につけることができました。 基礎的なことだけじゃなくて、応用的なテクニックとかも教えてもらえたので、満足でした。