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.

チームにプロトタイピングを導入した話

156 views

Published on

けーすた!#2「チームにプロトタイピングを導入した話」(2017年7月11日開催)で使用したスライドです。チームにプロトタイピングを導入するまでのよもやま話です。

けーすた! #2 - Case Study ! Lightning Talk -
https://casestudy.connpass.com/event/60361/

Published in: Design
  • Be the first to comment

  • Be the first to like this

チームにプロトタイピングを導入した話

  1. 1. 1 2017年7⽉11⽇ @GMO Yours GMOインターネット 塙 幾惠 チームにプロトタイピングを導⼊した話 すべての⼈にインターネット http://www.gmo.jp
  2. 2. 2 実は本⽇が初LT!で⼼細いので このはちゃんに⼿伝ってもらいます...! はじめるまえに 出張サービスだよ♪
  3. 3. 3 はじめまして(・ω・) ちょっとだけ⾃⼰紹介しますっ
  4. 4. 4 なまえ ねんれい しごと 塙 幾惠(はなわ いくえ) ⼀応ぎりぎり20代 ディレクターみたいなこと ぷろふぃーる
  5. 5. 5 ディレクターみたいなことって?
  6. 6. 6 ConoHa 国内ホスティングサービス
  7. 7. 7 Z.com 海外ホスティングサービス(JP/MM/SG/PH/TH/VN)
  8. 8. 8 画⾯設計 UI/UXディレクション 要件定義 仕様設計 ⼯数管理 海外サポート たとえばこんなお仕事
  9. 9. 9 画⾯設計 UI/UXディレクション 要件定義 仕様設計 ⼯数管理 海外サポート チームメンバー全員がこの仕事をしてます ディレクションチームなので
  10. 10. 10 画⾯設計 UI/UXディレクション 要件定義 仕様設計 ⼯数管理 海外サポート たとえばこんなお仕事 ここで プロトタイピング もするよ
  11. 11. 11 プロトタイピングってなに? ちなみに という⽅のために、簡単に説明すると…
  12. 12. 12 プロトタイピング サービスの試作品 をつくること プロトタイプ をつくること
  13. 13. 13 本物のおうちを建てる前に ブロックで作ってみるようなもの
  14. 14. 14 完成イメージ を 具現化 することができる 事前に試作品を作ることで
  15. 15. 15 どうやってプロトタイピングを導⼊したか そんなわけで今⽇のテーマは についてのお話です!
  16. 16. 16 なのですが
  17. 17. 17 うちのチームでは以前から既に プロトタイピング導⼊をしていたんです 実はもともとは ..3年前、私が⼊社した時からずっと
  18. 18. 18 プロトタイピング⽂化が崩壊 でもあるときから してしまった
  19. 19. 19 なんで崩壊しちゃったの? そもそも
  20. 20. 20 この1年でチームに⾰命が起きていた....
  21. 21. 21 去年の7⽉ 3⼈ 8⼈ ※注 チームの中でConoHaとZ.comの仕様を考えているメンバー数の遷移 今年の7⽉ メンバー激増!!!
  22. 22. 22 去年の6⽉ 2⼈ 1⼈(私) 去年の7⽉ うち、プロトタイピングができるメンバーは
  23. 23. 23 去年の6⽉ 2⼈ 1⼈(私) 去年の7⽉ うち、プロトタイピングができるメンバーは まさかの減少(しかも1⼈…) インフラ系知識は強いけどフロント系知識のある⼈がほぼ皆無状態に… メンバーは増えたのに…
  24. 24. 24 え、、、わたし1⼈なの??? そ、そんなぁ…(泣)
  25. 25. 25 しばらくは1⼈で頑張っていた (最初は⼤丈夫だと思っていた) 現実とは 厳しいものだ! 1⼈で がんばろう!
  26. 26. 26 そして、限界が訪れる
  27. 27. 27 いろんな 問題 が起こり始めた
  28. 28. 28 問題その1 まず私が プロトタイピングをしなくなる 結果、誰もプロトタイピングをしなくなる (これが問題のはじまりだった…) (プロトタイピングの仕事をする時間がなくなる)
  29. 29. 29 問題その2 テストができなくなる 新しい画⾯には、常にユーザー評価テストのフローを導⼊していたが、プロトタ イプがないことで、操作テストの実施が困難となり、リリース前のUIの評価軸 を⼀つ失ってしまった。
  30. 30. 30 問題その3 仕様漏れが増える プロトタイピングを経由しなくなったことで「ここを押したらどうなるのか?」 や「これが無くなったらどうなるのか?」などの、細かい画⾯操作の仕様漏れに 気づきづらくなり、開発着⼿後に検討し直す機会が増えた(場合によってはリ リース後に改修することも…)
  31. 31. 31 問題その4 なんか⾒た⽬が変になる プロトタイピングを経由しなくなったことで、開発時に、どの箇所にどのスタイ ル(クラス属性)を適⽤するかなどの明確な指⽰ができなくなり、⾒た⽬の詳細 仕様がない状態となってしまう。結果、担当したエンジニアさんの感覚任せに なってしまい、他画⾯と統⼀の取れないレイアウトになってしまったり、余⽩や サイズ感が規定からずれてしまったりしはじめた。
  32. 32. 32 問題その5 徐々に わかりにくいインターフェースに… 細かい仕様漏れだったり、レイアウトの微調整などがずれていくことで、 総合的な統⼀感を維持できなくなり、徐々にわかりにくいインターフェー スになっていってしまった。しかも、誰もその問題を問題視せず進めてい る状況…
  33. 33. 33 「え、このままじゃまずくね?」 そして私はこう思ったのです と。
  34. 34. 34 「またプロトタイピングの⽂化を戻さないと!」 そしてやっと私は動き始めた
  35. 35. 35 1.まず上司に訴える なんか⾊々ヤバい事になってるんで すけど、まずくないっすか? このままじゃ崩壊⼀直線です!!! サービス終了の危機です!!!私が んばってつくったのに(泣)どうに かしてください! ※注意 このはちゃんは私の代役です。私の⾔葉遣いを演技しているだけなので、 このはちゃんはこんな汚い⾔葉遣いはしません。 わたし
  36. 36. 36 2.上司に許可をもらう(全員に教えろと⾔われる) 上司 じゃあどうにかしといて〜 ていうか、全員できるよう に教えといて〜。
  37. 37. 37 3.どうしようか悩む え、、、わたしが教えるのか、、そりゃそうか。。。 でもどうしよう、どうやって教えればいいんだ???? みんな0スタートだし最初から全部教えないといけないし わたしもまだまだ知識不⾜なのにいいいぃぃ〜〜
  38. 38. 38 4.とりあえず研修をはじめる スパルタ指導だゾ★ 1.全員にHTML/CSSの本を読んで勉強してもらう 2.勉強しながら何か作ってもらう(Webサイト) 3.並⾏して、Gitを使えるように練習してもらう 4.週1で進捗確認会(勉強会) まずは基礎知識のお勉強
  39. 39. 39 5.研修を踏まえて練習する ⽤意されているコンポーネントを使った 実際のサービス画⾯を作成&修正する練習 練習しながら適宜レビュー&サポート
  40. 40. 40 6.プロトタイピングができるようになる 3ヶ⽉/1チームあたり × 2チーム = 合計6ヶ⽉! ここまでの所要期間
  41. 41. 41 そしてやっと、実運⽤へ!
  42. 42. 42 思った以上に効果があった 実運⽤を始めて1ヶ⽉ほどで…
  43. 43. 43 運⽤後の効果(課題への解決) 問題だったこと 結果 ユーザーテストができない やろうと思えばいつでもできる状態になった 仕様漏れが増える 事前に漏れに気づくようになった レイアウトが乱れる レイアウト調整の箇所に気づけるようになった わかりづらくなる まだ課題 (少しづつ改善中…) 仕様共有がしづらい 誰にでも仕様を共有できるようになった
  44. 44. 44 運⽤後の効果(課題への解決) 問題だったこと 結果 ユーザーテストができない やろうと思えばいつでもできる状態になった 仕様漏れが増える 事前に漏れに気づくようになった レイアウトが乱れる レイアウト調整の箇所に気づけるようになった わかりづらくなる まだ課題 (少しづつ改善中…) 仕様共有がしづらい 誰にでも仕様を共有できるようになった
  45. 45. 45 運⽤後の効果(課題への解決) 問題だったこと 結果 ユーザーテストができない やろうと思えばいつでもできる状態になった 仕様漏れが増える 事前に漏れに気づくようになった レイアウトが乱れる レイアウト調整の箇所に気づけるようになった わかりづらくなる まだ課題 (少しづつ改善中…) 仕様共有がしづらい 誰にでも仕様を共有できるようになった 仕様共有しやすくなったことによるメリット 1.仕様共有できることで、チーム全員の意⾒が聞ける 2.全員の意⾒が聞けることで、 仕様漏れが減る 3.全員の意⾒が聞けることで、レイアウトの乱れにも気づける 4.全員の意⾒が聞けることで、 わかりにくさに気づくことができる
  46. 46. 46 開発前のレビューの効果は⼤きかった 導⼊前はこのメリットに気づかなかったけど レビュー⾃体は、プロトタイピング導⼊前か ら実施していたんだけど、プロトタイピング 無しのレビューだと、誰も細かい箇所に気づ くことができなかったんです。
  47. 47. 47 ほんの基礎の部分のみ とはいえ、研修で⾝に付けられたのは みんなが完全に0スタートだったので、業務しながら⽚⼿間研修を続けるだけ では、HTML/CSS/Gitだけで精⼀杯だった!まだ、Sassもかけないしよめな いし、OOCSSとかBEMについても勉強できてないし、Javascriptもかけない しよめないし…まだまだ⾃分で1からプロトタイピング作りをできる状態には なっていない…
  48. 48. 48 もっと時間がかかる! 本格的なプロトタイピングスキルを⾝に付けるには でもこれ以上研修してたら本業に⽀障がでちゃうし… 1から構築できないと新規サービスに対応できないし なんかいい⽅法ないのか…
  49. 49. 49 そこで 来⽉から新しいツールを試してみることにしました
  50. 50. 50 CanvasFlip
  51. 51. 51 ・画像があればGUI操作だけでプロトタイプが作れる ・モバイル版・PC版両⽅のプロトタイプに対応 ・なんとユーザーテスト機能が付いている ・テスト結果のデータ集計機能までついてる きにいったところ CanvasFlip
  52. 52. 52 ・画像があればGUI操作だけでプロトタイプが作れる ・モバイル版・PC版両⽅のプロトタイプに対応 ・なんとユーザーテスト機能が付いている ・テスト結果のデータ集計機能までついてる きにいったところ CanvasFlip すごい便利そう❤
  53. 53. 53 でもまだ導⼊準備中で利⽤実績はないので 導⼊後レビューはまたいつか★
  54. 54. 54 おしまい❤ ご清聴ありがとうございました

×