DevLOVE現場甲子園2014 東日本大会で発表した資料です。 舞台はフツーの旅行会社。 UXデザイン知識の薄いwebディレクターが、ユーザーテストを丸投げされる →当然金も工数も権力もない →数値的成果と、ユーザー中心デザインの狭間で悪戦苦闘 →阿呆な失敗をやらかしつつも、組織でUXデザインが根付き始める という泥にまみれた過程を話します。泥泥。

1. 失敗上等！世にも奇妙な
「旅行会社でのUXデザイン 裏話」
DevLove甲子園
2014/8/23(土)
和田あずみ（@azumi0812）

2. 自己紹介
和田あずみ
株式会社エアーリンク
編集グループ webディレクター
仕事：
DeNAトラベル（旧スカイゲート）の
UI設計と、PDCAぐるぐるまわすお仕事してます。
@azumi0812
（その前は某web制作会社でwebディレクターやってました。ECが好き。）
・趣味はスティールパン演奏（打楽器演奏）
・旅したことがある国
タイ、バングラデシュ、チェコ、ドイツ、フランス、韓国、アメリカ、
バルバドス、トリニダードトバゴ、台湾
2014年産業技術大学院大学
人間中心設計履修証明プログラムでお勉強中。

3. • エアーリンク（DeNAトラベル）について
1979年7月創業 会員制旅行会社
株式会社ディー･エヌ･エー（DeNA）の戦略子会社として、
インターネットによる旅行予約・販売が中心に。

4. 話すこと→きれいごとじゃない、
UIデザイン、UXデザインの現場ドロドロ話
• 第1話：鳴りやまない電話
• 第2話：工数もない 金もない
• 第3話：無限増殖する注意文言やバナー達
• 最終話：命運が分かれた双子のUI
どろどろどろ

5. 第1話：鳴りやまない電話
デザインがんばったら
おもいっきり裏目にでたよ！

6. ドヤ顔でUI改修した
• 「モバイルサイトでの電話問い合わせを
増やしたい！どうにかして！」
• 人の画像＋案内の電話番号を目に入りや
すく、電話かけやすいようにデザイン
• 掲載箇所をページ上部に上げた
• トップページ、検索結果等色々埋めた
目立つ！
電話を
かけやすく

7. どうなったか
＿人人人人人人人人人人人人人人＿
＞ カスタマーセンター大混乱 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

8. カスタマーセンター大混乱のワケ
• たしかに電話はかけやすくなった
• その結果、モバイルサイトを見るのがめんどくさいと思われる
ユーザーがたくさん電話してきた（商品ページみてない人多数）
• 商品を案内するのに時間がかかるユーザー、
購入モチベーションが低いユーザーが多い
• 電話に出られるスタッフ、時間は限りがある
• お客様をたくさんまたせてしまう、放棄呼増える
• 放棄率大幅アップ、成約率ダウン…

9. ドヤ顔で 実装したら ド迷惑

10. どうすりゃええねん

11. 第2話：工数もない 金もない
ついでに権力もない
あるのはやる気だけ♪

12. スマホサイト開発に携わるようになった
• モバイルサイトでの失敗で
自分のUIのクソさを思い知った
• スマホサイトのUI設計を
任せられるがCVRはPCの半分以下
• 思い悩む日々

13. そんなとき上司がふと一言
失敗してへこんでるときに、鉄球のような次の”挑戦の
機会”を平気で投げつけてくる
-南場智子「不格好経営」P288 光森さんの手紙より
「ユーザーテストやってみたら」

14. ・自慢じゃないけど、
ユーザーテストやったことないです
・社内でだれも
やったことある人いません
・でもお金と時間かかりそうな
気がものすごくする
・なお、お金と時間はない

15. どうしろというんだ

16. どうにかするため勉強
※画像はアマゾンより流用

17. 手作りユーザーテスト実施
＠海外航空券＋ホテル スマホサイト
リクルーティング
理想：
・対象ユーザーを一般募集
・20代～30代
・渡航回数10回以上の旅行リテラシー高
い社会人
・スマホ利用頻度高い、決済経験相応に
あり
現実：
・法人グループの人ナンパ
・20代～30代
・開発現場から遠く、旅行リテラシー超
高い
・スマホ利用頻度高い、決済経験ほとん
どなし
設備
理想：
・ユーザーテスト専用のアイトラッキン
グ設備、モニタリングできる部屋
現実：
・社内の会議室で、いすと机の配置を変
えてなんとなくそれっぽく・・・
メンバー：
現場のエンジニア2人、webディレクターの私 計3名
※もちろんみんなテストは初めて

