スマートフォンが世に出て以来、アプリを制作するためにデジタルツールを使うデザイナーが急増し、それに合わせて従来のツールが進化を遂げたり、時代に合った新しいツールが登場したりしています。
中でもBohemian Codingが開発・販売しているSketchは一定の人気と地位を獲得しており、今やUIデザインツールの代名詞となっています。

このLessonでは、Sketchについてまだご存知でない方やこれから使おうと考えている方を対象に、Sketchの概要と基本的な使い方、架空のアプリ画面を例にしたUIデザインの制作方法、エンジニアとのやりとりなどについて解説します。

Sketchとは何か？

はじめに、そもそもSketchとは何なのか、改めておさらいをしておきましょう。

Sketchを開発・販売しているのはオランダのBohemian Coding。しばらくアムステルダムを拠点にしていましたが、現在はデン・ハーグにオフィスがあります。

Sketchの歴史は2010年に遡ります。当時のSketchは現在のようなUIデザインに特化したツールというよりは単なるベクターツールだったようで、価格も55ドルと安価なものでした。しかし基本画面の構成は現バージョンとほとんど変わらず、設計思想は当初から変わっていないことがうかがえます。

Sketchの機能に変化が現れたのは、メジャーアップデートである2.0がリリースされた2012年4月。Web・モバイルアプリのUIデザインを作ることに特化した機能（解像度別のアートボードプリセット、解像度ごとのアセットの書き出しなど）を備えたことにより、一部のデザイナーに注目されるようになりました。

そして1年後の2013年5月、アドビのFireworksの開発終了が発表されたことに端を発し、状況が大きく変わります。

当時はWebやモバイルアプリのUIデザインにFireworksを使用していたデザイナーが少なくなく、移行先のツールとして同じアドビのPhotoshopやIllustratorが挙がりましたが、それらに混ざってSketch（当時のバージョンは2.x系）の名前も挙がったのです。

まだ知名度の低かったSketchも、半額セールの実施や一部のデザイナーが話題に取り上げたことなどから、日本国内でも存在が少しずつ知られることとなりました。

その後、シンボルや書き出しの倍率自由化などが追加されたバージョン3.0、ライセンス形態が変わりいくつかの新機能が追加されたバージョン39を経て、現在はバージョン41.2が最新となっています（執筆時点）。

Sketchのライセンス形態

メジャーアップデートを重ねる中でライセンス形態が変わり、従来はバージョン2.xとバージョン3.xで個別買い切りだったのが、バージョン39以降は『1年間のアップデートライセンスを99ドルで購入する』という、めずらしいライセンス形態となっています。

ライセンスを購入した人は今後1年間はアップデートを受けられますが、1年経ったタイミングでライセンスは失効し、引き続きアップデートを受けるには再度99ドルを支払う必要があります。ここでおもしろいのが1年後にライセンスを購入しなかった場合で、アップデートを受けられなくなる代わりに直前のバージョンのまま使い続けることができます。

なぜSketchが支持されたのか

Sketchが注目されたきっかけはFireworksの開発終了でしたが、移行するだけなら同じアドビのPhotoshopやIllustratorでも十分です。なぜSketchがこれほどまでに支持され、人気を得ることができたのでしょうか。

主な要因として挙げられるのは、

• 買い切りで低価格

• ベクターデータによる制作のため、解像度の変化に強い

• アートボードとページによって画面管理がしやすい

• 動作が軽い

• Webデザイン、UIデザインに特化したツールという立ち位置が明確

といったあたりでしょう。

筆者は、特に低価格であったことがスタートアップや少人数のデザインファームに歓迎され、やがて影響力を持ったそれらの企業を追う格好で利用者が増加していったのではないかと考えています

バージョンが3.0に上がってからは、

• 手元のデバイスでデザインを確認できるSketch Mirror

• 作業効率が格段に向上するシンボル機能

• InVisionやZeplinなどさまざまなサービスとの連携

などが加わり、さらにデザイナーの支持を増やしていきました。

他のデザインツールとの比較

実際にSketchと他のデザインツールの違いがどこにあるのか？ 簡単な比較表をもとに見てみます。

比較対象は、

• Adobe Photoshop

• Adobe Illustrator

• Adobe Experience Design（XD）

• Affinity Designer

の4つです（バージョンはそれぞれ執筆時点の最新バージョン）。

	Sketch	Photoshop	Illustrator	XD	Affinity
価格	11,595円 （1年間アップデート保証）	980円 / 月〜	2180円 / 月〜	無料（※β版）	6000円（買い切り）
アートボード	◯	◯	◯	◯	◯
スタイルの共有・同期	◎	△	△	✕	△
シンボルの共有・同期	◎	◯	◯	◯	△
解像度に応じたアセット書き出し	◯	◯	◎	◯	◯
日本語環境	△	◎	◎	◯	◯
ペンツールの使い勝手	△	◯	◎	△	◯
レイヤー効果	✕	◎	◎	✕	◯
画像加工	✕	◎	◯	✕	◯
画像のマスク	◎	△	△	◎	△
ライブプレビュー	◯	◯	✕	◯	✕
プラグイン	◯	◯	◯	✕	✕
外部サービス連携	◎	◎	✕	✕	✕
パフォーマンス	◯	△	△	◎	◯
他ファイルの互換性	✕	◎	◎	◯	◯
コミュニティの活発さ	◯	◯	◯	✕	✕

