こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
今回は、動画で学べるSketchの
チュートリアルをまとめた記事になります。
この記事の目次
- 1 Sketchのチュートリアルの前に
- 2 Sketchの動画チュートリアルまとめ
- 2.1 Sketchで利用できる 優れた機能ベスト10
- 2.2 Sketchを用いた ランディングページのデザイン方法
- 2.3 Sketchのシンボルを用いた ボタンシステムの作成方法
- 2.4 Craftを用いた プロトタイプの作成方法
- 2.5 プロデザイナーのように シンボルを使いこなす方法
- 2.6 Sketchで作るグラフデザイン
- 2.7 Sketchで作成するアプリデザイン
- 2.8 フードアプリの デザインチュートリアル
- 2.9 SketchとPrincipleを用いた デザインとアニメーション
- 2.10 SketchでiPhoneX向けの デザインを制作する方法
- 2.11 Sketchで作る NIKEのWebデザイン
- 2.12 NIKEのアプリデザインから学ぶ Sketchの使い方
- 2.13 Sketchを用いてFlexboxの デザインを作成する方法
- 3 まとめ
Sketchのチュートリアルの前に
Sketchといえば、Web・IT業界では
今やスタンダードなWebやアプリの
UIデザインに特化しているツールです。
また、Adobe DXと同じくらい利用される
人気であるUIデザインツールでもあります。
使い方もシンプルなので、初心者の方でも
ある程度のUIデザインを作成できますが、
色んな機能やテクニックを使いこなせれば、
更にレベルの高いデザインを作成できたり、
効率よく制作に取り組めることでしょう。
そこで、この記事ではSketchの使い方が
動画を見て学べるチュートリアルの中から、
おすすめのものをまとめてみました。
Sketchのシンボルやライブラリ等を
まだ使いこなせない状態のような人は、
チュートリアルを参考にしてみましょう。
特に、次のような人は読んでみて下さい。
- 動画で学べるSketchの
チュートリアルが知りたい。 -
UI/UX系のデザインを学びたい。
-
UI/UXデザイナーを目指している。
なお、その他にも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のシンボルを用いた
ボタンシステムの作成方法
| タイトル | 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 |
| 系統 |
iPhoneX向けデザイン |
| 特徴 | ・画面サイズが広く画面上部に凹みがある iPhone X向けのデザインを作成するための 方法が学べる。 |
| その他 |
Sketchで作る
NIKEのWebデザイン
| タイトル | Sketching & Designing a Nike Web Design (Sketch 4 Tutorial) |
| 系統 |
NIKE |
| 特徴 | ・NIKEのWebデザインを通しSketchの 使い方が学べる。 ・手書きのラフ状態からデザインを作成する 様子がわかるので操作方法が覚えやすい。 |
| その他 |
NIKEのアプリデザインから学ぶ
Sketchの使い方
| タイトル | Nike App UI Design・Sketchapp Tutorial / Sketch 4 Tutorial |
| 系統 |
NIKE |
| 特徴 | ・基本的なアプリUIの使い方を学べる。 ・シンプルな初心者向けチュートリアル |
| その他 |
Sketchを用いてFlexboxの
デザインを作成する方法
| タイトル | Flexbox for Sketch App: Stacks Auto Layout Plugin |
| 系統 |
Flexbox |
| 特徴 | ・Sketchでレスポンシブデザインに対応した Flexboxを用いたデザインを作成する方法を 学べる動画。 |
| その他 |
まとめ
以上がSketchの動画 (YouTube) で学べる
チュートリアルのまとめでした。
Adobe IllustratorやPhotoshopと比べて、
シンプルで直感的に使うことができるのが
Sketchというデザインツールになりますが、
作業効率を上げたり難しいデザイン制作には
ある程度の上級者テクニックが必要です。
Sketchの一通りの操作が理解してきたなら、
次はチュートリアルを見て参考にしながら、
スキルアップに是非挑戦してみてみましょう。
なお、その他のSketchの関連記事は、
こちらからチェックしてみて下さい。
