Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

モックアップ共有のススメ

675 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

モックアップ共有のススメ

  1. 1. モックアップ共有の
 ススメ 品質管理課 後藤和良
  2. 2. 自己紹介 後藤 和良 1980年7月27日生まれ 千葉県市川市出身 ! 品質管理課に2月1日より入社 楽楽精算を担当
  3. 3. 最新ゲームとゲーム文化が好き ゲームはUI研究が最も進んだ分野
  4. 4. Aipoの表向き全般やってました。 ! ブランド / 製品(UX・フロント開発) / 集客(Webサイト、企画、広報)
  5. 5. ラクスへ入社
  6. 6. 新しいUI任されたぞ! さあモックを作ろう!
  7. 7. まさかの本番環境からコピペ HTML
  8. 8. 前職ではモック専用のGitHubリポジトリがあった。 これを作りたい!
  9. 9. 作りました。
  10. 10. GitBucket ! Grunt ! Jenkins
  11. 11. GitBucket • GitHubクローンのOSS。 • JavaとGitが動けば
 即インストール可能。 • これでリポジトリは出来た!
  12. 12. Grunt • Webフロント開発の面倒事を 自動化してくれるヤツ。 • コードの自動フォーマット
 等ができるので、ルールの少 ないコード統一ができる。 • ファイル共有と環境共有を
 同時にできる。
  13. 13. Jenkins • 有名なヒゲのCIツール。 • GitHubはモックを
 Webですぐ見れたけど
 GitBucketはできない! • Jenkinsでモックをビルドして 無理矢理見れるようにした。
  14. 14. Gruntで環境共有
  15. 15. Compassコンパイル CSSフォーマット CSSスプライト生成 スタイルガイド生成
  16. 16. package.json ! Gruntfile.js
  17. 17. package.json Gruntの各種プラグイン設定ファイル。 ! ! これでコーディング環境構築完了。 npm install
  18. 18. Gruntfile.js Gruntの実行内容ファイル。 ! ! これで監視&自動処理開始。 grunt
  19. 19. QC課内で Git使っていきます。
  20. 20. 何でモックに こだわるの? Q
  21. 21. モック(プロトタイピング)の有無で サービス品質が変わるから。 A
  22. 22. • モックの作り出しが早くなる。 • ファイルの在り処がワンストップになる。 • フォーマットの統一化が図れる。 • プロトタイピングをスピーディーに行える。 • 画面仕様を資料なしで伝えられる。 • 画面の利用感がダイレクトに分かるようになる。 • 話題の「デザインスプリント」が自然発生する。 • 仕様策定の会議が減る(というか決議のみにしたい) • 実装後の差し戻しが減る(というかゼロにしたい)
  23. 23. • モックの作り出しが早くなる。 • ファイルの在り処がワンストップになる。 • フォーマットの統一化が図れる。 • プロトタイピングをスピーディーに行える。 • 画面仕様を資料なしで伝えられる。 • 画面の利用感がダイレクトに分かるようになる。 • 話題の「デザインスプリント」が自然発生する。 • 仕様策定の会議が減る(というか決議のみにしたい) • 実装後の差し戻しが減る(というかゼロにしたい) メリットは 色々あるけど
  24. 24. 上流工程の
 スピード・品質向上
  25. 25. サービスの本質改善に
 集中できる。
  26. 26. みんなハッピー
  27. 27. ご静聴 ありがとうございました。

×