Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
3.8 (325 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,355 students enrolled

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース

Webサイトやスマートフォンアプリのデザイナーの中で大人気のデザインツール、Sketch。このコースではSketchを使ったことがなくて、これからちゃんとマスターしたいという人向けに100レッスンの充実したプログラムを提供します。
3.8 (325 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,355 students enrolled
Created by NEST online
Last updated 7/2016
Japanese
Current price: $51.99 Original price: $79.99 Discount: 35% off
11 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Sketchを使用した、アイコンデザインやWebデザインができるようになります
Requirements
  • 必要な知識やスキルはありません
  • PC(Macが必要です(SketchはMacのみ対応しています)
Description

Sketch3未経験からプロレベルを目指す、充実したコースです。

Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。

1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


★こんな人におすすめ★

  • Sketch3未経験で、使えるようになりたい
  • Sketch3でWebサイトやアプリのグラフィックデザインができるようになりたい
  • 効率よくワイヤーフレームやモックを作りたい
  • エンジニアだけどデザインも少しかじってみたい


★特徴

  • 単なるSketch3の機能説明ではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけられる
  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
  • 5分程度の動画が100レッスン 充実した内容ですが、無理せず学べる


★授業×チャレンジ課題で実践的なスキルが身につく! スキルを身につける上で、実際作りながら学ぶことはとても大切です。 オンライン学習では、動画を見るだけで終わってしまい、実践的なスキルがつかないことが多いです。 こちらのコースでは全てのレッスンが、バナーや実際のカフェのWebサイトなど実践的なものを作ります。そして、各章の終わりにはチャレンジ課題として、その章で学んだことの理解を確認する課題があります。

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

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


★内容

初めの1〜4セクションは、Sketch3の基本知識や基本操作を全体的に学びます。 その後、各セッションで、実際の制作物を作りながら学んでいきます。

⑴Sketch3の基本知識

Sketch3のインストールから初期設定、移動や選択の仕方など、基本的な知識を身につけられます。

⑵基本操作(1)アートボード・ページ・シェイプ

アートボードとページ機能の扱い方や、デザインの要素を作る上で欠かせないシェイプを自由自在に操れるようになります

⑶基本操作(2)ベクター・テキスト・スタイリング

文字をなぞってベクター機能の練習をしたり、簡単なデザインを作りながらテキストツールやスタイリング(装飾)をマスターします。

⑷基本操作(3)その他の基本操作

簡単な写真の編集や、デザインを効率良く進めるために欠かせないSymbols機能の紹介、CSSと画像の書き出しなど、Sketch3の特徴的な機能をたくさん紹介していきます。

⑸アイコン・ボタン制作

セッション1〜4で学んだ機能やデザインの作り方を生かして、実際のサイトにありそうなアイコンやボタンをつくります。

⑹ダッシュボードページ制作

仮想のダッシュボードページのデザインを、全10回に分けて作っていきます。難しい操作は行いませんので、これまで学習したことが身についているか確認しながら進めていきます。

オンラインショップ制作1(トップページ)

仮想のオンラインショップのトップページデザインを制作します。画像の書き出しを前提としたデザインになります。

オンラインショップ制作2(商品ページ)

セッション7の続きで、仮想のオンラインショプの商品ページのデザインを制作します。最後には画像の書き出しも行います。

⑼レストランのレスポンシブWebサイト制作1(PC用デザイン)

レスポンシブデザインの仮想のレストランのWebサイトの制作を行います。この章ではレスポンシブを前提としたPC用デザインをつくります。

⑽レストランのレスポンシブWebサイト制作2(タブレット・スマホ用デザイン)

セッション9の続きで、PC用デザインをもとに、仮想のレストランのWebサイトのタブレット用・スマホ用デザインを制作し、デザインを完成させます。

Who this course is for:
  • これからデザインを勉強したい未経験者
Course content
Expand all 100 lectures 10:39:34
+ sketch3の基本知識
8 lectures 35:26
ワークスペースと初期設定
10:57
レイヤーの概念を学ぼう
02:55
レイヤーの選択や移動を使ってアイコンを完成させよう
01:59
グループ化を使ってレイヤーリストを整理しよう
03:48
スマートガイドを知る&移動の応用
02:07

【チャレンジ内容】バラバラに配置されたレイヤーを移動やスマートガイドを使って完成版と同じ配置に直そう。サイズや余白が完成版と全く同じでなくてもOKです。1章で習ったことができるようになっているか確認してください。

【チャレンジ問題】バラバラに配置されたレイヤーを完成版と同じ配置に直そう
05:59
+ 基本操作(1)アートボード・ページ・シェイプ
10 lectures 43:23
アートボードについて学ぼう
04:43
アートボードのプリセットとカスタム設定
03:36
ページ機能について学ぼう
03:05
シェイプの基本的な使い方を学ぼう
02:31
マスク機能を使って写真を切り抜いてみよう
07:41
シェイプを自由な形に変形してみよう
04:56
リサイズとスケールの違いを知ろう
02:25
シェイプの形状モードを使ってカエルのアイコンを作ってみよう
05:41
RotateCopy機能を使って太陽のアイコンを作ってみよう
04:15

【チャレンジ内容】シェイプやマスクなど2章で習ったツールを使って写真を複雑な形に切り抜こう。指定した内容は、ヒントとして活用してください。サイズや余白などが完成版と全く同じでなくてもOKです。
【指定内容】
★アートボード
アートボード名:チャレンジ
サイズ:670×400
背景色:2E2E2E

【チャレンジ問題】写真を複雑な形に切り抜こう
04:30
+ 基本操作(2)ベクター・テキスト・スタイリング
11 lectures 01:13:14
ベクターの基本的な使い方を学ぼう
05:40
文字をなぞってベクターの練習をしよう
06:52
テキストの基本的な使い方を学ぼう
09:45
テキストを使って見出しをつくってみよう
03:03
SharedTextStyleを使って見出しを効率良くデザインしよう
08:52
テキストパスとアウトライン機能を使ってロゴを作ってみよう
04:53
インスペクタパネル上部の機能を学ぼう
03:44
FillsとBordersを使った画像を作ってみよう
10:26
ShadowsとBlurを使った画像を作ってみよう&SharedStyle
08:26
Viewの機能を知ろう
05:23

【チャレンジ内容】ベクターやスタイリングなど3章で習ったツールを使ってかわいいメインビジュアルを作ってみよう。指定した内容は、ヒントとして活用してください。サイズや余白などが完成版と全く同じでなくてもOKです。
【指定内容】
★アートボード
アートボード名:メインビジュアル
サイズ:1024×486
背景色:42260C
★ピンクのシェイプ
色:F31593
★写真
不透明度:60%
★テキスト
フォント:Cooper Std Black(あれば。なければ似たようなフォントであればOK)
1行目のフォントサイズ:30pt
2行目のフォントサイズ:16pt

【チャレンジ問題】かわいいメインビジュアルを作ってみよう
06:10
+ 基本操作(3)その他の基本操作
10 lectures 56:38
写真を編集してみよう1
03:51
写真を編集してみよう2
02:43
ペンシルとscissorsを使ってみよう
03:20
symbols機能を使って効率良くヘッダーをデザインしてみよう1
07:24
symbols機能を使って効率良くヘッダーをデザインしてみよう2
03:50
整列を使って新着記事デザインを作ってみよう
12:11
CSSの書き出しと画像書き出しのためのスライスをしてみよう
04:20
画像を書き出してみよう
08:01
アートボードをiOSでプレビューできる「Sketch Mirror」の紹介
02:03

【チャレンジ内容】symbolや整列など4章で習ったツールを使って"会場利用までの流れ"デザインを作ってみよう。指定した内容は、ヒントとして活用してください。サイズや余白などが完成版と全く同じでなくてもOKです。

【指定内容】
★アートボード
アートボード名:flow
サイズ:iphone 6
★背景
グラデーション(色:45FF9C→色:61A3FF)
★家アイコン
borderの太さ:4px
★見出しテキスト
フォントサイズ:16pt
フォント:Hiragino Maru Gothic Pro
★数字の円
サイズ:35px × 35px
★数字
色:50DBC3
フォントサイズ:16pt
★flowテキスト枠
borderの太さ:4px
★flowテキスト
フォント:Hiragino Maru Gothic Pro
フォントサイズ:14pt
行間:21pt

【チャレンジ問題】"会場利用までの流れ"デザインを作ってみよう
08:55
+ アイコン・ボタン制作
10 lectures 56:13
ロケーションアイコンを作ってみよう
03:57
三日月のアイコンを作ってみよう
05:07
メガホンのアイコンを作ってみよう
11:47
いろんなフラットデザインのボタンを作ってみよう1
07:35
いろんなフラットデザインのボタンを作ってみよう2
04:55
いろんなフラットデザインのボタンを作ってみよう3
06:42
押したくなるお申し込みボタンを作ろう1
03:00
押したくなるお申し込みボタンを作ろう2
02:24
押したくなるお申し込みボタンを作ろう3
05:12

【チャレンジ内容】5章で習ったアイコンやボタン制作の流れを踏まえて、ダウンロードボタンを作ってみよう。今回は指定内容はなしです。色やサイズ、余白などが完成版と全く同じでなくてもOKです。完成版を見ながらご自身ですべて完成させてみてください。


【チャレンジ問題】ダウンロードボタンを作ってみよう
05:34
+ ダッシュボードページ制作
10 lectures 01:26:38
第1回:シェイプを使ってサイトの枠組みを作ろう
04:04
第2回:アイコンとテキストを使ってロゴを作ろう
06:38
第3回:無料アイコンとテキストでサイドバーを作ろう
12:46
第4回:マスク機能を使ってアカウントを作ろう
06:45
第5回:ガイドや整列を使って効率良く見出しとタブボタンを作ろう
10:24
第6回:symbols機能を使って効率良く目盛りを作ろう
12:46
第7回:ベクターと形状モードを使って波グラフを作ろう
04:35
第8回:シェイプやscissorsを使って円グラフを作ろう
10:17
第9回:symbolsとshared styleを使い分けてデザインしよう
07:34
+ オンラインショップ制作1(トップページ)
12 lectures 01:31:24
第1回:画像の書き出しを前提に環境設定しよう
03:11
第2回:シェイプとガイドを使ってサイトの枠組みを作ろう
04:34
第3回:ヘッダーを作成しよう
04:40
第4回:アイコンを使ってロゴを作ろう
04:51
第5回:ナビゲーションを作成しよう
06:32
第6回:メインビジュアルを作ってみよう1
11:18
第7回:メインビジュアルを作ってみよう2
09:48
第8回:サイドバーの検索窓を作ってみよう
07:28
第9回:サイドバーのカテゴリ一覧を作ってみよう
09:33
第10回:新着商品一覧と人気商品一覧を作ってみよう1
11:50
第11回:新着商品一覧と人気商品一覧を作ってみよう2
07:28
第12回:フッターを作成しよう
10:11
+ オンラインショップ制作2(商品ページ)
9 lectures 52:40
第13回:トップページをもとに商品ページの土台作りをしよう
03:32
第14回:パンくずを作成しよう
06:37
第15回:商品画像マウスホバー時のデザインをしてみよう
04:45
第16回:商品情報を作ってみよう
08:38
第17回:数量入力フォームとカートボタンを作ってみよう
05:53
第18回:商品詳細情報の表を作ってみよう
05:12
第19回:レビューを作ってみよう1
06:39
第20回:レビューを作ってみよう2
03:15
第21回:ページ全体を整えて画像を書き出してみよう
08:09
+ レストランのレスポンシブWebサイト制作1(PC用デザイン)
12 lectures 01:28:17
第1回:シェイプとガイドを使ってサイトの枠組みを作ろう
03:35
第2回:レストランのホームページのメインビジュアルを作ってみよう
07:55
第3回:ロゴが中央にあるナビゲーションを作ってみよう
05:06
第4回:メニューリンク一覧を作ってみよう
09:56
第5回:レストランのアバウトを作ってみよう
06:52
第6回:イベント一覧を作ってみよう
15:59
第7回:スライダー付きのブログリンクを作ってみよう1
07:20
第8回:スライダー付きのブログリンクを作ってみよう2
06:53
第9回:予約フォームを作ってみよう1
08:01
第10回:予約フォームを作ってみよう2
05:32
第11回:埋め込み地図の作り方について
04:45
+ レストランのレスポンシブWebサイト制作2(タブレット・スマホ用デザイン)
8 lectures 55:41
第13回:タブレット用デザインを作ろう1
07:52
第14回:タブレット用デザインを作ろう2
05:35
第15回:タブレット用デザインを作ろう3
08:17
第16回:スマホ用デザインを作ろう1
05:00
第17回:スマホ用デザインを作ろう2
07:59
第18回:スマホ用デザインを作ろう3
03:10
第19回:スマホ用デザインを作ろう4
07:44