SlideShare a Scribd company logo
1 of 50
小さく、早い改善が
スマホのサービス開発を変え
      る
  Android appのハイブリッド化事例を添えて




    (クックパッド会員事業部)
          五十嵐啓人
本資料は公開用に、画像などを削除し
発表時の内容を一部修正したものです
自己紹介


       五十嵐啓人と申します
• クックパッド会員事業部所属
  • ディレクター/エンジニア


• 昨年度は各課金などの導入/課金導線改
 善などスマホのマネタイズを担当


• 現在は、「レシピをさがす」ユーザー
 の体験に責任を持っています
今日、お持ち帰りいただきたいこと



1. 大規模なアプリでも、新しいサービスを継
  続的に開発する手法


2. すでにその方法はみなさんの選択肢にある
  こと


3. 実際にそれをアプリでする場合の注意点
これから、お話すること




1. クックパッド、スマホの状況について


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


3. ハイブリット化の実例と、うまくやる方法
クックパッドとスマホについて
クックパッドの理念




            すべての家庭の
            あらゆるシーンに

        料理が楽しみになる
         機会を提供する
クックパッドの哲学



3つの輪が重なることを常に意識
クックパッドのサービス開発体制



   各部門が事業だけでなく
  ユーザー体験にも責任を持つ
       ★Happy Author部
       レシピを「のせる」人をHAPPYに


       ★会員事業部
       レシピを「さがす」人の問題解決

       ★マーケティング支援事業部
       ユーザーの食卓の意思決定に責任を持つ
スマートフォンの展開状況


スマホ主要プラットフォームでの
   展開を昨年4月に完了

       Androidマーケット    検索


                          SEO
                        レバレッジ



                 認知            認知

       Android App                  iOS App
                      スマホweb


                       BLOG
各決済対応状況



    スマホでの主要各決済に
     昨年末までに対応
Android Appについて


       3月末に
 Webを使ったハイブリッドApp
  として生まれ変わりました
ハイブリッドApp リリース後の反応



 ユーザーさんからお褒めの言葉
  &おしかりの言葉たくさん
   今回のアップデー
   トで動きが前より          更新してから反応が
   重たくなった            前より遅くなってし
                     まいました。残念で
                     す。。。

       COOKPADすごく
       便利になりまし       アップデートしてか
       た!!ありがとうご     らますます便利にな
                     り、見易く有り難い
       ざいます!!        です
なぜアプリをハイブリット化したか?
昨年までのサービス開発体制




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




     価値を社内でねりこみ
     いきなり全体に公開
1000万人のユーザーを抱えるという課題


   大きいプラットフォーム
  ゆえのサービス開発の困難さ

 アイディアはあっても周囲の説得が必要(感情論になる)



 リリース可否の判断がシビアになってしまい保守的になる/判断できない



 影響範囲が大きいため、様々なユーザーの利害を考慮しなければならない
サービス開発手法の変化




リーンスタートアップからの学び
リーンスタートアップの技術とは?




仮説が正しいかどうかを判断する
 作業や議論プロセスの効率化

         • 著者のエリック・リース自身が起業で失
           敗を重ねる過程で得た考え方

         • 不確実な状態で新しい製品/サービスを創
           り出さなければならない人に役立つ(かも)
サービス開発での実践




• 仮説に基づいた最小限の価値(MVP)を用意し、
 仮説検証
  • ユーザー開拓も同時並行


• 事前に仮説と対応するMetricsしきい値を用意


• 仮説が正しくなかった場合は、迅速に方針転換
 する
新サービス開発のなかでの実例


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



       仮説を用意し、
      小さく速く検証する
                   IDEAS




          LEARN              BUILDS




           DATA             PRODUCTS




                  MEASURE
仮説検証を支える技術(1)
仮説検証を支える技術(2)


    Railsの本番でカジュアルに
      プロトタイプを動かす
Chanko OFF   Chanko ON
なぜハイブリット化をしたか?




細かいイテレーションこそが、
ユーザーの利益になるという信念
ハイブリッド化のゴール(1)



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



• ユーザーフィードバックを増やし、ユーザー体
  験を開発者が理解しやすい状況にする


       ご意見       アクセス解析
ハイブリット化を行なって
Androidアプリはどこまでハイブリッド?

     ネイティブをさがせ!!
