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.
クライアントの要望にこたえるWebサービス開発


らせん型ワークフロー
                     のススメ




                CSS Nite in Sapporo Vol.5
             ...
About me


 SEKIYA MAYUKO
About me
         10年くらい
         Webデザイナーです。




 SEKIYA MAYUKO
昨年転職し、3人のプログラマーといっしょに




   働いています
今は

Ruby on Rails
による制作が中心です
私たちが携わっている案件:

・デザインもプログラムも
  Webサービス全体として
  請け負うことが多い
・長期間にわたる継続的な
  プロジェクトが多い
・道外など遠方の取引先が多い
私たち流
らせん型ワークフロー
のよいところについてお話しします
今日のお話
    お客様のご満足に近づけるように、

1   私たちがらせん型ワークフローで
    していること



    Webデザイナーとして

2   らせん型ワークフローに
    参加していく心得
よくある開発フロー:

       要求分析

   ワイヤーフレーム提出

       実制作

      デモ・納品
よくある開発フロー:

       要求分析

   ワイヤーフレーム提出

       実制作
   デモの結果がイマイチだった...

      デモ・納品
よくある開発フロー:

       要求分析

   ワイヤーフレーム提出

    納期を延期できないと、
       実制作
    もう修正できない... ><;

      デモ・納品
要望どおりに作成したはずなのに
   どうして...
時間が経つと、

欲しいものだって変わる...

実際に動く画面をみると、

想像とは違った...
もっと良いアプローチを思いついてしまった...
受け入れよう!




  仕様 や 要望 って
 変わっていくもの
じゃあ、
どうしたらよいのか
まとめて
作りすぎない!
少しずつ
    作って
  少しずつ
フィードバックをもらう
戻れないフローはやめて




繰り返すサイクルにする
よくある開発フロー:

       要求分析

   ワイヤーフレーム提出

       実制作

      デモ・納品
らせん型に作ると...
らせん型:
           要求分析


        ワイヤーフレーム提出


           実制作


          レビュー


            納品
らせん型:
           要求分析

フィード
        ワイヤーフレーム提出
 バック

           実制作


          レビュー


            納品
らせん型:
       フィードバックに基づき
フィード   改修を重ねることで
 バック

          実制作


         レビュー


 お客様の満足に近づける!
1
    私たちがらせん型ワークフローで

    具体的にどんなことを
    しているか
①お客様の要求を深く理解するために

②プロジェクトが死なないように

③変わりゆく要望に対応し続けるために
①   お客様の要求を深く理解するために




私たちは
ユーザーストーリーを書く
お客様の要求を
深く理解するには
どうしたらよいか
要求を
ユーザーストーリーに
書き起こすとどうでしょう?
ユーザーストーリーとは...
ユーザーストーリーとは...
ペルソナを主語とした
「誰として何々したい(および、その理由)」
という短い文章で、
要求を小さいフィーチャー単位で
カードに記述していきます。

            「アジャイル・ユーザビリティ」より引用
例えば
要求はこんなふうに変わる...
既存のWebサービスに追加要求がきました



          Webサイトにニュースの
          ヘッドラインを
          表示してください!




    お客様
追加要求に対応しました



    サイトトップに
    ヘッドラインを
    表示しました!




              制作者
しばらくすると、変更要求がきました



          やっぱり、ヘッドライン
          はいらないので、RSSを
          表示してください




    お客様
作り変えることになってしまいました




       はい...。




                制作者
あなたならどういう
タスクにおこしますか?

      Webサイトにニュースの
      ヘッドラインを
      表示してください!




お客様
どういうタスクに?

「ニュース表示機能の追加」ですか?

              「トップページに
              ヘッドラインを表示する」ですか?
要求を
ユーザーストーリーに
書きおこすとこうなります
週に1度程度しかアクセスしないユーザーとして
トップページにヘッドラインが表示されてほしい。


なぜなら他のページを巡ってニュースを
確認するのは大変だからだ。
週に1度程度しかアクセスしないユーザーとして
トップページにヘッドラインが表示されてほしい。


なぜなら他のページを巡ってニュースを
確認するのは大変だからだ。
[誰のために(役割)]として、

[何を(機能を)]したい。

なぜなら[なぜ(ビジネスの価値)の]ためだ
[誰のために(役割)]として、

[何を(機能を)]したい。

なぜなら[なぜ(ビジネスの価値)の]ためだ

