PWAにすると改善するKPI

モバイルのwebアプリをPWAにする事で様々なKPIに改善が見られます。

この記事では各KPI改善をPWAプロジェクトの実績を見ながら紹介していきます。

 

サイトの初期ロード時間

PWAにすると以下の様な理由でサイトのロード時間が速くなります。

1. Javascriptのコードベース

PHPやRubyなどのサーバー側でUIが作成されたものをブラウザに送る仕組みに比べhtmlで用意されたファイルがJavascriptで必要なデータだけ取ってくるためパフォーマンス全体が上がります。

2. Service Worker + App Shell

PWAではコンテンツをキャッシュするService WorkerとUIの側だけを別に用意するApp Shellという仕組みが使われます。

App ShellをService Workerがキャッシュすることで2回目からサイトに訪問した場合はキャッシュされたApp Shellが使われサイトの側だけはブラウザに既に保存された物が使われるため、サイトが高速に表示されます。

サイトの初期ロードにはFirst Paint (画面に何か描写が始まる時間)とTime to interactive (実際にユーザーが何か操作を行える状態になるまでの時間)の2つがスピードを計るポイントになります。

PinterestのwebアプリではFirst Paintに4.2秒そしてTime to Interactiveまでには23秒かかっていたものがPWAにすることでFirst Paintが1.8秒そしてTime to Interactiveが5.6秒までに改善しました。

また2回め以降の訪問の際はService WorkerのApp Shellへのキャッシュが効いていてFirst Paintは0.8秒そしてTime to Interactiveも3.9sまで速くなっています。

出典:https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

 

直帰率

Googleは「ECサイトの場合はサイトスピードは2秒以内にすべきで、Google社内では0.5以内を目指している」と表明しています。

「モバイルサイトのロードに3秒以上かかると53%のユーザーはサイトに来るのをやめてしまう」という統計もGoogleは発表しています。

これから言えるのはサイトのロード速度を速くすればするほど、直帰率を下げる事ができるということです。

出典:https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/

インドのジモティーの様に個人の広告が出せるクラシファイド広告サービスのOLXではPWA化することでTime to Interactiveが23%改善し、直帰率が80%下がったという結果が出ています。

 

滞在時間 / 訪問ページ数

PWAでアプリっぽい操作性のUXやJavascriptベースのコードでレスポンスを改善することでサイトの滞在時間が長くなります。

家具販売サイトのwest elmではwebアプリをPWAにすることで滞在時間が15%改善しました。

TwitterのPWA版のTwitter Liteではセッション毎の訪問ページ数が65%増加しました。

 

コンバージョン率

ロード時間を短縮し、直帰率を下げ、滞在時間を上げれば当然コンバージョン率があがります。

インドのホテルチェーンTreeboはPWA化することでコンバージョン率が4倍に上がりました

PinterestのPWA版はwebアプリ版に比べてユーザーコンテンツ経由の広告の売上が44%増加しました。

オンラインチケットサービスのBookMyShowはPWA化することで、コンバージョン率が80%増加して、売上が劇的に増加しました。

 

その他の事例

様々なKPI改善の事例はwww.pwastats.comに多く紹介されています。

 

 

 

ユーザーがネイティブアプリをやめてPWAを使う理由

誰も使わなくなったネイティブアプリという記事でいかにネイティブアプリが使われなくなったかという説明をしましたが、この記事ではどうしてネイティブアプリが使われなくなったのかをユーザー視点で説明します。

 

インストールが大変

ユーザーがアプリについて聞いてからアプリが実際にダウンロードされるまでには6ステップが必要と言われています。

1. App Storeアプリを立ち上げる
2. 聞いたアプリ名を検索して、アプリを見つける
3. アプリの詳細ページを友達に見せて「このアプリだよね?」と確認する
4. iTunesのパスワードを入力する。(パスワードなんだったっけ…)
(ここでしばらくiTunes使ってないと登録したクレジットカードが使えないとかいうエラーが出てきたりもする)
5. ダウンロードがスタート
6. ダウンロードが終了したのでアプリをクリックしてアプリスタート

ステップの参考にしたブログ
https://www.swrve.com/weblog/the-physics-of-app-friction

各ステップ毎に20%脱落すると言わているので。1000人で始めた場合。

1. 800人 (-20%)
2. 640人 (-20%)
3. 512人 (-20%)
4. 410人 (-20%)
5. 328人 (-20%)
6. 262人 (-20%)

となります。これは例えばランチで「なんとかアプリがいいらしいよ」という話を聞いたユーザーの1000人のうち260人ほどしか実際にそのアプリを使いはじめないという事になります。

PWAの場合友達からライン経由でリンクが飛んで来たり、Googleなどの検索で出てきたサイトをクリックするだけでアプリが開始するのでこのステップを経ること無くアプリを使ってもらうことが可能です。

 

