2018年9月8日に開催された社会情報学会大会＠島根でのシンポジウム「AIが媒介する社会」にお招きいただき、AIによってUI・UXにどのような変化が起きているのかについてお話させていただきました。

1. AIが変える
ユーザー・エクスペリエンス
Nozomu Tannaka
Recruit Technologies Co. Ltd.,
2018/09/08
社会情報学会シンポジウム
「AIが媒介する社会」

2. 反中 望(たんなか のぞむ)
株式会社リクルートテクノロジーズ
ITマーケティング統括部 サービスデザイン4部 CXデザイングループ
↑
ビービット（UX・デジタルマーケティングのコンサルティング）
↑
ワークスアプリケーションズ（ERPパッケージ）
↑
東京大学大学院 学際情報学府 修了

3. リクルートテクノロジーズ
について

4. リクルートのビジネスモデル
4
ユーザーとクライアントを新しい接点で結び、
「まだ、ここにない、出会い。」の場を創造する。

5. 人生における「選択」を支援
ライフイベント領域
進学
就職
結婚
転職
住宅購入
車購入
出産/育児
旅行
ビジネス支援生活/地域情報
グルメ・美容
ライフスタイル領域

6. 「リボン図」モデルとUXデザイン
カスタ
マー
クライア
ント集める 集める動かす 結ぶ 動かす
カスタマーを「動かす」ところを中心に
UXデザインを探求

7. 横断組織としてのリクルートテクノロ
ジーズ
リクルート
ホールディングス
リクルートキャリア
リクルート住まいカンパニー
リクルートライフスタイル
リクルートジョブズ
リクルートマーケティングパートナーズ
リクルートテクノロジーズ
リクルートスタッフィング
スタッフサービス・ホールディングス
リクルートコミュニケーションズ
メディア &
ソリューション事業
（株）リクルート
人材派遣事業
Recruit Global Staffing B.V.
HRテクノロジ― 事業
RGF OHR USA, Inc.
その他海外派遣グループ会社
Indeed,Inc.

8. ビッグデータやAIの技術と、UI/UXデザ
インをつなぐことでサービス改善を推進

9. 個人的な興味関心

10. 学生時代から「技術が人の行動・心理・社会
をどう変えるのか」に関心がありました
修士論文では、速記術・言文一致運動・ワープ
ロ・さらにはパソコン・インターネットといっ
た情報技術によって、日本語や日本人の言語行
動がどのように変遷してきたかを、明治以来の
歴史をたどりつつ考察。

11. 最近も実務の傍ら、テクノロジーによって変
化するUX/CXに関する登壇や執筆なども
https://www.slideshare.net/NozomuTannaka

12. いろいろとメディア執筆や講演も

13. “AI eats UX”と題した勉強会を開催
• 「AIの登場・進化によってUXにどのよ
うな変化が起きているのか」を考える
勉強会を友人と共催
• 「UXデザインのプロセスや価値の源泉
が、AIによって大きく変質してしまうの
ではないか」という課題意識

14. 本日の話

15. 本日の話
1. UI・UXデザインの歴史
2. IAからAIへ～UXデザインの変化
3. AI化したUXの世界
4. ＜検索＞の終焉

16. 1. UI・UXデザインの歴史

17. UXデザインとは？
• 製品・サービスを通じたユーザー体験（UX）をデザインするこ
と
• よりよいユーザー体験を実現するとともに、結果的に製品・
サービスを提供するビジネス側のゴールも達成することを目指
す

18. 「UX」を実現するための一要素が
「UI（ユーザーインターフェース）」
UX
（ユーザー体験）
UI
（ユーザーインターフェース）
UX
（ユーザー体験）

19. UXデザインの源流

20. UXデザインのプロセス
出典：【UXデザイン講座】UXデザインはどのようなプロセスで進めるのか
https://archeco.co.jp/ux-design/ux-design-class01/
ISO 9241-210:インタラクティブシステムの
人間中心設計プロセスでは、左図のような
プロセスが定義されている

22. ユーザー調査
https://u-site.jp/ux-research/usage-of-usability-test

23. アクセスログ解析
https://www.shivarweb.com/2977/what-does-google-analytics-do/
ウェブサイトやアプリ上で、
ユーザーがどこから流入し、ど
のように行動し、どこで離脱い
しているのかを分析

