2015年2月5日 Web業界なんでも勉強会（第2回）にてプレゼンさせていただいた、「Webデザイナーが使うバージョン管理ツール」セッションの内容です。

1. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved 1
Web制作プロジェクトの
コラボレーションツール
Webなんでも勉強会 2015/02/05

2. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
今日は鹿児島から
やってきました

3. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
自己紹介
株式会社ユニマル COO＆Co-founder
永田 司 ‒ Tsukasa Nagata
経歴
NTTコムウェア ：システムエンジニア
フリーランスWeb屋 ：デザイン、開発
株式会社ユニマル ：デザイン、マーケティング
その他
好きなAdobe → Photoshop
好きなエディタ → Sublime Text

4. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
Web制作はチームプレイ
協業が基本

5. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
Web制作プロジェクトはデザインからフロントエンド、さらにインフラまで。
Design
Front-­‐
end
Back-­‐
end
Server
Photoshop
UI/UX
Illustrator
HTML5
CSS
JavaScript
jQuery
PHP
Ruby
Perl
Java
Shell
Linux
Apache
NginxMySQL

6. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
それぞれ異なるスキルをもっているメンバーでTEAMが成り立つ
Design
Front-­‐
end
Back-­‐
end
Server
Photoshop
UI/UX
Illustrator
HTML5
CSS
JavaScript
jQuery
PHP
Ruby
Perl
Java
Shell
Linux
Apache
NginxMySQL
デ
ザ
イ
ナ
ー
コ
ー
ダ
ー
エ
ン
ジ
ニ
ア

7. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
universions とは…？

8. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
SCENE 1：
デザイナーやインターン生、
ファイル管理が命取りに

9. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
Qこんな経験ないですか？

10. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
！間違って上書き保存してしまった
（された）

11. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
！どれが最新版かわからない

12. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
！
ファイルのやり取りが
メール？ Dropbox？ USBメモリ？
DL期限きれてるよ…

13. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
！私も編集してたのに…

14. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
TEAM
すべて協業の中で
よく起こりえる事象
バージョン管理で解決できるかも？

15. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

16. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
学習コストが高い
デザインファイルに向いてない

17. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
概念が難しいから、
2 3時間はかかるかな？

18. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
学習コスト

19. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
入門者の方は、コンフリクトの解決は自分では
行わないほうがよいかもしれません。
今の段階では、もしコンフリクトしてしまったら
上級者の方に聞きましょう。
引用：
Web制作者のためのGit入門
(Mynavi Advanced Library)

20. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
Web制作理想のファイル管理
• みんながすぐ使える
• 履歴を管理できる
• デザインファイルに対応している

21. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

22. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

23. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

24. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
学習コストはもちろん、
上書きによるファイル紛失などは
数時間のリカバリーですまないことも…
安心な環境で、
クリエイティブな時間を

25. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
SCENE 2：
クライアント確認のために
毎回テストサーバーを用意する

26. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
レンタルサーバー１台
300円∼2,000円／月程度

27. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
変更やクライアント確認の都度
FTPでファイルをアップロード

28. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
WordPressの場合、
DBサービス構築も必要…

29. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
Web制作理想のテスト環境
• プロジェクトごと用意する
• Webからアクセスできる
• 自動で最新版に更新される
• クライアント確認だから認証付き
• WordPressへの対応

30. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

31. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

32. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

33. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

34. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
インターネット経由で
アクセスができるから、
モバイル確認もこれでOK

35. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
テストサーバーは
WordPressも対応
1分でWordPress環境構築！

36. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
自動更新で効率化、
リアルタイムな成果物確認

37. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
それだけじゃありません

38. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
Web制作のゴール
リリース作業は
深夜帯にこっそりと

39. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

40. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved

41. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
スケジュール設定で自動リリースも可能です
※β版として提供中です

42. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
まとめ

43. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
特徴１.
チーム作業で起こりがちなファイルの競合、
上書きを防ぎ、誰でも使える履歴管理

44. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
特徴２.
自動同期されるテストサーバーで
クライアント・モバイルチェックが簡単

45. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
特徴３.
ワンクリック！本番サーバーに
アップロード機能（スケジュール設定もOK）

46. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
Mac / Windows対応

47. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
国内インフラがバックボーン
稼働率99.95%以上の可用性

48. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
無料プランもあります
１プロジェクト当たり、
仮想テストサーバー１台付き
100円から

49. Confidential-© 2015 for unimal Co., Ltd. All Rights Reserved
https://www.facebook.com/tsukasa.nagata
ご清聴ありがとうございました！