ネィティブのいいところは活用


• 入力の快適さが必要な検索画面


• サイドメニューのHTMLはネイティブでキャッシュ


• レシピページ閲覧時のブラックアウト防止


• アカウント連携


• 接続ホスト障害時のリカバリー   etc…
HTML/JSだけでどこまで作れるの?



          Alert       Confirmation
HTML/JSだけでどこまで作れるの?



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



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


     参照先ホスト変更

                      その他

                      • 画面遷移時のアニメーション指定

                      • 課金完了時のステータス遷移通知

                      • アカウント管理のステータス変更連携
新機能をスタッフが
全部HTML/JSなので


どんどん切り替えて実生活で使え
       る
全部HTML/JSなので


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


      課金導線で早くも大量の
        イテレーション
移行時に注意したこと(1)


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


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


• 旧バージョンのクローンだけでなく、Updateによって
  得られる価値も提供する


    ごはん日記       MYキッチン   MYフォルダ同時検索
移行時の想定どおり推移したこと


• 反応の遅さへのネガティブな反応

• UIの改善による回遊率向上

• フィードバックがたくさん来る

• クラッシュを撲滅する

• 課金コンバージョンがイテレーション(反復改善)で向上
  する
移行時の想定が足りなかったところ(1)


• ゲストユーザーに対するupdateに伴う価値提供項目を
  十分に検討していなかった


    ごはん日記      MYキッチン   MYフォルダ同時検索
移行時の想定が足りなかったところ(2)


• 移行にあたり切った機能のユーザー使われかたの理解
今後の課題



• スピード

  • Tapイベント補足などによる反応速度向上

  • 不必要なデータをさらに転送しないように



• イテレーションスピード
まとめ
本日お持ち帰りいただきたいこと (1)



 小さく、速く、仮説を検証する環境を用意
  することがサービス開発の速度を上げる

                     IDEAS




            LEARN              BUILDS




            DATA              PRODUCTS




                    MEASURE
本日お持ち帰りいただきたいこと(2)



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




      ハイブリッド化するときは、
 効率化だけでなくユーザーメリットにも最
            大限の配慮を
ありがとうございました

More Related Content

What's hot

[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
de:code 2017
 

What's hot (20)

Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
 
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
 
Onsen UIが目指すもの
Onsen UIが目指すものOnsen UIが目指すもの
Onsen UIが目指すもの
 
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンスHTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
 
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
 
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
 
ディレクターとして取り組むHCD業務の実際
ディレクターとして取り組むHCD業務の実際ディレクターとして取り組むHCD業務の実際
ディレクターとして取り組むHCD業務の実際
 
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
 
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
 
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
 
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたCordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
 
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
 
HTML5ハイブリッドアプリ の活用ポイント
HTML5ハイブリッドアプリの活用ポイント HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリ の活用ポイント
 
デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料
 
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
 
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスHTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
 
Web標準技術で iOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発Web標準技術でiOS、Android両対応アプリを開発
Web標準技術で iOS、Android両対応アプリを開発
 

Similar to 小さく早い改善がスマホのサービス開発を変える

パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
 
X dev 20121106
X dev 20121106X dev 20121106
X dev 20121106
Ken Azuma
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
Tak Inamori
 

Similar to 小さく早い改善がスマホのサービス開発を変える (20)

Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
 
やってみよう!ユーザーテスト
やってみよう!ユーザーテストやってみよう!ユーザーテスト
やってみよう!ユーザーテスト
 
ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
 
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
 
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
 
非エンジニアのためのIT勉強会 ハイブリッドフレームワーク
非エンジニアのためのIT勉強会 ハイブリッドフレームワーク非エンジニアのためのIT勉強会 ハイブリッドフレームワーク
非エンジニアのためのIT勉強会 ハイブリッドフレームワーク
 
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
 
Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
 
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナーiQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
Crunchtimer会社案内
Crunchtimer会社案内Crunchtimer会社案内
Crunchtimer会社案内
 
20150912 doda
20150912 doda20150912 doda
20150912 doda
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
 
AppPot製品概要
AppPot製品概要AppPot製品概要
AppPot製品概要
 
X dev 20121106
X dev 20121106X dev 20121106
X dev 20121106
 
ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法
ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法
ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
 

小さく早い改善がスマホのサービス開発を変える