チームにプロトタイピングを導入した話

1
2017年7⽉11⽇＠GMO Yours
GMOインターネット塙幾惠
チームにプロトタイピングを導⼊した話
すべての⼈にインターネット
http://www.gmo.jp

2
実は本⽇が初LT！で⼼細いので
このはちゃんに⼿伝ってもらいます...！
はじめるまえに
出張サービスだよ♪

3
はじめまして（・ω・）
ちょっとだけ⾃⼰紹介しますっ

4
なまえ
ねんれい
しごと
塙幾惠（はなわいくえ）
⼀応ぎりぎり20代
ディレクターみたいなこと
ぷろふぃーる

5
ディレクターみたいなことって？

6
ConoHa
国内ホスティングサービス

7
Z.com
海外ホスティングサービス（JP/MM/SG/PH/TH/VN）

8
画⾯設計
UI/UXディレクション
要件定義
仕様設計
⼯数管理
海外サポート
たとえばこんなお仕事

9
画⾯設計
要件定義
仕様設計
⼯数管理
海外サポート
チームメンバー全員がこの仕事をしてます
ディレクションチームなので

10
画⾯設計
要件定義
仕様設計
⼯数管理
海外サポート
たとえばこんなお仕事
ここで
プロトタイピング
もするよ

11
プロトタイピングってなに？
ちなみに
という⽅のために、簡単に説明すると…

12
プロトタイピング
サービスの試作品をつくること
プロトタイプをつくること

13
本物のおうちを建てる前に
ブロックで作ってみるようなもの

14
完成イメージを具現化することができる
事前に試作品を作ることで

15
どうやってプロトタイピングを導⼊したか
そんなわけで今⽇のテーマは
についてのお話です！

17
うちのチームでは以前から既に
プロトタイピング導⼊をしていたんです
実はもともとは
..３年前、私が⼊社した時からずっと

18
プロトタイピング⽂化が崩壊
でもあるときから
してしまった

19
なんで崩壊しちゃったの？
そもそも

20
この１年でチームに⾰命が起きていた....

21
去年の７⽉
３⼈
８⼈
※注チームの中でConoHaとZ.comの仕様を考えているメンバー数の遷移
今年の７⽉
メンバー激増！！！

22
去年の６⽉
２⼈
１⼈（私）
去年の７⽉
うち、プロトタイピングができるメンバーは

23
去年の６⽉
２⼈
１⼈（私）
去年の７⽉
うち、プロトタイピングができるメンバーは
まさかの減少（しかも１⼈…）
インフラ系知識は強いけどフロント系知識のある⼈がほぼ皆無状態に…
メンバーは増えたのに…

24
え、、、わたし１⼈なの？？？
そ、そんなぁ…（泣）

25
しばらくは１⼈で頑張っていた
（最初は⼤丈夫だと思っていた）
現実とは
厳しいものだ！１⼈で
がんばろう！

26
そして、限界が訪れる

27
いろんな問題が起こり始めた

28
問題その１
まず私が
プロトタイピングをしなくなる
結果、誰もプロトタイピングをしなくなる
（これが問題のはじまりだった…）
(プロトタイピングの仕事をする時間がなくなる)

29
問題その２
テストができなくなる
新しい画⾯には、常にユーザー評価テストのフローを導⼊していたが、プロトタ
イプがないことで、操作テストの実施が困難となり、リリース前のUIの評価軸
を⼀つ失ってしまった。

30
問題その３
仕様漏れが増える
プロトタイピングを経由しなくなったことで「ここを押したらどうなるのか？」
や「これが無くなったらどうなるのか？」などの、細かい画⾯操作の仕様漏れに
気づきづらくなり、開発着⼿後に検討し直す機会が増えた（場合によってはリ
リース後に改修することも…）

31
問題その４
なんか⾒た⽬が変になる
プロトタイピングを経由しなくなったことで、開発時に、どの箇所にどのスタイ
ル（クラス属性）を適⽤するかなどの明確な指⽰ができなくなり、⾒た⽬の詳細
仕様がない状態となってしまう。結果、担当したエンジニアさんの感覚任せに
なってしまい、他画⾯と統⼀の取れないレイアウトになってしまったり、余⽩や
サイズ感が規定からずれてしまったりしはじめた。

32
問題その５
徐々に
わかりにくいインターフェースに…
細かい仕様漏れだったり、レイアウトの微調整などがずれていくことで、
総合的な統⼀感を維持できなくなり、徐々にわかりにくいインターフェー
スになっていってしまった。しかも、誰もその問題を問題視せず進めてい
る状況…

