1.
UXデザイン✕アジャイル✕受託開発
DevLove甲⼦園 ⻄⽇本⼤会
受託開発トラック
2015年12⽉5⽇
NCデザイン＆コンサルティング株式会社
北村 拓也

2.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
⾃⼰紹介
n 北村 拓也
n @chipstar_light
n NCデザイン＆コンサルティング株式会社
• 東京4名、関⻄3名の全員が在宅勤務
• 滋賀でリモートワークやってます！
• 企業向けアプリ開発・UXデザイン
n コミュニティ活動
• 京都でドメイン駆動設計やエッセンシャルスクラムの
読書会などを開催してました
• 京都アジャイル勉強会（#京アジャ）のお⼿伝いして
ます
UXデザインとか⾔ってますが、デザイ
ナじゃないです…。センス無いです…。
2

3.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
本⽇の内容
受託開発を
UXデザイン と アジャイル
でやってみたお話
3

4.
UXデザイン って何？

5.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインとは
n UXとは
• 製品・サービス・環境との対話操作の結果による、あるいはそれによっ
て予期される、ユーザーの感動、信念、好み、振る舞い、成果のすべて
ISO 9241-210:2010 ユーザーエクスペリエンスの定義
n UXデザインとは
• 上記で説明したUXを設計する
• よりよいユーザーの体験をデザインする
5

6.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
もうちょっと咀嚼すると・・・
n ユーザーがやりたいことをより直感的に、効率的に実現で
きるようにシステムやサービスを設計すること
• ユーザーの興味を惹く
• ユーザーの⽬的をストレスなく達成させる
• ユーザーの⽣産性を向上させる
• 教育費⽤を削減する
• サポート費⽤を削減する
• etc…
n 画⾯をデザインする事だけがUXデザインではない
6

7.
UXデザインってどうやればいいの？

8.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインプロセスの概要
参考：書籍「UXデザイン⼊⾨」
デザイン調査
ユーザー
モデリング
ストーリー
ボード
スケッチと
プロトタイプ
ユーザビリ
ティテスト
ユ
ー
ザ
ー
の
利
⽤
状
況
や
ニ
ー
ズ
を
調
査
す
る
デ
ザ
イ
ン
の
基
盤
と
す
る
タ
ー
ゲ
ト
を
作
る
ユ
ー
ザ
ーが
⽬
的
を
達
成
す
る
た
め
の
ス
トー
リ
ー
を
可
視
化
す
る
ス
ケ
チ
で
ア
イ
デ
ア
を
具
現
化
し
、
プ
ロ
ト
タ
イ
プ
で
検
証
す
る
ユ
ー
ザ
ー
に
と
て
使
い
や
す
い
も
の
か
チ
ク
す
る

9.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 9
n 各フェーズでは具体的に何をしたらいいの？
n いろんなメソッドが沢⼭あるけど全部はできない。

10.
⾃分たち流のUXデザインテンプレート

11.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
①ビジネスゴールの設定
n ビジネスの⽬標を⼩さなパーツに分解し具体化する
• 会員数？
• コンバージョン率？
• 作業時間？
• 伝票起票件数？
n どの部分にコストをかけるべきかの軸になる
11
年間売上⽬標
会員数 客単価
訪問者数 購買率
購⼊
品⽬数
品⽬単価
×
× ×

12.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
②コンテキスト分析
n 製品やサービスが置かれている状況を理解する
• マーケットの状況
• 競合製品の状況
• 現状の売上や会員数
• etc…
n ユーザーの環境を理解する
• 利⽤する場所や状況
• 年齢層
• etc…
12

13.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
③ペルソナ定義
n 製品を利⽤するユーザーを具体的に定義したもの
• ユーザーの態度、意識、⾏動傾向などのパターンを洗い出し、架空の⼈
物として定義する
• 誰のための製品であるかというイメージを共有する
• 以降の作業の評価軸として利⽤
13

14.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
n ペルソナが製品を利⽤して⽬的を達成するまでのシナリオ
を作成する
n シナリオ内の具体的な⾏動をストーリーとして整理する
• ストーリーはアジャイルの⽂脈のユーザーストーリーとほぼ同等
• この時点ではシステム化対象外の⾏動も含まれている
インターネッ
トで広告を⾒
つける
広告からお店
のHPにアクセ
ス
欲しい商品が
あるか探す
HPにて店舗へ
のアクセス⽅
法を探す
お店に⾏く
④シナリオ／ストーリー作成
14
ペルソナ シナリオ
かおりさん インターネット広告を⾒て会員登録しに店頭に⾏く
かおりさん 店頭で⾒つけた商品を家に帰ってからネットで購⼊する
まさとさん 会員登録しにきたお客様を応対し、会員IDを発⾏する
… …
ストーリー