ちなみにこの形式を「Connextraフォーマット」といいます
週に1度程度しかアクセスしないユーザーとして
トップページにヘッドラインが表示されてほしい。


なぜなら他のページを巡ってニュースを
確認するのは大変だからだ。

「なぜなら」が大切!
「なぜなら」を共有すると
  ユーザーの要求を
  深く理解できる
 ・どんなユーザーが
 ・どういう理由で
 ・何をしたいのか
   を、知ることが大切!
このフォーマットがあると
  コミュニケーションしやすい


実際にユーザーストーリーを
  書いてみましょう
お題「  CSS Nite in SAPPORO」についての要望


 [誰のために(役割)]として、
 [何を(機能を)]したい。
 なぜなら[なぜ(ビジネスの価値)の]ためだ


【例】
 学生として、学割がほしい、
 学生はお金がないけど...
休憩中にみかんを出して
      下さい!



      やっぱり、みかんは手が
      汚れるので、スイーツを
      出してください!




お客様
休憩中に何か食べながら
      みんなとおしゃべり
      したいなぁ...




お客様
休憩中にみかんを出して
      下さい!



      やっぱり、みかんは手が
      汚れるので、スイーツを
      出してください!



        下位の要求
お客様
休憩中に何か食べながら
      みんなとおしゃべり
      したいなぁ...




        上位の要求
お客様
私の経験からすると、
 下位の要求は変わることが多いが、
 上位の要求は変わらないことが多い
               と思う
なので、

ユーザーの上位要求を
 おさえることは大切
②      プロジェクトが死なないように




私たちは
プロジェクトを
見積り続ける
私たちは、
プロジェクトの過程で
    何度も見積る

ユーザーストーリー単位で
   みんなで見積る
私たちは、
プロジェクトの過程で
    何度も見積る

ユーザーストーリー単位で
   みんなで見積る
    ここでの「見積り」はお客様に請求する金額の
    ことではなく、プロジェクトの作業量のこと
何のために
プロジェクトが
 無理な方向に進んでしまわないか、
小さなサイクルで何度も確認し合うため
はじめはざっくり見積る


(      )
 チームの力量がわからないので
  ざっくりしか見積れない
見積りを何度もおこなうと、

見積りの精度は高まっていく

自分達がどれくらいの時間で
どれくらいの作業ができるか
だんだん正確に把握できるようになっていく
みんなで見積る

みんなで見積ると...
私は「簡単そう」と思う作業を、
みんなは意外と「時間がかかりそう」
と思っていることに気づくことができる。
お気に入り機能の実装に
こんなに時間がかかると
思わなかったー……




  というような事態を
  少しでも防ぐ
相対的に見積る
はじめから、「この作業に何時間かかる」なんて
正確には言えない。
「この作業はあの作業の3倍くらいかかりそう」
という相対値にしておく。
例えば...
「サインインの実装」を「1」とすると、
「お気に入りの実装」は「3」くらいかなあ?




  「サインイン」の機能を実装         「いいね」の機能を実装




         1                 3
ちなみにゲーム形式の相対ポイントによるこの見積りを

「プランニングポーカー」といいます




                参考: 「アジャイルな見積りと計画づくり」
専用のカードもあるけど、
私たちはもっと気軽に、せーのっ どん! と
指を出してやっています
チームの力と
要求のボリュームを見積って
   プロジェクトを
 観測し続けることは大切
③   変わりゆく要望に対応し続けるために




私たちは
お客様といっしょに
優先順位を見直す
お客様のやりたいことはたくさんある!


  全部できそう?
どれが最もやる価値があって、
 どれは後回しにできるか

 お客様と一緒に考え
優先順位の高いものから
 お届けしていきます
お客様といっしょにユーザーストーリーの優先順位を並べ替える

    Done   Current   Backlog   Icebox

                                時間が
                ...
フィードバックを回収して
新たな要求を追加
優先順位は何度も決め直す
紙で貼ってできる



     ➜
 遠方のお客様とも
 ツール   を使えば
同じようなことができる
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
Pivotal Tracker




ユーザーストーリーや
ストーリーポイントを記入
Pivotal Tracker




              Webブラウザ上で、
              ユーザーストーリーを
              ドラック&ドロップして
              優先順位を管理
Pivotal Tracker

 ・ポイントによる見積りの管理
 ・ストーリーの優先順位の管理
 ・ストーリー単位でのコミュニケーション
 ・プロジェクト全体の進行速度の管理
                  など...
