【初心者向け】Sketch(スケッチ)の使い方を徹底解説

UIデザインツールとしてメインに使用しているデザイナーも多い「Sketch(スケッチ)」。

IllustratorやPhotoshopよりもシンプルで手軽にUIデザインを作成することができるので、Webデザイナーだけでなく、ディレクターやエンジニアなどの非デザイナーにも愛用されています。

このページでは、「Sketchに興味があるけど使い方がよくわからない」「Sketchってどんなことができるの？」「他のデザインツールと何が違うの？」という方向けに、Sketchの基本的な使い方から、カスタマイズ方法、さまざまな小技などを紹介しています。

初心者の方だけでなく、中級者の人にもぜひ読んでいただければと思います。

※SketchはMacのみの対応となっています。Windowsでは動きませんのでご注意ください。

Sketchとは？基礎知識と特徴

あらためて、Sketchがどういうツールなのかを軽く紹介します。Sketchは、Mac向けに開発されているWebやアプリのUI（ユーザーインターフェイス）デザインに特化したベクターグラフィックソフト。さらには、プレゼンテーションスライドや企画書を作成するのにもオススメです。

その軽い操作性やシンプルなインターフェースからWeb制作者に支持されています。
海外で大ブームし、最近では国内でもSketchを使ってデザインしている方が増えてきたように思います。

とはいえ未だに根強いファンがるのがPhotoshop。

CCになって、最近ではアートボード機能などもついてどんどん便利になってきています。
しかし、多くの機能がついているPhotoshopですが、web制作に最適化されていないところが難点でもあります。

この記事では、UIデザインツールとしてSketchがPhotoshopの機能よりすぐれているなと感じた点を紹介しています。

Sketchでデザインをして気付いたPhotoshopより優れているポイント

Sketchのダウンロード方法

まずは、Sketchの公式サイト（※英語）をひらきます。

Sketch – The digital design toolkit

Sketchは有料ソフトとなっており、料金は＄99 / 年 です。日本円で約1万円ちょっとなので月額に換算すると1000円を切ります。Adobeとかに比べるととてもお得ですね！

Free Trialとして30日間無料で利用できるので、まずはトップページ右上か、中央右の「Free Trial」をクリックしましょう。するとすぐにzipファイルがダンロードされます。

PCにダウンロードが完了したらダブルクリックして解凍、あとはアプリケーションフォルダに移動させるだけですぐに利用できます。

Sketchのインターフェースを理解しよう！

Sketchの魅力を知ったら、いよいよソフトを使ってみましょう。

Sketchを使うときに絶対に使うレイヤーの概念から、それに関するインターフェースの解説をしていきます。

デザインソフトで重要な概念である「レイヤー」とは何か理解し、その管理方法をSketchではどうやっているのかがわかります。

【Sketch初心者必見！】レイヤーリストの解説いろいろ

Sketchを使って作業をしていこう！

実際にデザイン作業でよく使うあの機能、Sketchだとどうやるの？Photoshopだとわかるけど・・。
こんなことがあると思います。

その代表格をそれぞれ記事にしているので順番に進めていきましょう。

マスク機能を理解しよう

上のレイヤーをしたのレイヤーに当てはめる「マスク機能」を説明していきます。

Sketchはベクターのソフトですが、使い方で画像の加工も少しできます。そのやり方をこの記事で解説しています。

Sketch初心者が知っておきたい。画像の切り抜きに使えるマスクの解説

ガイド機能を理解しよう

デザインしたりアイコンを作るときの、レイアウトのルールを設計するときに使うガイドについてです。

デザインするときに絶対に引くべきガイド機能についてです。

マス目のグリッドと、自分で引くガイドの両方を説明します。

今更聞けない「なぜガイドを引くのか？」ということまで含めて詳しく解説していきます。

Sketch初心者が知っておきたい！ガイド機能について

スライスを理解しよう

デザインをしたあと、素材として画像を書き出す作業がありますよね。

そのときのスライス作業を状況のパターンにわけて解説していきます。Sketchでは簡単に画像の書き出しができるので、どういう場合にどういった方法でのスライスが適切かも学んでいきましょう。

Sketch初心者が知っておきたい！画像のスライス機能について

ショートカットキーを理解しよう

作業を効率化するときに1番てっとり早いのがショートカットキーの暗記です。

はじめは遅くても、実際に使いながら作業をしていくとだんだんと指が覚えていきます。

慣れが重要ですが、まずはこの記事に載っているショートカットキーを作業に取り入れていきましょう。
作業が早くなった！と感じるはずです。

無駄な作業時間を節約！Sketchの便利なショートカットまとめ

プラグインを入れて快適カスタマイズしよう

作業するときの「これができたらな」ができるようになるのがプラグイン。

Sketchは機能がシンプルなので足りないと感じることもありますが、そういう機能はプラグインで補いましょう。

この記事では筆者がとくに便利だと思ったプラグインを紹介していきます。

Sketchに入れたい、便利なプラグインまとめ