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

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

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

本⽇の内容
受託開発を
UXデザインとアジャイル
でやってみたお話
3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⑨ビジュアルデザイン
n  完成したワイヤーフレームにビジュアルデザインを適⽤す
る
•  ここはデザイナさんにお願いする
19

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

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

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

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

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

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

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

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

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

より良いUX vs ⼯期⼯数

イテレーションレビューでの⼀幕
30
発注者
デザイナ
デザイナ
デザイナ
開発者
開発者

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

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

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

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

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

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

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

Similar to UXデザイン✕アジャイル✕受託開発 (20)

More from Takuya Kitamura

More from Takuya Kitamura (8)

Recently uploaded

Recently uploaded (10)

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