モバイルユーザーのUXを変えるPWAとは?

PWAとはウェブサイトとアプリの両方の利点を兼ね備えたウェブアプリです。多くのユーザーがインターネットへのアクセスにスマホを活用している現状を踏まえ、「モバイルユーザーの体験をより良いものにしよう」というプラットフォーマーの取り組みから生まれました。

早速、PWAでどのようなUXを実現できるのかご紹介しましょう。

PWAで実現できること

PWAはさまざまなウェブAPIを活用することで、これまでのウェブページでは不可能だったUXを実現することができます。

具体的には、

  • アプリストアを通さずにインストールができる
  • プッシュ通知が届く
  • オフラインキャッシュでコンテンツを楽しむことができる

「ん? なにそれ。あまりイメージわかないなぁ……」
そんな声が聞こえてきそうですね。

そういう時は実際に触ってみるのが一番です。お手元にAndroidOSのスマホがあれば簡単に体験することができます。

事例1:アプリストアを通さずにインストールができる

Twitter

多くの方がすでにTwitterアプリをインストールされているかとは思いますが、Chromeブラウザ上でご覧ください。ページを開いたらログインしてもしなくても構いません。ブラウザメニューから「ホーム画面に追加」を選択してください。

いかがでしょうか?

アプリがインストールされているのがわかりますか? 通常の「ホーム画面に追加」と比べてみると、振る舞いが大きく違うことがわかります。

左:PWA対応したTwitterの場合 右:PWA未対応の企業サイトの場合


スマートフォンからもウェブページではなくアプリとして認識されているので、アンインストールしようとするとこのように「アンインストール」が表示されます。
 

ホーム画面から削除しようとすると「アンインストール」という選択肢が表示される


ウェブなのにスマホにアプリとしてインストールすることができる。まったく新しいUXを体験いただけたかと思います。

PWAに対応したコンテンツはアプリストアを経由することなくワンタップでインストールが可能です。ユーザーが何度かページへの訪問を繰り返すと、ホーム画面への追加を促すといった機能も備わっています。

この機能はウェブページのホーム画面追加とは全く別物です。ネイティブアプリのような起動画面の提供はもちろん、フルスクリーンモードで表示されるなど、コンテンツの挙動はネイティブアプリそのものです。

インストールする時間がほんの数秒だったことに気が付いた方もいるでしょう。実はPWAコンテンツのデータサイズはネイティブアプリと比べて非常に軽量です。以下は2017年のGoogle I/Oで発表された、 Androidアプリ、iOSアプリ、 PWA対応したTwitterの それぞれのデータサイズの比較例です。

従来のアプリケーションはデータサイズが100MB近くあり、インストールには非常に時間がかかります。ユーザーとしてはスマホのストレージが圧迫されたり、キャリア回線で大容量データ通信を行うことは回避したいところです。

事例2:プッシュ通知が届く

Twitter

こちらも同じくTwitterでのデモになります。ご覧のようにきちんとプッシュ通知を受け取れていますね。


ウェブサイトから離脱してしまったユーザーを再び呼び戻す(=再エンゲージメント)手法としてプッシュ通知は非常に効果的です。同時に、これこそがウェブサイトでは実現できなかった機能であり、ネイティブアプリ最大の特徴と呼べるかも知れません。

PWAではネイティブアプリ同様、アプリケーションを閉じていても好きなタイミングでプッシュ通知を発行することが可能です。しかも、PWAによって実現されたプッシュ通知の開封率が30パーセントに達する事例が存在するなど、ユーザーにとっても有益な機能であることは明白です。

事例3:オフラインキャッシュでコンテンツを楽しむことができる

Google I/O 2016

先ほどと違い、こちらはインストールしなくても問題ありません。Chromeブラウザでページを開いたらスマホの設定を機内モードにして変更してください。ブラウザを開きなおしてバーガーメニューからいくつかのページを覗いてみると、問題なく表示されることが確認できます。


日本では、通信キャリア各社が全国で高品質なネットワークを提供しているため、オフラインで動作するコンテンツの必要性を感じるシーンは少ないかも知れませんが、低品質なネットワーク環境に置かれたユーザーにとって、オフラインでも動くコンテンツや3G回線でも軽快に動くコンテンツは非常に重要なものです。

PWAはそのようなユーザーにもストレスなくインターネットを活用できるよう、コンテンツのキャッシュが可能です。ユーザーが一度閲覧したページや、次のコンテンツをバックグラウンドでキャッシュしておくことでオフラインでもユーザーが目的を達成できるように設計することができます。

設計と構築次第では、オフラインでのユーザーの動きをログとして蓄積し、オンラインになったタイミングでログを送信することで、オフラインユーザーの行動データが途切れてしまうことを防ぐことができます。

その他、まだまだ多くの導入事例がありますので、気になる方はぜひ以下のリンクを参考にしてみてください。

A selection of Progressive Web Apps

PWA導入の成果

2015 年に米Googleのリリースによって注目されはじめたPWA。それから2年経った今日では、世界中のマーケットでの導入事例と成功事例がGoogle I/Oをはじめとした開発者イベントで多数紹介されています。

SUUMO

  • ページの表示時間を通常時よりも75パーセント短縮
  • プッシュ通知の開封率31パーセント達成

Twitter Lite

  • セッションあたりの閲覧ページ数が 64パーセント増加
  • PWAユーザーのツイート数がアプリユーザーと比べて75パーセント増加
  • PWAユーザーの直帰率がアプリユーザーと比べて20パーセント低下

Wego
AMPとPWAの合わせ技でモバイルでの高速化を実現

  • ユーザーの直帰率が20パーセント減少
  • コンバージョン率が95パーセント向上

PWAは主流となるのだろうか?

現在、日本でのPWA導入例は決して多くはありません。PWA自体、現在も開発が進んでおり発展途上。事例の豊富なテクノロジーではないため敬遠されているのかも知れませんが、導入を見送る”決め手”はSafariブラウザがPWAに対応していないことではないでしょうか。

特に日本はiOSユーザーの割合が高いためSafariはサービス提供者にとっても最も重要なブラウザの一つですが、残念なことにSafariではPWAの要とも言えるオフラインでの利用やプッシュ通知を利用することができないのが現状です。

ところが2017年8月、アップルがSafariのPWA対応に向けた開発が始まっていることを認めたことで、メジャーなモバイルブラウザ全てでPWAが活用できる可能性が出てきました。

ウェブがブラウザの枠を飛び出し、ネイティブアプリケーションのように活用できる未来がすぐそこまできています。今後、iOS、Androidアプリケーションを開発する時はPWAという第三の選択肢も吟味してみるとよいかも知れません。