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との相性もいいです。

繊細な画像作成ではPhotoshopの方が優れている

Sketchでは、ビットマップの加工能力がPhotoshopと比較すると低いです。テキストの細かいアンチエイリアスの設定ができないため、ロゴやタイトルなどテキストをメインとする画像を作ることは不向き。トーンカーブやレベル補正など、色調補正の機能もないので、繊細な画像作成には向いていないでしょう。

検討したい方に / 無料で体験版が使える

Sketchを導入したい、検討したいという方には、30日間限定の試用版がダウンロードできます。

https://www.sketchapp.com/

現在Sketchのバージョンは3ですが、バージョン4から1年間の無償アップグレードに1ライセンス$99が必要になることがBoheman Coding社からアナウンスされています。
3.png

つまり、1から3まで無料でバージョンアップしていたのですが、バージョン4以降は1年間の無償更新期間を確保するために$99ドルを支払う必要があります。

Adobe CCのようなサブスクリプション制（一定期間使える権利を買う）ではないため、利用者にバージョンアップする意思がなければ現状のバージョンを使い続けることができます。

しばらくはSketch3のマイナーアップデートが続き、Sketch4のリリースの予定はまだ立っていないようです。購入予定者は公式アナウンスを見守りましょう。

まとめ

完全Web対応のツールFireworksがCS6で開発終了になりましたが、Sketchはその時期に頭角を表しています。

今後のWebデザイン・アプリデザインの動向を見ていると、精細なフォトレタッチ・ツールがすぐに不要になることはないと思いますが、SketchのようなシンプルなUIデザイン・Webデザインツールは勢いを感じます。

デザイナーの求められるスキルが多様化する中で、仕事道具でもあるツール選びも含めて柔軟な姿勢が今後重要になっていくのかもしれません。