2017年4月22日「AI eats UX meetup」での「Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜」の資料です。イベントのページ：https://uxtokyo.connpass.com/event/52556/

1. Waston が拓拓く UX の新しい地平
〜～ UX デザイナーが IBM Waston を使ってみた 〜～
HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家
⽻羽⼭山 祥樹 @storywriter
1
2017年年 4⽉月22⽇日（⼟土）

2. ⽻羽⼭山 祥樹 HAYAMA Yoshiki
v インフォメーションアーキテクト
• 使いやすいWebサイトをつくる専⾨門家
• HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家
v Web業界に20年年くらい
v 担当したWebサイトが、雑誌のWebユーザビリティランキン
グで国内トップクラスの評価を受ける ほか実積多数
v 主な専⾨門分野
• ユーザーエクスペリエンス、情報アーキテクチャ、
⼈人間中⼼心設計、アクセシビリティ、⼤大規模CMS、AI、ライター
Twi$er：@storywriter
WebSite:
storywriter.jp
2
ユーザー⼼心理理を
つかむプロです

3. 3
メンタルモデル
ユーザーへの共感から⽣生まれるUXデザイン戦略略
Amazonで購⼊入：
http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼高「1位」
コンピュータ・IT 総合 最⾼高「9位」

4. 4
AI（⼈人⼯工知能）とのかかわり：
1年年ほど前から、UXデザイナー および エンジニア の
⽴立立場で、AI の実務をしています。

5. 5
IBM Watson：
IBM の Watson は、⼿手軽に使える AI です。
IBM のクラウドサービス Bluemix を
契約すると（個⼈人でもOK）、すぐに使えます。
従量量課⾦金金制で、さらに無料料枠もあるので、
試すくらいなら、個⼈人でも安⼼心。
備考：
IBM ⾃自⾝身は、Watson を「⼈人⼯工知能」だとは⾔言っていません。「ヒトの認知
能⼒力力を⽀支援する Cognitive Systems（認知システム）」と表現しています。

6. 6
まず解かなければいけない誤解：
IBM の CM で「やるじゃん、Watson」という、
⾃自然な会話をしている⾵風のものがありますが
あれは、嘘とまではいかないまでも、
CM ⽤用に、ガチガチに実装されています。
なぜなら、Watson には、2017年年4⽉月時点で：
• ⽂文脈を理理解する能⼒力力はない。
• ⾔言語を⽣生成する能⼒力力はない。
• 「考える」能⼒力力はない。

7. 7
それでも UXデザイナーが Watson を使う理理由：
それでも UXデザイナーは、
Watson を今のうちに使ってみるといい、と思います。
なぜなら、
Watson は「⼈人間の認知を代替」する AI
だからです。将来の UI のヒントが含まれています。

8. 8
とりあえず Watson を使ってみよう：
IBM Bluemix のアカウントをつくる。
デモ
引⽤用：
https://console.ng.bluemix.net/

9. 9
とりあえず Watson を使ってみよう：
「カタログ」から
「Watson」 > 「Speech To Text」
を選んで「公開」をクリック。
これで ⾳音声認識識API がもう使える。
デモ
引⽤用：
https://console.ng.bluemix.net/

10. 10
とりあえず Watson を使ってみよう：
「ダッシュボード」から、先ほど作った
「Speech To Text」を選択、「サービス資格情報」に、
APIのURL、ユーザーID、パスワードがある。
デモ
引⽤用：
https://console.ng.bluemix.net/

11. 11
とりあえず Watson を使ってみよう：
⽤用意した⾳音声：
デモ
https://github.com/storywriter/Watson-‐‑‒Speech-‐‑‒To-‐‑‒Text-‐‑‒201612/raw/
master/audio-‐‑‒file-‐‑‒ja.flac

12. 12
とりあえず Watson を使ってみよう：
curl -‐‑‒X POST -‐‑‒u <username>:<password>
-‐‑‒-‐‑‒header "Content-‐‑‒Type: audio/flac”
-‐‑‒-‐‑‒header "Transfer-‐‑‒Encoding: chunked”
-‐‑‒-‐‑‒data-‐‑‒binary @<path>audio-‐‑‒file-‐‑‒ja.flac
"https://stream.watsonplatform.net/speech-‐‑‒
to-‐‑‒text/api/v1/models/ja-‐‑‒JP_̲BroadbandModel/
recognize?continuous=true"
デモ

13. 13
とりあえず Watson を使ってみよう：
戻り値は JSON 形式で返ってくる：
デモ
{ "results": [ { "alternatives": [ {
"confidence": 0.73,
"transcript": "ただいま ワトソン の テスト 中 ⻑⾧長芋
と その テスト 中 の ⽇日 は 晴天 なり の ⽇日 は 晴天 な
り ”
} ], “final”: true } ], “result_̲index”: 0 }

14. 14
これだけで Watson が使えた！：
かんたん設定と、コマンド⼀一発で、いきなり使える。
デモ
リンクスタート！

15. 15
UXデザインの観点では、何が起きたか？：
⾼高度度な技術が必要と思っていた
「⼈人間の⽿耳」の認知機能が、かんたんに代替できた！
これが⾰革新的。⼈人間の側に「⽿耳」がなくてよい。
⽿耳の認知⽿耳の認知
シ
ス
テ
ム
シ
ス
テ
ム
⼈人
間
⼈人
間