18. ユーザーテストした結果
小さいけど組織の
成功体験をつくることができた
• 想定もしてなかった
ユーザビリティ上の問題点が見つかった！
• エンジニアとwebディレクター、
一緒にテストを見たことで、
何が問題か肌で感じることができた
• 意思決定ぶれずリリースできた

19. 自分の関わるサービス開発において
手作りユーザーテスト→改修繰り返す
DeNAクリエイターブログで
ユーザーテストについての
記事書いたりもしてました
http://creator.dena.jp/archives/2878554
1.html

20. 失敗とか悩んだこと(1)
メルマガ登録フォームの登録率
アップのため、手作りユーザーテスト
「登録したらシークレット航空券が見れる」
というのがウリだった。
しかし「次にどんな画面がくるか
わからない」という思考発話をもとに、
メルマガ登録だということを
ラベリングでわかりやすく明記。
肝心のウリ訴求弱まり登録CVR激減、
もとにもどすこととなった
ユーザビリティ問題解決と、ユーザーの期待を
あおるマーケティング施策の間で悩む
（わかりづらいけど成果でるし…もやもや…）

21. 失敗とか悩んだこと(2)
ユーザーインタビューやテストとかなしに、
いきなりUI書いてくれ案件がやっぱり多い
プロトタイプ何度も作って精度をあげるよう頑張る
リリース後、CVR悪いわ
ユーザーテストでは使われないわで愕然…
販促運用現場を知ってるので、必要そうな機能追加
開発がシャレにならないくらい遅延、現場疲弊

22. 組織内で手作りユーザーテストをするのが
だんだんあたりまえな雰囲気に。
ユーザーテスト→施策を繰り返し
いい成果も、だめな成果も伝え続けた
施策根拠が
わかりやすい！
この施策でも
ユーザーテスト
やってみたよ！
一人で考えるより
成果が出そうな
気がする
CVRが
このくらい
改善したよ！

23. もしかして：
だんだん組織にユーザーテストの
大事さが根付いてきた…？

24. 第3話：無限増殖する
注意文言やバナー達
気づいたらいつのまにか増える、
注意文言やバナーの数々。
でもなかなか消せないんです…

25. ウ○コぶつけて成果上がる問題
あるあるあるあるあるあるあるあるあるあるある
あるあるあるあるあるあるあるあるある

26. 注意文言やバナーでUIがカオス
バナー
バナー
注意文言
注意文言
注意文言
※フライトを見る を開いたとき

27. • 実装した時は必然性があった
注意文言やバナーが消せない理由1
注意文言
例：
午前0時以降に出発する深夜便について、搭乗日を
お間違えになるケースが多く発生しています。
例)4月8日00：30出発の場合、搭乗手続きは4月7日
22:30が目安です。
2010年、羽田空港が国際化され
24時間運用に（首都圏空港では初）
東京発で深夜早朝便利用者急増。しかし
4月8日00:30発なのに、4月8日22:00
頃空港へいく人が後をたたず
深夜便にのみだしたかったがかなわず
注意文言を実装してそのままに。。

28. • 効果があると『された』部分最適化
注意文言やバナーが消せない理由2
周遊航空券をオンラインで購入できるサー
ビスがリリースされた
往復購入の導線と、周遊購入の導線は違
うのでユーザーが周遊航空券購入にきが
つかない
※システム面での制約上やむなし
じゃあバナーをいれて誘導しよう、と誰
かが決める（たぶん偉い人）
おいたことに満足され置き続けられる
※効果について誰も説明できないものが多い
※説明できる施策も一部ちゃんとある

29. • 政治的な理由
注意文言やバナーが消せない理由3
企画ページ
あるから
見てね！
>>詳しくはこちら
タイアップ広告の企画が
とおって広告費いただけるこ
とになったぞ！
企画ページ作るぞ！
PVが多い検索結果にバナーを
はれば企画ページへの誘導が
増えるはず！
企画ページはユーザーの役に
もたつはず。クライアントの
ためにもなる！

30. • ステークホルダーである各部署でおのおの、
トラフィックの多い海外航空券検索結果に注
意文言・バナーを追加していった
• どの追加も正当性があるとみなされた
• カオス化するUI
• 反比例して下がるユーザビリティとCVR
• 編集グループでどうにかしてくれといわれた
その結果DeNAトラベルでおきたこと

