Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

686 visualizaciones

Publicado el

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

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

  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. ご静聴 ありがとうございました。

×