プログレッシブWebアプリ(PWA)とは

​プログレッシブWebアプリケーション(PWA)はオフラインファーストのモバイルアプリであり、Webアプリケーションよりもシームレスなエクスペリエンスを実現します。​​PWAのことがよくわからないという方も、開発コミュニティで大きな話題となっているからにはその存在を見過ごすことはできないでしょう。

あまり知られていませんが、この概念の前身となるものをiPhoneのプレゼンテーションにおいて提示したのはSteve Jobs氏でした。Jobs氏は、モバイルユーザーのニーズを満たすには、デバイスに関係なく優れたエクスペリエンスを提供できるSafariで十分だろうと考えていました。その翌年、AppleがApp Storeを立ち上げてネイティブアプリへの投資を開始した結果、Jobs氏のこの考えは否定されました。当時は、アプリがモバイルの未来であるとみなされていたのです。とはいえ、モバイルページの最適化をさらに進めるにはどうすればよいかという点は、大手企業の懸念事項として残ったままでした。

2015年、GoogleのエンジニアであるAlex Russell氏とデザイナーのFrances Berriman氏が「プログレッシブアプリケーション」(当初、「Web」は抜けていました)という言葉を生み出しました。ただ、このときはモバイルユーザーの悩みに対応する必要性に迫られてアプリの新たな命名規則を提案しただけであり、何か新しい仕組みを作ったわけではありませんでした。

無視できない重要性

MindSeaの調査によると、米国のスマートフォーンユーザーの50%はモバイルアプリを月に1個もダウンロードしておらず、そういったユーザーにアピールできる代替方法を見つけることが喫緊の課題になっているそうです。テクノロジー企業もこのことを認識しています。Gartnerの最新のエンタープライズマルチエクスペリエンス調査によると、回答者の93%は2020年末までにPWAをデプロイするか、開発したいと考えています。

プログレッシブWebアプリでは、モバイルチャネルでブランドにアクセスするユーザーにシームレスなエクスペリエンスを提供できるため、導入率と維持率が向上します。Web版とモバイル版のページのギャップも減らすことができます。今回は、PWAがこの最終的な目的をどのように実現するかを理解できるよう、重要な要素に分けて詳しく説明していきます。

プログレッシブWebアプリの機能

プログレッシブWebアプリケーションは、いわばブラウザ経由で端末にインストールできる、モバイル向けに最適化されたWebページのバージョンです。通常のアプリケーションと似ていますが、アプリストアからダウンロードする手間がかかりません。では、PWAでどのようなことができるかを把握できるよう、大まかな定義からもう一歩踏み込み、PWAの主な機能を詳しく見ていきましょう。

progressive-web-apps-pwa-01 

プログレッシブWebアプリのメリット

オフラインでの利用

おそらく、最も認識されているPWAの機能は、オフライン時やネットワーク状況が悪いときでも使用できることです。Webアプリを有効にすると重要な要素がいくつかダウンロードされ、いつでもアプリを使用できるようになります。つまり、PWAは信頼性が高く、非常に高速だということです

優れたパフォーマンス

PWAを初めて開くと、複数の要素がキャッシュされます。これにより、その後の使用では読み込みが速くなり、すべての画面で全体的にスムーズなエクスペリエンスが得られます。Googleによると、ユーザーの53%は読み込みに3秒以上かかった時点でそのモバイルWebサイトの使用をあきらめてしまうそうです。ページの速度をできる限り最適化することが重要なのは、このためです。

検索性

ネイティブモバイルアプリと同様、PWAもインストール後はホーム画面から利用できます。PWAはある意味、ブラウザを開かずにワンクリック(またはワンタップ)でアクセスできるポータブルなWebページとみなすことができます。また、GoogleがプログレッシブWebアプリの導入を推進していることから、SEO値も非常に高くなります。ネイティブアプリとは異なり、PWAは検索エンジンの検索順位の対象となります。モバイル検索を実行すると、検索結果の1ページ目の上部にスニペットカードとして表示されることもよくあります。

応答性

PWAはレスポンシブアプリケーションとは異なりますが、レスポンシブな性質を持っています。あらゆる画面サイズに適応し、使用するデバイスを問わず同じように動作します。

接続性

