デザインデータをgitで管理できるようになるまでの道のり
ノゾエ（@conoito）です。
最近、異動をいたしまして、更新が滞っておりました。
Twitterも、よさそうな記事のリツイートしかしてませんが、元気に新しい環境・新しい先輩方に囲まれながら日々の業務を行っております。
今日は「gitでデザインデータを管理するとめっちゃいいぞ〜〜〜」という話です。
「gitって何だ。gitなんか嫌いだ。」
「そもそもコマンドが叩けない。叩けなくてもこれまで生きてこられた。」
「あの英数字の並んだ画面が怖い。悲しい。目の前が霞んできた。」
上記のような感情を抱いたことがある且つ、そのまま克服できてないデザイナー向けの記事です。要するに１ヶ月前の私のことです。どうぞよろしくお願いします。
🙂🙃🙂🙃🙂
突然ですがみなさん、チームでデザインデータのやりとりを行う中でこんなことはありませんか。
・Driveや社内サーバーでデザインデータを管理している。
・Sketch、Illustrator、Photoshopなど、データの種類が多岐にわたる。
・デザイナーの数が増えてきてデータの共有に困ってきた。
・バージョンが更新されるごとに似たようなデータがもりもり増える。
・共有漏れ、上書き戦争、データどこいった事件が起きる。
「わかる…！わかるぞ…！」となっているのはきっと私だけではないはず。
そんな苦しみを取り除いてくれる魔法のツールが git！
git（ギット）とは？
git（ギット）とは、コンピュータ上のファイルなどに発生した変更を記録し、その記録履歴を管理するための「バージョン管理ツール」です。
複数の作業者が同時に変更を行ったり、複数の履歴を共同で管理するための機能をあわせ持っています。
引用元：http://www-creators.com/archives/768
データを共同編集する上で、履歴や変更した部分を記録・管理してくれる、エンジニア向けの必須ツールですね。
「でもデザインデータをgitで管理できるの？」
実は既に
git を使ったデザインデータの管理方法、まとまってます。
（ある程度知識ある人はすぐにはじめられるくらいの粒度で丁寧にまとめられています！超良い…！）
わたしみたいな人「うわ！まじか！できるのか〜！じゃあすぐにでもやろう！（ﾘﾝｸﾎﾟﾁ）」
● よくある流れ
1. ブランチを切る
2. 空コミットでプルリクを作る
3. Sketchでデザイン作業
4. 適当なタイミングでコミット、プッシュ
5. デザイン確定したら確定案以外は消してmasterにマージ
👀👀👀👀👀
😇「ブランチって何だ。」
😇😇「コミットって何だ、プルリクって何だ、プッシュってmasterってマージって、何だ。」
😇😇😇「gitって何だ。gitなんか嫌いだ。」
やはりハードルが高い
（個人的な感想）（別に高くなくない？な人は先ほどのリンクから管理方法の詳細をチェケラ！いい感じになるので是非やってみてほしい）
わたしも今までなかなか実践の機会がなく、「gitを使えるようになりたい人生だった」とか言いそうになりましたが、ついに私にもgitを触れる機会が巡って参りました。（先ほどの掲載した記事のチームが私の新しい事業部なのです）
とはいえ、
・そもそもコマンド叩けない。
・言葉の意味もぼんやりしか知らない。
・gitHubで「LGTM！」と言うことしかできない。
そんな私はとにかく
まずは最低限の知識をつけました。
みなさまお馴染みの Progate の登場です。
いつも本当にお世話になっております。
Command Line と git の２コースを、たった２時間で修了することができました。神。ホイホイ進めてすごく楽しかった。
なので、「うわ！いけるや〜ん！」と、分かった気になりました。
できるようになった気になった私は早速
FIXしたデザインタスクをgitへ
ですが一瞬で弾かれ先に進めなくなりました。
原因は様々。
よく覚えていませんが、だいたい下記のようなものが原因だったような。
・権限がなかった。
・SSH（鍵）の設定がおかしかった。
・必要なものがインストールされてなかった、またはバージョンが更新されていなかった。
正直、その時のわたしでは知識が少なすぎてググり方も微妙なゆえに、為すべき術がわからず、事業部の大先輩に、詰まっては助けてもらいを繰り返し、無事にgitに通すことができました。
ですが、事前に最低限の知識をつけた上で詰まっては助けてもらいを繰り返すと、詰まった原因や、どうやって解決するかの話が理解しやすいぞ！という気付きもGETしました。
学んだ一連の流れは、驚異の記憶蒸発力に負けないよういつでも立ち戻れるように、そして新しい人が来た時にすぐに共有できるように、ドキュメントに落とし込んでいます。
よかったこと
デザイナーが触ったデザインデータは、UI系やプロモーション系も全てgitで管理するようにしたことで、以下のようなことがいい感じになります。
・デザインデータのバージョン管理業をしなくてもよくなった。
・共有漏れ、上書き戦争、データどこいった事件が起きづらくなった。
・Abstractでは管理しきれなかった、画像をたくさん含むSketchデータや、Sketch以外のデータもバージョン管理できるようになった。
・データ同士の紐付け（素材をリンクさせておく等）が可能になった。
「私ここ編集するんでそっちの作業終わったら教えてください。一緒にしちゃうので。」
的な、デザインデータのバージョン管理業のストレスから解放されます。
おそらく使わないであろう昔のデータをあえて残して似たようなデータを更新する度に複製していくめんどくさいあの感じもなくなりました。
デザインデータをgitで管理できるようになるまでの道のりまとめ
▼ まずはひとりではじめよう編
1. Progate で分かった気になる。（苦手意識をなくす）
2. これからやろうとしていることの趣旨を理解していて、困った時に助けてくれそうな心優しいエンジニアを探す。
3. 手元でFIXしたものを早速gitで管理してみる。
4. 躓いたら 2.で見つけたエンジニアに助けてもらう。
5. 3.と 4.を無限に続ける。一連の流れはドキュメントにしとく。
6. なんとなくgitが使えるようになる。
わたしは今、6のフェーズにいます。
ググり方も分かってきて、何もできなかった私でも、ある程度はなんとかなるようになりました！よかった！
なんとなくgitが使えるようになったら、早速チームではじめてみてください。
▼ チームではじめよう編
1. clone、add、commit、push、pull、一連の流れを知れる、コピペで叩けるようなドキュメントを作っておく。
2. 1.でまとめたドキュメントを元に、チュートリアルの会をひらく。
3. ドキュメントを各自手元に置いておき、つまづいた時は随時相談し合い、必要に応じて解決方法を追記したりする。
これから改善していきたいこと
gitで管理することで別の問題も出てきたり、新たな欲望が出てきたりしています。
・デザインデータはサイズが大きく、リポジトリの容量が肥大しがちなのが分かっているので、より節約できるようにする方法を模索中。（現在はリポジトリを分けることで対応しています。）
▲ 役割ごとにリポジトリを分けてますよの図
・マーケティング系クリエイティブの素材・テキスト替えをもっとスムーズにしたい気持ちがある。（マーケター、デザイナー共に、クリエイティブの元データに辿り着きやすい仕組みはないものかなああ。他のところはどんな風に管理しているのだろう。）
おわりに
これから改善していきたいことに書いたことで「こんなやり方あるよ！」みたいな話がありましたら、どんなささいなことでも是非教えてください！コメントよりお待ちしております（土下座）
また、つまづいた時にめっちゃ参考になる優しいサイトたちを下にお供えしますので、実践の際は是非ご利用ください。
▼ まずgitを理解したい人向けの優しい記事
▼ 実際の業務で使う基本の操作が知れる優しい記事
▼ 基礎が学べる優しいサービス
▼ 実際にデザインデータをgitで管理する優しい記事
🙂🙃🙂🙃🙂
＼生存確認／
Twitterなどでシェアいただけると、もっと喜びます！！！ https://twitter.com/conoito