変わりゆく要望に、
 応えられるように
優先順位を見直し続ける
   ことが大切
優先順位の高いものから
時間のある限り作業し
  お客様へ価値を
  届け続けます
2
    Webデザイナーとして
    らせん型ワークフローに
    参加していくには
時間をかけてつくられたワイヤーよ
り、インタラクションを試せるWeb
サイトの形をしたものを早めにお見せ
できるように!


     参考: 「包括的なドキュメントより動くソフトウェアを」
    アジャイルソフトウェア開発宣言 http:/...
①
ワイヤーフレーム制作に
    時間をかけない
自分にとって一番ラクなやり方で。
ツールを使ってラクするとか。


 ちなみにわたしはこれ
     ➜

SwordSoft Layout
例えばお客様の前で小さめの紙に
1画面に収めるものを書いて、
画面遷移順に大きなテーブルのうえで
みんなでいっしょに並べ替えてみる
ワイヤーフレーム制作の時間を短縮できるだけでなく、
一緒に考えてもらうことで、共有が深まる
要望は早い段階でぼんやりとしたものを
出してもらい、いっしょに理想型を固め
られるほうが、制作者の側も参加する余
地があってよいのでは?
ワイヤーフレーム制作に
 時間をかけないよう工夫する。
試せるインタラクションが大切
② 少しずつ作って
フィードバックを取り込む
Webサービスにおける、機能の場合:

アカウントを登録できるようにしたい
   ➜

ユーザー自身がマイページでアカウント情報を編集できるよう
になりたい
   ➜ ➜




マイページにお気に入り登録した記事一覧を表示したい


表示する...
Webデザイナーの場合どう?

 少しずつ作るって
どうやってやるのか
少しずつには
2つのアプローチがある
1.インクリメンタル(漸進的):



          「アジャイル・ユーザビリティ」より引用
1.インクリメンタル(漸進的):



           「アジャイル・ユーザビリティ」より引用



 例えば、Webサイトを1ページずつ完成させる
           ➜
     なかなか後戻りがきかない
2.イテレーティブ(反復的):



          「アジャイル・ユーザビリティ」より引用
2.イテレーティブ(反復的):



          「アジャイル・ユーザビリティ」より引用

 例えば、Webサイトの色だけみてもらって、
      輪郭ができてきて...?
  ボタンがアクションがついてきて...??
2.イテレーティブ(反復的):



          「アジャイル・ユーザビリティ」より引用

 例えば、Webサイトの色だけみてもらって、
      輪郭ができてきて...?
  ボタンがアクションがついてきて...??
       ...
デザインは部品の集まりではない。
だから、最初のデザイン入れの段階では、
ぼんやりした状態でOKをもらうのは




       難しい
最初のデザインを入れてから




できる範囲でやろう
最初のデザイン入れ以降は、改善の繰り返し。
インタラクションとしてお客様がためせるように


ひとつの機能として
完成されている
           こと
ケーキ美味しいです




     参考: 「アジャイルサムライ」
➜➜➜
ケーキが美味しいのは、
縦に食べると一度に
いろんなものが
口に入ってくるから。

お客様により実物に近い状態で試してもらうには...


完成されたケーキのスポンジだけお渡しするのではな
く、クリームやフルーツもいっしょに縦に積まれた...
要求分析をし、試作とレビューを繰り返した結果、
その機能自体要らなかった!と気づくこともある


そのときは、
勇気を持って捨てること!
インタラクションを試してもらい、
  フィードバックを得るには

 縦に美味しい価値を
  少しずつ届ける
③   いろんな役割を
担えるようになる
小さな単位で
価値を届け続けるためには
 チームとして効率的に
作業できなければならない
お互いの役割の
重なり合う部分を増やす
最近、私が感じていること
「Twitter Bootstrap をベースに
           デザインをあててほしい」

     私の周りでの、
    この需要の多さ!
Twitter Bootstrap とは、
簡単にさっと開発をはじめるための
フロントエンドフレームワーク
どうして需要が多いのか
2つの理由
程よいデザインが
      手に入る

エンジニアが手をかけずに簡単なマーク
アップで「ある程度いい感じに見える」
ビジュアルを手に入れられる。
お客様のフィードバックを得やすい。
共通ルールがある