31. ユーザーテストやってみた結果(1)
再検索に気づかずトップへ戻る
絞り込みの「この条件で絞り込む」ボ
タンをスルーし、下部の再検索する
ボタンをおしてしまう
→入力した絞り込みがきいてない検
索結果がでびびる
下部の絞り込みエリア全体に気づか
ない
土曜日出発だと金額高いので、金曜
日出発になおそうとしたんだけど、日
付変更の仕方がわからない・・・
（ユーザーはバナーをないものとして
スルーする・・・全然みてない）

32. ユーザーテストやってみた結果(1)
＿人人人人人人人人人人＿
＞ 左カラム使えない ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

33. ユーザーテストやってみた結果(2)
出発空港が、羽田空港か成田空港
かの違いがこの時点ではわからな
い・・・羽田がいいのになあ。
（アイトラッキングしてみたけど、誰も
注意文言読んでない）
到着空港が、台湾の桃園国際空港
か、松山空港どっちなんだろう。街中
の松山空港がいいんだけど。
ロンドン行くのに「乗換1回」ならいい
か（と次のページへいく）
ソウルで乗り換えだけど、金浦国際
空港→インチョン国際空港まで移動
があるのを知って愕然

34. ユーザーテストやってみた結果(2)
＿人人人人人人人人人人＿
＞ フライト選びづらい ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

35. 山積みの問題をどうやって解決してく？
でるわでるわ
46項目

36. マトリクス化（※ほんの一部）
工数多め
工数少なめ
システムのロジック大幅
見直し必要
・総額表示
・往路1便・復路1便を1セットに
して見せる(例：HIS)等の選び
方パターンを増やす
①
通常の開発で可能②
・除外したい航空会社追加
・なんで検索結果0件になった
かわかるようにする
③ ABテストで検証する
（その2）
・フライト一覧の情報整理
④ ABテストで検証する
（その1）
・左カラムの再検索（絞り込み）エ
リアの視認性・操作性改善
ユ
ー
ザ
ビ
リ
テ
ィ
的
課
題
シ
ス
テ
ム
・
商
習
慣
も
か
ら
ん
だ
課
題

37. とりくむ問題を決める
工数多め
工数少なめ
システムのロジック大幅
見直し必要
・総額表示
・往路1便・復路1便を1セットに
して見せる(例：HIS)等の選び
方パターンを増やす
①
通常の開発で可能②
・除外したい航空会社追加
・なんで検索結果0件になった
かわかるようにする
③ ABテストで検証する
（その2）
・フライト一覧の情報整理
④ ABテストで検証する
（その1）
・左カラムの再検索（絞り込み）エ
リアの視認性・操作性改善
今はここをやろう
ユ
ー
ザ
ビ
リ
テ
ィ
的
課
題
シ
ス
テ
ム
・
商
習
慣
も
か
ら
ん
だ
課
題

38. ABテスト 第1回 ・再検索と絞り込み統合
・バナー類は全部削った
注意文言は下部へ移動、
日付ずらす補助機能を追
加

39. ABテスト 第1回結果
CVR
101.07%
アップ

40. ABテスト 第2回
注意文言はページ下部へ移動、デ
ザインしなおし縦の長さ圧縮
フライト一覧に掲出する
情報を見直し
・出発/到着空港
・経由都市と空港コード
を追加

41. ABテスト 第2回結果
CVR
103.31%
アップ

42. 無限増殖を食い止める合意形成
実装した時は
必然性があった
効果があると『された』
部分最適化
政治的な理由
今は、ほんとに影響ある？
「位置を移動したら問い合わせってど
うなったか教えてください」
トラフィックはどうなった？
意図する画面への誘導がどうなったか
調査項目に入れて調査→社内共有
ネゴシエーション頑張る
時には上司にも調整をお願いし、代替
案を他部署と一緒に考える

43. 必要悪と共存するための代替案
UIバリエーション
③邪魔にならない画面遷移で入れる（購入完了等）
④タブの中、ページ下部に専用エリアを作る 等…
①注意事項を入れる小窓
＋ユーザー同意型
②必要な条件分岐で表示
＋超わかりやすく解説

44. 必要な条件分岐で表示＋超わかりやすく解説

45. 悪霊退散！

46. 最終話：命運が分かれた双子のUI
同じ画面なのに
なんで自分だけ成果がでないんだ…

47. 海外ホテルサービス
ユーザーテスト実施→リニューアル
検索結果：一覧性向上、ユーザーが「ホテルを選ぶための情報」視認性向上(エリアや写真)

