Webサイト制作においてデザインカンプの制作はPhotoshopで、というデザイナーが現在でも主流な傾向にあります。
最近では、「Sketch」が海外で徐々に人気を集め、日本でもプロジェクト・チーム単位でSketchを採用するケースが増えてきています。（企業単位ではSketchがMac専用であることやデータ受け渡しの問題から見送られることもあるようです）。

Sketchは、オランダのBohemian coding社によって開発されたUIデザイン・Webデザインツールです。料金が$99と安く、月額制のAdobe Creative Cloudよりも長い目で見ると手頃。Photoshop単体と比較すれば1年以上使えば元がとれることになります。

注目を集めるSketchですが、費用が安いだけではなく活用できるポイントはいくつかあります。今回はSketchの優れたところ、PhotoshopやIllustratorとの比較も交えた情報をご紹介します。

SketchがPhotoshopやIllustratorよりも優れているところ

2.png

Sketchが海外でシェアを広げつつあり、日本でも話題になるポイントとして挙げられるのは、SketchがWebにおけるUIデザインに特化し、扱うデータがすべてベクターデータである点です。

Photoshopとの比較

近年Apple社のRetinaディスプレイをはじめ、スマートフォンでもデバイスピクセル比（device-pixel-ratio/1ピクセルを描画するドット数）が1.5〜3.0以上のものが増え、Photoshopでのデザインカンプが100％ディスプレイで再現されることが難しくなりました。

左にアートボードとレイヤー、上部にツール、左に各種プロパティとなっています。感覚的に操作でき、動作は非常に軽快。画面はiPhone6用のアートボードを広げたところです。
1.jpg

Sketchは一度に複数のアートボードを作ることができます（PhotoshopではCreativeCloud 2015からできるようになった）。

Illustratorとの比較

Illustratorは、ベクターデータを扱いますが、完全なWeb対応はしていないため、小数点以下の数値に対してピクセル表現としての若干のブレは免れません。対してSketchはWeb標準で作られたベクターツールですので、画像解像度を意識することなくデザインカンプの制作ができます。

そして、Sketchは最新のUIデザインツールとして、デフォルトでデザインテンプレートが用意されています。Illustratorにはデザインテンプレートがないので、この辺もSketchは「ベクターでのUI制作ツール」として徹底しています。

Sketchは全てベクターデータなので画像解像度に依存しないレスポンシブサイト制作に向いている

このような利点からSketchの活躍が期待できるのは、複雑な図形を扱わないアプリケーションのUIデザインやフラットデザインを取り入れたWeb制作のときでしょう。

デバイスピクセル比1.0が崩れたRetinaやスマートフォンで画像を綺麗に見せようとするとき、デザイナーは都度大きな画像を用意してそれを縮小して表示することを前提にデザインカンプを作っています。

複雑な画像を多用しないデザインであれば、デザイナーはSketchで画像解像度のことをほとんど意識せず、デザインカンプを作ることができます。必要に応じてリサイズしたデザインカンプを書き出すこともできるほか、一度に複数枚の画像を書き出すことも可能。ベクターデータなのでSVGとの相性もいいです。