15.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
n ストーリーに対して、ユーザーの認識を確認し、UXデザイ
ンの⽅向性を決める
• Think : その時ユーザーは何を考えているか？信念や価値観。
• Feel : その時ユーザーは何を感じているか？感情。
⑤メンタルモデル分析
15
欲しい商品があるか
探す
HPにて店舗へのアク
セス⽅法を探すDO
Think
Feel
• 既に持っているアイ
テムとの組み合わせ
を重視して商品を探
す
• 探す段階では価格の
優先度は低くする
• いいものなんかなか
なか⾒つからないよ
• 気に⼊る商品を絞り
込むのが難しいな
• 駅から遠い場所だっ
たら⾏きたくないか
も
• 交通⼿段は電⾞か徒
歩のみかどうか
• １つのお店だけの為
に外出はしないので
近隣の情報も確認で
きるか
• GoogleMapと連動し
ていないと使わない

16.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
⑥スコープ／優先順位検討
n シナリオ／ストーリーに対して、今回のフェーズでどの部
分をシステム化すべきかを検討する
n システム化対象にしたストーリーを⼀覧化し、どの順番で
着⼿していくかの優先順付をする
• 細かな優先順付よりは、必須機能とそうでないものを分け、必須でない
ものに⼤まかに優先度をつける
• プロダクトバックログとして利⽤する事を想定
16
ペルソナ シナリオ ストーリー
かおりさん ⼊会⼿続 会員未登録の状態で商品の検索をする
かおりさん ⼊会⼿続 店舗へのアクセスをGoogleMapで表⽰する
まさとさん 会員登録 お客様情報を元に会員IDを発⾏する
… … …

17.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
⑦ワイヤーフレーム作成
n システム化対象範囲のストーリーを
実現するためのワイヤーフレームを
作成
• ⼿書きスケッチを⾶ばして、⼀気にワイヤー
フレームを描き上げることもある
• デザイナでなくエンジニアが書いてしまう事
も
Photshopを使いこなすことは困難
Sketchならエンジニアでもなんとかなる
17

18.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
⑧ロールプレイング／ユーザビリティテスト
n ワイヤーフレームの検証
• 各シナリオを通して実際にロールプレイングしてみる
• 実際のユーザーにワイヤーフレームを使ってもらい、⽬的が達成出来る
かを検証する
n プロトタイプツールを活⽤する
• InVisionなどを活⽤して動的なプロトタイプを低コストで提供
18

19.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
⑨ビジュアルデザイン
n 完成したワイヤーフレームにビジュアルデザインを適⽤す
る
• ここはデザイナさんにお願いする
19

20.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ポイント
n ⽐較的コンパクトなテンプレートにまとめておく
• 特に調査・分析フェーズに費やせるコストはプロジェクト毎でまちまち
• プロジェクトの性質に合わせて、より重厚なメソッドを導⼊
n 序盤はワークショップ形式で
• 成果物を作成するスタイルではなく、発注者やユーザーも巻き込んで⼀
緒に考えるスタンスに
n 多くの⼯程をエンジニアが対応できる
• テクニックの多くはセンスではなく論理的
• ⽅法論の基礎を学べば、多くの⼯程をエンジニアが対応できる
20

21.
UXデザインと開発を
どのように繋げればいいのか？

22.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
単純な融合
22
ビジネスゴール
設定
コンテキスト
分析
ペルソナ定義
シナリオ／
ストーリー作成
メンタルモデル
分析
スコープ／
優先順位検討
ワイヤーフレーム
作成
ビジュアル
デザイン
ロールプレイング／
ユーザビリティ
テスト
設計
開発
単体テスト
結合テスト
システムテスト
デザインプロセス 開発プロセス
要件定義 外部設計 内部設計 開発 テスト調査・分析
ウォーターフォール的に順次実⾏

23.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 23
n でも、UXデザインで重要な事は
• 仮説と検証
• 反復と改善
n 最⾼のUXが机上だけで設計することは不可能
• 実際にものを作ってユーザーに触ってもらって改善して
いかなければいいものは作れない
n アジャイルでやるべきじゃない？
• Agile UXとかLean UXとかあるし

24.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 24
n だからと⾔って、そんなにうまく適⽤できない！
n 受託開発の壁
• 期間は有限で、⻑期で継続的なエンハンスを続けられるわけじゃ
ない
• リソースも有限で、チームを永久的に維持できるわけじゃない
• スコープも結構固定される
• 受ける側もある程度要件が固まらないと⾒積もれない
• 発注者も多くは計画駆動を望んでいる気が…
n 全ての⼯程を反復しながら、⻑期を想定した継続的な
開発は難しい

25.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
まずはシステムの⽅向性をしっかり固める
25
ビジネスゴール
設定
コンテキスト分析
ペルソナ定義
シナリオ／
ストーリー作成
メンタルモデル
分析
スコープ／
優先順位検討
ワイヤーフレーム
作成
ビジュアル
デザイン
ロールプレイング／
ユーザビリティテスト 設計
開発
単体テスト
結合テスト
システムテ
スト
要件定義 外部設計 内部設計 開発 テスト
n 要件定義まではウォータフォール的に順次対応
n プロジェクトがどこを⽬指しているのか認知する
n 期間や予算に⼤きなズレがないかを確かめる
調査・分析

