第28回html5とか勉強会で講演させていただいた内容です。 http://atnd.org/events/27277 当日の動画はこちらでもご覧いただけるようです 。http://www.youtube.com/watch?v=KbyXyJMXzO0

1. 小さく、早い改善が
スマホのサービス開発を変え
る
Android appのハイブリッド化事例を添えて
（クックパッド会員事業部）
五十嵐啓人

2. 本資料は公開用に、画像などを削除し
発表時の内容を一部修正したものです

3. 自己紹介
五十嵐啓人と申します
• クックパッド会員事業部所属
• ディレクター／エンジニア
• 昨年度は各課金などの導入/課金導線改
善などスマホのマネタイズを担当
• 現在は、「レシピをさがす」ユーザー
の体験に責任を持っています

4. 今日、お持ち帰りいただきたいこと
1. 大規模なアプリでも、新しいサービスを継
続的に開発する手法
2. すでにその方法はみなさんの選択肢にある
こと
3. 実際にそれをアプリでする場合の注意点

5. これから、お話すること
1. クックパッド、スマホの状況について
2. なぜアプリをハイブリット化したか？
3. ハイブリット化の実例と、うまくやる方法

6. クックパッドとスマホについて

7. クックパッドの理念
すべての家庭の
あらゆるシーンに
料理が楽しみになる
機会を提供する

8. クックパッドの哲学
3つの輪が重なることを常に意識

9. クックパッドのサービス開発体制
各部門が事業だけでなく
ユーザー体験にも責任を持つ
★Happy Author部
レシピを「のせる」人をHAPPYに
★会員事業部
レシピを「さがす」人の問題解決
★マーケティング支援事業部
ユーザーの食卓の意思決定に責任を持つ

10. スマートフォンの展開状況
スマホ主要プラットフォームでの
展開を昨年4月に完了
Androidマーケット 検索
SEO
レバレッジ
認知 認知
Android App iOS App
スマホweb
BLOG

11. 各決済対応状況
スマホでの主要各決済に
昨年末までに対応

12. Android Appについて
3月末に
Webを使ったハイブリッドApp
として生まれ変わりました

13. ハイブリッドApp リリース後の反応
ユーザーさんからお褒めの言葉
＆おしかりの言葉たくさん
今回のアップデー
トで動きが前より 更新してから反応が
重たくなった 前より遅くなってし
まいました。残念で
す。。。
COOKPADすごく
便利になりまし アップデートしてか
た！！ありがとうご らますます便利にな
り、見易く有り難い
ざいます！！ です

14. なぜアプリをハイブリット化したか？

15. 昨年までのサービス開発体制
三正面作戦による
プラットフォーム立ち上げ

16. 昨年までのサービス開発手法
価値を社内でねりこみ
いきなり全体に公開

17. 1000万人のユーザーを抱えるという課題
大きいプラットフォーム
ゆえのサービス開発の困難さ
アイディアはあっても周囲の説得が必要（感情論になる）
リリース可否の判断がシビアになってしまい保守的になる／判断できない
影響範囲が大きいため、様々なユーザーの利害を考慮しなければならない

18. サービス開発手法の変化
リーンスタートアップからの学び

19. リーンスタートアップの技術とは？
仮説が正しいかどうかを判断する
作業や議論プロセスの効率化
• 著者のエリック・リース自身が起業で失
敗を重ねる過程で得た考え方
• 不確実な状態で新しい製品/サービスを創
り出さなければならない人に役立つ(かも)

20. サービス開発での実践
• 仮説に基づいた最小限の価値(MVP)を用意し、
仮説検証
• ユーザー開拓も同時並行
• 事前に仮説と対応するMetricsしきい値を用意
• 仮説が正しくなかった場合は、迅速に方針転換
する