25. ペルソナ・カスタマージャーニー
https://promonista.com/persona-setting/
https://blog.codecamp.jp/customer_journey_map

26. UI設計・プロトタイピング
https://techlife.cookpad.com/entry/2015/03/19/174114

28. モニタリング・ABテスト
https://www.assion.co.jp/blog/guide-of-abtesting/

29. 2. “IA”から“AI”へ
～UXデザインの変化

30. よいUXの実現には、
IA (Information Architecture)
が重要

32. 情報（機能・コンテンツ）を
どういう順序・文脈で配置して
ユーザーに提示するか

33. 「カーセンサー」における物件詳細画面のIA変更の事例

34. 「カーセンサー」における物件詳細画面のIA変更の事例
情報自体は同じでも、見せ方・順序を変えるだけで、
WEBサイトからのCVR（コンバージョン率）が大きく改善しうる
視線の移動が多く、見ていく
のが面倒＆見落としてしまう
情報を整理し、スムーズに見
ていけるような構造に改善

35. IAの品質が、
UXの良し悪しを左右する

36. （もちろんIAは依然として重要だが）
AIの進化によって、
少し状況が変わりつつある？

37. 伝統的UXデザインのプロセス
行動観察
ユーザーインサイトの発見
ペルソナ・ジャーニー設計
UI設計

38. AI時代のUXデザインプロセス
ユーザーインサイト アルゴリズム理解
UXコンセプトの定義
UIデザイン
活用できるデータ模索
モデルチューニング

39. AI時代のUXデザインプロセス
ユーザーインサイト アルゴリズム理解
UXコンセプトの定義
UIデザイン
活用できるデータ模索
モデルチューニング

40. IA設計とタクソノミー
ユーザー心理を踏まえた、
適切な情報設計とカテゴ
ライズの技術
AI時代のUXデザインプロセス

41. ○IA設計とタクソノミー アルゴリズムのデザイン
ユーザー心理を踏まえた、
適切な情報設計とカテゴ
ライズの技術
情報設計・タグ付け自体
を生み出すアルゴリズム
の設計
AI時代のUXデザインプロセス

42. 職人技の作り込み
精緻なシナリオ設計と
コミュニケーション設計
AI時代のUXデザインプロセス

43. ○職人技の作り込み
試行錯誤の速度と
回数
精緻なシナリオ設計と
コミュニケーション設計
ブラックボックスである
アルゴリズムをチューニ
ングするための大量の
データ・大量の実験
AI時代のUXデザインプロセス

44. 3. AI化したUXの世界

45. AIによって何ができるように
なったのか？

46. AIによって実現される
新しいユーザー・エクスペリ
エンスとは？

47. AIは何ができるのか？
1. パーソナライズできる
2. “画像”を扱える
3. “会話”を扱える
4. 人の仕事を支援できる
5. …というプロセスを自動化できる

48. １．パーソナライズできる
一人ひとりに合わせたパーソナライズは、協調フィルタリングをはじめと
するビッグデータ処理技術によって格段に精度が向上し、デジタルサービ
スにはなくてはならないものになっている

49. Amazon.co.jp
協調フィルタリング等により、
様々な切り口で商品をレコメンド

50. Netflix
ユーザー一人ひとりに合わせてお
すすめビデオをレコメンド
滞在時間を最大化することで継続
率を高めている

51. ゼクシィアプリ
結婚にまつわる記事コンテンツを
個々人に合わせてパーソナライズ
記事の全文テキストの解析データ
から「似ている記事」を自動判定
している

52. word2vecを用いたレコメンド
（リクナビ）
自然言語処理に使われるword2vecの技術を応用し、
ユーザー行動に基づくレコメンドモデルを構築
https://www.slideshare.net/recruitcojp/ss-56150629

53. ２．“画像”が扱える
これまでコンピュータは「画像」を扱うのが難しかった。深層学習により、
画像解析の技術が格段に進化し、Instagramに代表される、画像をベースと
したハイレベルなサービスが提供されるようになっている。

54. Pinterest
画像解析により「似ている画像」
や「タグ（キーワード）」をレコ
メンド
写真を延々とたどりながら好きな
イメージを見つけ出すことができ
る

