React Nativeで作る「触れるプロトタイプ」の活用

1. 佐野大河投稿開発部
React Nativeで作る
「触れるプロトタイプ」の活用

2. だれ？
2
佐野 大河
2017年4月 クックパッド新卒入社
@sn_taiga
投稿開発部 デザイナー

3. 触れるプロトタイプって？
3

4. 4
プロトタイプを作る目的：立てた仮説やアイデアを検証する
触れるプロトタイプ
＝
実際のデータを扱い
本物に近い体験をもとに検証できるプロトタイプ

5. 5
メリット
デメリット
•日常生活でドッグフーディングできる
•質の高いフィードバッグが得られる
•圧倒的に開発コストがかかる
•価値検証したい人と実装する人が一致しないケースが多い
→検証/改善のサイクルを素早くまわせない

6. 6
メリット
デメリット
•日常生活でドッグフーディングできる
•質の高いフィードバッグが得られる
•圧倒的に開発コストがかかる
•価値検証したい人と実装する人が一致しないケースが多い
→検証/改善のサイクルを素早く行えない
開発フェーズや目的に合わせて適切に使う
前提
低コストで素早い改善ができる環境
+ 理想

7. 7
料理まとめ
自分のレシピを任意にまとめて
マイページに公開できる
去年8月に機能リリース

8. 8
自分の料理をテーマで表現したり見
返したりしたいけど、現状溜めれば
ためるほど散らかってしまう
ユーザーの
課題や仮説を整理
自分の料理を任意にまとめられる
ことに価値がある
ペーパーモック インタラクション
モック
アイデアを具体化
😩
😆
実際に自分でまとめて見てみたい
その上でベストなパターンを見つけたい

9. プロトタイプ環境の紹介
9

10. 10
基盤としてRect Native
render() { return <Text>Hello</Text>; }
クックパッドアプリの機能が一通り揃っている
developer
Prototype Labs
アイデアの価値検証 専用のネイティブアプリ

11. 11
基盤としてRect Native
render() { return <Text>Hello</Text>; }
クックパッドアプリの機能が一通り揃っている
developer
Prototype Labs
アイデアの価値検証 専用のネイティブアプリ
何これ最高では…

12. 何が最高？
12
•（ネイティブに比べて）技術的な敷居が低い
• Webのマークアップに慣れていればデザイナーでも親しみやすい記法でView
やスタイルの作成ができる
• コンポーネント単位でビューが管理されていて理解しやすい
•iOS, Androidそれぞれに配布できる（テスターが普段使っている環境でアプリを提
供できる）

13. 使用例
13
オーナー兼エンジニア デザイナー
UIを検討 検証実装機能の大枠を実装
プロダクションの
開発へ

14. 実際に触ってもらって
14
まとめる機能良い！
まとめる対象をレシピのみにしたらどうだろう？作ってみよう。
いろいろまとめられることを考えてたけど、
めっちゃいいじゃん👍
けどまとめる対象が多くてちょっと面倒。。
→ 仮説が確信に
フィードバックからすぐ改善案を出して試せる

15. 実際に触ってもらって
15
今3グリッド表示だけど2グリッドにしたらどうだろう
実際のデータを使いつつ手元ですぐ検証できる
2にしてみたけど見返して楽しくないな、、3にしよう。

16. メリット/デメリット
16
デザイナーでも触れるプロトタイプの簡単な実装が可能になり、
質の高い検証⇄改善を一任して素早く行える
😃
😕
複雑な画面やアニメーションの表現はしづらい

17. まとめ
17
•「触れるプロトタイプ」を使ったドッグフーディングや、少人数
で素早い検証/改善できる環境を活用し、ユーザーの体験向上まで
落とし込んでいる。
•質の高い検証ができる反面、開発コストが高いので、適切な
フェーズや目的で作ること、他のプロトタイプ手法との使い分け
は必須
とはいえ

18. ありがとうございました