1. TOP
  2. ツール
  3. Sketchの長所・短所を自分なりにまとめてみた

Sketchの長所・短所を自分なりにまとめてみた

筆者が今までSketchを使用するうえで感じてきた、Sketchの長所、短所をざっくりまとめてみたいと思います。
これから導入を考えている方、そもそもSketchって何が出来て、何が出来ないの?という部分が知りたい方に、少しでも参考になれば幸いです。

Sketchの長所

1.学習コストが低い

GoogleスライドやKeynoteでプレゼンスライドを作るぐらいの感覚で、サクサクページデザインを作成することが出来ます。
1日集中して操作方法を勉強すれば、誰でも問題なく使えてしまう、シンプルで分かりやすいUIとなっております。
基本操作を学ぶうえで、筆者はこちらのチュートリアル動画が参考になりました。上記の初級編〜上級編を一通りこなせば、Sketchの基本的な操作は問題なく身につくかと思われます。

2.ひとつのファイル内にアートボード沢山作っても動作が重くならない

筆者は仕事のプロジェクトで、1つのSketchデータ内に40ページ近くのパターンを作成しておりましたが、挙動が重くなるようなことはありませんでした。少なくとも体感ではレスポンス速度に全く変わりはありませんでした。処理負荷などを気にせず、一つのファイル内で複数のページを作成し、一元管理することが可能です。

3.ベクターデータなので解像度を気にせず作業&書き出しできる

Sketch内で作成したデザインやアイコンを、解像度を気にせずに縮小・拡大をかけることができます。
PNGなどで書き出す際も、等倍で書き出すのか、2倍で書き出すのか倍率を設定して簡単に書き出すことが可能です。
Illustratorと同じ作業を手軽にSketch内で行うことができます。

4.シンボル機能でデザインパーツの管理が容易になる

Sketchの肝となる機能。このシンボル機能が今SketchがUIデザインの現場で多く使用されている大きな要因となっていると思います。
アイコンや見出し、リスト、ボタンなどの汎用的なパーツを作成し、どんどんシンボル化していくことで、デザインのパーツ一覧が勝手に出来てしまいます。

ページ作成の際にシンボル化したパーツを呼び出して配置できる為、パーツに変更があった際はシンボル側を変更すれば一括で修正することができます。
さらにシンボルのネスト化が出来るので、アトミックデザインを行ううえでこのうえない仕様になります。

5.シンボルのオーバーライド機能が便利

そうそうこういうことがしたかった!と膝を叩きたくなるような、デザイン作成する側にとって非常にありがたい機能になります。
シンボルを配置したページ側で、シンボル内の要素を変更できる機能です。
つまりどういうことかというと、例えばサムネ&タイトル&タグが含まれたカードのシンボルを作成し、アートボード側に呼び出したとします。
その呼び出した側で、タイトルのテキストを書き換えたり、表示するタグを切り替えたり表示・非表示を設定できる画期的な機能です。
あらかじめシンボル側にパターンとなるレイヤーを仕込んでおき、パーツを呼び出したアートボード側で、どのレイヤーを表示するかを設定できます。

これによってパターン差分を作成するのが非常に楽になりました。
クライアントから「◯◯◯の時のパターンも見たい」という依頼に柔軟に対応することができます。

6.リサイジング機能が素敵

リサイジング機能は、デザイン全体やパーツの縦横比を変更したいときに重宝します。
パーツのまとまりをグループ化したもの、もしくはシンボル化したものの中のレイヤーに対し、位置や横幅の固定or可変設定を行うことで、アートボード上で、レスポンシブなサイズ変化を実現することが出来ます。

デザインは同じなのだけど、場所によってサイズが異なるようなポップアップ枠などのパターンを作成する際に、非常に役立ちました。

7.InVisionとの連携でワークフロー効率化


