今から始める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のフォント選択時に分かりやすくプレビューしてくれるプラグイン
Sketchのライブラリアップデートの方法
Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
Figmaのパス周りの基本操作|基本的な描画方法からペンツールと直線ツールの細かい違いまで
Figmaのフレームを一瞬で整列するプラグイン「LilGrid」
Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法
選択オブジェクトに合わせてアートボードを変更するillustratorのスクリプト
Figmaでデザインを作成するときの基本的な操作方法
Figmaで画像加工の幅を広げるプラグイン「Filter / effects」
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする