Pro Yearly is on sale from $80 to $50! »

Machine Learning for Rapid Prototyping #CIIDSummerSchool

Machine Learning for Rapid Prototyping #CIIDSummerSchool

C33c448e4b5d5ca673aaecf04d3e126f?s=128

Takaya Deguchi

August 22, 2018
Tweet

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

    なぜCIIDとクックパッド? w $**%ͱ$PPLQBE6, (MPCBM)2 ͕ఏܞ w ւ֎ڌ఺΋ؚΊͨσβΠϯྗ޲্ɺ࠾༻ڧԽ͕໨త w ͜Ε͕͖͔͚ͬͰ$**%ͷαϚʔεΫʔϧʹࢀՃͰ͖Δ͜ͱʹ w (͔Β໊ɺ)͔Β໊Λ೿ݣ
  9. None
  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で、プロトタイピングの引き出しが増えた感覚 • 参加者は総じてオープンマインド。物怖じしない姿勢が凄い • 夏のコペンハーゲン最⾼ ☀