Sketchといえば、IT業界ではもはやスタンダードとなっているUIデザインツールです。使い方がシンプルなので、初心者の方でもある程度のデザインを作成することはできますが、様々な機能やテクニックを使いこなすことによって、レベルの高いデザインを作成することができたり、効率よくデザイン制作を行うことができるようになります。
今回は、Sketchの使い方を動画で学べるチュートリアルの中から、特におすすめのものをまとめてみました。シンボルやライブラリを使いこなせていないような人は、ぜひチュートリアルを見て使い方をマスターしてみてください。
INDEX
- Sketchとは
- Sketchの使い方が学べる動画チュートリアル
- Sketchを使ったランディングページのデザイン方法
- Sketchでのシンプルなランディングページのデザイン方法
- シンボルを使ったボタンシステムの作成方法
- Sketchで使える優れた機能ベスト10
- フードアプリのデザインチュートリアル
- Craftを使ったプロトタイプの作成方法
- Sketchで作成するアプリデザイン
- SketchとPrincipleを使ったデザインとアニメーションのチュートリアル
- SketchでiPhone X向けのデザインを制作する方法
- プロデザイナーのようにシンボルを使いこなす方法
- Sketchで作るNIKEのWebデザイン
- Sketchで作るグラフデザイン
- Stacksを使ってFlexboxのデザインを作成する方法
- NIKEのアプリデザインから学ぶSketchの使い方
- まとめ
Sketchとは
Sketchとは、アプリやWebのUIデザインに特化した、UIデザインツールです。2018年2月現在、多くのプロダクトにおいてSketchを使ってデザインが作成されており、Sketchを使いこなすことができれば様々なプロダクトのUIデザインに活用することができます。
Sketchについて詳しく知りたい方は、こちらの記事をご覧ください。
Sketchの使い方が学べる動画チュートリアル
では、Sketchの動画チュートリアルについてご紹介していきたいと思います。
Sketchを使ったランディングページのデザイン方法
Sketchを使ってWebのランディングページをデザインする方法が紹介されているチュートリアルです。簡単なデザインですが、基本的なテクニックがしっかりと紹介されています。
Sketchでのシンプルなランディングページのデザイン方法
こちらもランディングページをデザインする方法が紹介されているチュートリアルです。動画を見ながら自分でも同じように作成してみて、手で使い方を覚えてしまいましょう。
シンボルを使ったボタンシステムの作成方法
ちょっとしたサイズ変更を行う度に調整しないといけないSketchでのボタンデザインですが、シンボルを上手く使いこなすことで効率よく作業を行うことができるようになります。ボタンは多くのデザインで必要な要素なので、ぜひ使い方を覚えておきましょう。
Sketchで使える優れた機能ベスト10
Sketchの優れたポイントが10個紹介されています。少し長めの動画ですが、これからSketchを使う人は絶対に覚えておきたい機能が紹介されているので、使い方を覚えておくと後で助かりますね。
フードアプリのデザインチュートリアル
フードオーダリングアプリのUIデザイン制作を通してSketchの使い方が紹介されているチュートリアルです。
Craftを使ったプロトタイプの作成方法
InVisionが提供するプラグイン「Craft」を使ってプロトタイプを作成する方法が紹介されているチュートリアルです。プラグインを使えば、実質Sketchだけでプロトタイプの作成を行えるようになるので、簡単にプロトタイプが作れるようになります。
Sketchで作成するアプリデザイン
SketchとPrincipleを使ったデザインとアニメーションのチュートリアル
Principleというアニメーションやインタラクションを伴ったデザインツールを組み合わせて、Sketchで制作したデザインに動きを付けていく方法が紹介されているチュートリアルです。近年ではWebデザインやアプリデザインにインタラクションデザインを取り入れることは一般的になりつつあるので、作り方を覚えておけばきっと役立ちます。
SketchでiPhone X向けのデザインを制作する方法
iPhone Xといえば、画面サイズが広く画面上部に凹みがあるディスプレイが特徴のデバイスですが、iPhone X向けのデザインを作成するための方法が紹介されているチュートリアルです。一度ベースを作ってしまえば、後は通常のUIデザインと変わりませんね。
プロデザイナーのようにシンボルを使いこなす方法
シンボルを使わなければ、Sketchの本当の実力を発揮することはできません。このチュートリアルでは、シンボルを使ってボタンデザインを柔軟に行うための方法が紹介されています。
Sketchで作るNIKEのWebデザイン
NIKEのWebデザインを通してSketchの使い方が紹介されているチュートリアルです。手書きのラフの状態からSketchでデザインを作成していく様子が紹介されているので、操作方法まで分かりやすく覚えることができます。
Sketchで作るグラフデザイン
Sketchを使ってグラフを表示するアプリのUIを作成する様子が紹介されているチュートリアルです。グラフをデザインする機会はあまり多くないかもしれませんが、参考にしてください。
Stacksを使ってFlexboxのデザインを作成する方法
Sketch上でレスポンシブデザインに対応したFlexboxを用いたデザインを作成する方法が紹介されているチュートリアルです。レスポンシブデザインによるデザイン制作はもはや一般的になってきているので、ぜひ使い方を覚えてレスポンシブなデザイン制作をSketchで行えるようになってください。
NIKEのアプリデザインから学ぶSketchの使い方
シンプルなチュートリアルですが、基本的なアプリUIの使い方を知ることができるチュートリアルです。Sketchを触ったことのないような初心者向けの内容となっています。
まとめ
PhotoshopやIllustratorと比べてシンプルで直感的に操作することができるSketchですが、作業効率を向上させたかったり難しいデザインを制作する場合には上級テクニックが必要となります。
一通りSketchの使い方が分かってきたら、次はチュートリアルを見てレベルアップを目指してみてください。
本サイトでは、他にもSketchに関する情報をご紹介しているので、もしよければそちらもチェックしてみてください。