16. 16
AI には、いろいろな種類がある：
AI には、いろいろな種類があります。
Watson は「認知型」の AI です。
⼈人間と外界とのインタフェースを代替することが
できます。
統計に強
いAI
特定⽤用途
に特化し
たAI
強化学習
や深層学
習のAI
認知を代
替するAI ・・・
他いろいろ

17. 17
Watson が得意とする範囲：
Watson は「⼈人間の認知を拡張する」のが得意。
• ⾔言語処理理
• 画像処理理
• ⾳音声認識識処理理
だからこそ、⼈人間の認知をあつかう仕事である、
僕ら UXデザイナー は Watson をさわるといい。
備考：
⾔言ってしまえば Watson でなくてもよい。Microsoft でも Google でも。

18. 18
Watson が苦⼿手とする範囲：
あまり得意でないのは、数値演算。Math 関数もない。
（つまり 1 + 1 の計算もできない）
統計解析モジュールもあるけれど、SPSS（統計解析ソフト）を買収して
ブランドに⼊入れただけの印象で、いまいち統合されてない。

19. 19
Watson を使ってみよう：
今度度は「Visual Recognition」を試してみましょう。
画像認識識API です。
デモ
引⽤用：
https://console.ng.bluemix.net/

20. 20
Watson を使ってみよう：
とりあえず写真をアップロードしてみる。
デモ
curl -‐‑‒X POST -‐‑‒F
"images_̲file=@<path>self.jpg"
"https://gateway-‐‑‒
a.watsonplatform.net/visual-‐‑‒
recognition/api/v3/classify?
api_̲key=<api_̲key>&version=2016-‐‑‒
05-‐‑‒20"

21. 21
Watson を使ってみよう：
戻り値は JSON 形式で返ってくる（抜粋）：
デモ
{ "class": "steward", "score": 0.876,
"type_̲hierarchy": "/person/steward” },
{ "class": "person", "score": 0.877 },
{ "class": "coal black color", "score": 0.821 }
⿊黒服の執事・・・。

22. 22
Watson に学習させてみよう：
学習させたい対象の写真を、50枚（+α）⽤用意して、
「Yoshiki_̲Hayama」とタグづけして、アップロード。
デモ

23. 23
Watson に学習させてみよう：
判定したい写真をアップロードする。
デモ
curl -‐‑‒X POST -‐‑‒F
"images_̲file=@<path>self.jpg" -‐‑‒F
"parameters=@<path>myparams.j
son" "https://gateway-‐‑‒
a.watsonplatform.net/visual-‐‑‒
recognition/api/v3/classify?
api_̲key=<api_̲key>&version=2016-‐‑‒
05-‐‑‒20”

24. 24
Watson に学習させてみよう：
戻り値は JSON 形式で返ってくる（抜粋）：
デモ
{ "class": "Yoshiki_̲Hayama", "score":
0.612198 }
...
{ "class": "steward", "score": 0.876,
"type_̲hierarchy": "/person/steward" },
{ "class": "person", "score": 0.877 },
{ "class": "coal black color", "score": 0.821 }
Yoshiki_̲Hayamaと認識識！

25. 25
これだけで Watson が使えた！：
かんたんな⼿手順、少量量のデータで、
それなりの学習がされて、使える。
デモ
オーディナルスケール起動！

26. 26
UXデザインの観点では、何が起きたか？：
⾼高度度な技術が必要と思っていた
「⼈人間の⽬目」の認知機能が、かんたんに代替できた！
⼈人間の側に「⽬目」がなくてよい。
⽬目の認知⽬目の認知
シ
ス
テ
ム
シ
ス
テ
ム
⼈人
間
⼈人
間

27. 27
Watson が代替・拡張する認知能⼒力力：
アイデアの例例：
例例えば、全盲者が、スクリーンリーダーで
ウェブページを読みあげていたとき、
alt 属性が適切切でない画像を、
「Visual Recognition」にかけることで、
内容を知ることができる。
視覚が、Watson によって代替・拡張された。

28. 28
Watson が拓拓く UX の新しい地平：
これまで、⼈人間がシステムの都合に寄り添って、
インタフェースを設計してきた。

29. 29
Watson が拓拓く UX の新しい地平：
今後は、システムが⼈人間の認知に寄り添う。
⼈人間の代わりにシステムが認知する。
UXデザイナーは、その設計をするのが仕事に。
それ取って

30. 30
Watson が拓拓く UX の新しい地平：
Watson は⼈人⼯工知能の⾰革新というより
インタフェースの⾰革新である。

31. 31
まとめ：
1. Watson は、⼿手軽に使える AI。
2. Watson は、かんたんに、
⼈人間の認知を代替することができる。
その意味で、UXデザインにとって⾰革新的。
3. UXデザイナーは、今から Watson に
ふれるといいと思う。
Watson でなくても、認知型 AI なら Microsoft でも Google でも。

32. 32
ありがとうございました。
⽻羽⼭山 祥樹
Twitter: @storywriter
Facebook: storywriter.jp
Facebook でも、ぜひ、つながってください！

33. ⽻羽⼭山のプレゼンのアレ が、
スタンプになりました！
スタンプ名：ハーミィ（CSS編） 作者名：⽻羽⼭山 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類