見出し画像

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

こんにちは、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]をクリック

画像1

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

画像2

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

画像3

Master

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

Sketch Fileの管理

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

画像4

Master/Sketch Pageの管理

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

画像5

Branch

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

画像6

画像7

Commit

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

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

画像8

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

画像9

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

画像10

Merge

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

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

画像11

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

画像12

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

画像13

Archive

MasterにMergeする必要がないBranchはArchiveで保存し、別に管理できます。
テストだけ、もしくはスペックアウトされた場合に活用できる機能です。

01.MasterにMergeする必要がないBranchを選択して、[Archive]ボタンをクリック

画像14

02.MasterにMergeする必要がないBranchを選択して、[Archive]ボタンをクリック

画像15

Update From Master

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

画像16

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

画像17

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

画像18

最後に

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


Twitterで更新情報をお伝えしています

これからもよろしく✨
79
LINE株式会社のUI/UX、スペースデザイン、ブランドデザイン、イラスト、映像制作をデザインする「クリエイティブセンター」の公式noteです。https://twitter.com/linecreative_jp

こちらでもピックアップされています

#UI 記事まとめ
#UI 記事まとめ
  • 42本

UIデザインについての記事をまとめたマガジンです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。