はじめまして、デザイナーのつちだてです。

去年末までグラフィックデザイナーとして5年ほど紙とWEBに携わってましたが、今年頭に転職し、プロダクトデザインも勉強させてもらっています。デザイン業界に来る前は、音楽プロダクションやライブハウスで4年くらい働いてました。日本酒と音楽・落語・プロレス・野球が好きです。

デザイン業界に入って6年目ですが、音楽業界にいた頃から いや、音響の専門学校に通ってた頃から、フライヤー作成だグッズ製作だなんだとAdobe製品は10年くらい使い続けています。そんなAdobeヘビーユーザーな私ですが、とうとうSketchに触れたので、所感をまとめてみました。

Sketchの方が便利！

01 : データの軽さ
02 : Symbol / Overrides
03 : iOS UIパーツがプリインストールされている
04 : データの書き出しが楽

Adobeの方が便利！

05 : 複雑なパス作業
06 : 画像加工
07 : 文字周りの処理
08 : ショートカットキー設定

ー Sketchの方が便利！ー

01 : データの軽さ

まず最初に触って驚いたのは圧倒的な軽さ！起動の早さもさることながら、データファイルの軽さにも驚きです。

PSD・Sketch両方公開されていたので、こちらのUI Kitをお借りしてデータサイズを比較しました。

1ワークスペースに45ページで psdデータは111.5MB / Sketchデータは63.9MB。思っていた以上の軽さですね。あと、ボード数が増えても挙動が変わることなく、スムーズに作業できるのは嬉しいです。フォトショは画面アップでもちょっと挙動がカクカク気味でしたが、Sketchはまだ余裕な感じで素敵！

ちなみに上記データをAdobe XDで開いてXDdocumentで保存したら、psdデータの方が20.2MBにサイズダウン（Sketchの方は63.5MB）。なぜだ。

02 : Symbol / Overrides

私の指示ミスと言われるとおしまいですが、他のデザイナーに作業を頼んだら「なんかボタンの仕様、微妙に違うな…」そんなことありませんでしたか？それがSymbolとOverridesでだいぶスムーズになる嬉しみ。

フォトショだとスマートオブジェクトやリンクが近いのかな…それでも個々に変更できないし、データが重くなるしであまり活用していなかったので、Symbol機能には頭が上がらないです。「グループ名 / シンボル名」で、パーツがグループ化されるので、パーツの管理が楽になるのもありがたいですね！

入れ子しすぎると逆にわかりにくくなりそうなので、どこまでOverridesで変更させるか考え所かな、と思いました。Sketch公式が出しているUI Kitを見ると、Overrides用のsymbolがズラっと並んでいて、かなり考えられた構成だとわかります。

03 : iOS UIパーツがプリインストールされている

フォトショやXDではAppleのHPからインストールして、開いてコピーして…ですが、Sketchの場合はもともとプリインストールされているため、すぐにインサートできるのですごい便利です。デバイスごとのWidth可変がしやすいようなデータになっているので、調整がしやすいのもありがたいです。

04 : データの書き出しが楽

複数サイズの書き出しが本当に楽チン！フォトショのアセットも便利でしたが、サイズ違いの書き出しや画像フォーマットはレイヤー名に記載する必要が（確か）あったので、手間だなーと思った気がします。

ー Adobeの方が便利！ー

05 : 複雑なパス作業

これはさすがに圧倒的なイラレの勝利。Sketchにも結合などの基本的な機能はありますがイラレのパスファインダーを多用してアイコンを作成している身としては作業スピードが全然違ってきます。

06 : 画像加工

Sketchでの画像加工は色相・彩度・明るさ・コントラストの基本的な調整のみ。あとブラーが3種類使える感じですね。その加工も画像の一部に適用とかはできなさそうなので、本格的な画像加工はフォトショやlightroomが必要かなーと思います。

07 : 文字周りの処理

Sketchだと縦書きや文字個別のベースラインシフトができないのが不便。UIデザインする上では使うことはほとんどないですけど…

08 : ショートカットキー設定

イラレ・フォトショ間で微妙に違うのもイラっとくるのに、Sketchではさらに違うのでよく混乱します。イラレ・フォトショはアプリケーション内でショートカットを変更できる機能がありますがSketchにはない…

ので、ショートカットキーを変更するにはシステム環境設定のキーボード項目での設定が必要になります。

1. システム環境設定 → キーボード → ショートカット
2. 左のメニューから「アプリケーション」選択
3. 「＋」を押し、アプリケーション：Sketch 選択
4. メニュータイトルには「Sketchの正確なメニュー名」
5. 設定したいショートカットを入力

私はよく使う［ ルーラー / テキストの文字寄せ / 最前背面配置 ］はイラレのショートカットに寄せました。手間なのでSketch内で切り替えできるといいのになー

まとめ

みんな違ってみんな良い…だと怒られると思いますが、本当その通りで現時点でこのツール一択！とは言い切れないです。私の所感としては、

UIデザイン：Sketch / Adobe XD / Photoshop
ベクター素材：Illustrator / Sketch（簡単なもの）
グラフィックデザイン：Photoshop / Illustrator
写真加工：Photoshop

 こんな感じの使い分けなのかな、と思います。

作業によって使うツールを変えられるのがベストですが、作業環境や周りの人との互換性、金銭面を考えるとそうも言ってられないので、自分の環境にあったツールが選べるといいですよね。