21. 新サービス開発のなかでの実例
千人でも百人でもなく
一人のユーザーからテスト
• 仮説に基づいた最小限の機能(MVP)を提供
• ログから最適そうなユーザーも同時開拓
• ふり向いてくれるまで／継続的に使ってくれるまで、製品
をUPDATE
• 期待されたMetrics(Retention)が期間内に達成されない場
合は、アプローチを大きく変更
• うまく行った場合は、公開規模の拡大を

22. サービス開発手法の変化でもとめられるようになったこと
仮説を用意し、
小さく速く検証する
IDEAS
LEARN BUILDS
DATA PRODUCTS
MEASURE

23. 仮説検証を支える技術(1)

24. 仮説検証を支える技術(2)
Railsの本番でカジュアルに
プロトタイプを動かす

25. Chanko OFF Chanko ON

26. なぜハイブリット化をしたか？
細かいイテレーションこそが、
ユーザーの利益になるという信念

27. ハイブリッド化のゴール(1)
• 細かい機能/UX改善を頻繁にユーザーに提供す
る
• そのためにネイティブアプリの力を借りて、
HTML/CSS3でユーザーにサービスを提供

28. ハイブリッド化のゴール(2)
• ユーザーフィードバックを増やし、ユーザー体
験を開発者が理解しやすい状況にする
ご意見 アクセス解析

29. ハイブリット化を行なって

30. Androidアプリはどこまでハイブリッド？
ネイティブをさがせ!!

31. ネィティブのいいところは活用
• 入力の快適さが必要な検索画面
• サイドメニューのHTMLはネイティブでキャッシュ
• レシピページ閲覧時のブラックアウト防止
• アカウント連携
• 接続ホスト障害時のリカバリー etc…

32. HTML/JSだけでどこまで作れるの？
Alert Confirmation

33. HTML/JSだけでどこまで作れるの？
Toast メニュー開閉／左右の連携

34. HTML/JSだけでどこまで作れるの？
メール起動 画像送信

35. HTML/JSだけでどこまで作れるの？
参照先ホスト変更
その他
• 画面遷移時のアニメーション指定
• 課金完了時のステータス遷移通知
• アカウント管理のステータス変更連携

36. 新機能をスタッフが
全部HTML/JSなので
どんどん切り替えて実生活で使え
る

37. 全部HTML/JSなので
特定のユーザーだけ
限定新機能リリース

38. 全部HTML/JSなので
課金導線で早くも大量の
イテレーション

39. 移行時に注意したこと(1)
• 基本のUIは今までのものを踏襲し、ユーザーの驚きを最
小限に

40. 移行時に注意したこと(2)
• Webviewをカスタマイズして、Web独特の問題を尐し
でもカバー
• 実はWebと気づかない人がほとんど

41. 移行時に注意したこと(3)
• 旧バージョンのクローンだけでなく、Updateによって
得られる価値も提供する
ごはん日記 MYキッチン MYフォルダ同時検索

42. 移行時の想定どおり推移したこと
• 反応の遅さへのネガティブな反応
• UIの改善による回遊率向上
• フィードバックがたくさん来る
• クラッシュを撲滅する
• 課金コンバージョンがイテレーション(反復改善)で向上
する

43. 移行時の想定が足りなかったところ(1)
• ゲストユーザーに対するupdateに伴う価値提供項目を
十分に検討していなかった
ごはん日記 MYキッチン MYフォルダ同時検索

44. 移行時の想定が足りなかったところ(2)
• 移行にあたり切った機能のユーザー使われかたの理解

45. 今後の課題
• スピード
• Tapイベント補足などによる反応速度向上
• 不必要なデータをさらに転送しないように
• イテレーションスピード

46. まとめ

47. 本日お持ち帰りいただきたいこと (1)
小さく、速く、仮説を検証する環境を用意
することがサービス開発の速度を上げる
IDEAS
LEARN BUILDS
DATA PRODUCTS
MEASURE

48. 本日お持ち帰りいただきたいこと(2)
その技術はもうすでにあなたの手の中に

49. 本日お持ち帰りいただきたいこと(3)
ハイブリッド化するときは、
効率化だけでなくユーザーメリットにも最
大限の配慮を

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