InVisionというWebサービスと連携することで、プロトタイプの作成、デザインチェックやフロントエンドエンジニアへの共有が非常にスムーズになります。
InVisionが提供している「Craft」というプラグインをSketchにインストールすることで、Sketch内のアートボードをボタン一つでInVisionに同期させることができます。
また、prottのようなプロトタイプを作成できる機能もあり、Sketch内で設定し、InVision側でページ遷移の確認をすることができます。
その他にもデザインに対し吹き出し形式でコメントを残せる機能や、LIVESHAREといった、複数人で同時にデザインについて手書きで書き込んで修正指示や議論を行うことのできる、figmaに変わるような機能もあります。
個人的に特筆したいのは、INSPECT MODEです。

INSPECT MODEとは、デザイン指示書形式でデザインを閲覧できる機能です。それまではプラグインのSketch measureなどを使用し、デザイン指示書を書き出し、フロントエンドエンジニアにデータを渡すというフローをとっていた方も多いと思います。
InVisionの場合、アカウントさえ共有すれば、アートボードをInVisionに同期するのと同時に、フロントエンドエンジニアに「更新したよ」と伝えるだけで、担当者は最新のデザイン指示書をINSPECT MODEで確認できるということになります。
このInVisionを併用することで、これまでのUIデザインワークフローからかなりの効率化が図れると思います。

8.有料サービスを使用すれば、SketchデータをGit管理することも可能

Sketchは一個のファイルの中にすべてのページイメージを作成することが基本となるので、他のスタッフと分業して作業することがわりと困難になります。
今このデータ触るからみんな触らないで!などアナログなやりとりが発生したり、ファイルを分けて複数人が作業した際にどれが最新のデザインになるのかが煩雑なってしまうことが目に見えます。
そこでSketchファイル自体をGit管理してしまおうというWebサービスがあります。その名は「abstract

こちらのWebサービスを利用し、ファイルをGit管理してブランチを切って並行作業を行い、最終的に一つのファイル内にマージすることが出来ます。
SourceTreeのようなGUI上で管理できるので、コンフリクトが起きた際の差分の確認なども、確認がしやすくなっております。
abstractを使用すれば、複数人で同時作業する際も、非常に効率的に行うことが可能です。
abstractに関する詳しい仕様は、こちらの記事が非常に参考になります。

Sketchの短所

1.Mac専用

この記事を書いている2017/08の時点で、SketchはMacOSにしか対応しておりません。Macを使用していない人は、Macマシンを用意するところから導入コストがかかることになります。

2.買い切り…かと思いきや独特の料金形態

Sketchのライセンスは$99で購入することが出来ます。ここで注意したいのが、ライセンスを購入した時点から1年間はアップデートを適用できますが、1年経つとアップデート権限は失効し、引き続きアップデートを受けるには再度$99を支払う必要があります。
ただ、ここで支払わなかったとしても、その時点でのバージョンのまま使い続けることはできます。(アップデートは受けられません)
Sketchのアップデートは頻繁で、随時機能も更新されていくので、アップデートしないまま使用し続けるというのは少し現実的ではないと思います。なので年毎の$99の課金は結局必要になってしまうと思います。

3.テキストレイヤーの状態で、文字のカーニングが調整出来ない

これはグラフィック面ではわりと痛いと感じております。基本的にWebブラウザやOS上のアプリデザインを作成するのに特化した仕様であるため、文字単位で調整する機能が現在ありません。convert to outlineでパスに変換して、手作業で調整することは可能ですが、この手法は効率面であまり現実的ではないと感じます。

4.Photoshopのようなグラフィカルな表現が作れない

基本的なレイヤー効果、グラデーション、パターン、境界線、ドロップシャドウ、インナーシャドウ、ぼかしはありますが、photoshopのようにベベルとエンボス、サテン、光彩などのグラフィカルな効果を作成できる機能はありません。また、フィルタ機能もないため、凝った素材の作成や画像加工などにはsketchはあまり向いておりません。

まとめ

以上が、自分が感じたスケッチの長所・短所ポイントになります。
画像加工には特化していないので、ゲームなどのディテールの作り込みが肝になってくるようなUIデザイン作成には、まだまだPhotoShopの方が強いと感じます。
しかし、WebやアプリのシンプルなUIデザインを行うことが多い方にとっては、確実にメリットの多いツールとなっておりますので、ぜひ導入をオススメします!