ストレージも消費する

アプリをダウンロードするとスマホの容量を食います。先ほど自分のiPhoneに入っているアプリのストレージ消費を見てみました。

Economistアプリは一回も使っていなのに730MB消費していて、Google Docsが263MBも消費しているのにはびっくりしました。

普段良く使うMessangerは385MB、LINEも338MBと相当消費しています。メッセージの一部をアプリ内に保存しているのでしょうがそれにしてもかなり大容量です。

PWAはインストールが必要ないのでほとんどストレージを使いません。

Twitterクライアントでの比較だとiOSアプリの214MBに比べてPWAの600KBになり数百分の1のサイズになっているのが分かります。

 

アップデートも大変

ネイティブアプリの場合アプリにアップデートがあった場合にいちいちそのアプリ全部をダウンロードする必要があります。

こんな感じでアプリを使いたいのにアップデートが始まってしまい、いらいらしてしまう場面も多いですよね。

PWAはwebアプリなのでアップデートに時間はかからず、常にアプリは最新の状態に保たれています。

 

以上にいくつかユーザー視点でPWAを使う理由をまとめてみました。

誰も使わなくなったネイティブアプリ

devMeTokyではSafariなどブラウザ内で動作するPWA(プログレッシブ・ウェブ・アプリ)での開発プロジェクトを多数行っていますがそれには理由があります。

ここ最近ネイティブアプリがすっかり使われなくなってきているのがその理由です。

実際周りの方に「最近アプリなんかダウンロードした?」と聞いてみたらいいと思います。「こないだ機種変更した時に入れたくらいかな〜」とかいう返事がほとんどだと思います。

先日クライアントさんと打ち合わせ中に次はテレカンする必要があったのでアプリ入れてくださいよと頼んだら「どうやってアプリダウンロードするの?」と聞かれました。AppStoreアプリの存在も知らないユーザーというのもそれなりにいるということに少し驚きました。

実際これは様々な統計にも出ていてそのいくつかを紹介します。

 

アメリカの51%ユーザーの月間のアプリ数はゼロ

出典:https://www.statista.com/statistics/325926/monthly-app-downloads-of-us-smartphone-users/

月間8個以上のアプリをダウンロードしているユーザーは全体の5%

 

スマホ時間の77%がトップ3のアプリで占められている

出典:https://www.statista.com/chart/3835/top-10-app-usage/

トップアプリという事はFacebook, Messanger, インスタあたりではないんでしょうか?

日本だとこれにLineが入ってくるとは思いますが。トップ5まで入れれば87%の時間で占められています。

 

アプリインストール後30日経つと10%のユーザーしか使い続けていない

出典:https://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/

90日後には5%のユーザーしか残っていないという統計になっています。

よくアプリの宣伝で「500万ダウンロード達成!」とかありますが、30日後には50万人のアクティブユーザーがしかいないという事になりますね。

 

結論:ネイティブアプリを作っても誰も使ってくれない。

新しいアプリをダウンロードするつもりもなく、毎日使うアプリも限られ、新規のアプリをダウンロードしてもほとんどか使わなくなるという現実が以上の統計から分かると思います。

これから新規でネイティブアプリを開発してその開発やマーケティングにかかる費用を回収するのは相当無理な事なんでしょう。

よくAppleのプレゼンとかで出てくるいろんなアプリが開発されていますよというスライドも実際には赤で囲んだアプリくらいしか使われていないんでしょう。

これからはPWAを作っていくのが懸命ですね。

 

 

 

WeWork GinzaSixでウクライナの開発会社を紹介するイベントを行いました

11月15日にWeWork GinzaSixでウクライナの開発会社と弊社の紹介を行うトークイベントを開催しました。

devMeTokyoからは代表の天野と二宮がスピーカーとして参加し、ウクライナについてのお話やウクライナの開発会社とのプロジェクトの進め方や弊社の提供できるテクノロジーについて紹介しました。

イベントで使用したスライドはこちらから見れます。

https://www.devmetokyo.com/ukrainedevs

今後もこういったイベントを行いますのでまた弊社ブログ内でも告知していきますね!

API meetupでGraphQL engine Hasuraを紹介しました

10月12日に行われた
API Meetup Tech Deep Dive #2: GraphQL

で弊社代表の天野がPostgres上で手軽にGraphQLを扱えるHasura GraphQL engineの紹介を行いました。

プレゼン資料のリンク

 

ウクライナにいいエンジニアが多い理由

東欧にはいいエンジニアが多いという話しを聞いた方もいるかもしれませんが、弊社代表天野がウクライナで仕事していると本当にいいエンジニアが多いと感じています。

ウクライナ人は数学が得意とか勤勉だからとかそういう単純な理由ではなくIT産業しかない現状がそうさせているところがあります。

