Sketch 3 入門 〜アプリやWebデザインに便利!世界で人気のデザインツール〜
4.3 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
161 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Sketch 3 入門 〜アプリやWebデザインに便利!世界で人気のデザインツール〜 to your Wishlist.

Add to Wishlist

Sketch 3 入門 〜アプリやWebデザインに便利!世界で人気のデザインツール〜

「Sketch 3」で、スマートフォンサイトやアプリのデザインからモックアップ制作までを体系的に学べます。
4.3 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
161 students enrolled
Created by 今井 理紗子
Last updated 5/2016
Japanese
Current price: $10 Original price: $30 Discount: 67% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Article
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Sketch 3 の基本的な操作方法が身につきます
  • スピーディーにスマートフォン用UIデザインができるようになります
  • プログラミングの知識がなくても、ブラウザ上で動かせるプロトタイプ(モックアップ)を制作できるようになります
View Curriculum
Requirements
  • 「Sketch 3」がインストールされたMac(※試用版でも期間内であれば問題ありません)
Description

日本でも注目されてきたベクターデザインツール「Sketch 3」の基本的な使い方と実践的なプロトタイプ作成についてご紹介します。

セクション1では、Sketch の特徴と有用性について解説しています。

セクション2、3では、Sketch のインストール方法からUIの構成、文字や画像の編集方法、画像の書き出しなどの基本的な操作をデモを交えてご紹介します。

セクション4、5では、スマートフォン用Webサイトやアプリケーションのデザインを行いつつ、UIデザインからプロトタイプ作成までを身につけます。サンプルSketch ファイルはダウンロードが可能です。ぜひご活用ください。

※本講座ビデオの撮影は、 Ver.3.6.1(Ver. 3.7.xの新機能対応済み) で行っています。

Who is the target audience?
  • 新たなデザインツールとして「Sketch 3」を習得したいWeb・UIデザイナーの方
  • アプリ等のUIデザインをしたいエンジニア、デベロッパーの方
  • プレゼンテーション用のプロトタイプやモックを作りたい方
  • スマートフォンUIの作り方のちょっとしたコツを知りたいノンデザイナーの方
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 37 Lectures Collapse All 37 Lectures 03:33:26
+
セクション 1 : デザインツール「Sketch 3」の特徴を理解し、インストールを行います。
6 Lectures 10:42

本講座の簡単な説明と、Sketch 3 の概要、おすすめするポイント、導入の際に注意すべきポイントをご紹介します。

Preview 02:33

Sketch 3 の強みを活かしたデザインワークの特徴と、Webディレクター向けのPDF書き出し機能活用法をご紹介します。

Sketch 3 が活用できるデザインワークについて
03:54

本講座で使用するSketch 3 のソフトウェアのダウンロードとインストールを行います。

Sketch 3 のインストール
01:04

本コースで使用するプラグインをインストールしながら、プラグインの追加方法をご紹介します。

プラグインのインストール方法
02:13

通常のプラグインインストールよりも、より便利にプラグインを扱えるアプリケーション「Sketch Toolbox」の使い方をご紹介します。

プラグインのインストールと管理に便利な「Sketch Toolbox」の使い方
00:46

本講座で使用するプラグインの一覧です。セクション2に移る前にインストールしてください。

Preview 00:12
+
セクション 2 : Sketch 3 の基本的な操作方法を学習します。
9 Lectures 56:03

デザインを行うための「アートボード」の追加とより作業しやすくするためのガイドの表示・カスタマイズについて解説します。
アートボードの作成(ルーラー、レイアウト、グリッドの設定方法)
06:31

「Shape(図形)」の追加とカスタマイズについて解説します。

シェイプ(図形)の挿入
05:44

JPG画像などの追加方法と画像補正の使い方について解説します。

イメージ(画像)の挿入と補正
04:58

テキストの追加と編集、ドロップシャドウなどの装飾と自動の文字詰めについて解説します。

テキストの編集(フォント、装飾、文字組の解説)
08:38

Shapeより自由度の高い図形や線を扱うためのパスの結合やアウトライン化、ビットマップ化、Illustratorからのインポートについて解説します。

Path(パス/ベクター)の編集
06:34

図形やテキストなどのオブジェクトにドロップシャドウやぼかしなどの効果をかけるためのウインドウ「インスペクター」の機能をご紹介します。

オブジェクトの見映えを編集する(インスペクターの機能紹介)
08:14

配色の管理に欠かせないパレットの使い方とプラグイン「Sketch Palettes」を使った拡張について解説します。

カラーパレットの編集
03:55

Sketch ファイルから画像を保存する方法を解説します。(アートボード全体、パーツごとの画像化、複数画像の一括書き出し)
画像の書き出し
08:17
+
セクション 3 : Web・UIデザインに便利な機能を学習します
7 Lectures 34:04

オブジェクトの色や線、効果を使いまわせる機能「Style」の使い方を解説します。

