Machine Learning for Rapid Prototyping #CIIDSummerSchool

Slide 1

Slide 1 text

Cookpad Tech Kitchen #17 2018.08.22 Machine Learning for Rapid Prototyping Takaya Deguchi / @dex1t

Slide 2

Slide 2 text

Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð ग़ޱ و໵ UXエンジニアクックパッド株式会社新規サービス開発部 @dex1t - 新卒1期⽣で⼊社6年⽬ - 社内外で新規サービスの⽴ち上げに従事 - コードを書きながらデザインするタイプ - 最近はFigmaでデザインしつつ、React Nativeでアプリ書いて、After Eﬀectsでアニメーションを作る⽇々 $

Slide 3

Slide 3 text

Slide 4

Slide 4 text

σϯϚʔΫ &Copenhagen

Slide 5

Slide 5 text

σϯϚʔΫ

Slide 6

Slide 6 text

Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð w $PQFOIBHFO*OTUJUVUFPG*OUFSBDUJPO%FTJHO w ΠϯλϥΫγϣϯσβΠϯ͕ओ࣠ͷσβΠϯεΫʔϧ w ڭҭɺݚڀɺίϯαϧςΟϯά ɺΠϯΩϡϕʔγϣϯͷࣄۀ w খن໛͔ͭ೥૑ઃͰൺֱత৽͍͠΋ͷͷɺධՁ͕ߴ͍ w *%&0ͳͲʹଔۀੜΛଟ਺ഐग़

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð • 7/2 - 8/3 in Copenhagen • 1セット5⽇間のワークショップが約20個 • ユーザー調査やインタラクションデザイン基礎から、サービスデザイン、ML やブロックチェーンまで • 参加者は世界各国、バックグラウンドも多様 CIID Summer School

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Machine Learning for Rapid Prototyping

Slide 14

Slide 14 text

Machine Learning

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

ઐ໳ͷਓʹ೚ͤΑʂʂʂ

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð Machine Learning Workshop in CIID • MLをインタラクションデザインにどう取り⼊れるか • 広く捉えると、技術とデザインをどうつなげるか • 講師はクリエイティブコーディング系のバックグラウンド • 機能のためのコーディングではなく、表現のためのコーディング

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Doodle Tunes by andreasref http://andreasrefsgaard.dk/project/doodle-tunes/

Slide 22

Slide 22 text

Experiments with style transfer by genekogan http://genekogan.com/works/style-transfer/

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Skething Interfaces by Airbnb IUUQTBJSCOCEFTJHOTLFUDIJOHJOUFSGBDFT

Slide 25

Slide 25 text

Slide 26

Slide 26 text

IUUQTBJSCOCEFTJHO (余談) Airbnbの技術とデザインを繋ぐ取り組みは先進的

Slide 27

Slide 27 text

クックパッドも試⾏錯誤し始めました (https://seleck.cc/1247)

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð MLで物理的な作り込みをショートカット • カメラの前でヨガすると、正しいポーズであることを教えてくれる • センシングではなく、パターン認識で代替 • 実⽤には程遠いが、体験のプロトタイプとしては⼗分 • かけた時間は30分 • Listen, build, test, repat.

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Cookpad Inc. All Rights Reserved. Cookpad Tech Kitchen #17 ð MLを使ったプロトタイピングの可能性 • ハードウェアが絡むプロトタイピングには有⽤そう • 普通なら、モックを頑張って作るか、⼨劇 (アクティングアウト)、プロモーション動画で体験を模倣 • デザインスプリントなど短時間でプロトタイピングが必要なケースでは特に有⽤ • アンテナを張っておく • 無関係と思ってると、使いどころがあっても気づけない