PWAでは、デバイスのカメラ、GPS、ファイルシステムなどのハードウェア機能を利用できます。ネイティブアプリと同様、Apple PayやGoogle Payなどのビルトイン決済システムを利用して支払いをすることもできます。また、PWAはWebアプリケーションとコードベースが共通であるため、OTA(無線)更新が可能です。ストアから新しいバージョンをダウンロードする必要はありません。

再エンゲージメント

PWAはプッシュ通知などの機能を備えており、アプリケーションが起動していないときでもしっかりユーザーエンゲージメントを実施できます。情報の優先順位付けを行ったり、アプリの知覚価値を向上させたり、ユーザージャーニーのパーソナライズに役立ちそうなタッチポイントを追加したりすることが可能なのです。

Web検索を行うと、このほかにも数え切れないほどのサブ機能や別称が出てくるはずです。しかし、PWAの性質や、PWAがユーザージャーニーをいかに向上させうるかを一番よく伝えるのが上記の特色です。内容が幅広いうえ抽象的でもあるため、今度は実践的に、プログレッシブWebアプリにできることや、具体的なビジネスシナリオでどう役に立つかを見ていきましょう。

プログレッシブWebアプリでできること

当初はAppleなどのブラウザ支持者による懐疑論や抵抗が優勢だったものの、今では様々な場面でPWAが活用されています。PWAを無視することは難しくなり、一部の市場リーダーはすでに対応を始めています。こうなったのは、先ほど説明した使用面でのメリットに加え、PWAが様々な角度からビジネスに活気をもたらすからです。

progressive-web-apps-pwa-02 

Webアプリユーザーのメリット

  • 開発コストと保守コストの削減: 複数のプラットフォームに1つのコードベースで対応することができます。
  • 簡単なデプロイ: アプリストアで配布するためのわずらわしい手続きが不要です。
  • ユーザーエンゲージメント: アプリが起動していなくても、ユーザーとの再エンゲージメントを簡単に行うことができます。
  • ストア手数料不要: アプリストアでは収益の約30%が徴収されます。
  • サイズの小ささ: PWAの多くは1MB未満であり、わずかな時間でダウンロードできます。
  • リーチの広さ: PWAは検索性が高くSEOのインパクトが大きいため、通常のネイティブアプリよりリーチが広がります。また、サイズが小さいため、ネットワークが低速な遠隔地域でもアクセスが容易です。
  • コンバージョン率の高さ: PWAを利用すると、コンバージョン率が大幅に向上します。

上記のような抽象的なメトリックだけでなく、業界での実績も少なからず蓄積されてきています。

たとえば、StarbucksはPWAへの移行後、1日あたり(1か月あたり)のアクティブユーザー数が2倍になったそうです。GoogleはGoogle I/O ‘18のテクニカルセッションにおいて、モバイルユーザーからの受注を20%増やすことができたと述べています。このようなすばらしい成果を実現できたのはなぜでしょうか。ネイティブアプリからPWAへ移行し、「高機能かつ高速で、一貫性と信頼性に優れた魅力的なエクスペリエンス」を提供しているからにほかなりません。

別の成功例としては、日本で主に新聞事業を手がける持株企業である日本経済新聞社が挙げられます。同社はネイティブモバイルアプリの代替であるPWAに価値を見出し、2017年に移行を決めました。Googleが公表したケーススタディ<a href="https://developers.google.com/web/showcase/2018/nikkei" target"="_'blank'">を読むと、この変更によってもたらされた業績の向上とビジネスインパクトがよくわかります。読み込み時間の短縮、トラフィックやコンバージョン率の向上など、この決定によって形勢が大きく変わったのです。

モバイル開発におけるPWAの影響が高まるにつれ成功事例 も増えており、PWAにとって追い風となっています。では、PWAはどのようなビジネスにも最適なのでしょうか。

PWAを使用すべきケース

性質上、​​PWAはB2Cビジネスで多く使用されています​​。B2Cビジネスでは、アプリの利用が散発的であり、消費者はブランドにアクセスするために検索やインストールを行うことを嫌います。情報を見たいだけで、購入の意思がないこともあるからです。

