家族アルバム みてねというサービスを開発しているデザイナーのわたなべです。

みてねではデザインデータの管理にGit LFSを使用しています。
昨年から運用を開始したのですが、データ管理が改善され、フローも安定して回って来たので紹介します。

Git LFSとは？

* Gitで画像などのバイナリファイルを扱うための拡張機能
* Sketch, Photoshop, IllustratorなどのデザインデータもOK
* GitHubの単一ファルの上限である100MBを超えたデータサイズのファイルを扱える

ファイルサイズの上限が変わる以外は通常のGitと同じです。

Git LFS

事前準備・設定

リポジトリの作成
github.comでデザイン用のリポジトリを作成します。

用意できたらリポジトリのSettingsでLFSを有効にするだけです。
みてねでは現状 2 data packs（月10ドル）使っています。

Storageが足らなくなっても Purchase more からポチるだけなので楽チンです。

Macの設定

Homebrew をインストール
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

HomebrewでGit LFSを入れる
brew install git-lfs

Git LFS クライアントの初期設定
git lfs install

リポジトリをクローン
clone git@github.com:xxxxxxxx/xxx.git

.gitattributes の設定
クローンしたリポジトリ内の.gitattributesを設定します。
Git LFSとして扱いたいファイルの拡張子を記載します。
みてねだとこんな感じです。

*.psd filter=lfs diff=lfs merge=lfs -text
*.ai filter=lfs diff=lfs merge=lfs -text
*.sketch filter=lfs diff=lfs merge=lfs -text
*.mov filter=lfs diff=lfs merge=lfs -text

gitattributesにない拡張子のファイルはLFSとして取り扱われません。

基本的な設定は以上です。
GitHubやターミナルの操作に不慣れな場合はエンジニアにお願いするのもよいと思います。

作業フロー

みてねではDocBaseというドキュメント管理ツールを使っています。

デザイン仕様のまとめ、レビューはDocBaseで行なっているため、GitHubはデータ管理にフォーカスしてます。
適度なタイミングでコミットを積んでいって、デザインが確定したら確定デザインのみを残して他は削除しています。
コミット履歴は残っているので、あとで必要であれば取ってこれる仕組みです。

よくある流れ

1. ブランチを切る
2. 空コミットでプルリクを作る git commit --allow-empty
3. Sketchでデザイン作業
4. 適当なタイミングでコミット、プッシュ
5. デザイン確定したら確定案以外は消してmasterにマージ

わかりやすいようにプルリクにドキュメントのURLとキャプチャを貼るようにしています。

タスク単位でPR作ると後から探しやすく便利です。
直接masterにプッシュしないルールにしています。

コンフリクト対策

たまに起こってはしまうのですが、いくつか対策をしています。

・プルリクを先に出す
・プルリクのタイトルにSketchファイル名を入れる
・SlackにGitHubの通知を流す
・Sketchファイルをシーン単位で分割

長期プロジェクトの場合は別のファイルを作って確定後に反映するようにしています。

デザインリポジトリのディレクトリ構成

一部省略してますが、下記のような構成です。

Design/
+-- -Resources  // 写真素材
   +-- Media
   ¦   +-- StockPhotos
+-- Brand
   +-- Assets
   +-- Guidelines
+-- Products
+-- Promotions
+-- Screenshots
+-- UI
   +-- Android
   ¦   +-- -Components.sketch  // 共有ライブラリ
   ¦   +-- Add
   ¦   +-- Album
   ¦   +-- Invite
   ¦   +-- Memories
   ¦   +-- Recents
   ¦   +-- Register
   ¦   +-- Settings
   +-- iOS
   ¦   +-- -Components.sketch  // 共有ライブラリ
   ¦   +-- Add
   ¦   +-- Album
   ¦   +-- Invite
   ¦   +-- Memories
   ¦   +-- Recents
   ¦   +-- Register
   ¦   +-- Settings

Resources
みてねは家族で子供の写真・動画を共有するサービスなので写真素材を多く使用します。
Resources内で一元管理することで効率よく作業できるようにしています。

UI
タブやシーンごとにディレクトリを分けています。

Components.sketch
コンポーネンツは共有ライブラリとしてSketch Cloudで同期されています。
変更すれば全体に対して反映される仕組みになっています。

おわりに

Git LFSに移行して半年以上経ちますが、目立った課題やストレスもなく業務に使用できています。
デザインチームのメンバーがGitを使ったワークフローに慣れていたのも大きかったのかもしれません。

Abstructという選択肢もあったのですが、Sketch以外のファイルが扱えないのが辛いところでした。

Currently, you can only upload Sketch files to Abstract
We hope to support more file types in the future — like Adobe files — to better accommodate the Abstract community.

将来的にはサポートしたいと書いてあるので今後の改善に期待しています。