55. ホットペッパービューティ
ネイルの写真から、感覚的に類似
しているネイルデザインを探すこ
とができる

56. ３．“会話”が扱える
自然言語処理をベースに、文脈に合わせて適切な会話を返す技術も進展し、
いわゆる「チャットボット」も様々なシーンで活用されるようになってき
た。人工知能を相手に会話する、という行動は、今後ますます一般的に
なってくると考えられる。

57. Relux（高級旅館・ホテル予約
サービス）
チャットボットで、自動的にニー
ズに合った旅館・ホテルの提案か
ら予約まで実施できる
https://www.travelvoice.jp/20150528-43661

58. ietty（不動産検索サービス）
チャットボットで家さがしの条件
を相談。ニーズに合わせた不動産
情報が自動で届く。
https://www.travelvoice.jp/20150528-43661

59. Google Assistant
2018年5月のGoogle I/Oでは、自
動でレストランに電話を掛けて予
約してくれるアシスタント機能が
紹介された

60. ４．人の仕事を支援できる
「AIが人の仕事を奪う」という恐れが語られる一方で、実際には「AIが人の
仕事を支援することで、これまで以上の体験価値を提供する」という取り
組みも広がっている。

61. Conversica（CRMアシスタント）
AIによるセールスアシスタント。
見込み客へのメール等のフォロー
アップをAIが自動でやってくれる。

62. ゼクシィ相談カウンター
新郎新婦に最適な結婚式場をおす
すめする対人サービスで、AIによ
るレコメンドシステムを導入し、
アドバイザーの業務を支援

63. ５．…というプロセスを
自動化できる
1～4のような新しいユーザー体験が生まれるだけでなく、そうしたユー
ザー体験を提供し、改善していく「プロセス」自体が、AIによって自動化
されるようになっている。

64. バンディットアルゴリズム
元々は、複数のスロットマシーン
で得られる報酬を最大化するため
の方策。
ウェブサイトでは複数の表示パ
ターンから最適なパターンを自動
で発見し自動で収束させることで
成果を最大化する手法として活用
されている。

65. 毎日、4つのTOPニュース候補からどれをメインで表示すれば最適な
のかを自動で判断してチューニング。
最も良くない表示のさせ方と比較して、CTR232%を達成
バンディットアルゴリズムによるUI最適化の事例（米Yahoo!）

66. Adobe “Perfect Path”（デモ）
2018年3月の“Adobe Summit”では、
カスタマーの属性や行動履歴から、
リアルタイムで最適な導線やバ
ナーを表出できるようになるとい
う未来が描かれた
“UXデザイナー”という仕事自体が不要になる世界が来るかもしれない

67. https://twitter.com/goando/status/1036807858933952512

68. AIは何ができるのか？
1. パーソナライズできる
2. “画像”を扱える
3. “会話”を扱える
4. 人の仕事を支援できる
5. …というプロセスを自動化できる

69. 4. ＜検索＞の終焉？

70. 最近の取り組みから
個人的に感じたこと

71. AIはUXデザインにとって
大きなチャンス

72. これまでの技術的制約を超えて、
「理想的なUX」
を模索できるのではないか

73. 「ゼクシィ」での取り組み

74. 「ゼクシィ」のNET/APPの
改善に関わる中で感じたこと

75. 楽しいはずの結婚準備なのに
ネットの体験だけが
全然楽しくない

76. 雑誌は眺めているだけで、楽しい
雑誌をパラパラと眺めている
だけで、気持ちが盛り上がる。
二人で一緒にゼクシィを見る
のは、結婚を実感する瞬間。

77. カウンターでの相談も、楽しい
話を聞きながら、やりたい式
のイメージが膨らんでくる
信頼できるアドバイザーのお
かげで、らくらく進む

78. ブライダルフェアも、楽しい
http://www.tgn.co.jp/hall/shizuoka/ath/first-fair/
実際の会場を見ると、テン
ションが上がる
美味しい試食もできたり、ワクワク
デート感覚

79. なのにネットは・・・
https://motejo.jp/single/he-is-myaku-nashi-man.html
式場検索、大変。。。
いろいろありすぎて選べない。
機械的で、なんとなくテン
ション上がらない。

