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

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をインストールしてみましょう。
公式サイトの「Free Trial」から30日間の試用版がダウンロードできますし、ライセンスを購入したい場合は「Get a License」から購入が可能です。

ダウンロードしたら解凍して「アプリケーション」フォルダに移動させて起動してみましょう。
下記のようなスタート画面が開くはずです。

ここからSketchでデザインを行っていくことになりますが、とりあえず起動まで出来たので今回はここまでになります。
次回は簡単な操作について説明していきます。

Figmaでモックアップをすばやく作成する「Mockuuups Studio」
Figmaでデザインを作成するときの基本的な操作方法
Figmaでチーム共有用のメモや注釈素材が使える「Annotation Kit 2.0」
iPhoneのスクリーンショットをIllustratorにペーストすると、色がおかしくなってしまう現象の解決方法
Illustratorで画像内の複数箇所を切り抜いて書き出す方法
Figmaでデザインデータ上の画像を圧縮してファイルサイズを軽くする「Downsize」
Sketchの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
Illustratorの「モザイクオブジェクト」機能で、画像にモザイクをかける方法(「ラスタライズ」を使った方法も追記)
Sketchでデザインを作成するときの基本的な操作方法
Illustratorで文字をオブジェクトの上下中央揃えにする2つの方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
Macでアプリごとに音量を調節できるアプリ「Background Music」
Macのターミナルでパスワード付きのZIPファイルを作成する方法
MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる
SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる
iPhoneでタッチが一切効かなくなった場合に強制再起動する方法