デザインレビューやエンジニアとのやりとりに役立つ！デザイナーでも簡単にGitで画像管理する方法

こんばんは、Pairs事業部デザイナーの酒匂です。

突然ですがデザイナーの皆さんはどうやって画像管理を行っていますか？
PairsのデザイナーはGitを使って画像管理を行っています。

本日はGitで画像管理するようになった背景と、画像管理の方法をご紹介します！

| Gitを使う前の画像管理方法

Gitで画像管理をするようになる以前は、
デザイナーがオンラインストレージ上に画像をアップロードした後
エンジニアさんにその画像をサーバー上にアップロードを行うよう依頼していました。

| オンラインストレージとサーバー上の画像が違う問題の発生

そんなある日、サーバー上の画像が更新されていない問題が発生。
サーバー上にある画像がオンラインストレージにある画像と異なっていたのです！

さらには、サーバー上の画像の中には使われていない画像が残っていたり、
オンラインストレージとファイル名が異なる画像があるというカオスな状況…

これらの問題を深掘りしてみたところ、原因は、
「画像の差分がわかりにくい」「いつ誰が画像を変更したのがわからない」
ということでした。

| そこでGitの登場！

このカオスな状況を打開しようとエンジニアさんに相談したところ
デザイナーもGitを使って画像管理してみては？ということになりました！

Git…？！エンジニアさんがよく見てる黒い画面のやつ…？コマンドライン使えなきゃいけない…？

そんな不安が心をよぎりましたが
コマンドラインを使わなくてもGitが使えるSource Treeというアプリケーションがあることを
エンジニアさんから教えていただきました。

| Source Treeを使ってGitで画像を変更してみる

では、実際にSource Treeを使ってGitで画像を変更してみるとどうなるでしょうか？

Source Treeを使って画像に変更を加えると、このようにSource Tree上で差分を確認することができます。

またこのように他の人が「いつ」「何を」変更したのが見られる仕組みになっています。

| Githubを使うと1pxのズレも検知できる

さらに、Githubを利用すると、Source Treeを使って画像変更した後に、
WEB上で変更した画像の差分を確認することができます。

例えば、

画像サイズの差分の確認や、

画像をスワイプすることができるので、
1pxのズレも検知することもできます。

こうしてWEB上で誰でも画像の変更履歴が確認ができるので、デザインのミスを未然に防ぐことができます！

| デザインのレビューがしやすくなる

画像変更の確認を行った後は、プルリクエストを作成します。
プルリクエストとは、変更を行った内容を他のチームメンバーに報告することができる仕組みのこと。

Pairsのデザイナーチームでは画像変更を行った後にこのようなプルリクエストを作成していまして、
作成したプルリクエストを他のデザイナーに報告し、デザイナー同士でレビューを行っています。

例えばPairsデザイナーチームではプルリクエストの内容には、

• 変更箇所
• 変更した意図
• エンジニアへの依頼内容や補足

を記入しており、

このように、変更箇所やデザインの意図を予め書いておくことで、
デザインレビューを行うときにレビュアーがフィードバックをしやすくなります。

また、プルリクエストは消えないため、変更を行う場合に過去のプルリクエストを参考にすることもできます！

例えば、急なデザイン変更の依頼があった場合に、そのデザインを担当した人に聞かなればならないところを、
過去のプルリクエストを参考に誰でもデザインを変更することができるので確認の手間を最小限にすることができるんです！

| まとめ

このようにデザイナーがGitを使って画像管理を行うと、
デザイナーとエンジニア間のコミュニケーションだけでなく、デザイナー同士のコミュニケーションも円滑にすることができます！

この他にも、PhotshopやSketchのバージョン管理についてなど
デザイナーがGitを使って活用できることについてまたご紹介したいなと考えていますので、次回もまたお楽しみに！