80. なのにネットは・・・
https://motejo.jp/single/he-is-myaku-nashi-man.html
式場探し、大変。。。
いろいろありすぎて選べない。
なんとなくテンション上がら
ない。
ネットの情報収集だけが
「こなすべき面倒なタスク」
になってしまっている

81. なんとかできないか？

82. 「いかにも検索サイト」という流れが、
テンションを下げるのではないか
トップ 条件指定 一覧 詳細

83. そこで、全然違う検索体験を
作ってみた

84. フォト検索
マルチモーダル（画像とテキストを関連づけて類似
度をマッピングできる技術）を活用し、「こんな式
がやりたい」というイメージから式場を探すことが
できる機能を実装

85. デモ

86. 写真を眺めていく中で、自
分のイメージに近い写真に
出会う
いろいろな写真があると、や
りたいイメージが膨らんでく
る～。

87. 選んだ写真から、おすすめ
のテーマ（キーワード）が
提案される
「私はこういうのが好きなん
だ～」という発見があってテ
ンションあがる

88. 選んだテーマに近い式場が
レコメンドされる
好みに合ったものだけ出てく
るから、興味が持てる♪

89. 普通の検索
トップ 条件指定
一覧 詳細
アクション
（CV）

90. フォト検索
写真を選ぶ
軸の提案
軸に合った
式場
アクション
（CV）

91. 仕組みと技術

92. マルチモーダル機械学習を利用した
画像・テキストによる相互検索API
※リクルートテクノロジーズが提供するAI・機械学習ソ
リューション「A3RT」シリーズのひとつ

93. 体にはたくさんのセンサーが張り巡らされている
味覚
触覚
嗅覚
視覚
聴覚

94. 人は経験的複数の感覚を雨という概念と結びつけている
雨の音を
聞く
雨を見る 濡れる雨の匂い
を嗅ぐ
雨だ！（知覚）

95. 0101010101010101
0101010101010101
0101010101010101
0101010101010.....
ハワイに行きました。
海がとても青くて
陽の光が眩しかったです。
0101010101010101
0101010101010101
0101010101010101
0101010101010.....
Icon: http://www.icondrawer.com/
画素データ
文字列データ
画素データの
数値列
文字コードの
数値列
0101010101010101
0101010101010101
0101010101010101
0101010101010.....
波の音
波形データ
関係は？？
波データの
数値列
コンピューターはわからない

96. マルチモーダル学習は情報間の隔たりを埋める
画像
テキスト
画像とテキストの
セマンティックギャップ
（意味的隔たり）
コンピューターの世界
0101010101010101
0101010101010101
0101010101010101
0101010101010.....
0101010101010101
0101010101010101
0101010101010101
0101010101010.....
ハワイに行きました。
海がとても青くて
陽の光が眩しかったです。
Icon: http://www.icondrawer.com/

97. 画像と画像に対する説明文のペアさえあれば学習可能
こういう画像はこういうテキスト
関係性を学習
クリスマスにワイングラスで乾杯。
赤い薔薇とオシャレなテーブル
セッティングで素敵なディナーを
お召し上がりください。

98. マルチモーダル学習は結合空間に複数の情報が関連性が高い
ものを近くにマッピングするように学習する
距離が近ければ関連性が高い
・画像a
x4
x1
・画像b
x2
x3
xd
︙
・テキストc
・テキストd
結合空間
x4
x1
x2
x3
xd
︙
・画像b
・画像a
画像空間
x4
x1
x2
x3
xd
︙
・テキストd
・テキストc
テキスト空間

99. ユーザーにとっての価値は？

100. 「どんな式がやりたい？」と聞かれても、
うまく言語化できない
でも、目の前のイメージから
「こういうのは好き/嫌い」は選べる
典型的な花嫁像

101. 「どんな式がやりたい？」と聞かれても、
うまく言語化できない
でも、目の前のイメージから
「こういうのは好き/嫌い」は選べる
典型的な花嫁像
「普通の検索」では、条件を指定することができず、
困ってしまう×

102. 「どんな式がやりたい？」と聞かれても、
うまく言語化できない
でも、目の前のイメージから
「こういうのは好き/嫌い」は選べる
典型的な花嫁像
「普通の検索」では、条件を指定することができず、
困ってしまう
「フォト検索」なら、直感的な「好き」を基軸にして
自然に自分の好みにたどり着ける
×
○