たとえば、空港にいるときに空港アプリケーションで搭乗口を確認しようとしているとしましょう。確認できる情報が同じであれば、帯域幅が限られている中で高額なローミング料金を払ってアプリストアで重いアプリケーションをダウンロードするよりも、一番近い発着案内板を見にいくほうが簡単です。この場合、ネイティブアプリはソリューションというより妥協案に近いかもしれません。

一方、PWAが用意されていれば、搭乗券のQRコード*をスキャンするか航空会社のWebサイトにアクセスし、ホーム画面にアプリアイコンをインストールするだけで、同じページをすばやく閲覧することができます。フライトが急きょ変更になった場合も、PWAがプッシュ通知で即座にそのことを知らせてくれます。

しかし、B2EについてはネイティブとPWAのどちらを選ぶべきか難しいところです。PWAは、簡単に配布できるというメリットがあります。社内アプリケーションをアプリストアに提出して承認を得るのは、ビジネスオーナーにとって大変な作業です。一方、ネイティブアプリはネイティブに統合されたエクスペリエンスを提供でき、アプリを日常的に使用する従業員に幅広いユースケースを提供することができます。

アプリの用途がタイムシート入力機能、ディレクトリ、CRM機能へのアクセス程度であれば、PWAはうってつけです。ただし、特定のプリンタや通信サービス(SIMカードやNFCへのアクセス)との連携も必要な場合は、ネイティブ連携が必要になるため対応が難しくなります。

B2Bにおいては、基本的にはネイティブアプリが最適です。B2Bビジネスの性質上、ユーザーはブラウザやデバイスを問わず多くの機能を利用できることを期待します。PWAはほとんどのシナリオに対応できますが、しっかりとした連携が求められるユースケースにおいて重要となるNFCやTouch IDを利用できないなど、互換性の面でいくつか問題があります。もちろん一部のB2BビジネスではPWAが最適解となる可能性もありますが、制約を感じるケースが多いのもこの分野です。

プログレッシブWebアプリが「プログレッシブ(進歩的)」と呼ばれるのは、ユーザージャーニーのストレスをなくすからです。ファーストコンタクトとオンボーディングを容易にし、ユーザーの負担を大幅に減らして、維持率を向上させます。PWAは、企業がユーザーや顧客のジャーニーをマッピングし、それぞれのニーズを特定して、それに最適なソリューションを選択することで初めて成功します。

StarbucksがPWAを選択したのは、ユーザーがデジタルメニューにオフラインでアクセスできるようにするためでした。一方、日本経済新聞社は重いページの読み込みを高速化するためにPWAを導入しました。これらの決定は具体的な要件に基づいて下されたものです。PWAがあらゆるシナリオに適したオプションであるために選んだというわけではありません。

モバイル開発に正解や不正解はありません。大切なのは、顧客に最適かどうかという点です。

progressive-web-apps-pwa-03 

プログレッシブWebアプリのビジネス上のメリット

PWAとネイティブアプリの比較

現在、GoogleやMicrosoftなどのテクノロジーリーダーはPWAにスポットライトを当て、ネイティブアプリにはないメリットを強調しています。Appleをはじめとする企業も、どうすればPWAのエクスペリエンスを最適化できるかを評価している段階ではありますが、PWAの価値自体は認めています。モバイルアプリ開発においてすでに何らかの変化が起きていることは確かです。

今後は、ネイティブアプリとPWAの両方が特定のビジネスモデルに最適なオプションとして認識されるようになり、それぞれのポジションを確立していくでしょう。Webページがデスクトップ向けに最適化され、モバイルページがモバイル向けに最適化されているのと同じように、ネイティブモバイルアプリとPWAもそれぞれのターゲット向けに最適化されていくはずです。これは一見ささいなことに見えますが、2008年にApp Storeが登場してからこれまで、従来のアプリケーションコンセプトの代替となるようなものがなかったことを考えると、非常に大きな出来事です。

PWAは他のソリューションを脅かすものではありませんが、独自の市場を見出し、インパクトを与え、この分野のあらゆる関係者の注目を集めています。もう無視することはできません。

PWAの様々なメリットについては、OutSystemsのOutSystemsの無償トライアル で直接ご確認ください。

* QRコードは株式会社デンソーウェーブの登録商標です。