$30 off During Our Annual Pro Sale. View Details »

Machine Learning for Rapid Prototyping #CIIDSummerSchool

Takaya Deguchi
August 22, 2018

Machine Learning for Rapid Prototyping #CIIDSummerSchool

Takaya Deguchi

August 22, 2018
Tweet

More Decks by Takaya Deguchi

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

  3. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    なぜクックパッドが?

    View Slide

  4. σϯϚʔΫ
    &Copenhagen

    View Slide

  5. σϯϚʔΫ

    View Slide

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

    View Slide

  7. View Slide

  8. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    なぜCIIDとクックパッド?
    w $**%ͱ$PPLQBE6, (MPCBM)2
    ͕ఏܞ
    w ւ֎ڌ఺΋ؚΊͨσβΠϯྗ޲্ɺ࠾༻ڧԽ͕໨త
    w ͜Ε͕͖͔͚ͬͰ$**%ͷαϚʔεΫʔϧʹࢀՃͰ͖Δ͜ͱʹ
    w (͔Β໊ɺ)͔Β໊Λ೿ݣ

    View Slide

  9. View Slide

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

    View Slide

  11. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð

    View Slide

  12. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð

    View Slide

  13. Machine Learning
    for Rapid Prototyping

    View Slide

  14. Machine Learning

    View Slide

  15. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    なんでもやってくれそう

    View Slide

  16. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    なんかすごそう

    View Slide

  17. ઐ໳ͷਓʹ೚ͤΑʂʂʂ

    View Slide

  18. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    MLはデザイナーには無関係?
    • ⚡そうとも⾔い切れなくなってきた ⚡
    • ML技術を道具として使うことでプロトタイピングの幅が広がる
    • そのための環境が整いつつある
    • 今⽇はその⼀部をご紹介します

    View Slide

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

    View Slide

  20. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    https://vimeo.com/197026662 https://vimeo.com/139123754
    ML for Creative Coding
    講師2⼈の作品

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  24. Skething Interfaces by Airbnb
    IUUQTBJSCOCEFTJHOTLFUDIJOHJOUFSGBDFT

    View Slide

  25. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð

    View Slide

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

    View Slide

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

    View Slide

  28. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    ML for Rapid Prototyping
    • WS中盤は、ML技術を実際に使ってプロトタイピングを体感
    • お題「ヨガ指導アプリVivifyを45分で再現せよ」

    View Slide

  29. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    Vivify (http://www.victoria-hammel.com/vivify)

    View Slide

  30. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    普通は45分では作れない
    IUUQXXXWJDUPSJBIBNNFMDPNWJWJGZ
    圧⼒センサーなど物理的な作り込みが必要

    View Slide

  31. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    実際に30分で作ったもの

    View Slide

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

    View Slide

  33. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð

    Algorithm
    (k-NN)
    Model
    (Wekinator)

    A
    B C
    技術的には素朴

    View Slide

  34. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    技術的には素朴

    Algorithm
    (k-NN)
    Model
    (Wekinator)

    A
    B C
    A

    View Slide

  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

    View Slide

  36. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    Runway (runwayml.com)
    • PosenetやYOLOなど学習済みモデルがいくつも⽤意されている
    • かつ、ProcessingやOpenFrameworks, JS, Arduinoなどと繋ぎこみが容易
    • デザイナーは⼊出⼒部分だけに集中できる

    View Slide

  37. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    ml5.js (ml5js.org)
    • TensorFlow.jsを扱いやすくしたラッパー
    • JSなのでWebアプリとのつなぎ込みが容易
    • こちらも学習済みモデルが豊富に揃っている

    View Slide

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

    View Slide

  39. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    WS後半はハッカソン形式

    View Slide

  40. Cookpad Inc. All Rights Reserved.
    Cookpad Tech Kitchen #17
    ð
    雑感
    • ML技術をプロトタイプに利⽤するハードルはどんどん下がっている
    • 専⾨家だけのものでは無い
    • 5⽇間のWSで、プロトタイピングの引き出しが増えた感覚
    • 参加者は総じてオープンマインド。物怖じしない姿勢が凄い
    • 夏のコペンハーゲン最⾼ ☀

    View Slide