26.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
デザインと実装で反復⼯程を分ける
26
n ワイヤーフレームとプロトタイプを⽤いたデザインのみの反復
• 反復のサイクルが短く、⼯数のブレをおさえて改善のサイクルをまわせる
• ビジュアルデザインは改善時の修正作業が重くなるため実装フェーズで対応
n 実装の反復からデザインにフィードバック
• デザインプロトタイプだけでは気づきにくい部分の改善を実施
n 無駄になるデザイン作業も増えるが実装⼯程のスコープのブレは少なくなる
ビジネスゴール
設定
コンテキスト分析
ペルソナ定義
シナリオ／
ストーリー作成
メンタルモデル
分析
スコープ／
優先順位検討
結合テスト
システムテ
スト
調査・分析 デザインイテレーション 実装イテレーション テスト
ワイヤーフレーム
作成
ロールプレイング／
ユーザビリティ
テスト
要件定義
ビジュアルデザイン
コンセプト作成
ビジュアル
デザイン
設
計
開発
単体テスト
ワイヤー
フレーム
⾒直し

27.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
上流と下流で⾒積もりを分ける
27
n デザインイテレーションまでとそれ以降で⾒積もりをわけさせてもらう
n デザインイテレーションが完了した段階で、後⼯程を再⾒積もり
• 全体の予算・期間を元にスコープを調整する
• 後⼯程のスコープのブレをできるだけ少なくする
上流⼯程⾒積もり 下流⼯程⾒積もり
ビジネスゴール
設定
コンテキスト分析
ペルソナ定義
シナリオ／
ストーリー作成
メンタルモデル
分析
スコープ／
優先順位検討
結合テスト
システムテ
スト
調査・分析 デザインイテレーション 実装イテレーション テスト
ワイヤーフレーム
作成
ロールプレイング／
ユーザビリティ
テスト
要件定義
ビジュアルデザイン
コンセプト作成
ビジュアル
デザイン
設
計
開発
単体テスト
ワイヤー
フレーム
⾒直し

28.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
スコープと⼯数に調整幅を持たせる
n 機能に優先順位をつけ、絶対に譲れない機能とあったらい
いな機能を分けて管理する
• あったらいいな機能を調整幅とさせてもらう
• UXDで進めると、機能⼀覧が⾃然とユーザーストーリーに近くなる
イテレーション中のスコープの調整がやりやすくなる
n イテレーションレビューのフィードバック⼯数を⾒積に含
めさせてもらう
• UXを重視する案件では、フィードバックを許容してもらえるケースが多
い
• フィードバック⼯数をバッファとして可視化し、コントロールする
28

29.
より良いUX vs ⼯期⼯数

30.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
イテレーションレビューでの⼀幕
30
発注者
デザイナ
デザイナ
デザイナ
開発者
開発者

31.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインには明確なゴールがない
n 改善の余地はどこまでいってもある
n 対象のサービスやプロダクトの性質に合わせてどこまで投
資するかを検討しなければならない
31
あなたの
プロダクトは
どのレベルを
⽬指す？
機能する
信頼できる
使いやすい
思いのまま使える
楽しい・共有したい
価値がある

32.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ビジネスゴールが達成できるかを判断軸にする
n 提案した改善は設定したビジネスゴール結びついているか？
• その変更が⼊会者数増加にどれくらい影響する？
• そのデザインを変えたら⽣産性が向上する？
n 定義したペルソナにとって本当に意味のある改善か？
• 対象のペルソナにとって本当に望ましい？
n エンジニアにも調査・分析フェーズの情報を共有し、共通の
判断軸を持つ
32

33.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
エンジニアもUIデザインの基礎を⾝につけよう
n レイアウトの原則
• 近接：関係ある情報を近づけ、関係ない情報を遠ざけて配置する
• 整列：情報の位置やサイズを揃える。グリッドを使う
• 対⽐：コントラスト。意味のある情報とない情報に区別をつける
• 反復：同じレイアウトパターンを繰り返す
n ガイドライン
• iOSヒューマンインターフェースガイドライン
• Android UIガイドライン
• etc…
n 基礎レベルの指摘を減らし、
本質的な課題に集中できるように
33
オススメ！

34.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
エンジニアの⼯数に対する説明責任
n ⾒た⽬の変化の度合いと、実装⼯数は⽐例していない！
n レビューや検証の場にエンジニアが同席
• 変更のインパクトを技術視点から論理的に説明する
• 場合によっては対案を提起
n 発注者だって過剰な投資は避けたい
34

35.
まとめ

36.
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 36
n 受託開発の価値を⾼めたい
• 内製化が万能な解決策じゃない
• 専⾨性が⾼く内製化が難しい領域はある
受託開発者はよりプロフェッショナルに
UXはその１つの可能性
n まだまだ試⾏錯誤の段階
n エンジニアが中⼼となったUXを模索していき
たい

37.
ご清聴ありがとうございました！
デザイナとエンジニアを
募集しています。
http://ncdc.co.jp/recruit/