33
「え、このままじゃまずくね？」
そして私はこう思ったのです
と。

34
「またプロトタイピングの⽂化を戻さないと！」
そしてやっと私は動き始めた

35
１．まず上司に訴える
なんか⾊々ヤバい事になってるんで
すけど、まずくないっすか？
このままじゃ崩壊⼀直線です！！！
サービス終了の危機です！！！私が
んばってつくったのに（泣）どうに
かしてください！
※注意
このはちゃんは私の代役です。私の⾔葉遣いを演技しているだけなので、
このはちゃんはこんな汚い⾔葉遣いはしません。
わたし

36
２．上司に許可をもらう（全員に教えろと⾔われる）
上司
じゃあどうにかしといて〜
ていうか、全員できるよう
に教えといて〜。

37
３．どうしようか悩む
え、、、わたしが教えるのか、、そりゃそうか。。。
でもどうしよう、どうやって教えればいいんだ？？？？
みんな０スタートだし最初から全部教えないといけないし
わたしもまだまだ知識不⾜なのにいいいぃぃ〜〜

38
４．とりあえず研修をはじめる
スパルタ指導だゾ★
１．全員にHTML/CSSの本を読んで勉強してもらう
２．勉強しながら何か作ってもらう（Webサイト）
３．並⾏して、Gitを使えるように練習してもらう
４．週１で進捗確認会（勉強会）
まずは基礎知識のお勉強

39
５．研修を踏まえて練習する
⽤意されているコンポーネントを使った
実際のサービス画⾯を作成＆修正する練習
練習しながら適宜レビュー＆サポート

40
６．プロトタイピングができるようになる
３ヶ⽉/１チームあたり × ２チーム＝合計６ヶ⽉！
ここまでの所要期間

41
そしてやっと、実運⽤へ！

42
思った以上に効果があった
実運⽤を始めて１ヶ⽉ほどで…

43
運⽤後の効果（課題への解決）
問題だったこと結果
ユーザーテストができないやろうと思えばいつでもできる状態になった
仕様漏れが増える事前に漏れに気づくようになった
レイアウトが乱れるレイアウト調整の箇所に気づけるようになった
わかりづらくなるまだ課題 (少しづつ改善中…）
仕様共有がしづらい誰にでも仕様を共有できるようになった

44

45
仕様共有しやすくなったことによるメリット
１．仕様共有できることで、チーム全員の意⾒が聞ける
２．全員の意⾒が聞けることで、仕様漏れが減る
３．全員の意⾒が聞けることで、レイアウトの乱れにも気づける
４．全員の意⾒が聞けることで、わかりにくさに気づくことができる

46
開発前のレビューの効果は⼤きかった
導⼊前はこのメリットに気づかなかったけど
レビュー⾃体は、プロトタイピング導⼊前か
ら実施していたんだけど、プロトタイピング
無しのレビューだと、誰も細かい箇所に気づ
くことができなかったんです。

47
ほんの基礎の部分のみ
とはいえ、研修で⾝に付けられたのは
みんなが完全に０スタートだったので、業務しながら⽚⼿間研修を続けるだけ
では、HTML/CSS/Gitだけで精⼀杯だった！まだ、Sassもかけないしよめな
いし、OOCSSとかBEMについても勉強できてないし、Javascriptもかけない
しよめないし…まだまだ⾃分で１からプロトタイピング作りをできる状態には
なっていない…

48
もっと時間がかかる！
本格的なプロトタイピングスキルを⾝に付けるには
でもこれ以上研修してたら本業に⽀障がでちゃうし…
１から構築できないと新規サービスに対応できないし
なんかいい⽅法ないのか…

49
そこで
来⽉から新しいツールを試してみることにしました

51
・画像があればGUI操作だけでプロトタイプが作れる
・モバイル版・PC版両⽅のプロトタイプに対応
・なんとユーザーテスト機能が付いている
・テスト結果のデータ集計機能までついてる
きにいったところ
CanvasFlip

52
・画像があればGUI操作だけでプロトタイプが作れる
・モバイル版・PC版両⽅のプロトタイプに対応
・なんとユーザーテスト機能が付いている
・テスト結果のデータ集計機能までついてる
きにいったところ
CanvasFlip
すごい便利そう❤

53
でもまだ導⼊準備中で利⽤実績はないので
導⼊後レビューはまたいつか★

54
おしまい❤
ご清聴ありがとうございました

チームにプロトタイピングを導入した話

Recommandé

Recommandé

Contenu connexe

Similaire à チームにプロトタイピングを導入した話

Similaire à チームにプロトタイピングを導入した話 (20)

チームにプロトタイピングを導入した話