Sketch を使うデザイナーにおすすめな Abstract

こんにちは。デザイナーの大村です。 Adobe XD CC や InVision Studio が気になりつつも Sketch をバージョン管理できる、設計チームで一緒に作業するためのプラットフォーム Abstract (0.63.5) を使ってみたところとても便利だなと思ったので紹介します。

Abstract ってどんなもの？

  • デザインデータのバージョン管理ができる
  • 最新データがどれなのかバージョン管理で透明化できる
  • 複数人での並行作業を簡単に一本化できる
  • ファイルを開くことなくプロジェクトの変更点を確認できる

imaeg

https://www.goabstract.com/月額費用：Business $16.67　Starter $10

メリット

  • バージョン管理された過去データでもローカルにも落とせる
  • 過去に遡れるのでパーツがなぜ生まれたかコメントを流れで追うことができ、理解しやすい
  • Slack 連携で誰が現在何やってるか〝見える化〟できる
  • Abstract で管理している Sketch ファイルは Contributor（課金利用している人） なら誰でも編集して Commit することもできる
  • コメントのやりとりでデザインレビューできる（Viewer で招待すれば誰でも無料で参加可能）
  • Business であれば無制限にバージョン管理ができる(Starter は250GBまで)

デメリット

  • Sketch 以外のファイルは管理できない

コミニュケーションロスが減ってストレスも軽減

「作って」→「どっかあげて」→「見てねって何かでお知らせして」→「お返事もらって」→「読んで理解して」→「修正して」→「修正したよってお知らせして」→「見てもらう」

みたいなフローが

「Branch 切って」→「作って」→「見てねってお知らせして」→「お返事もらって」→「お返事見ながら修正して」→「Commit ＝お知らせして」→「見てもらう」

となります。

この「どっかあげて」と言うのが重要で、弊社では Share Point (チームによっては社内の共有サーバや InVisionや Prott ) に格納してその場所をお知らせしてレビューのやりとりを行うのですが、人為的な作業なのであげ忘れや上げ漏れがあって「上がってないよ！」「反映されてないよ！」というタイムロスが無くなるのは大きく違うと思います。

またバージョン管理しているので「このデザインってどこの関連だっけ～？」とデザインデータのファイル管理も減り、少し楽になりました。（配置する画像は Photoshop と Illustrator なのでそのデータは別で管理します。）

一番嬉しいことはひとりで悩む時間が減ったこと。

「こんなデザイン思いついたけど、解決方法にマッチしてないかも。でもこう考えるとマッチしてるのかも・・・（悩）とっておこうか捨てようか。」と悩んだ時に、考えた事をそのまま Commit して Comment でメンバーに聞けば、「解決にならないならいらないよ」とか「こういう考え方するとそのデザインで合ってると思う」とか、客観的な意見がその時点で聞けるのでデザインを作りながらひとりで悩む時間が減りました。

コメントはこんな感じで書けます。

@でメンションする（される）と右上のベルとアプリアイコンにバッジがついてお知らせされます。

image

Slack 連携して「見える化」

Slack をプロジェクトチームで使ってる場合、連携して Commit したことが「見える化」できるので流れが見えて安心です。 Commit の粒度を一定にして自分以外の人も分かりやすくできるとレビューが捗りそうです。

image

Slack への連携方法

ホームの Organization Setting の Integrations から可能です。 ※Organization Setting は Web からの設定になります。

お知らせしたい Active Project を選択

image

Organization Setting の Integrations から通知したい Channel を選択

image

デザイン作業とバージョン管理の親和性

デザインを進める工程で、選択が間違っていたことに気がついても、保管されている Sketch データを開いて過去のデザインデータを拾うことができるので、「後で使うかもしれないから・・」といらないデータを取っておく必要もなく、取捨選択しながらとにかく進めることができます。 別ページや別ファイルでゴミ（いつか使うかもしれない）データを残しておかなくても良いので、いつでも整理されていて見やすく、第三者からレビューもしやすいです。 また、確定しているデザインは常に Master にあるので改修中のデザインと分けて見ることができ安心して他者に展開できます。

Master にあるデータは一覧で確認できる

Sketch ファイルを開くことなくプレビューで確認できるので、パソコンの負荷も少なく時短が期待できます。フットワークが軽くなるのも一つの魅力です。

image

Commit 単位で変更したもの変更してないものが一目でわかる

こんな風に見れるので、 Commit の単位は「なぜその変更をしたのか」変更の目的単位にする必要があります。

image

複数人での並行作業を簡単に一本化できる

自分以外の人が編集した差分データを自分の Branch に取り込んでマスターに Merge することができます。複数人で案を出して部分でいいとこ取りも可能です。また、パーツの過不足や誤字脱字のようなちょとした修正ならフォローし合ってデザインデータの間違えを正していけそうです。

image

さいごに

INVITE で招待メールを送れば、誰でもビューアーになってコメントが書けるので、Design レビューのツールとしても便利です。デザインはユーザーとの接点なので企画側、開発側、ビジネス側全ての観点からレビューを頂いて、届けたい人に届くデザインを作りたいと思っています。