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

お前誰よ橋爪 由美 @uniq

Panda Graphics 株式会社

UI/UXデザイナー兼ディレクター

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

私の場合

操作

• 操作は黒い画面ことターミナル

• GUI（SourceTree）で確認することもあり

（Tree構造や、別remoteのブランチ把握したい時

だけ。操作はしない）

運用

• いろいろ（ぷるリク運用、rebase運用…）

• とにかくチームのやり方を理解して合わせる

• 「これが出来るとデザイナーが楽」と伝えるのも

重要

扱うファイル• エンジニアと一緒に触るhtml,css(+img)が多いで

す

• テスト的に作った静的なhtml/cssもgitで公開して

共有することもあり

• 差分＆commitコメントが表示されるので、エンジ

ニアさんに修正点を伝えやすい

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

バイナリは容量がかかるコードは差分だけ管理されるけど。

バイナリは丸ごとコピーされちゃうので

意味のない差分が増えちゃう。

…らしい

PSDやAIはファイル名などで• 日付+ページURLが入ったファイル名とか

• 20150417_search_result.psd

• 20150417/search_result.psd

• 確認が済んだりファイルのステータスが変わった場合、ファイル

名を変更したり、フォルダを移動したりすることも

• 20150417_search_result-D確認済.psd

• 提出用/20150417_search_result.psd

履歴を誰かに見せたい時はいいかも

ロゴのデザインの変化をオープンソースで見せたい時とか

黒い画面 （ターミナル）

cd git

最初は上記のコマンドだけ覚えればいいと思う！

※cd=change directory

黒い画面の良さ

会話をしているみたい間違ったgitコマンドを実行しても

「もしかして***では？」「helpを見てね」などと

教えてくれる

エンジニアのブログが少し読めるようになる

文頭にある謎の「$」をようやく把握…

黒い画面じゃなくて GUIでも良いですか？

SourceTreeやTowerなど

GUIだとしても Gitの全体図・Gitでのやりとりはこんな

イメージというのを把握した方が

覚えやすいし、ミスは少ない！

GUIは初心者に きびしいUI

チェックアウトって何？

マージって何？

リベースって何？

プッシュって何？

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

全体のイメージ

まずは7つのコマンドのイメージから

pull

remote

branch

checkout

add

commit

push

例えば

• pull

• remote

• branch

• checkout

• add

• commit

• push

ワークフローにのせて覚えると良い！

イメージを描いて、イメージし

ながら操作する

ワークフローに乗せて把握する

ルー語を分かりやすい言葉に置

き換える

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

• status

詳しくは…

• 自分の同人誌とか

• 「Git イメージ」でぐぐると出てきます！

運用を把握する

• 自由にpushしちゃう運用なのか？

• forkしてぷるりく？

• チームによって違うので、

詳しくはエンジニアさんに聞こう！

• システムがデザインよりも先行してるか遅れてる

かによっても違う

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

実装真っ最中のコードにデザインを入れることができる！

（エンジニアではなくデザイナーが）

微調整が思いのまま

デメリット

• Gitの勉強コスト

結論

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

お得！

おわり