ウクライナの産業構造
ウクライナは1991年に独立して今年で独立27年ですが、ソビエト時代はミサイルとかを作っている工場が多くあったそうです。なので科学系の大学も多くあり優秀な科学者が卒業しています。

ただ日本とか他の西欧の国の様にエンジニアリング系の大きい企業があるわけでもなく卒業しても基本ITに行くくらいしか選択肢がありません。

日本だと大学の工学部出て自動車メーカーとか電機メーカーとかに新卒で入っているような人材が全てIT企業に入るみたいな感じです。

日本の場合ITが盛り上がってきた90年代に既存産業の会社が一生懸命新卒を採用していったため、一部の新卒しかITに入らずに新しい産業へのシフトが起きなかったんでしょう。

ウクライナの経済危機
2014年ウクライナ騒乱の際に当時ロシア寄りだった大統領が逃亡し、政権がヨーロッパ寄りの政治家で置き換わったのですが、ソビエト崩壊後旧ソビエト内で最大の死者を出した騒乱ということや2015年のロシアのクリミア併合などが重なり2013年はじめから2014年末までの間にGDPが約半分になりました。

https://goo.gl/JwwY9M

ウクライナ国内の急激な経済の後退は通貨のフリブナ(UAH)の下落も起こし、2013年頃から比べて通貨の価値が日本円に対して約3分の1になっています。

https://www.xe.com/currencycharts/?from=UAH&to=JPY&view=5Y

ウクライナ国内にいると日本の物価の大体半分くらいの感じです。

この様な通貨安を経験しているウクライナではまともに外貨を稼げる唯一の産業のITが国の機関産業になっているのです。

どこのITの会社もほぼ100%外国からの仕事を受けて外貨を稼いでいるのです。
国内の仕事は単価も低くあまりやる理由はありません。

ITエンジニアしか稼げない
仕事の数もそうですが、ウクライナにいいエンジニアが多い一番の理由はやっぱり「稼げるから」です。

2018年のウクライナ国内の平均給料は月間$350くらいですが、ITエンジニアの給料は$2000くらい行くので普通の仕事をするのに比べて約6倍稼げます

この「普通の仕事」というのは日本で稼げる仕事と言われている医者や弁護士も含まれていて$500くらいしかもらえません。

ウクライナでは格差社会とかのんきな事を言っている余裕はなく、ITエンジニアやれば稼げて普通の人より数倍いい生活ができるからとみんな必死に英語とITを勉強しています。

ウクライナってどんな国?

天野は10年以上前から海外のオフショア開発者と仕事をしています。これまで仕事をしたのはポーランド、ウクライナ、ロシア、インド、中国、インドネシアあたり。

ウクライナに3年位から旅行で行くようになり、現地で友人の紹介などでいくつかの会社を紹介してもらううちにウクライナの会社にいろいろ開発をお願いするようになってきました。

ウクライナの場所
日本人でウクライナの場所をすぐ言える人は少ないと思いますが、ロシアとポーランドの間にあります。

 

実はトルコも黒海を挟んで反対側にあり割と近いです。ウクライナの南街のクリミアにも近いオデッサに行くとトルコ系の血のまざった黒い髪の人たちも見かけます。

ウクライナのサイズ感
ウクライナはかなりでかいです。国土は60万キロ平方メートルほどあり、フランスよりちょっと小さくてお隣のポーランドと比べたら倍くらいあります。

人口は4500万人程度でヨーロッパの中でもトップエリアに入ります。ロシアとか西欧諸国もろもろひっくるめたヨーロッパの人口のランキングでも8位に入ります

ウクライナ国内にエンジニアは約20万人いると言われていて稼げる仕事ということもあり、急速にその数は伸びています。

ヨーロッパにオフィショアというとエストニアと思われる方も多いかもですが、エストニアは人口130万人くらいしかいません。なのでエンジニアの数も相当限られています。

ウクライナの食事
ウクライナは東欧なので、いわゆる西欧の料理とはまた違います。ボルシチはウクライナが発祥らしく、よく料理に出てきます。

ウクライナの主食はパンもあるんですが、蕎麦の実もよく食べます。日本みたいに粉にして麺にするのではなく、蕎麦の実をそのままご飯みたいに炊いて食べます。そば風味でおいしくてウクライナに行くと天野も常食してます。

左上がコールスローっぽいもの、右上がボルシチで真ん中のが炊いた蕎麦の実ですね。

下の写真はウクライナのスーパーで蕎麦の実が測り売りで売られているところです。1キロ60円くらいなので安いですね。

後は餃子の様なヴァレニキもおいしいです。ウクライナあたりになるとウズベキスタンとかジョージアとかの中央アジア料理のお店も出てくるんですがスパイスも多く使いカレー風味みたいな料理もあるので日本人でも親しみやすい料理が多いですね。

