はじめに

こんにちは！熊野です。
みなさんの会社では何のデザインツールをお使いでしょうか？ツールは道具です。「何をつくるのか」で使うツールは様々とは思いますが、N’s Createsではデザイナー全員がSketchをこよなく愛し、日々使っています。

今回はWebサービスやUIデザインをアウトプットするにあたって、弊社がなぜSketchを利用し続けるのかをレポートしていきたいと思います！

Photoshop でデザインしていた時期の苦労

もともとPhotoshopはAdobeが写真加工ツール用として開発しているという背景があり、WebサービスやUIを作るにあたっては不向きと感じる事が多かったです。オブジェクトを増やす毎に入り乱れるレイヤー、そして本当に重く決して効率的に作業しているとは言えない状況でした。入社してSketchに全面移行して、使いやすさ・軽さには本当に驚いた次第です。

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

AdobeXDとの違い

プラグインが圧倒的に多い

Sketchは運用の仕組みそのものを変えるような良質なプラグインが多いです。例えば、後で取り上げるSketch Measureやテキストコマンドであらゆる操作を効率化するRunnerなど、圧倒的に作業スピードが上がるようなプラグインが多いです。

XDはGit管理ができない

こちらも後に記載しますが、弊社ではAbstractでバージョン管理を行っています。この機能もデザインデータの手戻りを無くしたりデザイナー同士でコミュニケーションを取る上で欠かせないツールなのも、XDに乗り換えれない大きな理由です。

Figmaとの違い

Sketchには大きく育ったコミュニティがあり、わからない事があれば世界中のユーザーが助けてくれます。Figmaはブラウザベースのソフトウェアで、Google Chromeさえあればどの環境でもアクセスできる大変優秀なツールなのですが、「わからない時に誰かが助けてくれる」という事は最大の利点なのではないでしょうか？

データの共有方法

弊社ではデザインデータをAbstractというデザインのGithubのようなシステムを使って共有しています。（Abstractの詳細についてはまた記事を書きたいと思います。）Abstractを使うとデザイナー同士のレビューや意見交換が容易に行えるのと、差分を管理できるので大変便利です。

エンジニアさんとの連携が楽

Sketch Measureというオブジェクト間のマージンやスタイルを計測するプラグインを入れてエンジニアさんと連携をしています。設計書のようなものを自動で生成してくれるので、エンジニアさんとの意思疎通がやりやすく、手戻りが少なくなりました。XDにもデザインスペックという機能が実装されたのですが、2019年5月現在まだまだ改良の余地ありで、実務的にはSketch Measureに軍配があがっていると思います。

各メンバーに聞いたSketchのここが好き！

さて、ここで弊社デザイナー陣になぜSketchを愛するのか伺ってみました。

チーフデザイナー:U

UIデザインにおいて構造化の考えははとても大切。
Sketchやシステムデザインの構造化の考えは人生に通じるものがある。

デザイナー / フロントエンドエンジニア:S

専門学校時代からインターンとしてSketchを使っていましたが、もうPhotoshopには戻れません。
デザイナーとコーディングの連携もとてもスムーズなので、今後も使っていきたいと思います。

逆にここを改善してほしい！

Sketchは全て英語

これは賛否両論がありそうですが、Sketchは全て英語です。英語に嫌悪感を抱かれる方は少し辛いかもしれません。

まとめ

世間ではXD vs Sketch！そして最近はFigmaだ！なんて囁かれていますが、結局のところツールは道具でしかないです。色んな会社の状況・ツールのアップデートに左右もされますが、Sketchの自由な制約に縛られない開発ロジックには非常に共感ができ、これからも良いアウトプットを出す「道具」としてメンバー全員で利用していきたいと思います。

Symbol 、Style、命名則 については別記事にて書きたいと思います！

kuma

何歳になっても好奇心旺盛なデザイナーです！兵庫県在中。日々仕事を楽しみながら生きています。