Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜：2017年4月22日 AI eats UX meetup

Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜：2017年4月22日 AI eats UX meetup

1. 1. Waston  が拓拓く  UX  の新しい地平 〜～  UX  デザイナーが  IBM  Waston  を使ってみた  〜～ HCD-‐‑‒Net認定  ⼈人間中⼼心設計専⾨門家 ⽻羽⼭山  祥樹  @storywriter 1 2017年年  4⽉月22⽇日（⼟土）
2. 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. 3 メンタルモデル ユーザーへの共感から⽣生まれるUXデザイン戦略略 Amazonで購⼊入： http://www.amazon.co.jp/dp/4621088068 コンピュータ・IT  >  インターネット・Web開発  >  Web開発  最⾼高「1位」 コンピュータ・IT  総合 　最⾼高「9位」
4. 4. 4 AI（⼈人⼯工知能）とのかかわり： 1年年ほど前から、UXデザイナー  および  エンジニア  の ⽴立立場で、AI  の実務をしています。
5. 5. 5 IBM  Watson： IBM  の  Watson  は、⼿手軽に使える  AI  です。 IBM  のクラウドサービス  Bluemix  を 契約すると（個⼈人でもOK）、すぐに使えます。 従量量課⾦金金制で、さらに無料料枠もあるので、 試すくらいなら、個⼈人でも安⼼心。 備考： IBM  ⾃自⾝身は、Watson  を「⼈人⼯工知能」だとは⾔言っていません。「ヒトの認知 能⼒力力を⽀支援する  Cognitive  Systems（認知システム）」と表現しています。
6. 6. 6 まず解かなければいけない誤解： IBM  の  CM  で「やるじゃん、Watson」という、 ⾃自然な会話をしている⾵風のものがありますが あれは、嘘とまではいかないまでも、 CM  ⽤用に、ガチガチに実装されています。 なぜなら、Watson  には、2017年年4⽉月時点で： •  ⽂文脈を理理解する能⼒力力はない。 •  ⾔言語を⽣生成する能⼒力力はない。 •  「考える」能⼒力力はない。
7. 7. 7 それでも  UXデザイナーが  Watson  を使う理理由： それでも  UXデザイナーは、 Watson  を今のうちに使ってみるといい、と思います。 なぜなら、  　Watson  は「⼈人間の認知を代替」する  AI だからです。将来の  UI  のヒントが含まれています。
8. 8. 8 とりあえず  Watson  を使ってみよう： IBM  Bluemix  のアカウントをつくる。 デモ 引⽤用： https://console.ng.bluemix.net/
9. 9. 9 とりあえず  Watson  を使ってみよう： 「カタログ」から 「Watson」  >  「Speech  To  Text」 を選んで「公開」をクリック。 これで  ⾳音声認識識API  がもう使える。 デモ 引⽤用： https://console.ng.bluemix.net/
10. 10. 10 とりあえず  Watson  を使ってみよう： 「ダッシュボード」から、先ほど作った 「Speech  To  Text」を選択、「サービス資格情報」に、 APIのURL、ユーザーID、パスワードがある。 デモ 引⽤用： https://console.ng.bluemix.net/
11. 11. 11 とりあえず  Watson  を使ってみよう： ⽤用意した⾳音声： デモ https://github.com/storywriter/Watson-‐‑‒Speech-‐‑‒To-‐‑‒Text-‐‑‒201612/raw/ master/audio-‐‑‒file-‐‑‒ja.flac
12. 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. 13 とりあえず  Watson  を使ってみよう： 戻り値は  JSON  形式で返ってくる： デモ {  "results":  [  {  "alternatives":  [  {    "confidence":  0.73,    "transcript":  "ただいま  ワトソン  の  テスト  中  ⻑⾧長芋   と  その  テスト  中  の  ⽇日  は  晴天  なり  の  ⽇日  は  晴天  な り  ” }  ],  “final”:  true  }  ],    “result_̲index”:  0  }
14. 14. 14 これだけで  Watson  が使えた！： かんたん設定と、コマンド⼀一発で、いきなり使える。 デモ リンクスタート！
15. 15. 15 UXデザインの観点では、何が起きたか？： ⾼高度度な技術が必要と思っていた 「⼈人間の⽿耳」の認知機能が、かんたんに代替できた！ これが⾰革新的。⼈人間の側に「⽿耳」がなくてよい。 ⽿耳の認知⽿耳の認知 シ ス テ ム シ ス テ ム ⼈人 間 ⼈人 間
16. 16. 16 AI  には、いろいろな種類がある： AI  には、いろいろな種類があります。 Watson  は「認知型」の  AI  です。 ⼈人間と外界とのインタフェースを代替することが できます。 統計に強 いAI 特定⽤用途 に特化し たAI 強化学習 や深層学 習のAI 認知を代 替するAI ・・・ 他いろいろ
17. 17. 17 Watson  が得意とする範囲： Watson  は「⼈人間の認知を拡張する」のが得意。 •  ⾔言語処理理 •  画像処理理 •  ⾳音声認識識処理理 だからこそ、⼈人間の認知をあつかう仕事である、 僕ら  UXデザイナー  は  Watson  をさわるといい。 備考： ⾔言ってしまえば  Watson  でなくてもよい。Microsoft  でも  Google  でも。
18. 18. 18 Watson  が苦⼿手とする範囲： あまり得意でないのは、数値演算。Math  関数もない。 （つまり  1  +  1  の計算もできない） 統計解析モジュールもあるけれど、SPSS（統計解析ソフト）を買収して ブランドに⼊入れただけの印象で、いまいち統合されてない。
19. 19. 19 Watson  を使ってみよう： 今度度は「Visual  Recognition」を試してみましょう。 画像認識識API  です。 デモ 引⽤用： https://console.ng.bluemix.net/
20. 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. 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. 22 Watson  に学習させてみよう： 学習させたい対象の写真を、50枚（+α）⽤用意して、 「Yoshiki_̲Hayama」とタグづけして、アップロード。 デモ
23. 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. 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. 25 これだけで  Watson  が使えた！： かんたんな⼿手順、少量量のデータで、 それなりの学習がされて、使える。 デモ オーディナルスケール起動！
26. 26. 26 UXデザインの観点では、何が起きたか？： ⾼高度度な技術が必要と思っていた 「⼈人間の⽬目」の認知機能が、かんたんに代替できた！ ⼈人間の側に「⽬目」がなくてよい。 ⽬目の認知⽬目の認知 シ ス テ ム シ ス テ ム ⼈人 間 ⼈人 間
27. 27. 27 Watson  が代替・拡張する認知能⼒力力： アイデアの例例： 例例えば、全盲者が、スクリーンリーダーで ウェブページを読みあげていたとき、 alt  属性が適切切でない画像を、 「Visual  Recognition」にかけることで、 内容を知ることができる。 視覚が、Watson  によって代替・拡張された。
28. 28. 28 Watson  が拓拓く  UX  の新しい地平： これまで、⼈人間がシステムの都合に寄り添って、 インタフェースを設計してきた。
29. 29. 29 Watson  が拓拓く  UX  の新しい地平： 今後は、システムが⼈人間の認知に寄り添う。 ⼈人間の代わりにシステムが認知する。 UXデザイナーは、その設計をするのが仕事に。 それ取って
30. 30. 30 Watson  が拓拓く  UX  の新しい地平： Watson  は⼈人⼯工知能の⾰革新というより インタフェースの⾰革新である。
31. 31. 31 まとめ： 1.  Watson  は、⼿手軽に使える  AI。 2.  Watson  は、かんたんに、 ⼈人間の認知を代替することができる。 その意味で、UXデザインにとって⾰革新的。 3.  UXデザイナーは、今から  Watson  に ふれるといいと思う。 Watson  でなくても、認知型  AI  なら  Microsoft  でも  Google  でも。
32. 32. 32 ありがとうございました。 ⽻羽⼭山  祥樹 Twitter:  @storywriter Facebook:  storywriter.jp Facebook  でも、ぜひ、つながってください！
33. 33. ⽻羽⼭山のプレゼンのアレ          が、  　 　スタンプになりました！ スタンプ名：ハーミィ（CSS編） 　作者名：⽻羽⼭山  祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類