Preview 06:01

「Symbol」機能を使って、ヘッダーやフッターをパーツとして管理し、デザインに使い回す方法を解説します。また、Symbol機能を活用したボタンの作成・管理についても触れています。

シンボルの作成方法(デザインをパーツ単位で管理する)
06:43

画像やオブジェクトを切り抜きできる「Mask(マスク)」機能を理解しながら、両端がフェードしている画像を作ってみます。

マスクの作成方法
07:45

頻繁に使うパーツやページデザインは「Template(テンプレート)」として保存し、呼び出すことができます。

もっと使いやすく01. テンプレートの作成方法(よく使うパーツを1ファイルで管理する)
02:26

オブジェクトのデフォルト・スタイルを変更することで、よりスピーディーかつストレスのない作業につながります。

もっと使いやすく02. オブジェクト等のデフォルト設定を変更
02:54

コーディングに役立つ機能(CSSのコピー、Sketch Measure の活用)
07:30

デザインに利用できるアイコンやその他画像、UIデザインの参考になるUI Kitを配布している「Sketch App Sources」をご紹介します。

素材ポータルサイト「Sketch App Sources」の紹介
00:45
+
セクション 4 : Sketch でニュースサイトのスマートフォンUIとモックアップを作成しながら、実践的な使い方を身につけます。
10 Lectures 01:12:41

本セクションで作成するメディアサイトのスマートフォンUIとプロトタイピングツール「Prott」について解説します。

本セクションでの成果物(ニュースサイトのUIデザイン)の紹介
01:39

スマートフォン向けUIを作るためのアートボードの作成方法、よりスムーズに作業するためのガイドの引き方をご紹介します。

スマートフォン用UIのアートボードを作成する
05:38

共通パーツ「ヘッダー」を作成しながら、アイコンフォントの活用法を学びます。最後に、シンボル機能を使って、複数ページで使いまわせるようにします。

Preview 10:24

共通パーツ「フッター」を作成しながら、プラグイン「Sketch Dynamic Button 3.5」を使ってテキストの幅にぴったりのボタンを作る方法を解説します。

フッターを作成する 01. ボタンの作成
04:51

共通パーツ「フッター」を作りながら、「Make Grid」機能でパーツを複製する方法を学びます。

フッターを作成する 02. Make Grid でパーツを複製する
11:10

トップページのパーツにプラグイン「Content Generator」でダミー画像・テキストを追加し、よりリアリティーのあるデザインを作成します。

トップページを作成する
12:46

シンボルや「Content Generator」を活用しながら、効率の良い派生ページの作り方を学びます。

ニュース記事ページを作成する
06:26

ヘッダーの虫眼鏡アイコンから遷移する「検索ウインドウ」を作成していきます。

検索ウインドウを作成する
05:36

プロトタイプを作成できる国産Webサービス「Prott」と公式プラグインを使って、ブラウザ上で確認できるモックアップを作成します。

プロトタイピングツール「Prott」を使って、ブラウザ上で動かせるモックアップを作成する
11:17

Sketch公式iOSアプリ「Sketch Mirror」を使って、手軽にデザインをiPhone実機で検証する方法をご紹介します。

iOSアプリ「Sketch Mirror」でデザインをリアルタイムで実機確認する
02:54
+
セクション 5 : Sketch でチャットアプリのスマートフォンUIとモックアップを作成しながら、実践的な使い方を身につけます。
5 Lectures 38:44

本セクションで作成するチャットアプリのUIとプロトタイピングツール「InVision」について解説します。

本セクションでの成果物(チャットアプリのUIデザイン)の紹介
01:53

共通パーツ「ヘッダー」と「フッター」を作りながら、シンボルとインスペクター、アイコンフォント(シンボルフォント)の使い方を振り返ります。

ヘッダーとフッターを作成する
09:25

写真やテクスチャなどの画像を追加して、よりリッチなデザインを実現します。

リッチなデザインのチャット画面を作成する
13:28

チャットアプリの連絡先一覧画面を作りながら、プラグイン「Content Generator」 でダミーのアイコン画像と名前を追加します。

ダミーデータを載せた連絡先一覧画面を作成する
06:12

プロトタイプを作成できるWebサービス「InVision」を利用して、ブラウザ上で動かせるモックアップを作成し、協業で欠かせないデザインレビューに使える機能をご紹介します。

Preview 07:46
About the Instructor
今井 理紗子
4.3 Average rating
30 Reviews
161 Students
1 Course
Webデザイナー

2014年より名古屋のWeb制作会社「有限会社アップルップル」にWebデザイナーとして勤務。受託案件のWebサイトや自社製品販促ツールのデザインに携わる。

同年10月から「Sketch 3」を使い始め、勉強会の主催やイベントへの登壇を行っています。Adobe Photoshop、Illustratorを併用したより実践的なWebデザインツールの使い方を日々アウトプットしています。