Placeholder image

パワーアップしたモバイルサイトとしてのPWA


PWAとネイティブアプリを単純比較してしまうとPWAではこれできないとかネイティブアプリの方がパフォーマンスがいいという話になりますよね。実際機能を並べてるとiOSでのpush通知などPWAではまだできないこともいくつかあります。

そういった機能比較ではなく、ネイティブとPWAの導入までのステップで考えてみましょうか。

例えば友達からなんとかアプリがいいよ聞いてそのアプリが使えるようになるまでのステップを比べてみます。

ネイティブアプリの場合

  1. App Storeアプリを立ち上げる
  2. 聞いたアプリ名を検索して多分あっているだろうアプリを見つける
  3. アプリの詳細画面を見る
  4. iTunesのパスワードを入力したり、指紋認証したり
  5. ダウンロードがスタート
  6. そのうちダウンロードが終わってインストールされたアプリを探してクリック

めでたくアプリスタート。めんどくさ。

PWAの場合その1 (URLが飛んでくる)

  1. 友達からlineでPWAのURLが飛んでくる
  2. リンクをクリックしてアプリスタート

PWAの場合その2 (検索経由)

  1. アプリ名をGoogleとかで検索
  2. 出てくる検索結果をクリックしてアプリスタート

PWAはwebアプリなので始まるまでのステップが少なく、当然インストールしても時間もギガもかかりません。

よく飯行く前に友達から食べログのお店のリンクが飛んできますよね?あんな感じでアプリをシェアできるようになります。

友達にApp Storeのリンクが来てのアプリダウンロードしてよとかメッセージきたことないですよね?100Mのアプリをダウンロードお願いとか正直失礼です (苦笑

導入までのUXがこんなに違うものを比べるよりかはPWAとモバイルサイトを比べた方が良さそうです。PWA Stats
A collection of Progressive Web App case studies.www.pwastats.com

このPWA Statsというサイトでは様々なモバイルサイトをPWA化することによって得られる各KPIの改善が事例毎に細かくまとめられています。

このTwitter Liteの事例のこれまでのwebアプリ版をPWA化するとセッション毎のPVが65%増えて20%直帰率が下がったという数字が出ています。

他にもForbesのPWAでユーザー毎のセッション数が45%アップしたりLancome USAで16%売り上げたあがった事例が紹介されています。

モバイルサイトが全然スマホで使えない

スマホユーザーはアプリに費やす時間の85%近くをトップ5のアプリで行っているという統計を以前の記事で紹介しましたが、多分インスタとかずっとやってるんだと思います。

当たり前ですがスマホアプリの中の画像はでっかくてクリックできるところもあんまりありません。

なのにモバイルサイトになってしまうとこんなになってる場合が多いです。

これはパソコンのサイトに詰め込んでいた情報をスマホでも崩れないように配置しただけで、スマホユーザーが普段慣れてるUIからほど遠いものになっています。

天野のスマホはiPhone 6s plusなのでまだ文字がみれますが、これをSEとかで見た場合は文字も読み取れないんじゃないでしょうか?

モバイルサイトをもっとスマホユーザーフレンドリーに

これをPWA化するとスマホユーザーが慣れているUIに近いモバイルサイトが作れるようになります。

https://preview.starbucks.com/

これは先日アメリカのスターバックスが公開したPWAです。モバイルサイトですがネイティブアプリに近いUIになっていますよね。

このスタバのPWAはiOSで動かした場合push通知もできないしオフラインの動作も今のところはできません。

ただここまでスマホユーザーが慣れているUIに近づけてあげればモバイルサイトの各KPIがiOSでもAndroidどちらでも改善するは簡単に想像できますよね。