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



コーダー目線で理解するIllustratorのアピアランス機能
Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする
Figmaで様々なグラフ・チャートが作れて、詳細な見た目の設定もできるプラグイン「Chart」
ダミーデータ・ダミー画像を登録・生成してくれるFigmaプラグインまとめ
Sketchのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
Figmaのパス周りの基本操作|基本的な描画方法からペンツールと直線ツールの細かい違いまで
Sketchの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
Figmaのテキスト編集周りの基本操作|テキストの追加方法からグラデーション設定や縦書き、アウトライン化
Figmaで画像加工の幅を広げるプラグイン「Filter / effects」
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」