LINEのUIデザイナーはどのように協業しているか

2019年9月6日 14:38

こんにちは、UIデザイン7チームです。
LINEでは沢山のデザイナーが協業しながらプロジェクトを進行させているので、あるプロジェクトではどのデザインが最新版なのか、どんなテストが進められているのか、分かりにくくなる場合があります。
この問題を改善し效率的に業務を進行させるため、LINEのデザイナーたちはずいぶん前から「Abstract」というツールを通じてコミュニケーションしてきました。

Abstractとは、簡単に言うとデザインバージョンの管理ができるツールです。始めに「Abstract」でProjectを作ってMaster Sketchファイルを作成、プロジェクトを開始します。このMaster Sketchファイルを元にして小さなプロジェクト単位の「Branch」を作り、自分のプロジェクトを進めています。デザイン完了後にはMasterにそのBranchをMergeして次のプロジェクトへと進むのです。
上述したのはかなり簡略化した説明ですが、LINEではこのような流れで協業しています。
ただ、Abstractを使用する際に難しさ、分かりにくさをと感じるの方はLINEのデザイナーたちを含め少なくないのが実際でしょう。そこで、今回は画面と一緒に各機能について易しく説明させていただきます。この内容が協業を要するデザイナーの方々のお役に立つと嬉しいです。

主要機能説明

NEW PROJECT：新規プロジェクトの作成
Master：最新デザインファイルグループ
Branch：進行中のファイル
Commit：進行中ファイルの変更内容を保存
Merge：Branchで変更された内容をMasterに統合する
Archive：Mergeする必要がないBranchを保存
Update from master：他のメンバーの変更内容と私が変更した内容が重なった時、最新バージョンを選択して保存

NEW PROJECT

プロジェクトを開始する際に使用する機能。情報を入力、生成することができます。カラータグの機能はプロジェクトを区分する時、とても便利です。

01.Abstractのアプリで右側上段の[NEW PROJECT]をクリック

02.プロジェクトの名前を入力して[CREATE PROJECT]をクリック

03.新しいSketchファイルを作るか、既存のSketchファイルをImportします。

Master

プロジェクトを開始する時、MasterにSketchファイルをImportしてからチーム作業が始まります。

Sketch Fileの管理

MasterFileを作る基準をAppやWebなどのネーミングによって分離して管理するとMergeが便利です。ファイルの管理が担当者によって異なり、並行作業などのデザイン進行把握が難しいため、MasterFileは最新バージョンで維持することが望ましいです。

Master/Sketch Pageの管理

テストをする時は最新バージョンが維持されるPageとテストしているPageを分離して作業すると便利です。バージョンによって並行して作業する場合(例えば、Ver1.0/Ver 2.0のリリース時点が異なる場合)もこのようなやり方で進めておき、デザインが確定したら最新バージョンPageにArtboardをコピーして維持すれば Branchを追加しなくても最新バージョンのMasterファイルの管理が可能です。

Branch

Masterから新規で進める作業を分離する機能。担当者ごとに小さな作業単位で作ると、Mergeが便利です。

Commit

Abstractのsaveのような機能でCommitをしたら、担当者間のBranch進行状況を早めに確認できます。なるべく頻繁にCommitをした方が業務の共有に便利です。

01.画面が更新されると、画面の下段に[Commit Changes]ボタンをクリック
(Sketch、Abstractどちらでも可能)

02.変更された内容を入力して、[COMMIT CHANGES]ボタンをクリック

03.[COMMITS]で履歴確認可能

Merge

BranchをMasterに合わせる機能。Branchの内容を確定したら、MasterにMergeさせて最新バージョンを維持します。

01.Commitが完了したら[MERGE BRANCH]ボタンをクリック

02.[MERGE AND ARCHIVE]ボタンをクリック

03.[MERGE AND ARCHIVE]ボタンをクリック

Update From Master

Masterで同じアートボードを修正して衝突した場合、どちらを最新バージョンに維持するか選択する機能です。下記のような修正箇所が判断しづらい場合は、衝突したバージョンのデザイナーと確認してMergeを行なってください。

01.Commitして、[UPDATE FROM MASTER]ボタンをクリック

02.Designer AとDesigner Bの作業中デザインで最新のデザインを確認して[PICK ARTBAORD]をクリック

最後に

LINEで協業ツールとして使用している「Abstract」の主な機能について説明しました。
このような協業ツールがなかった時、大きいプロジェクトの進行中、ファイルを共有したりデザインについて意見を交換する時に困ったことが多く、時間外に色々な部分を割り当てなければなりませんでした。しかし、業務方法の改善により集中できる時間が長くなっただけではなく、意見を交換するのも簡単になりました。
組織が大ければ大きいほど業務プロセスの改善は簡単ではありません。とはいえ、プロジェクトが良い結果につながるためには一緒に働いてる仲間たちとの協業と思考の共有がとても重要という考えのもと、LINEではこのようなツールを導入することができました。私たちのこの経験が他のデザイナーの方々のお役に立てればと思っています。
ご覧いただきありがとうございます！

InstagramでもLINEヤフー株式会社のデザインを紹介しています！

公式Instagramフォロー

LINEヤフーDesignコミュニティの様子をチェック！