# 今から始めるUIデザインツールSketch入門 Sketchの特徴と使う理由

URL: https://webrandum.net/sketch-1/
公開日: 2018-04-19
更新日: 2019-01-01
カテゴリー: デザイン
タグ: Sketch
出典: Webrandum（著者: サイトウ マサカズ）

Sketch(スケッチ)はUIデザインツールとして最近爆発的に利用されているmac OS専用のアプリケーションです。

最近は色んなデザインツールが増えてきましたが、Sketchはその中でも比較的早く登場し、アップデートを重ねて進化してきました。

何より軽く、プラグインを導入する事であらゆる制作が楽になったり、デザインから実装がスムーズに行えるという事で話題です。最近も僕はデザインをする時はSketchで行うシーンが増えてきました。

今回はそんなSketchの特徴からインストールまでざっとまとめます。

## Sketchって何？

SketchはオランダのBohemian Codingという会社が開発しているベクターデータのUIデザインツールです。AdobeのFireworksというアプリの開発終了がきっかけで、同じような操作感で利用できるSketchが注目されるようになり、その後徐々にユーザー数を伸ばしてきました。

そんなSketchですが以下のような特徴が挙げられます。

- 動作が軽い

- 書き出しが楽

- 豊富なプラグイン

- 比較的安価

- シンボル機能が強力

- 他サービスとの連携が強力

- ベクターなのであらゆる解像度・デバイスサイズに対応できる

ただし、Sketchはあくまでデザインツールという位置づけなので、Illustratorのようにロゴを作成したりするのには適していませんし、Photoshopのように画像の加工にも適しません。この辺はうまく他のソフトと使い分けていく必要があります。

## Sketchを使う理由

さて、SketchをこれからSketchに関してどんどん書いていくわけですがそもそも何故Sketchを使うのでしょうか？AdobeのPhotoshopやIllustratorでは駄目なのでしょうか？

まずUIデザインを行うにあたってアートボード少数では耐えきれません。アプリなんて数十画面を作らなければならないわけですし、Webに関してもトップから下層までデザインを含めるとアートボードは何画面も必要になってきます。

PhotoshopやIllustratorでデザインをしようとすると重くて重くて仕方ありませんが、Sketchならサクサクですし、先程のSketchの特徴でも挙げました「シンボル機能」が非常に強力です。

Sketchのシンボル機能は、文章や中の部品を変更させたり拡張させることが可能です。

細かいパーツを作り込み、それを組み合わせて柔軟なデザインを作成することに特化しているのもSketchの魅力です。

大量の画面を1つのファイルで作成する事が出来る。そしてシンボル機能によってそれらのデザインの管理が楽。この2つの点から僕はSketchを利用しています。（他にも細かい部分でいいなと思うところはありますが、それはまた後々…）

## Sketchのライセンス

Sketchのライセンスですが以前は完全に買い切りだったのですが、バージョン39以降は1年間のアップデートライセンスを99ドルで購入するというちょっと変わった形になっています。つまり、アップデートをしなければ使い続ける事が可能です。

ただ、新しいバージョンで作成したSketchデータは古いバージョンのSketchでは開けなかったりするので、業務で使用しようと思うと、年間99ドルと考えたほうが良さそうです。

「とりあえず触ってみてそれから考えたい！」という人は公式サイトからインストールすれば1ヶ月は無料で試す事ができるので、まずはそこで試してみる事から初めてみるのがオススメです。

## Sketchのインストール

それでは、早速Sketchをインストールしてみましょう。

[公式サイト](https://www.sketchapp.com)の「Free Trial」から30日間の試用版がダウンロードできますし、ライセンスを購入したい場合は「Get a License」から購入が可能です。

![Sketch ダウンロード](https://webrandum.net/wp/wp-content/uploads/2018/04/sketch_download.png)

ダウンロードしたら解凍して「アプリケーション」フォルダに移動させて起動してみましょう。

下記のようなスタート画面が開くはずです。

![Sketch スタート画面](https://webrandum.net/wp/wp-content/uploads/2018/04/sketch_start.png)

ここからSketchでデザインを行っていくことになりますが、とりあえず起動まで出来たので今回はここまでになります。

次回は簡単な操作について説明していきます。