これはウクライナのハルキフでジョージア料理のお店で出てきた巨大餃子のキンカリです。

コップのサイズ見てもらえれば分かりますが、餃子の直径が8センチとかあります。

ウォッカはこんな感じでスーパーで売っています。

どれもウクライナ産のウォッカらしいですが、種類多すぎてどれ買っていいか分かりませんね。

ウォッカは基本おっさんの飲み物なので若い子は飲みません。たまにランチとかで隣に座っているおっさんが一人でウォッカショット何個も飲んでいたりします。

ウクライナへの行き方
天野はすでに8回くらいウクライナに行っていますが、イスタンブール経由で行くことが多いです。

イスタンブールからウクライナのハルキフやキエフに直行便が飛んでいるのでイスタンブールまで往復を買ってイスタンブールで一泊して次の日の便でウクライナに行ったりします。

時期にも寄りますが東京 <->イスタンブール往復ならアブダビとかモスクワ経由で5万円台であることもあり、イスタンブールからウクライナは往復でも2万円もしないです。

前回ウクライナに行った時はポーランド航空で成田 -> ワルシャワ行きで入ってその後ベラルーシに寄った後にウクライナに入りました。

つらつらとウクライナについて面白いと思ったことを書いてみました。今後はウクライナのエンジニア事情や開発会社について書いて見る予定です。

デスクトップPWAを使ってみた

先日開催されたGoogle I/O ’18のビデオをいろいろ見てますが、ひとつ気になったのはデスクトップPWAというキーワード。

モバイル用に作られたPWAがPCブラウザでも利用される例が増えているとのこと。

 

このセッションではスタバのPWAが紹介されています。昨年リリースしたスタバのPWAはかなり使われていて、現在でもPWAからの注文は毎週12%ずつアップしているとの事。

またこのPWAはPCブラウザからも使うことができ、PCからの注文も多く入っているとのこと。

Spotify PWAのデモはChrome OS上で行われinstall appアラートからインストールが行われ、一瞬でアプリのトレイにSpotify PWAが追加されました。

ChromeブラウザがPWA対応に

先日リリースされたChrome67からデスクトップPWAのサポートが強化されました。

追加されたデスクトップPWA周りの機能は以下

  • app window内でアドレスバーやタブ無しでPWAが動作
  • Googleが定めるPWAの条件を満たしているものデスクトップにアイコンをインストール可能。ただしAndroidデバイスの様にインストールを促すバナーは表示されず、インストールバナーはページ内に用意する必要あり。

デスクトップPWAをChromeで動かしてみよう

以下の手順でデスクトップPWAを動かしてみることができます。

  • 最新のChrome67をインストール
  • インストール後chrome://flagsをアドレスバーに入れて以下の設定を”Enabled”にしてChromeを再起動

Enable PWA full code cache, Desktop PWAs, Desktop PWAs Link Capturing, App Banners

値を変更するとChromeを再起動するように促されるので、再起動してください。

この後以下のサイトに行ってみてください。

これはUberのPWA版ですが、ログイン後以下の様な画面が表示されてデスクトップにインストールするように促されます。

“追加”をクリックするとインストール確認のアラートが表示され、デスクトップにアイコンが表示されます。

以下のサイトでも同様にインストール可能ですが、バナーは表示されず。ブックマークの際に”Install Twitter Lite..”の様に表示されます。

PWAの条件を満たしてないサイトでは同じところに”Create shortcut”と表示されるだけです。

インストール後デスクトップ上にはmanifest.jsonで指定したアイコンが使われ各PWAへのリンクが作られます。

   

Twitter Liteをデスクトップから立ち上げると以下の様にアドレスバーもタブもない状態で立ち上がります。

デスクトップPWAのパフォーマンス

Twitter Liteをデスクトップから立ち上げてみると分かるのですが、かなりさくっと立ち上がってくれます。

https://twitter.com/が通常のPC版のURLですが、PWA版はhttps://mobile.twitter.comが立ち上がるのでページロードの最適化が行われています。

実際にChrome DevToolsで測定してみると以下の様な結果になりました。


twitter.com (PC版)


mobile.twitter.com (PWA)

下に出てくるLoadというのはページが完全に読み込まれたときに測定されるのですが、通常のPC版では3.14秒でPWA版は583ミリ秒とPWA版が5倍以上速い数字が出ています。

これは何度かリロードをした後の数字なのでキャッシュなどが効いている状態で測定しています。

これらの数字の詳細は以下のGoogleの解説に詳しいです。

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading?hl=ja#domcontentloaded_load

こんなに速いのならデスクトップでもPWA版使ったほうが良くなりますね。今後のデスクトップPWAの展開が楽しみです。