★未経験からプロの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つの作品を作りながら、難なく楽しく学ぶ事が出来ます。
【実践Webデザイン】
Webサイトをデザインする方法をレクチャーします。「ワイヤーフレーム」の制作方法から、実際に仮のWebサイトをまるまるデザインしてみる所まで、Webサイトデザインの全てをお話ししますので、初心者の方でも、どのようにサイト制作を行うのかを実践していただけます。
【HTML】
初めてHTMLを学ぶ方向けに、HTMLの基本文法から、レイアウトするためのHTMLタグの記述方法など、Webサイトをマークアップする上でかかせないスキルをご紹介します。
【CSS】
初めてCSSを学ぶ方向けに、CSSの基本文法からCSS3などの応用まで学びます。実際にレイアウトを組んだり、実践しながら学びます。
【実践コーディング】
実際にHTMLとCSSを利用して、様々なタイプのWebサイトをいちからマークアップする方法をレクチャーしていきます。量をこなして、一人でWebサイトをマークアップ出来るようになりましょう!
※NESTonlineの他の講座を受講されている方は、一部内容が重複いたしますので、ご注意下さい
セクション 1: 【Photoshop】これからはじめるPhotoshop基礎⑴ | |||
---|---|---|---|
Lecture 1 | 04:55 | ||
グラフィックツール定番のPhotoshop ! 基礎の基礎から中級までレベルアップを目指します。 |
|||
Lecture 2 | 06:42 | ||
まず初めに覚えるべき、Photoshopの画面構成について学びます。 | |||
Lecture 3 | 07:05 | ||
ファイルを新規作成する方法を学ぼう |
|||
Lecture 4 | 06:20 | ||
まずはじめに覚えるべき、Photoshopの基本のツールの使い方を学びます。 | |||
Lecture 5 | 05:06 | ||
Photoshopファイル上に、画像を貼り付ける方法と、その画像を拡大縮小、回転させる方法について学びます。 | |||
Lecture 6 | 04:02 | ||
フィルター機能を使って、写真をイラスト風に変える方法について学びます。 | |||
Lecture 7 | 04:35 | ||
長方形選択ツールを使って、画像の一部分のみにエフェクトを加える方法について学びます。 |
|||
Lecture 8 | 06:12 | ||
Photoshopのブラシツールを使って、写真にキラキラした演出を加えます。 | |||
Lecture 9 | 04:26 | ||
Photoshopで作成したファイルをjpgに変換する方法を学びます。 |
|||
セクション 2: 【Photoshop】これからはじめるPhotoshop基礎⑵ | |||
Lecture 10 | 04:05 | ||
Photoshopの画面を拡大縮小したり、ウィンドウを並べる方法を学びます。 | |||
Lecture 11 | 04:25 | ||
色調補正パネルの「明るさ・コントラスト」を調整する方法について学びます。 | |||
Lecture 12 | 05:45 | ||
色調補正パネルを使って、女性の唇以外の部分をモノクロに変えます。 |
|||
Lecture 13 | 04:52 | ||
色の置き換えツールを使って、紫色のファイルを青色に変えます。 | |||
Lecture 14 | 08:01 | ||
ぼかしツールを使って、写真にぼかしを加え、ミニチュア風になるように色調補正を加えます。 | |||
Lecture 15 | 04:22 | ||
色調補正系のツールや、様々な選択範囲の作成ツールを駆使して、画像をトイカメラ風になるように加工します。 | |||
Lecture 16 | 04:29 | ||
Photoshopの基本である、レイヤー機能について学びます。 |
|||
Lecture 17 | 03:17 | ||
クイック選択ツールを使って、人物を選択し、綺麗に切り抜きます。 |
|||
Lecture 18 | 01:44 | ||
クイック選択ツールを使って、空の部分を綺麗に選択し、その部分に晴れの画像を合成させます。 | |||
Lecture 19 | 08:33 | ||
チャレンジ課題です。理解度をチェックするために挑戦してみましょう! | |||
セクション 3: 【Photoshop】これからはじめるPhotoshop基礎⑶ | |||
Lecture 20 | 07:15 | ||
テキストツールを使用して、テキストを入力し、フォントの種類や大きさなどのスタイルを変更します。 | |||
Lecture 21 | 05:05 | ||
Photoshopのファイル上に、テキストボックスを作成し、範囲内で自動で改行させる文章を入力します。 | |||
Lecture 22 | 05:19 | ||
Photoshopのワープ機能を使って、テキストに変形を加え、レトロ風のロゴを作成します。 | |||
Lecture 23 | 04:56 | ||
シェイプツールを使って、ボタンの背景を作成し、インストールしたカスタムシェイプを使ってイラストを追加し、会員ログインボタンを作成します。 | |||
Lecture 24 | 06:10 | ||
Photoshopのレイヤーに、ドロップシャドウや境界線などのレイヤースタイルをかけて、メイン画像を作成します。 | |||
Lecture 25 | 06:40 | ||
Photoshopのレイヤーに、ドロップシャドウや境界線などのレイヤースタイルをかけて、メイン画像を作成します。 | |||
Lecture 26 | 03:48 | ||
楕円形ツールを使って、楕円を作成し、クリッピングマスクを使って、作成した楕円の形に写真を切り抜きます。 |
|||
Lecture 27 | 03:14 | ||
クリッピングマスク機能を使って、写真を切り抜き、コルクの背景に合成させたFacebookのカバー写真を制作します。 | |||
Lecture 28 | 05:05 | ||
スライス機能を使って、スライスを作成し、photoshopファイルをパーツ毎に画像として書き出します。 | |||
Lecture 29 | 09:31 | ||
チャレンジ課題です。理解度をチェックするために挑戦してみましょう! | |||
セクション 4: 【Photoshop】選択範囲と画像の操作 | |||
Lecture 30 | 04:31 | ||
切り抜きツールを使用し、画像を指定のサイズに切り抜き(トリミング)します。 | |||
Lecture 31 | 05:05 | ||
長方形選択ツールを使用し、海の写真をコピーし、窓枠に違和感なく貼り付けます。 | |||
Lecture 32 | 07:21 | ||
楕円形選択ツールを使用し、ピザの写真をコピーし、お皿の上に違和感なく合成します。 | |||
Lecture 33 | 06:24 | ||
様々な選択ツールを利用して、レモンの写真をコピーし、別の写真に違和感なく合成します。 | |||
Lecture 34 | 04:13 | ||
クイック選択ツールを使って、人物を選択し、切り抜きます。 | |||
Lecture 35 | 04:25 | ||
クイック選択ツールを使って選択した範囲を、マスクモードでさらに微調整し、綺麗な選択範囲を作成します。 |
|||
Lecture 36 | 04:27 | ||
自動選択ツールを使用し、バラの写真を切り抜き、花嫁が持っているような画像を作成します。 | |||
Lecture 37 | 11:04 | ||
様々な選択ツールを利用して、シャツやネクタイの画像を切り抜き、必要なテキストを入力し、よくあるネットショップのアイキャッチ画像を制作します。 |
|||
Lecture 38 | 04:10 | ||
Photoshopのクイック選択ツールや自動選択ツール、境界線を調整するなどして、髪の毛を綺麗に切り抜きます。 | |||
Lecture 39 | 05:27 | ||
チャレンジ課題です。理解度をチェックするために挑戦してみましょう! | |||
セクション 5: 【Photoshop】レイヤー | |||
Lecture 40 | 06:15 | ||
Photoshopのレイヤーの仕組みを理解して、レイヤーパネルの操作方法(移動や名前の変更、グループ化など)をマスターします。 | |||
Lecture 41 | 05:57 | ||
Photoshop上のレイヤーの不透明度を調整し、違和感なく画像を合成します。 |
|||
Lecture 42 | 07:47 | ||
レイヤーをリンクさせ、複数のレイヤーを一気に編集します。カラーラベルを設定し、管理しやすくレイヤーパネルを設定します。 |
|||
Lecture 43 | 07:27 | ||
バラバラに配置された写真を整列させ、長方形の不透明度を調整し、感じの良いアイキャッチ画像を作成します。 | |||
Lecture 44 | 09:01 | ||
レイヤースタイルのドロップシャドウを使って、レイヤーに影をつけます。 | |||
Lecture 45 | 06:15 | ||
レイヤースタイルの光彩を使って、テキストをネオン風に光らせたクリスマスカードを作成します。 |
|||
Lecture 46 | 04:39 | ||
パターンオーバーレイを使って、背景のレイヤーにざらざらした質感を加え、リッチなウェブサイトのデザインを作成します。 | |||
Lecture 47 | 09:54 | ||
様々なレイヤースタイル機能を使って、単純なレイヤーにエフェクトを加え、かわいい商品のお申込みリンクのバナーを作成します。 |
|||
Lecture 48 | 08:17 | ||
Photoshopを使って、オリジナルのパターンを作成し、パターンオーバーレイを使ってAirmailの枠線を作ります。 |
|||
Lecture 49 | 14:35 | ||
チャレンジ課題です。理解度をチェックするために挑戦してみましょう! | |||
セクション 6: 【Photoshop】ブラシ・シェイプ・グラデーション | |||
Lecture 50 | 03:20 | ||
レイヤーから選択範囲を作成し、選択範囲をグラデーションで塗りつぶし、段々と透明になるグラデーションを作成します。 | |||
Lecture 51 | 08:34 | ||
ブラシツールを使って、クレヨン調のブラシを設定し、黒板に文字を描きます。 | |||
Lecture 52 | 07:46 | ||
無料のカスタムブラシをインストールし、そのブラシでスタンプのように絵を描き、一瞬でポスターデザインを完成させます。 | |||
Lecture 53 | 07:16 | ||
ブラシツールを使って、女性の頬に赤いブラシを描き、不透明度を下げて違和感なく化粧を施します。 | |||
Lecture 54 | 08:24 | ||
シェイプツールを使って、角の丸い長方形を作成し、グラデーションを設定して押したくなるボタンに編集します。 |
|||
Lecture 55 | 07:46 | ||
アンカーポイントとパスについて理解し、ペンツールを使ってアンカーポイントを作成し、ハンドルを操作して、英語の文字をトレースします。 |
|||
Lecture 56 | 07:09 | ||
パス選択ツールを使って、アンカーポイントの位置を調整し、ハンドルを操作して丸みを出し、様々なデザインのリボンを作成します。 |
|||
Lecture 57 | 06:54 | ||
無料のカスタムシェイプをインストールし、一瞬でフラットなボタンを作成します。 |
|||
Lecture 58 | 04:46 | ||
長方形ツールで作成した四角形に、ペンツールを使ってアンカーポイントを追加し、パス選択ツールでポイントの位置を調整し、ふきだしになるようにデザインします。 |
|||
Lecture 59 | 11:41 | ||
チャレンジ課題です。理解度をチェックするために挑戦してみましょう! | |||
セクション 7: 【Photoshop】テキストツール | |||
Lecture 60 | 05:30 | ||
テキストツールを使って文字を入力し、文字パネルでサイズや色の設定方法を学びながら、名刺を制作していきます。 | |||
Lecture 61 | 04:34 | ||
長い文章を範囲内で自動改行できるテキストボックスを作成し、効率よく制作する方法を学びながら、カクテル紹介ポスターを制作していきます。 | |||
Lecture 62 | 06:13 | ||
単純なテキストの入力と、テキストボックスでの入力との違いやメリットを理解した上で、2つの入力方法を使い分けつつ、雑誌のページデザインを作っていきます。 |
|||
Lecture 63 | 04:12 | ||
シェイプツールで雨の形を作成し、雨の中にテキストを入力して、かわいいポスターを作成します。 |
|||
Lecture 64 | 03:52 | ||
ペンツールで半円のパスを入力し、そのパスに沿ってテキストを入力し、ビンテージ風のロゴを作成します。 |
|||
Lecture 65 | 02:52 | ||
テキストツールを使って入力した文字を、ワープさせ、変形させます。 | |||
Lecture 66 | 05:35 | ||
テキストツールを使って入力した文字を、遠近法ワープを使って、ビルから垂れ下がったポスターのように変形させます。 | |||
Lecture 67 | 01:53 | ||
デザインに合った無料の新規フォントをインストールし、ビンテージ感のあるロゴを完成させます。 | |||
Lecture 68 | 08:02 | ||
チャレンジ課題です。理解度をチェックするために挑戦してみましょう! | |||
セクション 8: 【Photoshop】マスク | |||
Lecture 69 | 05:17 | ||
Photoshopのレイヤーマスク機能を使って、画像を切り抜く方法について学びます。 | |||
Lecture 70 | 03:34 | ||
Photoshopのレイヤーマスク機能を使って、画像を徐々に透明にする方法について学びます。 |
|||
Lecture 71 | 04:30 | ||
クイックマスクモードで、作成した選択範囲をさらに細かく微調整し、複雑な写真を綺麗に切り抜きます。 |
|||
Lecture 72 | 05:45 | ||
レイヤーマスク機能を使って、アーティスティックなカリグラフィポスターを制作します。 |
|||
Lecture 73 | 03:24 | ||
レイヤーマスク機能を使って、写真の曇り空部分を切り抜き、代わりに晴れの写真を貼り付けて合成します。 |
|||
Lecture 74 | 06:01 | ||
クイック選択ツールを使って、髪の毛を綺麗に選択し、色調補正をかけて、髪の毛の色を変えます。 | |||
Lecture 75 | 05:44 | ||
クリッピングマスクの特性を理解し、実際にクリッピングマスクを使って、画像に直接変更を加えずに画像を切り抜きます。 | |||
Lecture 76 | 06:33 | ||
本のカバーの形にシェイプを作成し、クリッピングマスクを使って、本のカバーを革の画像に合成させます。 | |||
Lecture 77 | 08:10 | ||
ペンツールでシェイプを作成し、作成したシェイプの形に、クリッピングマスクを使って画像を切り抜き、綺麗なウェブサイトメイン画像を作成します。 |
|||
Lecture 78 | 10:13 | ||
チャレンジ課題です。理解度をチェックするために挑戦してみましょう! | |||
セクション 9: 【Photoshop】色調補正とレタッチ | |||
Lecture 79 | 05:45 | ||
無料のアクションをインストールし、単純な画像にボタンひとつでレトロ風になるエフェクトを加えます。 | |||
Lecture 80 | 08:31 | ||
色調補正のレベル補正を使って、食べものの写真を美味しそうに補正します。 | |||
Lecture 81 | 07:03 | ||
フィルター機能を使って、写真をイラスト風に加工します。 | |||
Lecture 82 | 04:19 | ||
Photoshopの自動処理機能を使って、普通の写真をHDR風に加工します。 | |||
Lecture 83 | 02:42 | ||
写真に直接変更を加えれるように画像をラスタライズし、写真に直接変更を加え、シャープツールを使って、人物の目をはっきりさせます。 | |||
Lecture 84 | 05:21 | ||
スポット修正ブラシツールを使って、人物のニキビやシワを消し、ぼかしツールで肌をなめらかにするレタッチを行います。 |
|||
Lecture 85 | 06:33 | ||
クイック選択ツールで歯の部分を綺麗に選択し、明るさを調整して白くします。目の部分も同様に白く補正します。 |
|||
セクション 10: 【実践Webデザイン】ワイヤーフレーム制作 | |||
Lecture 86 | 05:31 | ||
ワイヤーフレームとはなにか、なんのために作るのかを理解し、ワイヤーフレーム制作で大事なポイントについて学びます。 | |||
Lecture 87 | 05:48 | ||
ワイヤーフレームをどのような手順で作成すれば良いかを知り、ワイヤーフレームを作成するためのツールをレクチャーします。 |
|||
Lecture 88 | 04:37 | ||
そもそもヒアリングとはなにかを知り、ヒアリングすることの目的を知ります。失敗しないためにどのようにヒアリングしていけばよいのかなどをお伝えします。 |
|||
Lecture 89 | 05:06 | ||
クライアントの状況に応じたヒアリングを行うことができるように、ワイヤーフレームを作成するために、何を聞けば良いのかを知ります。 |
|||
Lecture 90 | 05:59 | ||
Webサイトの一般的なレイアウトを知り、各パーツがそれぞれどんな役割を果たしているのかを知ることで、ワイヤーフレームを作れるようになります。 |
|||
Lecture 91 | 03:37 | ||
実際のワイヤーフレームの作成手順を知り、どんなツールを使用してワイヤーフレームを作成するのかをお話します。 | |||
Lecture 92 | 05:46 | ||
実際のワイヤーフレームを見て、どんなものを作れば良いのかお話します。 | |||
セクション 11: 【実践Webデザイン】初心者のためのウェブデザインテクニック | |||
Lecture 93 | 05:00 | ||
Webサイトデザインの勉強方法を知り、独学でWebサイトデザインができるようになるようレクチャーします。 | |||
Lecture 94 | 18:19 | ||
四角形ツールを使って背景を作成し、テキストツールやペンツールを利用してパンくずリストをデザインします。 ガイドを作成、表示して、1px単位の綺麗なデザインを目指します。 |
|||
Lecture 95 | 25:00 | ||
四角形ツールを使って基盤のボタンを作成し、グラデーションにします。レイヤースタイルで浮いたようにエフェクトをかけ、無料でダウンロードしたアイコンを使って「押したくなるダウンロードボタン」を作成します。 |
|||
Lecture 96 | 14:33 | ||
四角形ツールでバナーの背景を作成し、テキストツールで文字の入力とスタイルの変更を行い、よくある「セールのバナー」を作成します。 |
|||
Lecture 97 | 11:06 | ||
四角形ツールで基盤の背景を作成し、写真を配置し、クリッピングマスクをかけて、綺麗なウェブサイトのメインビジュアルを作成します。デザインにあった無料のフォントをダウンロードして使用します。 |
|||
Lecture 98 | 09:58 | ||
ペンツールでシェイプを作成し、レイヤーのグループ化で作業を効率化しつつ、Webサイトのナビゲーションを作成していきます。 |
|||
Lecture 99 | 18:47 | ||
ウェブサイトの横幅が決定したら、横幅に合わせてガイドを引きます。その方法についてお話します。 | |||
Lecture 100 | 03:20 | ||
参考にするウェブサイトのデザインギャラリーの紹介と、実際にWebサイトを制作していく際、どのように活用していくのか、お話します。 |
テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。
卒業生は1000名以上です。
★提供しているサービス
2ヶ月のWebデザインコース
2ヶ月で未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです
Webデザインキャンプ
【2日間で全てを学ぶ!】Webデザイン集中講座
Railsキャンプ
RailsCamp -2日間集中プログラミング入門講座-
など
この値段でこれだけ学べるのはすごいと思いました。
同じ内容のものが、Webデザインスクールだと70万円近くだったので。
幅広い知識が身についた
photoshopでの画像加工やサイトデザインに加え、htmlやcss、コーディングまで、幅広いWeb制作の知識を身につけることができました。 基礎的なことだけじゃなくて、応用的なテクニックとかも教えてもらえたので、満足でした。