Sketchの使い方・スキルが学べる動画チュートリアルまとめ

human-tv

こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。

今回は、動画で学べるSketchの
チュートリアルをまとめた記事になります。

スポンサーリンク

Sketchのチュートリアルの前に

Sketchといえば、Web・IT業界では
今やスタンダードなWebやアプリの
UIデザインに特化しているツールです。

またAdobe DXと同じくらい利用される
人気であるUIデザインツールでもあります。

使い方もシンプルなので、初心者の方でも
ある程度のUIデザインを作成できますが、
色んな機能やテクニックを使いこなせれば
更にレベルの高いデザインを作成できたり、
効率よく制作に取り組めることでしょう。

そこで、この記事ではSketchの使い方が
動画を見て学べるチュートリアルの中から、
特におすすめのものをまとめてみました。

Sketchのシンボルやライブラリ等を
まだ使いこなせない状態のような人は、
チュートリアルを参考にしてみて下さい。

なお、その他にもUIデザインツールは
多数あるので気になる方はこちらの記事を。

スポンサーリンク

Sketchの動画チュートリアル

「Sketchの動画チュートリアル」

① Sketchで利用できる
優れた機能ベスト10

 タイトル  Sketch App Awesomeness
 -Top 10 Feature
 特徴 ・Sketchの優れたポイント10の紹介動画。
・少し動画時間は長め。
・Sketchを使い始めた人は見ておきたい内容
 その他  

② Sketchを用いた
ランディングページのデザイン方法

 タイトル  Design a Website Landing Page in Sketch
 (Tutorial)
 特徴 ・Sketchを使いWebのランディングページを
 デザインする方法が学べる。
・内容は簡単なものだが、基本テクニックが
 きちんと紹介されている。
 その他  

③ Sketchを用いた
ランディングページのデザイン方法 (2)

 タイトル  Sketch App Tutorial – Design a simple a
 landing page in Sketch
 特徴 ・シンプルなランディングページを
 デザインする方法が学べる。
 その他  

④ Sketchのシンボルを用いた
ボタンシステムの作成方法

 タイトル  Creating a Button System with Nested
Symbols on Sketch App
 特徴 ・Sketchでのボタンデザインをシンボルを
 上手く使い効率よく作業できるようになる。
 その他  

⑤ Craftを用いた
プロトタイプの作成方法

 タイトル  Prototype in Sketch using Craft from 
 Invision
 特徴 ・Invisionが提供するプラグインである
 Craftを利用してプロトタイプを作成する
 方法が学べる。
 その他 プラグインを用いれば、実質Sketchのみで
 プロトタイプが作成可能。

⑥ プロデザイナーのように
シンボルを使いこなす方法

 タイトル  USE SKETCH SYMBOLS LIKE A PRO!!
 特徴 ・シンボルを用いてボタンデザインを
 柔軟に行うための方法が学べる。
 その他  

⑦ Sketchで作るグラフデザイン

 タイトル  Working with Graphs in UI Design・
 Sketchapp・Tutorial / Sketch 4 Tutorial
 特徴 ・Sketchを用いてグラフを表示するアプリの
 UIを作成する様子を学べる。
 その他  

⑧ Sketchで作成するアプリデザイン

 タイトル  Design Your Own App in Sketch (Tutorial)
 特徴 ・Sketchで作れるアプリデザインを学べる。
 その他  

⑨ フードアプリの
デザインチュートリアル

 タイトル  Food App UI・Sketchapp Tutorial /
 Sketch 4 Tutorial
 特徴 ・フードオーダリングアプリのUIデザイン
 制作を通してSketchの使い方が学べる。
 その他  

⑩ SketchとPrincipleを用いた
デザインとアニメーション

 タイトル  Book App Design – UI/UX Design and
Animations Tutorial with Sketch & Principle
 特徴 ・Principleというデザインツールと合わせて
 Sketchで作成したデザインに動きをつける
 方法が学べる。
 その他 ・近年はインタラクションデザインを
 Webやアプリデザインに取り入れるのが
 普通になってきているので押さえておきたい
 チュートリアルになります。

⑪ SketchでiPhoneX向けの
デザインを制作する方法

 タイトル  The first UI Design for the iPhone X
 in Sketch・Sketchapp Tutorial / Sketch  Tutorial
 特徴 ・画面サイズが広く画面上部に凹みがある
 iPhone X向けのデザインを作成するための
 方法が学べる。
 その他  

⑫ Sketchで作る
NIKEのWebデザイン

 タイトル  Sketching & Designing a Nike Web Design
 (Sketch 4 Tutorial)
 特徴 ・NIKEのWebデザインを通しSketchの
 使い方が学べる。
・手書きのラフ状態からデザインを作成する
 様子がわかるので操作方法が覚えやすい。
 その他  

⑬ NIKEのアプリデザインから学ぶ
Sketchの使い方

 タイトル  Nike App UI Design・Sketchapp Tutorial /
 Sketch 4 Tutorial
 特徴 ・基本的なアプリUIの使い方を学べる。
・シンプルな初心者向けチュートリアル
 その他  

⑭ Sketchを用いてFlexboxの
デザインを作成する方法

 タイトル  Flexbox for Sketch App: Stacks Auto
 Layout Plugin
 特徴 ・Sketchでレスポンシブデザインに対応した
 Flexboxを用いたデザインを作成する方法を
 学べる動画。
 その他  

まとめ

以上がSketchの動画 (YouTube) で学べる
チュートリアルのまとめでした。

Adobe IllustratorやPhotoshopと比べて
シンプルで直感的に使うことができるのが
Sketchというデザインツールになりますが、
作業効率を上げたり難しいデザイン制作には
ある程度の上級者テクニックが必要です。

Sketchの一通りの操作が理解してきたなら、
次はチュートリアルを見て参考にしながら、
スキルアップに是非挑戦してみてみましょう。

なお、その他のSketchの関連記事は、
こちらからチェックしてみて下さい。

スポンサーリンク

シェアする