aratana Tech blog

ECテクノロジーで 世界をもっと楽しく もっと笑顔に

デザインツール「Sketch」を導入した話

みなさん、おこんばんにちわ。 アラタナでデザイナーをやっている、岩切(tek)です。

今回は、デザインツールをSketchに移行した経緯から、良かった点、悪かった点などをお伝えしたいと思います。

Sketchを導入した話

これまでの経緯

アラタナでは、立ち上げ時からAdobeFireworksを使用してWEBデザインを制作しておりました。 しかし、2013年のCreativeCloud移行の後からFireworksの開発が停止になるということで、チーム内で色々と悩んだ結果、Photoshopへと移行することになりました。

当時、デザインの流行も細かくリアルに作り込むスキューモフィックから、平坦でシンプルなフラットデザインへ変化している時で、PhotoshopよりもFireworksの方が効率的なんだけどな〜。とモヤモヤしてましたね。

業界内でもFireworksから乗り換えのニュースが色々とでており、その中の一つにSketchが最適なのではないかという話もチラホラでており、試しにダウンロードして使ってみましたが、英語のインターフェイス、操作の違い、情報の少なさなどから、乗り換えよう!とはなりませんでした。

その後チーム内ではPhotoshopでのワークフローが整い、デザイナーもフロントエンドエンジニアも新しいツール導入を考えることはなくなり。。。

そこから時代は進み、今年の2018年3月。sketch ver.49が登場。

なんとデザインツール内で、プロトタイピングの機能が追加になったという。 これは一旦使ってみなければ!ということで、早速ダウンロード。

以前と同じく、英語のインターフェイス。むむ。 しかし人気のツールなので、色々な活用方法やプラグインの紹介など、ネットに情報が山ほどある!

おおー。こりゃあいい感じやで。

当時、プロトタイピングツールもProttやinvision、Adobe XDなど色々と使ったりしてましたが、機能の差もそこまでない。 2週間のお試し期間中で、もうSketchが大好きになりました。

Sketchへの移行

お試し期間終了後、早速ライセンスを購入。 Photoshopでやっていたことを、Sketchで再現してみると驚きましたね。

動作が軽い!
そこまでスペックの高くないPCでもスムーズに動作する!重いとか感じなかった!

便利なプラグインが豊富!
画像を一括で変更したり、デザイン仕様書が簡単につくれたり、様々なプラグインが無料で公開されている!

シンボル、テキストスタイルが超便利!
Sketchの特徴のひとつである、シンボルという機能(パーツなどを複数のアートボード内で使い回せる)が便利すぎて、もうこれがないとツライ感じがします。

ファイルサイズの小さきことよ!
同じデザインをしてもファイルサイズが全く違う!数MB!(※使用する画像などにもよります)

と簡単に上げてもこれだけメリットがありました。

※シンボルやプラグインについては、またの機会にじっくり紹介したいと思います!

デザインに、チームになにが起こったのか

さらに、一番良かったのが、Github連携。

これまでも利用しようと何度もチャレンジしていたデザインのGit管理。 デザインファイルの確認ができない事や、デザインファイルが100MBを超える事もある。ということから、なかなかうまく扱えずにいました。

しかし、Sketchならプラグインなどを使ってGit連携がスムーズに行えます。 差分のチェックもGithubのDiff機能を使って簡単に行えますし、調整した履歴もしっかりと管理できます。

github diff 2up
Github Diff機能 表示サンプル 2-UP

github diff swipe-onion

Gitを使うことによって、デザイナーやフロントエンドエンジニアとのやりとりにも変化が起こりました。
共有したいデザインファイルは、Gitからプルする。さらにデザインの仕様書も一緒にコミットしておけば、説明すら必要なくなり、変更があった場合にもISSUEやコメントと画像ですぐに分かります。
なぜ変更したのかも、履歴がコミット毎に残っているので、記憶より確かなエビデンスとなります。
他にもシンボルやテキストスタイル、様々なプラグインを使用することで、デザインのスピードも正確性も上がりました!

まとめ:導入でのメリット・デメリット

Sketchを導入してのメリット・デメリットは ─。

メリット

・ファイル軽い!
・Git連携も快適!コミュニケーションが取りづらい遠隔のエンジニアにも伝わる!
CSSのclassを想定しながらデザイン制作ができる!
・シンボルを使用した効率的なデザイン制作が可能!

デメリット

・プロトタイプの公開は、今現在ではAdobe XDの方が使いやすい。
・バナーなどの制作はPhotohopの方が向いている。
Photoshopも使うのであれば、Adobe CCとの併用になるので、ランニングコストがちょっと上がる。


という訳で、今回は導入した経緯や結果をお伝えしました。 次回は、Sketchのプラグインや便利な使い方などのTipsを紹介したいと思います。