2015/3/28 第1回全社開発MeetUpにて公開

1. モックアップ共有の
ススメ
品質管理課 後藤和良

2. 自己紹介
後藤 和良
1980年7月27日生まれ
千葉県市川市出身
!
品質管理課に2月1日より入社
楽楽精算を担当

3. 最新ゲームとゲーム文化が好き
ゲームはUI研究が最も進んだ分野

4. Aipoの表向き全般やってました。
!
ブランド / 製品（UX・フロント開発） / 集客（Webサイト、企画、広報）

5. ラクスへ入社

6. 新しいUI任されたぞ！
さあモックを作ろう！

7. まさかの本番環境からコピペ
HTML

9. 前職ではモック専用のGitHubリポジトリがあった。
これを作りたい！

10. 作りました。

11. GitBucket
!
Grunt
!
Jenkins

12. GitBucket
• GitHubクローンのOSS。
• JavaとGitが動けば
即インストール可能。
• これでリポジトリは出来た！

13. Grunt
• Webフロント開発の面倒事を
自動化してくれるヤツ。
• コードの自動フォーマット
等ができるので、ルールの少
ないコード統一ができる。
• ファイル共有と環境共有を
同時にできる。

14. Jenkins
• 有名なヒゲのCIツール。
• GitHubはモックを
Webですぐ見れたけど
GitBucketはできない！
• Jenkinsでモックをビルドして
無理矢理見れるようにした。

15. Gruntで環境共有

16. Compassコンパイル CSSフォーマット
CSSスプライト生成 スタイルガイド生成

17. package.json
!
Gruntfile.js

18. package.json
Gruntの各種プラグイン設定ファイル。
!
!
これでコーディング環境構築完了。
npm install

19. Gruntfile.js
Gruntの実行内容ファイル。
!
!
これで監視&自動処理開始。
grunt

20. QC課内で
Git使っていきます。

21. 何でモックに
こだわるの？
Q

22. モック（プロトタイピング）の有無で
サービス品質が変わるから。
A

23. • モックの作り出しが早くなる。
• ファイルの在り処がワンストップになる。
• フォーマットの統一化が図れる。
• プロトタイピングをスピーディーに行える。
• 画面仕様を資料なしで伝えられる。
• 画面の利用感がダイレクトに分かるようになる。
• 話題の「デザインスプリント」が自然発生する。
• 仕様策定の会議が減る（というか決議のみにしたい）
• 実装後の差し戻しが減る（というかゼロにしたい）

24. • モックの作り出しが早くなる。
• ファイルの在り処がワンストップになる。
• フォーマットの統一化が図れる。
• プロトタイピングをスピーディーに行える。
• 画面仕様を資料なしで伝えられる。
• 画面の利用感がダイレクトに分かるようになる。
• 話題の「デザインスプリント」が自然発生する。
• 仕様策定の会議が減る（というか決議のみにしたい）
• 実装後の差し戻しが減る（というかゼロにしたい）
メリットは
色々あるけど

25. 上流工程の
スピード・品質向上

26. サービスの本質改善に
集中できる。

27. みんなハッピー

28. ご静聴
ありがとうございました。