48. 海外ホテルサービス
ユーザーテスト実施→リニューアル
ホテル詳細：ユーザーが「このホテルだ！」と決め手になる情報の視認性向上(写真、口コミ)

49. 海外ホテルサービス
ユーザーテスト実施→リニューアル
トップページ
海外航空券検索結果
料金詳細
確認
ホテル
検索結果
ホテル
詳細
航空券＋ホテル
料金詳細
確認
海外ホテルトップ
旅行者情報入力
ホテル
検索結果
ホテル
詳細

50. 海外ホテルサービス
ユーザーテスト実施→リニューアル
トップページ
海外航空券検索結果
料金詳細
確認
ホテル
検索結果
ホテル
詳細
航空券＋ホテル
料金詳細
確認
海外ホテルトップ
旅行者情報入力
ホテル
検索結果
ホテル
詳細
×
CVR 横ばい
○
CVR アップ

51. 同じUI改修なのに
UIに問題あると思ったんだけどなー
同じ画面なのになんで海外ホテルでは成果が出て
航空券＋ホテルでは成果がでないんだろう

52. ユーザーインタビューで見えたもの(1)
海外航空券と
海外ホテルを
同時に買うユーザー
海外航空券を買った後
海外ホテルのみ
買うユーザー
・過去の経験から、航空券とホテル、同
時に買うと安いと考えている
・泊まるホテルや、ホテルチェーンを決
めている
・泊まるホテルは利便性重視、一定ラン
ク・宿泊料金以上なら安心という目安を
自分でもっているので即決できる
・過去の経験から、航空券とホテルは別
のサイトで買うと安いと考えている
・ホテルに一緒にとまる相手の許可を得
てから買いたい
・航空券を買ってから、のんびり自分の
泊りたいホテルを探したい
ユーザーのもつ累積知識、状況がだいぶ違う

53. ユーザーインタビューで見えたもの(2)
海外航空券と
海外ホテルを
同時に買うユーザー
海外航空券を買った後
海外ホテルのみ
買うユーザー
DeNAトラベルで買わない理由
・一緒に買えるのをそういえば知らな
かった…
・航空券だけなら買うけど、航空券とホ
テルのセットならCMやってる○○（競合
他社）のほうを見る
DeNAトラベルで買わない理由
・ホテルを選ぶ決め手に欠ける
・ホテルを売ってたこと自体知らなかっ
た
・ホテルは雑誌でクーポンついてた○○
（競合他社）がなんかよさそう
今回の改修でアプローチできたのはここだけかも

54. 旅行(オンライン予約)のUXタイムスパン
※ 図は「UX白書」 より引用 http://site.hcdvalue.org/docs
サイトで予約 旅行準備中 旅行中
UIデザイン
商品企画・仕入れ
カスタマーセンター
マーケ
ティング
商品企画
仕入れ
カスタマー
センター

55. UIデザインだけで解決できない部分も
たくさんある（ていうか圧倒的）
※ 図は「UX白書」 より引用 http://site.hcdvalue.org/docs
サイトで予約 旅行準備中 旅行中
UIデザイン
商品企画・仕入れ
カスタマーセンター
マーケ
ティング
商品企画
仕入れ
カスタマー
センター
なにとぞ！まかせた！
一緒に
考えよ！

56. 旅行予約サイトがぶつかっている壁
マーケティング 商品企画・仕入れ
エンジニア・UIデザイン カスタマーセンター
・LCC（ローコストキャリア）をはじめ
とする低価格化の波
・グローバルで進む価格競争
・社会状況に左右される
・ユーザーが望む商品と、売りたい商品
の差
・営業利益は1%以下
・GWや夏休み、閑散期の差
・外接が多く、構築が大変
・データによって実現できるUIに大きな
影響がでる
・取り込み時期にサービスリリース必須
・どんなに細かいことでもユーザーが
知っている状態が望ましいが、事象が細
かすぎる
・台風や事件発生時、カスタマーサポー
トが第一となる
もーーーー思い通りにならないことだらけ！！ ＼(^o^)／

57. サービス運営＝ジャムセッション
観客の
反応
メンバー
の音
メンバー
の動き
私の音は
これじゃー
うおおー
ダンドリ
スト

58. ・ユーザーインタビュー・テスト等デザインの定性分析
・アクセスログ解析等、デザインの定量分析
・分析を踏まえたうえでのデザイン
・合意形成プロセスづくり
UIデザインに
関わる者にとっての「音」

59. 思い通りにならない即興の
奇妙さこそ、現場の楽しさ
ありがとうございました