2017.2.10 / UI
複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。
作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください????」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。
そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。
AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。
Gitの仕組みを利用して、デザインデータ(.sketchのみ対応。Adobe系も対応予定)に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。
まだ正式リリースはされておらず、現在はPrivate Alphaに招待されたユーザーのみ利用できます。
この記事ではAbstractによってデザイナーがどんな恩恵を受けられるのか、実際に使ってみた感想を交えてご紹介します????
※本記事はElastic Projects, Inc.に執筆許可を頂き、記事内容を確認頂いたうえで公開しています
※執筆時点でのAbstractのバージョンは0.41.3です。正式リリース版とはUIや仕様に変更点が加えられる可能性があります
Abstractを使うにはサインアップとMac Appのインストールが必要ですが、今回は割愛してアプリを起動したところから始めます。
こちらが起動後の画面。プロジェクトはプライベート用か会社用かを選んで作成できます。プライベート用を使えるのは自分1人ですが、会社用はメンバーを招待して複数人で運用できます。上図は会社用のプロジェクトで、右側にメンバーが一覧されています。以降のやりとりが分かりやすいように、2人をデザイナーA、デザイナーBと名前をつけます。
さっそく、デザイナーAに新規プロジェクトを作成してもらいましょう。
続いて、プロジェクトが空の状態なので.sketchファイルを追加します。
以上でmasterブランチが作成されました。
デザイナーBのAbstractでもmasterブランチが確認できます。
masterブランチの詳細に遷移すると
の各タブで画面を切り替えられます。
上図のCommits画面ではコミットログが一覧できているのがわかります。
続いて、デザイナーB側でブランチを切って.sketchファイルを編集してみます。データを編集しようとするとダイアログでブランチを切るか聞かれるので、ブランチ名を入れて作成します。
ブランチを切ると自動的にSketchが立ち上がります。ここではmasterとの違いがわかりやすいように青い円を追加しました。
Abstractから.sketchファイルを開くと、画面下部にAbstractのダイアログが表示されているのが見えます。ファイルを保存するとダイアログが活性化してコミットできるようになりますので、引き続きデザイナーB側でコミットしてみます。
一旦、デザイナーBのブランチはこの状態のままにします。
今度はデザイナーAに戻り、新しくブランチを切ります。
デザイナーAのブランチではアートボードを作成してコミットしました。
これでデザイナーA・Bともにブランチを切り、それぞれ作業をコミットした状態となりました。
従来であれば、ここまでの作業はデザイナーA・Bそれぞれ違うデザインデータで作業して差分は手作業で調整、というシチュエーションでした。Abstractでは発生した差分をmasterにマージすることで解決します。
まずデザイナーAのブランチ(アートボードを追加したもの)をマージします。ブランチにコミットがあれば、画面右上のマージボタンが活性化して押せるようになります。
無事、masterブランチに変更が加えられました。Gitで例えるならmerge + pushが実行されたイメージでしょうか。
デザイナーAのマージにより、デザイナーB側のAbstractには変化が起こります。
右上のマージボタンがアップデートボタンに変化ました。Gitで例えるならpullの実行ですね。
マージする前にmasterブランチが変更された場合、アップデートをしないとマージすることができません。
アップデート後、デザイナーBのブランチ(青い円を追加したもの)がマージできました。
デザイナーAのAbstractで確認すると、それぞれのブランチがちゃんとマージされていることがわかります。これにより、おおもとのデータであるmasterにデザイナーA・Bそれぞれが加えた変更内容が反映されました。
ここから再びブランチを切れば、新しくなったmasterをもとに、また2人が別々の作業ができるというわけです。
複数人で同一のデザインデータを触っていると避けて通れないのがコンフリクトですが、Abstractではデザインデータのコンフリクト問題も解決することができます。
例として、デザイナーAは四角形の色をオレンジ色に、デザイナーBは緑色に変えてそれぞれコミットします。
まず先にデザイナーBのブランチをmasterにマージします。
続いてデザイナーAのブランチをマージしようとするとどうなるか。コンフリクトがない場合は単にアップデートするだけでした。
コンフリクトが発生すると、上図のように「どちらの情報が正しいか」を選択してアップデート、マージができるようになります。
従来であれば作業者同士が変更箇所について会話して整理していたことが、Abstractであればどこがコンフリクトしているか簡単に見つけられるようになります。
他にもAbstractの機能として、マージやアートボード単位での会話機能や、
Sketchのシンボル対応といった点もあります。
また、Slack連携も搭載されているので好きなチャンネルにログを吐き出すことができます。
実際にAbstractを導入するとどのような変化が起こりそうか、少し妄想してみました。
良い方向での変化はこのような感じでしょうか。これまで作業前・作業後にしていた細かなやりとりが減りそうです。また、コミットメッセージによってお互いの作業進捗や状況も正確に知ることもできそうです。
反面、
といった、運用に関する課題は新しく生まれそうです。特にブランチの命名ルールは開発サイドと同じにするのは難しい気がするので、デザイナー側で運用に耐えられるルールを考えるのが必要そうです。
以上、Abstractの使い方を簡単にご紹介しました。「なんだか便利そうかも!」という感触が少しでも伝われば嬉しいです。
私自身、以前から「開発サイドみたいにデザインデータもGitHubみたいなとこで管理したいな〜〜〜」と考えていたので、Abstractはサービス告知後からずっと注目していました。今回実際に使ってみて、α版ながら完成度が高いこと、自分の待ち望んでいたことができるサービスであることに大きな魅力を感じました。
気になるのは料金プランですが、よほど無茶な金額でない場合、積極的に導入していきたいと考えています。クライアントの皆様にもオススメしていきたいですね????
デザインデータの管理で困り果てていた方はぜひ事前登録をお済ませの上、正式リリースを楽しみにお待ちください。
https://www.abstractapp.com/
STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。
そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。
あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。
2017.5.23 / UI
本日、BNN新社さまより「UIデザイナーのためのSketch入門&実践ガイド(吉竹遼 著)」が刊行されました。 Amazonでのご購入はこちら (Kindle版もご用意しています) せっかくですので、執筆を務めさせて頂いた私の視点から、本書についての見どころを紹介させて頂きます。 どんな本か アプリやWebサービスなどのデジタルデザインにおいて、昨今普及が進んでいるSketchについての使い方を網 […]
by Ryo Yoshitake
2017.3.9 / UX
以前の記事にて、なぜ新規事業にユーザーリサーチが必要なのかを主に述べました。しかし、いざ行おうと思ってもどのように行えばいいのか悩まれる方は多いのではないでしょうか。 そこで、今回はUXデザインのリサーチ手法にはどのようなものがあるのかを分類した上で、その中でも利用頻度の高いユーザーインタビューの方法、特に質問設計にフォーカスしてお話したいと思います。 今回の記事では主に下記のポイントについて見て […]
by Masafumi Kawachi
2017.3.1 / Business
新規事業の立ち上げやサービスの改善の際、社内の声だけでなく外部の専門的な意見を求めるために相談できるデザイン会社を探そうとしたことはありますか? STANDARDでは、「新規事業のアイデアはあるけど具体性が見えない」「リリースしたサービスの数字が伸びない」のような悩みをお持ちの企業に対し、UXデザインやUIデザインのサービスをご提供しており、様々な業界の企業様からお話をいただくことが多いのですが、 […]
by Kenichi Suzuki
STANDARDはUXデザインを軸に、新規事業の立ち上げや既存サービスの改善を支援するデザイン会社です。