今から始める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でAdobe XDやSketchのデータを開く方法
Figmaでサクッとワイヤーフレームが作れる素材検索プラグイン「Wireframe」
Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
Figmaでデザインデータを整理するときに役立つプラグイン「Clean Document」
Abstractで「Failed to open “○○”」「An unexpected problem occurred, try again?」と表示されるときに確認すること
Figmaの画像書き出し方法
Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法
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つのシートを横並びに表示する
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う