Download as PDF, PPTX
![[誰のために（役割)]として、
[何を(機能を)]したい。
なぜなら[なぜ(ビジネスの価値)の]ためだ](https://image.slidesharecdn.com/cssnitesapporo5-sekiya-120827114711-phpapp02/75/Web-41-2048.jpg)
![[誰のために（役割)]として、
[何を(機能を)]したい。
なぜなら[なぜ(ビジネスの価値)の]ためだ
ちなみにこの形式を「Connextraフォーマット」といいます](https://image.slidesharecdn.com/cssnitesapporo5-sekiya-120827114711-phpapp02/75/Web-42-2048.jpg)
![お題「 CSS Nite in SAPPORO」についての要望
[誰のために（役割)]として、
[何を(機能を)]したい。
なぜなら[なぜ(ビジネスの価値)の]ためだ
【例】
学生として、学割がほしい、
学生はお金がないけど知識は得たいからだ](https://image.slidesharecdn.com/cssnitesapporo5-sekiya-120827114711-phpapp02/75/Web-47-2048.jpg)
Uploaded byMayuko Sekiya
クライアントの要望にこたえるWebサービス開発 ～「らせん型ワークフロー」のススメ～
2012年8月26日に行われた、CSS Nite in SAPPORO, Vol.5 での発表資料です。
![[ESM_CM セミナー]小さく作って大いに役立つスマートフォンアプリ(CYCLONE)公開用](https://cdn.slidesharecdn.com/ss_thumbnails/withesmsmartphoneapplicationandcyclonecodename1000-111207215903-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
クライアントの要望にこたえるWebサービス開発 ～「らせん型ワークフロー」のススメ～
- 1. クライアントの要望にこたえるWebサービス開発 らせん型ワークフロー のススメ CSS Nite in Sapporo Vol.5 Sun 26th, Aug, 2012 SEKIYA MAYUKO
- 2. About me SEKIYAMAYUKO
- 3. About me 10年くらい Webデザイナーです。 SEKIYA MAYUKO
- 4. 昨年転職し、3人のプログラマーといっしょに 働いています
- 5.
- 6. 私たちが携わっている案件: ・デザインもプログラムも Webサービス全体として 請け負うことが多い ・長期間にわたる継続的な プロジェクトが多い ・道外など遠方の取引先が多い
- 7.
- 8. 今日のお話 お客様のご満足に近づけるように、 1 私たちがらせん型ワークフローで していること Webデザイナーとして 2 らせん型ワークフローに 参加していく心得
- 9. よくある開発フロー: 要求分析 ワイヤーフレーム提出 実制作 デモ・納品
- 10. よくある開発フロー: 要求分析 ワイヤーフレーム提出 実制作 デモの結果がイマイチだった... デモ・納品
- 11. よくある開発フロー: 要求分析 ワイヤーフレーム提出 納期を延期できないと、 実制作 もう修正できない... ＞＜; デモ・納品
- 12. 要望どおりに作成したはずなのに どうして...
- 13.
- 14. 受け入れよう！ 仕様や 要望 って 変わっていくもの
- 15.
- 16.
- 17. 少しずつ 作って 少しずつ フィードバックをもらう
- 18.
- 19. よくある開発フロー: 要求分析 ワイヤーフレーム提出 実制作 デモ・納品
- 20.
- 21. らせん型： 要求分析 ワイヤーフレーム提出 実制作 レビュー 納品
- 22. らせん型： 要求分析 フィード ワイヤーフレーム提出 バック 実制作 レビュー 納品
- 23. らせん型： フィードバックに基づき フィード 改修を重ねることで バック 実制作 レビュー お客様の満足に近づける！
- 24. 1 私たちがらせん型ワークフローで 具体的にどんなことを しているか
- 25.
- 26. ① お客様の要求を深く理解するために 私たちは ユーザーストーリーを書く
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. 既存のWebサービスに追加要求がきました Webサイトにニュースの ヘッドラインを 表示してください！ お客様
- 33. 追加要求に対応しました サイトトップに ヘッドラインを 表示しました！ 制作者
- 34. しばらくすると、変更要求がきました やっぱり、ヘッドライン はいらないので、RSSを 表示してください お客様
- 35. 作り変えることになってしまいました はい...。 制作者
- 36. あなたならどういう タスクにおこしますか？ Webサイトにニュースの ヘッドラインを 表示してください！ お客様
- 37. どういうタスクに？ 「ニュース表示機能の追加」ですか？ 「トップページに ヘッドラインを表示する」ですか？
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. 「なぜなら」を共有すると ユーザーの要求を 深く理解できる
- 45.
- 46.
- 47. お題「 CSSNite in SAPPORO」についての要望 [誰のために（役割)]として、 [何を(機能を)]したい。 なぜなら[なぜ(ビジネスの価値)の]ためだ 【例】 学生として、学割がほしい、 学生はお金がないけど知識は得たいからだ
- 48. 休憩中にみかんを出して 下さい！ やっぱり、みかんは手が 汚れるので、スイーツを 出してください！ お客様
- 49. 休憩中に何か食べながら みんなとおしゃべり したいなぁ... お客様
- 50. 休憩中にみかんを出して 下さい！ やっぱり、みかんは手が 汚れるので、スイーツを 出してください！ 下位の要求 お客様
- 51. 休憩中に何か食べながら みんなとおしゃべり したいなぁ... 上位の要求 お客様
- 52.
- 53.
- 54. ② プロジェクトが死なないように 私たちは プロジェクトを 見積り続ける
- 55. 私たちは、 プロジェクトの過程で 何度も見積る ユーザーストーリー単位で みんなで見積る
- 56. 私たちは、 プロジェクトの過程で 何度も見積る ユーザーストーリー単位で みんなで見積る ここでの「見積り」はお客様に請求する金額の ことではなく、プロジェクトの作業量のこと
- 57.
- 58.
- 59. はじめはざっくり見積る （ ） チームの力量がわからないので ざっくりしか見積れない
- 60.
- 61.
- 62.
- 63.
- 64. 例えば... 「サインインの実装」を「１」とすると、 「お気に入りの実装」は「3」くらいかなあ？ 「サインイン」の機能を実装 「いいね」の機能を実装 1 3
- 65. ちなみにゲーム形式の相対ポイントによるこの見積りを 「プランニングポーカー」といいます 参考: 「アジャイルな見積りと計画づくり」
- 66.
- 67. チームの力と 要求のボリュームを見積って プロジェクトを 観測し続けることは大切
- 68. ③ 変わりゆく要望に対応し続けるために 私たちは お客様といっしょに 優先順位を見直す
- 69.
- 70.
- 71. お客様といっしょにユーザーストーリーの優先順位を並べ替える Done Current Backlog Icebox 時間が これは できたら 作成中 1番目に する したい！ 2番目は これを したい できれば したい
- 72.
- 73. 紙で貼ってできる ➜ 遠方のお客様とも ツール を使えば 同じようなことができる
- 74. Pivotal Tracker h t t p s : / / w w w. p i v o t a l t r a c k e r. c o m
- 75.
- 76. Pivotal Tracker Webブラウザ上で、 ユーザーストーリーを ドラック＆ドロップして 優先順位を管理
- 77. Pivotal Tracker ・ポイントによる見積りの管理 ・ストーリーの優先順位の管理 ・ストーリー単位でのコミュニケーション ・プロジェクト全体の進行速度の管理 など...
- 78.
- 79.
- 80. 2 Webデザイナーとして らせん型ワークフローに 参加していくには
- 81. 時間をかけてつくられたワイヤーよ り、インタラクションを試せるWeb サイトの形をしたものを早めにお見せ できるように！ 参考: 「包括的なドキュメントより動くソフトウェアを」 アジャイルソフトウェア開発宣言 http://agilemanifesto.org/iso/ja/
- 82. ① ワイヤーフレーム制作に 時間をかけない
- 83. 自分にとって一番ラクなやり方で。 ツールを使ってラクするとか。 ちなみにわたしはこれ ➜ SwordSoft Layout
- 84.
- 85.
- 86.
- 87.
- 88.
- 89. Webサービスにおける、機能の場合： アカウントを登録できるようにしたい ➜ ユーザー自身がマイページでアカウント情報を編集できるよう になりたい ➜ ➜ マイページにお気に入り登録した記事一覧を表示したい 表示する記事一覧は全てではなく、過去1週間分でよい
- 90.
- 91.
- 92. 1.インクリメンタル(漸進的): 「アジャイル・ユーザビリティ」より引用
- 93. 1.インクリメンタル(漸進的): 「アジャイル・ユーザビリティ」より引用 例えば、Webサイトを1ページずつ完成させる ➜ なかなか後戻りがきかない
- 94. 2.イテレーティブ(反復的): 「アジャイル・ユーザビリティ」より引用
- 95. 2.イテレーティブ(反復的): 「アジャイル・ユーザビリティ」より引用 例えば、Webサイトの色だけみてもらって、 輪郭ができてきて...？ ボタンがアクションがついてきて...？？
- 96. 2.イテレーティブ(反復的): 「アジャイル・ユーザビリティ」より引用 例えば、Webサイトの色だけみてもらって、 輪郭ができてきて...？ ボタンがアクションがついてきて...？？ ➜ ちょっと...OKをもらいにくい...
- 97.
- 98.
- 99.
- 100. ケーキ美味しいです 参考: 「アジャイルサムライ」
- 101.
- 102.
- 103. インタラクションを試してもらい、 フィードバックを得るには 縦に美味しい価値を 少しずつ届ける
- 104. ③ いろんな役割を 担えるようになる
- 105.
- 106.
- 107.
- 108. 「Twitter Bootstrap をベースに デザインをあててほしい」 私の周りでの、 この需要の多さ！
- 109.
- 110.
- 111.
- 112. 程よいデザインが 手に入る エンジニアが手をかけずに簡単なマーク アップで「ある程度いい感じに見える」 ビジュアルを手に入れられる。 お客様のフィードバックを得やすい。
- 113.
- 114. デザイン側でTwitter Bootstrap のCSSを上書きした い場合、ちょっと大変な場面もある。 けれど、Twitter Bootstrap を使うことを許容できた らいい感じでチーム開発ができる。 エンジニアだって必要に応じて気軽にデザインを調整 できると、チームとして効率がよい。
- 115. 小さなスパンで、優先順位の上から順に ストーリに着手するには お互いの役割の重なり合う部分を 分かり合い、作業し合う必要がある
- 116.
- 117. お客様と現場でやる要求の分析は、 「社内に持ち帰って...」 がやりにくい。 技術の話をできる人が必要
- 118.
- 119. 今までのお客様に対して やり方を変えるのは大変 お客様に1〜2週間ごとに フィードバックを返す習慣がないと、 大変だと思う なので、ちょっとずつはじめる
- 120.
- 121. らせん型ワークフローのメリット： フィードバックに基づき フィード 改修を重ねることで バック 実制作 レビュー お客様の満足に近づける！
- 122. 1 私たちがらせん型ワークフローで 具体的にどんなことを しているか
- 123.
- 124.
- 125.
- 126. 2 Webデザイナーとして らせん型ワークフローに 参加していくには
- 127.
- 128.
- 129.
- 130.