Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

リーンスタートアップとPWA

1,595 views

Published on

PWA Night vol1 でのセッション

Published in: Business
  • Be the first to comment

リーンスタートアップとPWA

  1. 1. リーンスタートアップとPWA ~ウェブサービス立上げ時こそPWAを検討したい~ TAM 角谷 仁
  2. 2. 目次 ・ウェブサービス立上の方法論 リーンスタートアップ ・PWAがスモールスタートに向く理由 ・PWAの効果 PWAをうまく取り入れて、 ウェブサービスの失敗をふせごう!
  3. 3. Who? 角谷 仁 すみやひとし sumiya@tam-tam.co.jp https://www.facebook.com/hitoshi.sumiya.1 https://twitter.com/hitoshisum [経歴] ・TAM取締役 / プロデューサー / 制作チームマネージャ ・IT業界11年目=TAM歴 ・チームマネジメント歴7年 ・父親歴1年目
  4. 4. 不確実性の高い世の中
  5. 5. ・技術革新の早さ ・顧客ニーズの変化周期の短期化 ・想定もしなかった競合が出てくる ・これまでと違う市場で戦う必要がある →先が読めない。計画が計画通りにいかない。
  6. 6. 「MVP」 最低限実用に足る製品 (Minimum Viable Product) Henrick Kniberg https://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp
  7. 7. 学ぶ アイデア 構築する 計測する 製品データ まずはアイデアからMVPを作り、 顧客の反応を検証しながら改良・軌道修正 構築→計測→学習→のサイクルを迅速に繰り返す ことで無駄を最小限に抑えて成功に近づく
  8. 8. 1.プロトタイプ(ベータ版) 2.オズの魔法使い 3.スモークテスト 4.コンシェルジュ MVPの種類
  9. 9. 完成版ではないものの、実際に動作する製品を作り、 クローズドβ版などテストユーザに使用してもらいフィードバックを得る。 1.プロトタイプ 参照: https://perfectial.com/blog/launch-mvp-without-technical-co-founder/ PWA向き
  10. 10. 一見システム化されているように見えるが、実際裏側は生身の人間が手動で実行することで、 大掛かりなシステム開発の前にユーザニーズを確かめる手法。フロントのみをつくる。 2.オズの魔法使い 参照:https://speckyboy.com/2014/10/01/successful-minimum-viable-products/ PWA向き
  11. 11. カスタマーがサービスのアイディアに興味があるか。 サービス紹介ビデオを作ったり、リリース前に事前応募を募ったりする。 3.スモークテスト 参照:http://scalemybusiness.com/the-ultimate-guide-to-minimum-viable-products/
  12. 12. すべて生身の人間で実施する手法。 4.コンシェルジュ 参照:http://thenextweb.com/apps/2011/10/06/airbnb-launches-its-photography-program-with-13000-verified-properties/#gref
  13. 13. PWAがスモールスタートに向いている理由
  14. 14. 予算も人員も潤沢な プロジェクト 予算も人員も限られた プロジェクト iOSアプリ開発 Androidアプリ開発 完 全 版 全 機 能 網 羅 ネ イ テ ィ ブ ア プ リ リ リ ー ス 大量の広告投下 利用者を急激に増やす ウェブアプ リ開発 適切なターゲットに 適切に広告を投下する Β版 リリー ス 継続改修 機能追加 新しい取り組みにおいて、予算も人員も潤沢にあるケースは少ない MVPを作り、検証しながら少しずつ育てる戦略がおすすめ ・2OS分の対応が不要、審査不要のためリリースが早い。 ・その分開発コストや進行にかかる人件費が抑えられる。
  15. 15. ネイティブあるある ・アプリを開発できる優秀なエンジニアが給料の高い会社に転職 ・ネイティブアプリを作ったけど、ダウンロード数が1000以下 ・低評価→ダウンロードされない ・最初だけでなくすべてがダブルコスト。ちょっとしたことで予算がなくなる ・2つあるがために、改善するサイクルが遅くなってしまう(新規サービスでは致命的) ・OSのバージョンアップに伴う対応 / 新しい画面サイズ対応 ・改修の度にいちいち審査が必要 ・・・ネイティブじゃなくてもよかったんでは?? 最近はハイブリッドアプリにしたいという話も聞く
  16. 16. ウェブアプリであれば改善のサイクルも回しやすい 要件定義 iOSアプリ開発 Androidアプリ開発 審査 要件定義 PWAでの開発 ネイティブアプリの場合 PWAの場合 要件定義 iOS/Androidアプリ開発 審査 ハイブリッドアプリの場合 審査開発 審査開発 開発要件定義 開発 リ リ ー ス リ リ ー ス リ リ ー ス 開発 リ リ ー ス リ リ ー ス リ リ ー ス リ リ ー ス 審査開発 審査開発 リ リ ー ス リ リ ー ス 審開発 開発 開発 リ リ ー ス リ リ ー ス リ リ ー ス 開発 開発 開発 リ リ ー ス リ リ ー ス リ リ ー ス バ ー ジ ョ ン ア ッ プ 対 応 バ ー ジ ョ ン ア ッ プ 対 応
  17. 17. PWAとネイティブアプリの比較 参照:https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20 PWAでできること その他 Chromeでデスクトップへの インストールが可能!
  18. 18. 一部のすごく使われるアプリ。 イメージ:Mcdonald、LINE、Facebook、Twitter、 カメラ、Instagram、チャットアプリ ネイティブとのすみ分け →ちゃんとファンができてからでもいいんじゃないか 図参照 Google宇都宮さん:https://html5experts.jp/uskay/25391
  19. 19. 2017年2月実施 1000人程度 https://www.marsh-research.co.jp/mini_research/mr201703app.html ネイティブがいつでもbetterなわけではない=ダウンロードの手間
  20. 20. 参照:https://techcrunch.com/2017/08/25/majority-of-u-s-consumers-still-download-zero-apps-per-month-says- comscore/
  21. 21. 予算感? 基本的にはWeb構築費+PWA対応費 例)ウェブメディアサイト 簡易的な対応であれば1人月とか ・アプリライクなUI起動/ホームボタン ・App Shell部分のキャッシュ対応 ・コンテンツのキャッシュ/事前取得 ・プッシュ通知 ツール使う想定 ※あくまでご参照まで・・・
  22. 22. パフォーマンスを高めるなら ・CDNの導入 ・リソースの軽量化 ・HTTP/2の環境 ・読み込み/ブラウザ描画の調整(js,css等) ・Atomicデザイン 等 最初から考慮して作っておけば、そんなに工数膨らむものじゃない。CDN や環境はものによって費用変わる。 特に海外向けのサービスの場合はよく考慮しておきたいところ
  23. 23. 3G回線も世の中的にはまだ多い 参照:CISCO 2017 white paper https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking- index-vni/mobile-white-paper-c11-520862.html
  24. 24. 他にもPWAはネイティブに対して こんなメリットがあります。 ・「アップル税(手数料30%)」 Googleも30% ・Webなら クレジット決済手数料 数%~(Stripeで3.6%) ストアの高い手数料を払わなくていい
  25. 25. PWAの効果
  26. 26. 日本経済新聞(2018) https://r.nikkei.com ▼パフォーマンス改善 ・Speed Indexが2倍改善 ・time-to-interactiveが14秒速く ・事前読み込みが75% 速く ▼ビジネスインパクト ・オーガニックのトラフィックが2.3倍 ・定期購読が58%増 ・DAUが49%増 ・PV/セッションが2倍 参照:https://developers.google.com/web/showcase/2018/nikkei
  27. 27. タクシー配車 Uber 2Gネットワークでも素早く読み込めるよう に50KBまで圧縮されていて、3秒以下で読 み込みができるそうです。 (2017.6.27の記事参照) 参照:https://eng.uber.com/m-uber/
  28. 28. SNS Twitter Lite 2017年4月にリニューアルされてPWAに。 プッシュ通知やオフラインにも対応。 ・ページ/セッション65%増加 ・ツイート75%増加 ・直帰率20%減 ・再訪したユーザーには遅いネットワーク でも3秒以下で読み込みができるようです。 参照: https://www.suzukikenichi.com/blog/twitter-introduces-twitter-lite-as-pwa/
  29. 29. マッチング tinder Tinder Online(https://tinder.com/) はPWAにリニューアルしたことで 読み込み時間が11.91秒→4.69秒に。 ・プッシュ通知にも対応。 ・PWAのユーザーはネイティブア プリよりもスワイプ、メッセージ、 セッション時間が長くなった 参照:https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0
  30. 30. 新聞社/雑誌社 Forbes ・平均の表示時間が6.5秒→2.5秒 ・データのローディングは0.8秒 ・訪問あたりのインプレッション数は10%アップ。 ・ユーザーあたりのセッション数は43%増加 ・広告のビューアビリティは20%増加 ・エンゲージメント100%増加 参照:https://digiday.com/media/new-mobile-site-forbes-boosted-impressions-per- session-10-percent/ https://www.fipp.com/news/insightnews/15-reasons-why-you-will-love-pwa-like- forbes
  31. 31. 新聞社/雑誌社 The Washington Post https://www.washingtonpost.com/pr/wp/2016/09/06/the-washington-post-to-roll-out-fastest-mobile-news-site/?utm_term=.29628d582b51
  32. 32. 不動産 Housing.com コンバージョン数 38%増加 離脱率 40% 減 セッション時間10%増加 ページ表示スピード 30%アップ 参照:https://developers.google.com/web/showcase/2016/housing
  33. 33. 旅行系 / ホテル WEGO ・読み込み速度が12秒→1秒未満に ・オーガニックユーザー12%増 ・平均セッション継続時間35%増 参照:https://developers.google.com/web/showcase/2017/wego
  34. 34. 旅行系 / ホテル Trivago コンバージョン97%アップ 参照:https://www.thinkwithgoogle.com/intl/en-gb/consumer- insights/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/
  35. 35. 売り上げ300%アップ 旅行系 / ホテル The Best Western River North Hotel 参照:http://www.brewerdigitalmarketing.com/blog/case-study-bw-river-north
  36. 36. 「Flipkart Lite」 滞在時間70秒→3.5分 Re-engagement rate 40%上昇 ホームスクリーンからアクセスしたユーザーのCVR が70%アップ データ使用料が3倍減少 E-Commerce Flipkart 参照:https://developers.google.com/web/showcase/2016/flipkart
  37. 37. E-Commerce Alibaba 各ブラウザより76%コンバージョンが多い iOSで14%、Androidで30% MAUが多い ホームスクリーンからのアクセスされたら4倍イン タラクションされる 参照:https://developers.google.com/web/showcase/2016/alibaba
  38. 38. コンバージョンが17%上昇 iOSで53%セッションが増えた プッシュ通知でカート落ちした人のCVが8%増加 E-Commerce Lancôme 参照:https://developers.google.com/web/showcase/2017/lancome
  39. 39. SEO? 考え方:PWAで効果のあるサイトを作っても、SEOに引っかからなければ機会を失ってしまう。 参照:https://webtan.impress.co.jp/e/2016/09/09/23772/page/1
  40. 40. 参照:https://www.suzukikenichi.com/blog/pwas-shouldnt-have-indexing-drawbacks/
  41. 41. 注意点 インデックス可能なプログレッシブ ウェブアプリの構築方法 https://webmaster-ja.googleblog.com/2016/12/building-indexable-progressive-web-apps.html ● コンテンツをクロール可能にする(非同期→searchconsoleで確認) ● クリーン URL を提供する( # や #! を使用しない) ● 正規 URL を指定する(canonical) ● どのデバイスにも最適なデザインにする(レスポンシブ) ● 反復型開発を行う(ちょっとずつ直して効果見る) ● プログレッシブ エンハンスメントを利用する(Service worke使えなければ無効に) ● Search Console でテストする(googleがクロールできるか) ● Schema.org 構造化データでアノテーションを追加する ● Open Graph や Twitter カードでアノテーションを追加する(拡散対策) ● 複数のブラウザでテストする ● ページ読み込みのパフォーマンスを測定する →2018年7月「Speed Update」 ものすごく遅いとユーザーに感じさせるページだけに影響し、影響を受けるクエリはごくわずかになる見込み https://www.suzukikenichi.com/blog/google-will-roll-out-speed-update-in-july-2018/
  42. 42. いつもPWAがいいわけではないけど、 使い方を見極めれば、 失敗するウェブサービス開発が減るはず!
  43. 43. ご清聴ありがとうございました!

×