http://dist.connpass.com/event/12990/

1. デザイナーにGitは必要？
20150417 / Yumi Hashizume

2. お前誰よ
橋爪 由美 @uniq
Panda Graphics 株式会社
UI/UXデザイナー兼ディレクター

3. デザイナーがGitを
どのように使っているか？

4. 私の場合

5. 操作
• 操作は黒い画面ことターミナル
• GUI（SourceTree）で確認することもあり
（Tree構造や、別remoteのブランチ把握したい時
だけ。操作はしない）

6. 運用
• いろいろ（ぷるリク運用、rebase運用…）
• とにかくチームのやり方を理解して合わせる
• 「これが出来るとデザイナーが楽」と伝えるのも
重要

7. 扱うファイル
• エンジニアと一緒に触るhtml,css(+img)が多いで
す
• テスト的に作った静的なhtml/cssもgitで公開して
共有することもあり
• 差分＆commitコメントが表示されるので、エンジ
ニアさんに修正点を伝えやすい

8. PSDやAIは？
Gitでは扱いづらいし、重い

9. バイナリは容量がかかる
コードは差分だけ管理されるけど。
バイナリは丸ごとコピーされちゃうので
意味のない差分が増えちゃう。
…らしい

10. PSDやAIはファイル名などで
• 日付+ページURLが入ったファイル名とか
• 20150417_search_result.psd
• 20150417/search_result.psd
• 確認が済んだりファイルのステータスが変わった場合、ファイル
名を変更したり、フォルダを移動したりすることも
• 20150417_search_result-D確認済.psd
• 提出用/20150417_search_result.psd

11. 履歴を誰かに見せたい
時はいいかも
ロゴのデザインの変化をオープンソースで見せたい時とか

12. 黒い画面
（ターミナル）

13. cd
git
最初は上記のコマンドだけ覚えればいいと思う！
※cd=change directory

14. 黒い画面の良さ

15. 会話をしているみたい
間違ったgitコマンドを実行しても
「もしかして***では？」「helpを見てね」などと
教えてくれる

16. エンジニアのブログが
少し読めるようになる
文頭にある謎の「$」をようやく把握…

17. 黒い画面じゃなくて
GUIでも良いですか？
SourceTreeやTowerなど

18. GUIだとしても
Gitの全体図・Gitでのやりとりはこんな
イメージ
というのを把握した方が
覚えやすいし、ミスは少ない！

19. GUIは初心者に
きびしいUI
チェックアウトって何？
マージって何？
リベースって何？
プッシュって何？

20. Gitのイメージを持ちつつ、
Gitを操作しましょう！

21. 全体のイメージ

22. まずは7つのコマンドの
イメージから
pull
remote
branch
checkout
add
commit
push

23. 例えば
• pull
• remote
• branch
• checkout
• add
• commit
• push
ワークフローにのせて覚えると良い！

24. イメージを描いて、イメージし
ながら操作する
ワークフローに乗せて把握する
ルー語を分かりやすい言葉に置
き換える

25. 便利コマンドのイメージも
• cherry-pick
• status

26. 詳しくは…
• 自分の同人誌とか
• 「Git イメージ」でぐぐると出
てきます！

27. 運用を把握する

28. • 自由にpushしちゃう運用なのか？
• forkしてぷるりく？
• チームによって違うので、
詳しくはエンジニアさんに聞こう！
• システムがデザインよりも先行してるか遅れてる
かによっても違う

29. デザイナーがGitに
参加して良かった点

30. 実装真っ最中のコードにデザインを入れることができる！
（エンジニアではなくデザイナーが）

31. 微調整が思いのまま

32. デメリット
• Gitの勉強コスト

33. 結論

34. 実装に参加する場合は
Gitを知っておくと
お得！

35. おわり