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.

8

Share

Download to read offline

UXデザイン✕アジャイル✕受託開発

Download to read offline

DevLove甲子園2015 西日本大会 発表資料

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

UXデザイン✕アジャイル✕受託開発

  1. 1. UXデザイン✕アジャイル✕受託開発 DevLove甲⼦園 ⻄⽇本⼤会 受託開発トラック 2015年12⽉5⽇ NCデザイン&コンサルティング株式会社 北村 拓也
  2. 2. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ⾃⼰紹介 n  北村 拓也 n  @chipstar_light n  NCデザイン&コンサルティング株式会社 •  東京4名、関⻄3名の全員が在宅勤務 •  滋賀でリモートワークやってます! •  企業向けアプリ開発・UXデザイン n  コミュニティ活動 •  京都でドメイン駆動設計やエッセンシャルスクラムの 読書会などを開催してました •  京都アジャイル勉強会(#京アジャ)のお⼿伝いして ます UXデザインとか⾔ってますが、デザイ ナじゃないです…。センス無いです…。 2
  3. 3. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 本⽇の内容 受託開発を  UXデザイン と アジャイル でやってみたお話 3
  4. 4. UXデザイン って何?
  5. 5. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインとは n UXとは •  製品・サービス・環境との対話操作の結果による、あるいはそれによっ て予期される、ユーザーの感動、信念、好み、振る舞い、成果のすべて ISO 9241-210:2010 ユーザーエクスペリエンスの定義 n UXデザインとは •  上記で説明したUXを設計する •  よりよいユーザーの体験をデザインする 5
  6. 6. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. もうちょっと咀嚼すると・・・ n  ユーザーがやりたいことをより直感的に、効率的に実現で きるようにシステムやサービスを設計すること •  ユーザーの興味を惹く •  ユーザーの⽬的をストレスなく達成させる •  ユーザーの⽣産性を向上させる •  教育費⽤を削減する •  サポート費⽤を削減する •  etc… n  画⾯をデザインする事だけがUXデザインではない 6
  7. 7. UXデザインってどうやればいいの?
  8. 8. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインプロセスの概要 参考:書籍「UXデザイン⼊⾨」 デザイン調査 ユーザー モデリング ストーリー ボード スケッチと プロトタイプ ユーザビリ ティテスト ユ ー ザ ー の 利 ⽤ 状 況 や ニ ー ズ を 調 査 す る デ ザ イ ン の 基 盤 と す る タ ー ゲ ト を 作 る ユ ー ザ ーが ⽬ 的 を 達 成 す る た め の ス トー リ ー を 可 視 化 す る ス ケ チ で ア イ デ ア を 具 現 化 し 、 プ ロ ト タ イ プ で 検 証 す る ユ ー ザ ー に と て 使 い や す い も の か チ ク す る
  9. 9. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 9 n  各フェーズでは具体的に何をしたらいいの? n  いろんなメソッドが沢⼭あるけど全部はできない。
  10. 10. ⾃分たち流のUXデザインテンプレート
  11. 11. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ①ビジネスゴールの設定 n  ビジネスの⽬標を⼩さなパーツに分解し具体化する •  会員数? •  コンバージョン率? •  作業時間? •  伝票起票件数? n  どの部分にコストをかけるべきかの軸になる 11 年間売上⽬標 会員数 客単価 訪問者数 購買率 購⼊ 品⽬数 品⽬単価 × × ×
  12. 12. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ②コンテキスト分析 n  製品やサービスが置かれている状況を理解する •  マーケットの状況 •  競合製品の状況 •  現状の売上や会員数 •  etc… n  ユーザーの環境を理解する •  利⽤する場所や状況 •  年齢層 •  etc… 12
  13. 13. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ③ペルソナ定義 n  製品を利⽤するユーザーを具体的に定義したもの •  ユーザーの態度、意識、⾏動傾向などのパターンを洗い出し、架空の⼈ 物として定義する •  誰のための製品であるかというイメージを共有する •  以降の作業の評価軸として利⽤ 13
  14. 14. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. n  ペルソナが製品を利⽤して⽬的を達成するまでのシナリオ を作成する n  シナリオ内の具体的な⾏動をストーリーとして整理する •  ストーリーはアジャイルの⽂脈のユーザーストーリーとほぼ同等 •  この時点ではシステム化対象外の⾏動も含まれている インターネッ トで広告を⾒ つける 広告からお店 のHPにアクセ ス 欲しい商品が あるか探す HPにて店舗へ のアクセス⽅ 法を探す お店に⾏く ④シナリオ/ストーリー作成 14 ペルソナ シナリオ かおりさん インターネット広告を⾒て会員登録しに店頭に⾏く かおりさん 店頭で⾒つけた商品を家に帰ってからネットで購⼊する まさとさん 会員登録しにきたお客様を応対し、会員IDを発⾏する … … ストーリー
  15. 15. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. n  ストーリーに対して、ユーザーの認識を確認し、UXデザイ ンの⽅向性を決める •  Think : その時ユーザーは何を考えているか?信念や価値観。 •  Feel : その時ユーザーは何を感じているか?感情。 ⑤メンタルモデル分析 15 欲しい商品があるか 探す HPにて店舗へのアク セス⽅法を探すDO Think Feel •  既に持っているアイ テムとの組み合わせ を重視して商品を探 す •  探す段階では価格の 優先度は低くする •  いいものなんかなか なか⾒つからないよ •  気に⼊る商品を絞り 込むのが難しいな •  駅から遠い場所だっ たら⾏きたくないか も •  交通⼿段は電⾞か徒 歩のみかどうか •  1つのお店だけの為 に外出はしないので 近隣の情報も確認で きるか •  GoogleMapと連動し ていないと使わない
  16. 16. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ⑥スコープ/優先順位検討 n  シナリオ/ストーリーに対して、今回のフェーズでどの部 分をシステム化すべきかを検討する n  システム化対象にしたストーリーを⼀覧化し、どの順番で 着⼿していくかの優先順付をする •  細かな優先順付よりは、必須機能とそうでないものを分け、必須でない ものに⼤まかに優先度をつける •  プロダクトバックログとして利⽤する事を想定 16 ペルソナ シナリオ ストーリー かおりさん ⼊会⼿続 会員未登録の状態で商品の検索をする かおりさん ⼊会⼿続 店舗へのアクセスをGoogleMapで表⽰する まさとさん 会員登録 お客様情報を元に会員IDを発⾏する … … …
  17. 17. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ⑦ワイヤーフレーム作成 n  システム化対象範囲のストーリーを 実現するためのワイヤーフレームを 作成 •  ⼿書きスケッチを⾶ばして、⼀気にワイヤー フレームを描き上げることもある •  デザイナでなくエンジニアが書いてしまう事 も Photshopを使いこなすことは困難 Sketchならエンジニアでもなんとかなる 17
  18. 18. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ⑧ロールプレイング/ユーザビリティテスト n  ワイヤーフレームの検証 •  各シナリオを通して実際にロールプレイングしてみる •  実際のユーザーにワイヤーフレームを使ってもらい、⽬的が達成出来る かを検証する n  プロトタイプツールを活⽤する •  InVisionなどを活⽤して動的なプロトタイプを低コストで提供 18
  19. 19. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ⑨ビジュアルデザイン n  完成したワイヤーフレームにビジュアルデザインを適⽤す る •  ここはデザイナさんにお願いする 19
  20. 20. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ポイント n  ⽐較的コンパクトなテンプレートにまとめておく •  特に調査・分析フェーズに費やせるコストはプロジェクト毎でまちまち •  プロジェクトの性質に合わせて、より重厚なメソッドを導⼊ n  序盤はワークショップ形式で •  成果物を作成するスタイルではなく、発注者やユーザーも巻き込んで⼀ 緒に考えるスタンスに n  多くの⼯程をエンジニアが対応できる •  テクニックの多くはセンスではなく論理的 •  ⽅法論の基礎を学べば、多くの⼯程をエンジニアが対応できる 20
  21. 21. UXデザインと開発を どのように繋げればいいのか?
  22. 22. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 単純な融合 22 ビジネスゴール 設定 コンテキスト 分析 ペルソナ定義 シナリオ/ ストーリー作成 メンタルモデル 分析 スコープ/ 優先順位検討 ワイヤーフレーム 作成 ビジュアル デザイン ロールプレイング/ ユーザビリティ テスト 設計 開発 単体テスト 結合テスト システムテスト デザインプロセス 開発プロセス 要件定義 外部設計 内部設計 開発 テスト調査・分析 ウォーターフォール的に順次実⾏
  23. 23. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 23 n でも、UXデザインで重要な事は • 仮説と検証 • 反復と改善 n 最⾼のUXが机上だけで設計することは不可能 • 実際にものを作ってユーザーに触ってもらって改善して いかなければいいものは作れない n アジャイルでやるべきじゃない? • Agile UXとかLean UXとかあるし
  24. 24. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 24 n  だからと⾔って、そんなにうまく適⽤できない! n  受託開発の壁 •  期間は有限で、⻑期で継続的なエンハンスを続けられるわけじゃ ない •  リソースも有限で、チームを永久的に維持できるわけじゃない •  スコープも結構固定される •  受ける側もある程度要件が固まらないと⾒積もれない •  発注者も多くは計画駆動を望んでいる気が… n  全ての⼯程を反復しながら、⻑期を想定した継続的な 開発は難しい
  25. 25. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. まずはシステムの⽅向性をしっかり固める 25 ビジネスゴール 設定 コンテキスト分析 ペルソナ定義 シナリオ/ ストーリー作成 メンタルモデル 分析 スコープ/ 優先順位検討 ワイヤーフレーム 作成 ビジュアル デザイン ロールプレイング/ ユーザビリティテスト 設計 開発 単体テスト 結合テスト システムテ スト 要件定義 外部設計 内部設計 開発 テスト n  要件定義まではウォータフォール的に順次対応 n  プロジェクトがどこを⽬指しているのか認知する n  期間や予算に⼤きなズレがないかを確かめる 調査・分析
  26. 26. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. デザインと実装で反復⼯程を分ける 26 n  ワイヤーフレームとプロトタイプを⽤いたデザインのみの反復 •  反復のサイクルが短く、⼯数のブレをおさえて改善のサイクルをまわせる •  ビジュアルデザインは改善時の修正作業が重くなるため実装フェーズで対応 n  実装の反復からデザインにフィードバック •  デザインプロトタイプだけでは気づきにくい部分の改善を実施 n  無駄になるデザイン作業も増えるが実装⼯程のスコープのブレは少なくなる ビジネスゴール 設定 コンテキスト分析 ペルソナ定義 シナリオ/ ストーリー作成 メンタルモデル 分析 スコープ/ 優先順位検討 結合テスト システムテ スト 調査・分析 デザインイテレーション 実装イテレーション テスト ワイヤーフレーム 作成 ロールプレイング/ ユーザビリティ テスト 要件定義 ビジュアルデザイン コンセプト作成 ビジュアル デザイン 設 計 開発 単体テスト ワイヤー フレーム ⾒直し
  27. 27. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 上流と下流で⾒積もりを分ける 27 n  デザインイテレーションまでとそれ以降で⾒積もりをわけさせてもらう n  デザインイテレーションが完了した段階で、後⼯程を再⾒積もり •  全体の予算・期間を元にスコープを調整する •  後⼯程のスコープのブレをできるだけ少なくする 上流⼯程⾒積もり 下流⼯程⾒積もり ビジネスゴール 設定 コンテキスト分析 ペルソナ定義 シナリオ/ ストーリー作成 メンタルモデル 分析 スコープ/ 優先順位検討 結合テスト システムテ スト 調査・分析 デザインイテレーション 実装イテレーション テスト ワイヤーフレーム 作成 ロールプレイング/ ユーザビリティ テスト 要件定義 ビジュアルデザイン コンセプト作成 ビジュアル デザイン 設 計 開発 単体テスト ワイヤー フレーム ⾒直し
  28. 28. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. スコープと⼯数に調整幅を持たせる n  機能に優先順位をつけ、絶対に譲れない機能とあったらい いな機能を分けて管理する •  あったらいいな機能を調整幅とさせてもらう •  UXDで進めると、機能⼀覧が⾃然とユーザーストーリーに近くなる イテレーション中のスコープの調整がやりやすくなる n  イテレーションレビューのフィードバック⼯数を⾒積に含 めさせてもらう •  UXを重視する案件では、フィードバックを許容してもらえるケースが多 い •  フィードバック⼯数をバッファとして可視化し、コントロールする 28
  29. 29. より良いUX vs ⼯期⼯数
  30. 30. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. イテレーションレビューでの⼀幕 30 発注者 デザイナ デザイナ デザイナ 開発者 開発者
  31. 31. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインには明確なゴールがない n  改善の余地はどこまでいってもある n  対象のサービスやプロダクトの性質に合わせてどこまで投 資するかを検討しなければならない 31 あなたの プロダクトは どのレベルを ⽬指す? 機能する 信頼できる 使いやすい 思いのまま使える 楽しい・共有したい 価値がある
  32. 32. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ビジネスゴールが達成できるかを判断軸にする n  提案した改善は設定したビジネスゴール結びついているか? •  その変更が⼊会者数増加にどれくらい影響する? •  そのデザインを変えたら⽣産性が向上する? n  定義したペルソナにとって本当に意味のある改善か? •  対象のペルソナにとって本当に望ましい? n  エンジニアにも調査・分析フェーズの情報を共有し、共通の 判断軸を持つ 32
  33. 33. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. エンジニアもUIデザインの基礎を⾝につけよう n  レイアウトの原則 •  近接:関係ある情報を近づけ、関係ない情報を遠ざけて配置する •  整列:情報の位置やサイズを揃える。グリッドを使う •  対⽐:コントラスト。意味のある情報とない情報に区別をつける •  反復:同じレイアウトパターンを繰り返す n  ガイドライン •  iOSヒューマンインターフェースガイドライン •  Android UIガイドライン •  etc… n  基礎レベルの指摘を減らし、 本質的な課題に集中できるように 33 オススメ!
  34. 34. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. エンジニアの⼯数に対する説明責任 n  ⾒た⽬の変化の度合いと、実装⼯数は⽐例していない! n  レビューや検証の場にエンジニアが同席 •  変更のインパクトを技術視点から論理的に説明する •  場合によっては対案を提起 n  発注者だって過剰な投資は避けたい 34
  35. 35. まとめ
  36. 36. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 36 n 受託開発の価値を⾼めたい • 内製化が万能な解決策じゃない • 専⾨性が⾼く内製化が難しい領域はある 受託開発者はよりプロフェッショナルに UXはその1つの可能性 n まだまだ試⾏錯誤の段階 n エンジニアが中⼼となったUXを模索していき たい
  37. 37. ご清聴ありがとうございました! デザイナとエンジニアを 募集しています。 http://ncdc.co.jp/recruit/
  • ksc1213

    Jan. 13, 2016
  • KentaroKamiyama

    Dec. 8, 2015
  • ssusera56d3b

    Dec. 8, 2015
  • ShunichiroKaneshiro

    Dec. 7, 2015
  • matsunari

    Dec. 6, 2015
  • yukifukuma52

    Dec. 6, 2015
  • yoshiyoshifujii

    Dec. 6, 2015
  • ShigekiShoji

    Dec. 6, 2015

DevLove甲子園2015 西日本大会 発表資料

Views

Total views

3,300

On Slideshare

0

From embeds

0

Number of embeds

211

Actions

Downloads

23

Shares

0

Comments

0

Likes

8

×