Machine Learning for Rapid Prototyping #CIIDSummerSchool

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

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

なぜクックパッドが？

σϯϚʔΫ &Copenhagen

σϯϚʔΫ

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

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

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

Machine Learning for Rapid Prototyping

Machine Learning

なんでもやってくれそう

なんかすごそう

ઐ໳ͷਓʹ೚ͤΑʂʂʂ

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

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

https://vimeo.com/197026662 https://vimeo.com/139123754 ML for Creative Coding 講師2⼈の作品

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

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

• WS前半では、MLのアートへの適⽤例が多く紹介 • ML for Artists (ml4a.github.io) • UIデザインに活かした事例はまだ少ない • Airbnbが実験的な取り組みをしている https://twitter.com/genekogan/status/857922705412239362 ML for Creative Coding

Skething Interfaces by Airbnb IUUQTBJSCOCEFTJHOTLFUDIJOHJOUFSGBDFT

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

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

ML for Rapid Prototyping • WS中盤は、ML技術を実際に使ってプロトタイピングを体感 • お題「ヨガ指導アプリVivifyを45分で再現せよ」

Vivify (http://www.victoria-hammel.com/vivify)

普通は45分では作れない IUUQXXXWJDUPSJBIBNNFMDPNWJWJGZ 圧⼒センサーなど物理的な作り込みが必要

実際に30分で作ったもの

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

Algorithm (k-NN) Model (Wekinator) A B C 技術的には素朴

技術的には素朴 Algorithm (k-NN) Model (Wekinator) A B C A

ML for Designers • 単純なものでもイチから実装するのは⼤変 • 正解データの⽤意、モデルの構築、カメラなど⼊出⼒とのつなぎ込み… • プロトタイピングに集中するための環境が整いつつある • 学習済みモデルと、⼊出⼒環境へのつなぎ込みが容易 • Wekinator, Runway, ml5.js etc Algorithm (k-NN) Model (Wekinator) A B C A

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

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

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

WS後半はハッカソン形式

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

Machine Learning for Rapid Prototyping #CIIDSum...

Machine Learning for Rapid Prototyping #CIIDSummerSchool

More Decks by Takaya Deguchi

Other Decks in Design

Featured

Transcript