今から始める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でデザインを行っていくことになりますが、とりあえず起動まで出来たので今回はここまでになります。
次回は簡単な操作について説明していきます。

Sketchでデザインを作成するときの基本的な操作方法
Figmaでデザインを作成するときの基本的な操作方法
Figmaのバージョン管理機能を使って、デザインの変更点を管理する
Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
FigmaのAuto Layout入門|繰り返しのレイアウトやコンテンツに応じて横幅可変するボタンをラクに作る
Figmaのフレームを一瞬で整列するプラグイン「LilGrid」
Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法
Figmaでロゴやアイコンなどのビットマップ画像をベクターデータにトレースするプラグイン「Image tracer」
Figmaで様々なグラフ・チャートが作れて、詳細な見た目の設定もできるプラグイン「Chart」
Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)
Obsidianを使った「自己流PKM」で行う知識トレーニング
テキストエディタ・ノートアプリ関連のショートカットキーをKeyboard Maestroで統一する
Path Finderを使ってキーボードだけでファイル操作する方法(応用編)
macOSのコマンドパレット比較!SpotlightとAlfred、Raycastどれを使えばいい?
1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う