こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
今回は、動画で学べるSketchの
チュートリアルをまとめた記事になります。
この記事の目次
- 1 Sketchのチュートリアルの前に
- 2 Sketchの動画チュートリアル
- 2.1 ① Sketchで利用できる 優れた機能ベスト10
- 2.2 ② Sketchを用いた ランディングページのデザイン方法
- 2.3 ③ Sketchを用いた ランディングページのデザイン方法 (2)
- 2.4 ④ Sketchのシンボルを用いた ボタンシステムの作成方法
- 2.5 ⑤ Craftを用いた プロトタイプの作成方法
- 2.6 ⑥ プロデザイナーのように シンボルを使いこなす方法
- 2.7 ⑦ Sketchで作るグラフデザイン
- 2.8 ⑧ Sketchで作成するアプリデザイン
- 2.9 ⑨ フードアプリの デザインチュートリアル
- 2.10 ⑩ SketchとPrincipleを用いた デザインとアニメーション
- 2.11 ⑪ SketchでiPhoneX向けの デザインを制作する方法
- 2.12 ⑫ Sketchで作る NIKEのWebデザイン
- 2.13 ⑬ NIKEのアプリデザインから学ぶ Sketchの使い方
- 2.14 ⑭ Sketchを用いてFlexboxの デザインを作成する方法
- 3 まとめ
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の関連記事は、
こちらからチェックしてみて下さい。
