Abstractをもっと効果的に使うためのあれこれ

2018年4月11日 11:14

今回のテーマは、Sketchのバージョン管理ツール「Abstract」についてです。以前導入を検討していたものの、Sketchのファイル容量が大きいとAbstractで読み込めないというバグがあったようで、リリース直後の導入は一度見送っていました。

しかし、サービスが改善フェーズに入ってくると、同じSketchファイルを複数のデザイナーが修正することも多くなり、バージョン管理や同時作業ができないことの弊害が起こりはじめていました。

そこでAbstractの導入を再検討したところ、Sketchのファイル容量に関わらず読み込めるようになっていたので（ちょっとだけ遅いですが…）、本格的にAbstractを導入することにしました。

Abstractの基本機能については色々なところでまとめられているので、今回は「より効果的にAbstractを使うためのTips」として、我々のチームで導入している運用ルールをいくつかご紹介したいと思います。

GitHubを使った経験のある方にとってはごく当たり前の部分も含まれるかもしれませんが、最近Abstractを導入しはじめたデザイナーの参考になれば幸いです。

---

①Branchはなるべく小さい作業単位でつくろう

例えば、とあるECアプリで「お気に入りボタン」を追加する施策があると仮定します。大きくは「お気に入りボタン機能追加」なのですが、その中で実際に行うデザイン変更作業は、

①アイテム詳細画面にお気に入りボタンを追加
②マイページにお気に入り一覧を追加
③機能追加を知らせるポップアップ

などに分けられます。

その場合、変更作業ごとにBranchをつくるのがおすすめです。

のちのちチームメンバーにレビューをしてもらう際、小さい作業単位でBranchを分けておくと、「どこが変更されたか」「何を確認すれば良いか」が理解しやすいので、レビューする側の負荷が軽減されます。

下記のように施策全体の大きなBranchをつくってしまうと、色々な画面の変更をすべて一緒に確認せねばならず、レビュー時の取りこぼしが発生する可能性が高まります。

また、「お気に入りボタンのデザインだけもっと改善が必要」といった部分的なデザインのブラッシュアップにも、Branchを細かく分けていたほうが対応しやすいというメリットもあります。

---

とはいえ、作業単位で細かくBranchをつくると、「このBranchは何のための改善なのか」というそもそもの大目的が分かりにくくなってしまう可能性があります。

その場合は、Branchの中に更にBranchをつくってツリー構造にし、大きな施策の中に小さな作業単位のBranchをつくるようにすると分かりやすいです。

---

意外と重要なのが、この「命名ルール」です。
Branchを作業単位で細かくつくり、施策ごとにツリー構造で整理したとしても、作業者ごとにBranchの名前の付け方や、Commitの説明文の粒度にバラつきがあると、レビューする側の負荷も高まります。

また、後から履歴を見返した際、「これは何のことを言っているんだっけ？」とならず情報を引き出しやすくなるというメリットもあります。

我々のチームでは、Branchの名前は「施策No」と「施策名」を入れるルールにしています。

Commitでは、「Summarize」に実際に変更・追加したことの概要を入れ、「Optional details」に実際に変更・追加したものの具体的説明を記入するようにしています。

---

Abstractは、ボタンの色・形を変えるなど元々あったオブジェクトの変更は差分が確認しやすいのですが、アートボードをまるごと削除したり、少し座標を移動させたりなど、アートボード全体に対する変更が少し確認しづらいという欠点があります。

下記は、色・形などの変更の差分が確認できるAbstractの画面です。
「変更前（左）」「変更後（右）」が同じ画面で確認できるので、なかなか便利です。

一方、アートボードを削除・変更・追加した場合、「EDITED」「ADDED」といったラベルが表示されるので、変更されたということは分かります。

ただ、このアートボードがどこにあって、どこに追加されたのか、どれくらい移動されたのかなどは、推理をしたり記憶をたどったり、あるいは作業者に直接聞くなどする必要があります。

なので、我々のチームではCommitの「Optional details」に、アートボードを変更した箇所のスクリーンショットをURLで記載するようにしています。

ちなみに、スクリーンショットをURLで発行する際は「Gyazo」を利用しています。今回に限らずSlackなどで共有する際も便利なので、もし利用したことのない方はぜひお試しください。

---

以上、Abstractをより効果的に使うためのTipsでした。
スタートトゥデイテクノロジーズでは、新しいファッションサービスを開発中です。
ファッションを通して世の中をもっと便利にしたいデザイナーを絶賛募集中です！ご応募お待ちしております。

この記事が気に入ったらサポートをしてみませんか？