評価には多少なりとも筆者の主観が入っていますが、UIデザインの観点から見て大きく外れてはいないと思います。

上記の表からいくつか、Sketchの得意な点・不得意な点を織り交ぜながら詳細を記載します。

アートボード

アートボードはもともと、DTPの観点からIllustratorが搭載した機能ですが、SketchではWeb・アプリの複数画面を簡単に管理するために搭載されました。これに倣うかたちで、Affinity DesignerやXD、Photoshop（CC 2015以降）もアートボードを搭載しており、今ではUIデザインツールにとっては必須機能となっています。

スタイル

塗り・線や書体に適用した個々の設定を「スタイル」として保存することで、複数要素に対する修正を一括で反映できる機能。次に紹介するシンボルと並んでSketchの効率化を象徴する機能で、スタイルの更新がワンクリックで簡単に同期できる、テキストのスタイルがリストでプレビューできるなど、他のツールと比較すると使いやすさ・分かりやすさを重視したものとなっています。

シンボル

スタイルは単純なオブジェクトや書体といった、1つの要素に対するものでしたが、シンボルはグループ化したレイヤーに適用できる機能です。こちらも発祥はIllustratorのシンボルであると推測されます。Photoshopではスマートオブジェクトがほぼ同等の機能と言えます。

Sketchでは作成したシンボルが自動的にシンボル用のアートボードに集約されることで、一覧性・編集性に優れています。

日本語環境

今回比較したツールの中では唯一、SketchのみUIが英語となっています。慣れれば問題はありませんが、最初はなかなか馴染まないかもしれません。

また、タイポグラフィーの面においても縦書きや合成フォントには未対応で日本語環境が整っているとは言えず、PhotoshopやIllustratorなど、日本語独特の設定がちゃんとできるツールと比べると、まだまだ劣っています。

画像加工

画像に対して何かしらの効果やフィルターをかけることに関してはPhotoshop一強と言ってもよいでしょう。ゲームなどのリッチなUI作成にはPhotoshopはまだまだ必須のツールと言えます。

反面、SketchやXDといったWeb・モバイルアプリが主体のツールでは画像加工に関する機能は必要最低限、あるいはそもそも備えていません。もし画像加工が必要な場合にはPhotoshopや、Affinity Designerの会社が提供している「Affinity Photo」を利用する必要があります。

画像のマスク

SketchとXDにはマスク機能とは別に、矩形に画像を読み込んで元画像の比率を維持したまま適切に切り抜いてくれる機能が備わっており、大変便利です。

外部サービス連携

ここ数年のトレンドとして、エンジニアとの橋渡しをするコラボレーションツールやプロトタイプ作成ツールの多くは、Sketch対応を謳っています。次に多いのがPhotoshop対応で、残念ながらIllustratorやAffinity Designerに対応するツールはほとんど見かけません。

パフォーマンス

PhotoshopやIllustratorはレタッチやグラフィックデザインなどのさまざまな用途を想定したツールであり、UIデザインには余分な機能が多すぎます。SketchやXDは必要最低限に絞っているため動作が軽く、ストレス無く扱えます。

こうして比較してみると、表だけでは分からなかった細かな違いが見えてきます。

とはいえ実際の利用環境や外部要因によっても、長所や短所は変わってきますので、ぜひ試用版を通してそれぞれのツールの魅力を比較してみてください。

Sketchをインストールしてみよう

いよいよSketchをインストールしてみましょう。すでにインストール済の方は次節へ移動して大丈夫です。

まずは https://www.sketchapp.com/ にアクセスし、『Download Free Trial』をクリックしてZIPファイルをダウンロードしましょう。ダウンロードしたZIPファイルをダブルクリックして開けば、Sketch.appが展開されます。

最初にSketch.appを開くと警告が出ますが、このまま進みます。

初期状態では起動画面が出ますが、今回は右下にある『OK』か左上にある✕ボタンをクリックして新規ファイルを作成します。

無事、新規ファイルが作成されました。これで前準備は完了です。

なおこの時点では無料試用版のため、30日間の使用が可能です。

ライセンスを登録する

試用期間後も利用するにはライセンス登録が必要です。せっかくなのでライセンスを購入するぞ、と意気込んだ方は以下をご参照ください。

まずは https://www.sketchapp.com で『Buy Now for $99』をクリックし、ライセンスを購入しましょう。登録したメールアドレス宛にライセンスキーが届くので、それをコピーします。

それからSketchのメニューバーから

［Sketch］→［Register…］

をクリックし、

ダイアログウィンドウにライセンスキーをペーストすれば登録完了となります。