103. 「検索」はどう変わるか

104. そもそも「検索」って不自然

105. 普通の検索
トップ 条件指定
一覧 詳細
アクション
（CV）

106. 意思決定の流れ(？)
ニーズ発生 軸形成
比較検討 絞込
アクション
（CV）

107. 本当？

108. 意思決定の流れ？
なんとなく
調べてみる
考える こっちかなー
いや、やっぱり
これかなー 一晩置いてみる
全然違う候補が
出てきて悩む
困って
一旦検討停止
関係なく、たまたま
見たものに一目惚れ

109. 全然違う

110. なぜ？

111. （おそらく）
単なる技術的制約

112. コンピュータの制約
010101010001111010101011…
カチッとした条件しか扱えない

113. 「検索」＝
「目当ての情報を探し出す」
というメタファー

114. 「検索」のルーツ
「○○について知りた
いけど、どの本の中に
載っているかな」
＝“蔵書検索”
＝“図書館情報学”
https://www.darpa.mil/program/memex

115. あらかじめ「正解」（ほしいもの）
はわかっている。
それを膨大なデータの中から
いかにスムーズに見つけ出すか
が検索のイシュー

116. 人生における
「意思決定」は全く異なる

117. あらかじめ「正解」が
あるわけではない。
それ自体、検討体験の中で、
徐々に構築されていくもの

118. むしろ、最終的に選んだ時に
はじめて
「正解」が決まる

119. 「意思決定」とは
「運命の出会い」
「一目惚れ」
→理詰めではない

120. 「意思決定」とは
「相談」「交渉」
「議論」「納得」
→コミュニケーション
で刻々と変わる

121. 意思決定はそもそも
曖昧でファジーなもの

122. 曖昧なものは、
コンピュータが扱いきれない

123. AIの進化で
状況が変わってきた

124. －今までのコンピュータによる最適化の能力では、答えは
基本的に1つしかない。それがディープラーニングだと、
答えがそもそもないのです。「確たる答えはないけど、な
んとなくこう」っていうのがディープラーニングです。
－いちばんの特徴は、コンピュータがこれまで持てなかっ
たセンスや感覚が生まれたということです。
UEI清水さんのインタビュー
http://toyokeizai.net/articles/-/185678

125. 深層学習により、
AIが「曖昧なコト」を
扱えるようになった

126. 「こんな式が挙げたい」と
いう曖昧なニーズを扱いた
い、という試み

127. そもそも＜検索して買う＞は普遍的では
ない
• 「AISAS」が提唱されたのは2005年。たかだか10年前。
http://www.stp-works.com/blog/ppc/397.html

128. 最新の消費行動モデル「CREEP」
• 「検索」という行動が入っていない
トライバルメディアハウス代表取締役社長 池田 紀行氏のブログより引用
http://www.ikedanoriyuki.jp/?p=5913

129. 昔は＜検索して買う＞なんてしていな
かった
https://www.edo-tokyo-museum.or.jp/s-exhibition/special/2171/%E3%83%9C%E3%82%B9%E3%83%88%E3%83%B3%E7%BE%8E%E8%A1%93%E9%A4%A8-
%E6%B5%AE%E4%B8%96%E7%B5%B5%E5%90%8D%E5%93%81%E5%B1%95/

130. ＜検索サイト＞は
デジタル黎明期にたまたま生まれた
時代の徒花かもしれない

131. https://hana-yume.net/howto/wedding-soudan/
“情報検索サイト” 意思決定支援サービス

132. AIによって
＜自然な＞体験をデジタルで
実現できるようになる

133. テクノロジーによる、
場所やリソースの制約を超えた
体験の「民主化」「大衆化」

134. まとめ

135. “AIが変えるユーザー・エクスペリエンス”とは
• UXデザインのプロセスが変化している
• 画面ではなくアルゴリズムをデザイン
• 作り込みではなく、試行錯誤でチューニング
• 新しいユーザー体験が生み出されている
• パーソナライズ・画像解析・チャットUIから、人の仕事の支援まで
• プロセス自体の自動化も進んでいる
• AIは、既存の技術的制約に基づくイケてない体験
（例えば「検索」）を刷新するチャンスともいえる

136. fin