Machine Learning for Rapid Prototyping #CIIDSummerSchool

Cookpad Tech Kitchen #17
https://cookpad.connpass.com/event/95935/

Transcript

1. Cookpad Tech Kitchen #17 2018.08.22 Machine Learning for Rapid Prototyping Takaya Deguchi / @dex1t
2. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð ग़ޱ و໵ UXエンジニア クックパッド株式会社 新規サービス開発部 @dex1t - 新卒1期⽣で⼊社6年⽬ - 社内外で新規サービスの⽴ち上げに従事 - コードを書きながらデザインするタイプ - 最近はFigmaでデザインしつつ、React Nativeでアプリ 書いて、After Effectsでアニメーションを作る⽇々 $
3. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð なぜクックパッドが？
4. σϯϚʔΫ &Copenhagen
5. σϯϚʔΫ
6. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð w $PQFOIBHFO
   *OTUJUVUF
   PG
   *OUFSBDUJPO
   %FTJHO
   w ΠϯλϥΫγϣϯσβΠϯ͕ओ࣠ͷσβΠϯεΫʔϧ
   w ڭҭɺݚڀɺίϯαϧςΟϯά ɺΠϯΩϡϕʔγϣϯͷࣄۀ
   w খن໛͔ͭ೥૑ઃͰൺֱత৽͍͠΋ͷͷɺධՁ͕ߴ͍
   w *%&0ͳͲʹଔۀੜΛଟ਺ഐग़
8. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð なぜCIIDとクックパッド? w $**%ͱ$PPLQBE
   6,
   (MPCBM
   )2 ͕ఏܞ
   
   w ւ֎ڌ఺΋ؚΊͨσβΠϯྗ޲্ɺ࠾༻ڧԽ͕໨త
   w ͜Ε͕͖͔͚ͬͰ$**%ͷαϚʔεΫʔϧʹࢀՃͰ͖Δ͜ͱʹ
   w (͔Β໊ɺ)͔Β໊Λ೿ݣ
10. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð • 7/2 - 8/3 in Copenhagen • 1セット5⽇間のワークショップが約20個 • ユーザー調査やインタラクションデザ イン基礎から、サービスデザイン、ML やブロックチェーンまで • 参加者は世界各国、バックグラウンドも 多様 CIID Summer School
11. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð
12. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð
13. Machine Learning for Rapid Prototyping
14. Machine Learning
15. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð なんでもやってくれそう
16. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð なんかすごそう
17. ઐ໳ͷਓʹ೚ͤΑʂʂʂ
18. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð MLはデザイナーには無関係？ • ⚡そうとも⾔い切れなくなってきた ⚡ • ML技術を道具として使うことでプロトタイピングの幅が広がる • そのための環境が整いつつある • 今⽇はその⼀部をご紹介します
19. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð Machine Learning Workshop in CIID • MLをインタラクションデザインにどう取り⼊れるか • 広く捉えると、技術とデザインをどうつなげるか • 講師はクリエイティブコーディング系のバックグラウンド • 機能のためのコーディングではなく、表現のための コーディング
20. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð https://vimeo.com/197026662 https://vimeo.com/139123754 ML for Creative Coding 講師2⼈の作品
21. Doodle Tunes by andreasref http://andreasrefsgaard.dk/project/doodle-tunes/
22. Experiments with style transfer by genekogan http://genekogan.com/works/style-transfer/
23. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð • WS前半では、MLのアートへの適⽤例が多く紹介 • ML for Artists (ml4a.github.io) • UIデザインに活かした事例はまだ少ない • Airbnbが実験的な取り組みをしている https://twitter.com/genekogan/status/857922705412239362 ML for Creative Coding
24. Skething Interfaces by Airbnb IUUQTBJSCOCEFTJHOTLFUDIJOHJOUFSGBDFT
25. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð
26. IUUQTBJSCOCEFTJHO (余談) Airbnbの技術とデザインを繋ぐ取り組みは先進的
27. クックパッドも試⾏錯誤し始めました (https://seleck.cc/1247)
    
28. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð ML for Rapid Prototyping • WS中盤は、ML技術を実際に使ってプロトタイピングを体感 • お題「ヨガ指導アプリVivifyを45分で再現せよ」
29. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð Vivify (http://www.victoria-hammel.com/vivify)
30. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð 普通は45分では作れない IUUQXXXWJDUPSJBIBNNFMDPNWJWJGZ 圧⼒センサーなど物理的な作り込みが必要
31. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð 実際に30分で作ったもの
32. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð MLで物理的な作り込みをショートカット • カメラの前でヨガすると、正しいポーズであることを教 えてくれる • センシングではなく、パターン認識で代替 • 実⽤には程遠いが、体験のプロトタイプとしては⼗分 • かけた時間は30分 • Listen, build, test, repat.
33. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð Algorithm (k-NN) Model (Wekinator) A B C 技術的には素朴
34. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð 技術的には素朴 Algorithm (k-NN) Model (Wekinator) A B C A
35. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð ML for Designers • 単純なものでもイチから実装するのは⼤変 • 正解データの⽤意、モデルの構築、カメラなど⼊出 ⼒とのつなぎ込み… • プロトタイピングに集中するための環境が整いつつある • 学習済みモデルと、⼊出⼒環境へのつなぎ込みが容易 • Wekinator, Runway, ml5.js etc Algorithm (k-NN) Model (Wekinator) A B C A
36. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð Runway (runwayml.com) • PosenetやYOLOなど学習済みモデルがいくつも⽤意されている • かつ、ProcessingやOpenFrameworks, JS, Arduinoなどと繋ぎこみが容易 • デザイナーは⼊出⼒部分だけに集中できる
37. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð ml5.js (ml5js.org) • TensorFlow.jsを扱いやすくしたラッパー • JSなのでWebアプリとのつなぎ込みが容易 • こちらも学習済みモデルが豊富に揃っている
38. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð MLを使ったプロトタイピングの可能性 • ハードウェアが絡むプロトタイピングには有⽤そう • 普通なら、モックを頑張って作るか、⼨劇 (アクティングアウト)、 プロモーション動画で体験を模倣 • デザインスプリントなど短時間でプロトタイピングが必要なケース では特に有⽤ • アンテナを張っておく • 無関係と思ってると、使いどころがあっても気づけない
39. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð WS後半はハッカソン形式
40. Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð 雑感 • ML技術をプロトタイプに利⽤するハードルはどんどん下がっている • 専⾨家だけのものでは無い • 5⽇間のWSで、プロトタイピングの引き出しが増えた感覚 • 参加者は総じてオープンマインド。物怖じしない姿勢が凄い • 夏のコペンハーゲン最⾼ ☀