複数の開発者同士で、デザインに関する
マークアップの共通ルールがある。
早く開発にとりかかれる。
デザイン側でTwitter Bootstrap のCSSを上書きした
い場合、ちょっと大変な場面もある。


けれど、 Twitter Bootstrap を使うことを許容できた
らいい感じでチーム開発ができる。


エンジニアだって必要に応じ...
小さなスパンで、優先順位の上から順に
    ストーリに着手するには
お互いの役割の重なり合う部分を
分かり合い、作業し合う必要がある
らせんを実践するって、
言うほど簡単じゃない
お客様と現場でやる要求の分析は、
  「社内に持ち帰って...」
    がやりにくい。
技術の話をできる人が必要
チームを成す専門家同士に
役割の重なり合いがないと
    難しい
今までのお客様に対して
   やり方を変えるのは大変


  お客様に1〜2週間ごとに
フィードバックを返す習慣がないと、
     大変だと思う


 なので、ちょっとずつはじめる
まとめ
らせん型ワークフローのメリット:
       フィードバックに基づき
フィード   改修を重ねることで
 バック

          実制作


         レビュー


 お客様の満足に近づける!
1
    私たちがらせん型ワークフローで

    具体的にどんなことを
    しているか
①
「どんな属性の人が
なぜそうしたいのか」を
ユーザーストーリーに起こして
上位の要求をより深く理解する
②
ユーザーストーリーを見積り、
プロジェクトが無理な方向に
進んでしまわないよう、
観測を続ける
③
優先順位はお客様とともに
共有し、いっしょに並べ替え、
価値の高いものから順に
届けられるようにする
2
    Webデザイナーとして
    らせん型ワークフローに
    参加していくには
①
ワイヤーフレーム制作より
試せるインタラクションが大切
②
少しずつ作るとは、
縦に美味しいものを
継続的に提供できるよう
心がけること
③
お互いの役割の重なりあう部分
を増やし、
できる作業を増やせるように
努めること
どうもありがとうございました
Upcoming SlideShare
Loading in …5
×

of

クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 1 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 2 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 3 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 4 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 5 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 6 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 7 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 8 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 9 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 10 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 11 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 12 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 13 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 14 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 15 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 16 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 17 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 18 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 19 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 20 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 21 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 22 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 23 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 24 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 25 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 26 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 27 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 28 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 29 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 30 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 31 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 32 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 33 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 34 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 35 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 36 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 37 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 38 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 39 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 40 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 41 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 42 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 43 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 44 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 45 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 46 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 47 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 48 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 49 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 50 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 51 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 52 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 53 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 54 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 55 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 56 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 57 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 58 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 59 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 60 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 61 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 62 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 63 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 64 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 65 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 66 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 67 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 68 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 69 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 70 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 71 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 72 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 73 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 74 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 75 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 76 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 77 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 78 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 79 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 80 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 81 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 82 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 83 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 84 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 85 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 86 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 87 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 88 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 89 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 90 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 91 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 92 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 93 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 94 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 95 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 96 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 97 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 98 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 99 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 100 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 101 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 102 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 103 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 104 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 105 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 106 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 107 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 108 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 109 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 110 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 111 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 112 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 113 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 114 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 115 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 116 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 117 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 118 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 119 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 120 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 121 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 122 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 123 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 124 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 125 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 126 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 127 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 128 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 129 クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~ Slide 130
Upcoming SlideShare
スマートフォンブラウザ不具合特集
Next
Download to read offline and view in fullscreen.

319 Likes

Share

Download to read offline

クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~

Download to read offline

2012年8月26日に行われた、CSS Nite in SAPPORO, Vol.5 での発表資料です。

Related Books

Free with a 30 day trial from Scribd

See all

クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~

  1. 1. クライアントの要望にこたえるWebサービス開発 らせん型ワークフロー のススメ CSS Nite in Sapporo Vol.5 Sun 26th, Aug, 2012 SEKIYA MAYUKO
  2. 2. About me SEKIYA MAYUKO
  3. 3. About me 10年くらい Webデザイナーです。 SEKIYA MAYUKO
  4. 4. 昨年転職し、3人のプログラマーといっしょに 働いています
  5. 5. 今は Ruby on Rails による制作が中心です
  6. 6. 私たちが携わっている案件: ・デザインもプログラムも   Webサービス全体として 請け負うことが多い ・長期間にわたる継続的な   プロジェクトが多い ・道外など遠方の取引先が多い
  7. 7. 私たち流 らせん型ワークフロー のよいところについてお話しします
  8. 8. 今日のお話 お客様のご満足に近づけるように、 1 私たちがらせん型ワークフローで していること Webデザイナーとして 2 らせん型ワークフローに 参加していく心得
  9. 9. よくある開発フロー: 要求分析 ワイヤーフレーム提出 実制作 デモ・納品
  10. 10. よくある開発フロー: 要求分析 ワイヤーフレーム提出 実制作 デモの結果がイマイチだった... デモ・納品
  11. 11. よくある開発フロー: 要求分析 ワイヤーフレーム提出 納期を延期できないと、 実制作 もう修正できない... ><; デモ・納品
  12. 12. 要望どおりに作成したはずなのに どうして...
  13. 13. 時間が経つと、 欲しいものだって変わる... 実際に動く画面をみると、 想像とは違った... もっと良いアプローチを思いついてしまった...
  14. 14. 受け入れよう! 仕様 や 要望 って 変わっていくもの
  15. 15. じゃあ、 どうしたらよいのか
  16. 16. まとめて 作りすぎない!
  17. 17. 少しずつ 作って 少しずつ フィードバックをもらう
  18. 18. 戻れないフローはやめて 繰り返すサイクルにする
  19. 19. よくある開発フロー: 要求分析 ワイヤーフレーム提出 実制作 デモ・納品
  20. 20. らせん型に作ると...
  21. 21. らせん型: 要求分析 ワイヤーフレーム提出 実制作 レビュー 納品
  22. 22. らせん型: 要求分析 フィード ワイヤーフレーム提出 バック 実制作 レビュー 納品
  23. 23. らせん型: フィードバックに基づき フィード 改修を重ねることで バック 実制作 レビュー お客様の満足に近づける!
  24. 24. 1 私たちがらせん型ワークフローで 具体的にどんなことを しているか
  25. 25. ①お客様の要求を深く理解するために ②プロジェクトが死なないように ③変わりゆく要望に対応し続けるために
  26. 26. ① お客様の要求を深く理解するために 私たちは ユーザーストーリーを書く
  27. 27. お客様の要求を 深く理解するには どうしたらよいか
  28. 28. 要求を ユーザーストーリーに 書き起こすとどうでしょう?
  29. 29. ユーザーストーリーとは...
  30. 30. ユーザーストーリーとは... ペルソナを主語とした 「誰として何々したい(および、その理由)」 という短い文章で、 要求を小さいフィーチャー単位で カードに記述していきます。 「アジャイル・ユーザビリティ」より引用
  31. 31. 例えば 要求はこんなふうに変わる...
  32. 32. 既存のWebサービスに追加要求がきました Webサイトにニュースの ヘッドラインを 表示してください! お客様
  33. 33. 追加要求に対応しました サイトトップに ヘッドラインを 表示しました! 制作者
  34. 34. しばらくすると、変更要求がきました やっぱり、ヘッドライン はいらないので、RSSを 表示してください お客様
  35. 35. 作り変えることになってしまいました はい...。 制作者
  36. 36. あなたならどういう タスクにおこしますか? Webサイトにニュースの ヘッドラインを 表示してください! お客様
  37. 37. どういうタスクに? 「ニュース表示機能の追加」ですか? 「トップページに ヘッドラインを表示する」ですか?
  38. 38. 要求を ユーザーストーリーに 書きおこすとこうなります
  39. 39. 週に1度程度しかアクセスしないユーザーとして トップページにヘッドラインが表示されてほしい。 なぜなら他のページを巡ってニュースを 確認するのは大変だからだ。
  40. 40. 週に1度程度しかアクセスしないユーザーとして トップページにヘッドラインが表示されてほしい。 なぜなら他のページを巡ってニュースを 確認するのは大変だからだ。
  41. 41. [誰のために(役割)]として、 [何を(機能を)]したい。 なぜなら[なぜ(ビジネスの価値)の]ためだ
  42. 42. [誰のために(役割)]として、 [何を(機能を)]したい。 なぜなら[なぜ(ビジネスの価値)の]ためだ ちなみにこの形式を「Connextraフォーマット」といいます
  43. 43. 週に1度程度しかアクセスしないユーザーとして トップページにヘッドラインが表示されてほしい。 なぜなら他のページを巡ってニュースを 確認するのは大変だからだ。 「なぜなら」が大切!
  44. 44. 「なぜなら」を共有すると ユーザーの要求を 深く理解できる
  45. 45.  ・どんなユーザーが  ・どういう理由で  ・何をしたいのか    を、知ることが大切!
  46. 46. このフォーマットがあると コミュニケーションしやすい 実際にユーザーストーリーを 書いてみましょう
  47. 47. お題「 CSS Nite in SAPPORO」についての要望 [誰のために(役割)]として、 [何を(機能を)]したい。 なぜなら[なぜ(ビジネスの価値)の]ためだ 【例】  学生として、学割がほしい、  学生はお金がないけど知識は得たいからだ
  48. 48. 休憩中にみかんを出して 下さい! やっぱり、みかんは手が 汚れるので、スイーツを 出してください! お客様
  49. 49. 休憩中に何か食べながら みんなとおしゃべり したいなぁ... お客様
  50. 50. 休憩中にみかんを出して 下さい! やっぱり、みかんは手が 汚れるので、スイーツを 出してください! 下位の要求 お客様
  51. 51. 休憩中に何か食べながら みんなとおしゃべり したいなぁ... 上位の要求 お客様
  52. 52. 私の経験からすると、  下位の要求は変わることが多いが、  上位の要求は変わらないことが多い と思う
  53. 53. なので、 ユーザーの上位要求を おさえることは大切
  54. 54. ② プロジェクトが死なないように 私たちは プロジェクトを 見積り続ける
  55. 55. 私たちは、 プロジェクトの過程で 何度も見積る ユーザーストーリー単位で みんなで見積る
  56. 56. 私たちは、 プロジェクトの過程で 何度も見積る ユーザーストーリー単位で みんなで見積る ここでの「見積り」はお客様に請求する金額の ことではなく、プロジェクトの作業量のこと
  57. 57. 何のために
  58. 58. プロジェクトが 無理な方向に進んでしまわないか、 小さなサイクルで何度も確認し合うため
  59. 59. はじめはざっくり見積る (      ) チームの力量がわからないので ざっくりしか見積れない
  60. 60. 見積りを何度もおこなうと、 見積りの精度は高まっていく 自分達がどれくらいの時間で どれくらいの作業ができるか だんだん正確に把握できるようになっていく
  61. 61. みんなで見積る みんなで見積ると... 私は「簡単そう」と思う作業を、 みんなは意外と「時間がかかりそう」 と思っていることに気づくことができる。
  62. 62. お気に入り機能の実装に こんなに時間がかかると 思わなかったー…… というような事態を 少しでも防ぐ
  63. 63. 相対的に見積る はじめから、「この作業に何時間かかる」なんて 正確には言えない。 「この作業はあの作業の3倍くらいかかりそう」 という相対値にしておく。
  64. 64. 例えば... 「サインインの実装」を「1」とすると、 「お気に入りの実装」は「3」くらいかなあ? 「サインイン」の機能を実装 「いいね」の機能を実装 1 3
  65. 65. ちなみにゲーム形式の相対ポイントによるこの見積りを 「プランニングポーカー」といいます 参考: 「アジャイルな見積りと計画づくり」
  66. 66. 専用のカードもあるけど、 私たちはもっと気軽に、せーのっ どん! と 指を出してやっています
  67. 67. チームの力と 要求のボリュームを見積って プロジェクトを 観測し続けることは大切
  68. 68. ③ 変わりゆく要望に対応し続けるために 私たちは お客様といっしょに 優先順位を見直す
  69. 69. お客様のやりたいことはたくさんある! 全部できそう?
  70. 70. どれが最もやる価値があって、 どれは後回しにできるか お客様と一緒に考え 優先順位の高いものから お届けしていきます
  71. 71. お客様といっしょにユーザーストーリーの優先順位を並べ替える Done Current Backlog Icebox 時間が これは できたら 作成中 1番目に する したい! 2番目は これを したい できれば したい
  72. 72. フィードバックを回収して 新たな要求を追加 優先順位は何度も決め直す
  73. 73. 紙で貼ってできる ➜ 遠方のお客様とも ツール を使えば 同じようなことができる
  74. 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. 75. Pivotal Tracker ユーザーストーリーや ストーリーポイントを記入
  76. 76. Pivotal Tracker Webブラウザ上で、 ユーザーストーリーを ドラック&ドロップして 優先順位を管理
  77. 77. Pivotal Tracker ・ポイントによる見積りの管理 ・ストーリーの優先順位の管理 ・ストーリー単位でのコミュニケーション ・プロジェクト全体の進行速度の管理 など...
  78. 78. 変わりゆく要望に、 応えられるように 優先順位を見直し続ける ことが大切
  79. 79. 優先順位の高いものから 時間のある限り作業し お客様へ価値を 届け続けます
  80. 80. 2 Webデザイナーとして らせん型ワークフローに 参加していくには
  81. 81. 時間をかけてつくられたワイヤーよ り、インタラクションを試せるWeb サイトの形をしたものを早めにお見せ できるように! 参考: 「包括的なドキュメントより動くソフトウェアを」 アジャイルソフトウェア開発宣言 http://agilemanifesto.org/iso/ja/
  82. 82. ① ワイヤーフレーム制作に 時間をかけない
  83. 83. 自分にとって一番ラクなやり方で。 ツールを使ってラクするとか。 ちなみにわたしはこれ ➜ SwordSoft Layout
  84. 84. 例えばお客様の前で小さめの紙に 1画面に収めるものを書いて、 画面遷移順に大きなテーブルのうえで みんなでいっしょに並べ替えてみる
  85. 85. ワイヤーフレーム制作の時間を短縮できるだけでなく、 一緒に考えてもらうことで、共有が深まる
  86. 86. 要望は早い段階でぼんやりとしたものを 出してもらい、いっしょに理想型を固め られるほうが、制作者の側も参加する余 地があってよいのでは?
  87. 87. ワイヤーフレーム制作に 時間をかけないよう工夫する。 試せるインタラクションが大切
  88. 88. ② 少しずつ作って フィードバックを取り込む
  89. 89. Webサービスにおける、機能の場合: アカウントを登録できるようにしたい ➜ ユーザー自身がマイページでアカウント情報を編集できるよう になりたい ➜ ➜ マイページにお気に入り登録した記事一覧を表示したい 表示する記事一覧は全てではなく、過去1週間分でよい
  90. 90. Webデザイナーの場合どう? 少しずつ作るって どうやってやるのか
  91. 91. 少しずつには 2つのアプローチがある
  92. 92. 1.インクリメンタル(漸進的): 「アジャイル・ユーザビリティ」より引用
  93. 93. 1.インクリメンタル(漸進的): 「アジャイル・ユーザビリティ」より引用 例えば、Webサイトを1ページずつ完成させる ➜ なかなか後戻りがきかない
  94. 94. 2.イテレーティブ(反復的): 「アジャイル・ユーザビリティ」より引用
  95. 95. 2.イテレーティブ(反復的): 「アジャイル・ユーザビリティ」より引用 例えば、Webサイトの色だけみてもらって、 輪郭ができてきて...? ボタンがアクションがついてきて...??
  96. 96. 2.イテレーティブ(反復的): 「アジャイル・ユーザビリティ」より引用 例えば、Webサイトの色だけみてもらって、 輪郭ができてきて...? ボタンがアクションがついてきて...?? ➜ ちょっと...OKをもらいにくい...
  97. 97. デザインは部品の集まりではない。 だから、最初のデザイン入れの段階では、 ぼんやりした状態でOKをもらうのは 難しい
  98. 98. 最初のデザインを入れてから できる範囲でやろう
  99. 99. 最初のデザイン入れ以降は、改善の繰り返し。 インタラクションとしてお客様がためせるように ひとつの機能として 完成されている            こと
  100. 100. ケーキ美味しいです 参考: 「アジャイルサムライ」
  101. 101. ➜➜➜ ケーキが美味しいのは、 縦に食べると一度に いろんなものが 口に入ってくるから。 お客様により実物に近い状態で試してもらうには... 完成されたケーキのスポンジだけお渡しするのではな く、クリームやフルーツもいっしょに縦に積まれた状 態で、小さい一口ずつ渡せるように心がける! 参考: 「アジャイルサムライ」
  102. 102. 要求分析をし、試作とレビューを繰り返した結果、 その機能自体要らなかった!と気づくこともある そのときは、 勇気を持って捨てること!
  103. 103. インタラクションを試してもらい、 フィードバックを得るには 縦に美味しい価値を 少しずつ届ける
  104. 104. ③ いろんな役割を 担えるようになる
  105. 105. 小さな単位で 価値を届け続けるためには チームとして効率的に 作業できなければならない
  106. 106. お互いの役割の 重なり合う部分を増やす
  107. 107. 最近、私が感じていること
  108. 108. 「Twitter Bootstrap をベースに デザインをあててほしい」 私の周りでの、 この需要の多さ!
  109. 109. Twitter Bootstrap とは、 簡単にさっと開発をはじめるための フロントエンドフレームワーク
  110. 110. どうして需要が多いのか
  111. 111. 2つの理由
  112. 112. 程よいデザインが 手に入る エンジニアが手をかけずに簡単なマーク アップで「ある程度いい感じに見える」 ビジュアルを手に入れられる。 お客様のフィードバックを得やすい。
  113. 113. 共通ルールがある 複数の開発者同士で、デザインに関する マークアップの共通ルールがある。 早く開発にとりかかれる。
  114. 114. デザイン側でTwitter Bootstrap のCSSを上書きした い場合、ちょっと大変な場面もある。 けれど、 Twitter Bootstrap を使うことを許容できた らいい感じでチーム開発ができる。 エンジニアだって必要に応じて気軽にデザインを調整 できると、チームとして効率がよい。
  115. 115. 小さなスパンで、優先順位の上から順に ストーリに着手するには お互いの役割の重なり合う部分を 分かり合い、作業し合う必要がある
  116. 116. らせんを実践するって、 言うほど簡単じゃない
  117. 117. お客様と現場でやる要求の分析は、 「社内に持ち帰って...」 がやりにくい。 技術の話をできる人が必要
  118. 118. チームを成す専門家同士に 役割の重なり合いがないと 難しい
  119. 119. 今までのお客様に対して やり方を変えるのは大変 お客様に1〜2週間ごとに フィードバックを返す習慣がないと、 大変だと思う なので、ちょっとずつはじめる
  120. 120. まとめ
  121. 121. らせん型ワークフローのメリット: フィードバックに基づき フィード 改修を重ねることで バック 実制作 レビュー お客様の満足に近づける!
  122. 122. 1 私たちがらせん型ワークフローで 具体的にどんなことを しているか
  123. 123. ① 「どんな属性の人が なぜそうしたいのか」を ユーザーストーリーに起こして 上位の要求をより深く理解する
  124. 124. ② ユーザーストーリーを見積り、 プロジェクトが無理な方向に 進んでしまわないよう、 観測を続ける
  125. 125. ③ 優先順位はお客様とともに 共有し、いっしょに並べ替え、 価値の高いものから順に 届けられるようにする
  126. 126. 2 Webデザイナーとして らせん型ワークフローに 参加していくには
  127. 127. ① ワイヤーフレーム制作より 試せるインタラクションが大切
  128. 128. ② 少しずつ作るとは、 縦に美味しいものを 継続的に提供できるよう 心がけること
  129. 129. ③ お互いの役割の重なりあう部分 を増やし、 できる作業を増やせるように 努めること
  130. 130. どうもありがとうございました
  • RyuichiroGoto1

    Jun. 11, 2020
  • saitoshotaro

    May. 6, 2020
  • SugiyamaYuichi

    Dec. 23, 2019
  • DaikiWatanabejp

    Feb. 1, 2018
  • yusukeadachi906

    Jul. 1, 2017
  • MunehiroDoi

    Apr. 3, 2017
  • KazuakiYamagishi1

    Nov. 18, 2016
  • HiroshiOta2

    Jun. 26, 2016
  • hrsknzw

    May. 30, 2016
  • StefanNsperling

    May. 27, 2016
  • tetsujiyamashita1

    May. 26, 2016
  • HirokiYamada3

    Dec. 9, 2015
  • minoruoonuma

    Oct. 29, 2015
  • MasahiroOkuyama

    Oct. 26, 2015
  • s-tomori

    Aug. 9, 2015
  • izmkoz

    Aug. 4, 2015
  • ssuser962e16

    Aug. 4, 2015
  • bislion

    Jul. 28, 2015
  • alpha_kim

    Jul. 3, 2015
  • araiwataru7

    Jul. 1, 2015

2012年8月26日に行われた、CSS Nite in SAPPORO, Vol.5 での発表資料です。

Views

Total views

70,143

On Slideshare

0

From embeds

0

Number of embeds

25,741

Actions

Downloads

471

Shares

0

Comments

0

Likes

319

×