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

「Sketch 3」で、スマートフォンサイトやアプリのデザインからモックアップ制作までを体系的に学べます。
4.4 (22 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.
119 students enrolled
$19
$30
37% off
Take This Course
  • Lectures 37
  • Length 3.5 hours
  • Skill Level Beginner Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 Japanese

Course Description

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

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

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

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

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

What are the requirements?

  • 「Sketch 3」がインストールされたMac(※試用版でも期間内であれば問題ありません)

What am I going to get from this course?

  • Sketch 3 の基本的な操作方法が身につきます
  • スピーディーにスマートフォン用UIデザインができるようになります
  • プログラミングの知識がなくても、ブラウザ上で動かせるプロトタイプ(モックアップ)を制作できるようになります

What is the target audience?

  • 新たなデザインツールとして「Sketch 3」を習得したいWeb・UIデザイナーの方
  • アプリ等のUIデザインをしたいエンジニア、デベロッパーの方
  • プレゼンテーション用のプロトタイプやモックを作りたい方
  • スマートフォンUIの作り方のちょっとしたコツを知りたいノンデザイナーの方

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: セクション 1 : デザインツール「Sketch 3」の特徴を理解し、インストールを行います。
02:33

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

03:54

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

01:04

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

02:13

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

00:46

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

Article

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

Section 2: セクション 2 : Sketch 3 の基本的な操作方法を学習します。
Sketch 3 の操作画面
Preview
03:12
06:31
デザインを行うための「アートボード」の追加とより作業しやすくするためのガイドの表示・カスタマイズについて解説します。
05:44

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

04:58

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

08:38

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

06:34

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

08:14

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

03:55

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

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

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

06:43

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

07:45

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

02:26

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

02:54

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

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

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

Section 4: セクション 4 : Sketch でニュースサイトのスマートフォンUIとモックアップを作成しながら、実践的な使い方を身につけます。
01:39

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

05:38

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

10:24

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

04:51

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

11:10

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

12:46

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

06:26

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

05:36

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

11:17

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

02:54

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

Section 5: セクション 5 : Sketch でチャットアプリのスマートフォンUIとモックアップを作成しながら、実践的な使い方を身につけます。
01:53

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

09:25

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

13:28

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

06:12

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

07:46

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

今井 理紗子, Webデザイナー

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

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

Ready to start learning?
Take This Course