モバイルサイトの改善策として、PWA(Progressive Web Appsプログレッシブ・ウェブ・アプリ）が注目されていますね。

PWAがネイティブアプリとは違うということは把握しているものの、どう違うのか分からない人もいるのではないでしょうか。

今回はそんなPWAの具体的な機能や、実装することによるメリットを紹介します。


PWA（Progressive Web Apps）とは

アプリケーションのように使えるWebサイト

PWAとは「Progressive Web Apps(プログレッシブ・ウェブ・アプリ)」の略称。

アプリのようにサービスを使うことができるモバイル向けのWebサイトです。


PWAのWEBサイト

  • ブラウザ上で機能するWEBアプリ(例:Microsoft Office、PhotoShop、LINE、Twitter等）
  • 端末にアプリストアからダウンロードして使うネイティブアプリ(例:ゲーム等）

のように、スマートフォンなどのホーム画面上にインストールをして利用することができます。

PWAはオフライン下でも使用可能だということも特徴です。

キャッシュ機能で動作も高速で動くように構築されているため、使用者はアプリを使用しているような感覚で利用することができます。


PWAとネイティブアプリとの違い

そんなPWAですが、ネイティブアプリとはどのように違うのかという点も整理しておきましょう。

まず、PWAはWebサイトなのでブラウザからアクセスできます。

一方ネイティブアプリは、App StoreやGoogle Playからダウンロードしてからでないとアクセスできません。

また、導入する使用目的にも違いがあります。

PWAは世界展開を狙う企業が、新興国向けにデータ量を減らしたサービスを提供する時に使用されることが多いです。

それに対してネイティブアプリは、高級感のあるモバイル体験を提供するために使用されることが多いとされています。

現在は多くの企業がこの使用目的を使い分けて、PWAとネイティブアプリ両方のサービスを展開しているのです。


PWAとAMPとの違い

PWAを理解する際、ネイティブアプリ同様に混乱してしまいがちなのが「AMP」です。

AMPは「Accelerated Mobile Page」の略で、これもPWAのように高速でページを読み込むことができるという特徴があります。

似たようなものだと思われがちですが、アクセスの集まり方が大きく違うのです。

AMPはgoogleの検索結果からのトラフィックなので自然な「検索」からアクセスが集まります。

しかしPWAは対象サイトへのURLか、リンクがないとアクセスすることができません。

この点を理解しておけば、PWAとAMPを混同してしまうこともなくなるはずです。


PWAの条件

GoogleはモバイルサイトがPWAかどうかをジャッジするために下記3つの条件を挙げています。

一つずつ確認していきましょう。


アプリと似た動作をすること

まず、PWAであるためにはアプリのような動作をしていることが条件として挙げられます。

具体的なポイントは、以下のような特徴です。

  • キャッシュ機能を使ってプッシュ通知が使えるか
  • デバイスのハードウェアにアクセスすることが可能か
  • モバイルの全画面表示が可能か
  • ホーム画面にインストールできるか
  • Google PlayやApp Store等のアプリストアからダウンロードしなくてよいものか

「アプリであれば備わっている動作をモバイルサイトでできるかどうか」というのが、PWAであることの条件となります。


信頼性があるかどうか

次に、PWAであるためには信頼性があるかどうかも重要になってきます。

具体的にいうと、その判断基準は「ネットワークの状態が悪い状況下、オフラインの場合でも時間をかけずに起動することが可能か」という点。

これは必要なリソースを端末にキャッシュすることができているか、という点が見られているということです。

キャッシュを利用することで、オフライン状況でネットワークにアクセスしなくても時間をかけずに起動することができます。


高速な動きが可能かどうか

高速化されている仕組みかどうかもPWAであるために必要な要素です。

ユーザーの指示に対して、高速で対応することができていないようだと条件から外れてしまうでしょう。

  • 指示に対して動作がスムーズであるかどうか
  • スクロールした時に動きが止まらないかどうか
  • ユーザーにストレスを与えないスピードで処理することができるか

というポイントも重要となっています。これは信頼性に繋がる条件でもあります。


PWAの機能

ここからは、PWAの具体的な機能を確認していきましょう。


ホーム画面にショートカットアイコンを設置できる

スマートフォン等のホーム画面に、ワンタッチでモバイルサイトへアクセスできるアイコンを表示することができるのもPWAの機能。

ここからWebサイトに直接アクセスできるため、ユーザーはより時短で手間をかけずに読みたいページに行き着くことができます。

この特徴が非常にネイティブアプリに似ており、混合して考えてしまう人が多いようです。

ショートカットアイコンを設置してもらうことで、ユーザーとの接触機会を増やすことができます。

そのため多くの企業で取り入れられているのです。


プッシュ通知

PWAの機能として、プッシュ通知も大きな役割を果たしています。

プッシュ通知とは、Webサイトの新しい情報をユーザーに自動的にお知らせ表示する機能です。

スマホ画面などに自動的に新情報を提示してくれる機能なので、日常で目にしている人も多いはずです。

今までのWebサイトではこのプッシュ通知はできませんでした。

しかしPWAを導入することで可能になり、ウェブサイト側からのアプローチ機会を増やすことができる点が大きなメリットとなっています。

この機能が無いウェブサイトはユーザーが訪れてくれるまで待つほかありません。

しかしこのプッシュ機能を使用することで、ウェブサイト側から積極的に新情報をユーザーの手元に届けることができるようになります。

よってビジネスチャンスを大きく広げることができるというわけです。


Webサイトのオフライン化・高速化

この点については、GoogleがモバイルサイトがPWAかどうかを判断するための条件の際にお伝えしました。

PWAの機能として、オフラインで作業ができるという点も大きな特徴です。

なぜそのようなことが可能かというと、一時的にWebサイト閲覧に必要なデータ(キャッシュ)をブラウザ等に保存します。

そうすれば外出先などのオフライン状況下でもwebサイトを閲覧することができるからです。

そのおかげで処理に余計な時間をかけずに済むため、高速でページを読むこともできます。


PWAの実装メリット

改めてPWA実装することによるメリットを、PWAのモバイルサイトを運営する側の視点からチェックしていきましょう。


iOSとAndroidの両方のデバイスで使うことができる

PWAのモバイルサイトの大きなメリットとして、iOSとAndroidの両方のデバイスで使うことができるという点をまずご紹介しましょう。

Google PlayやApp Store等、アプリストアなどからダウンロードする必要があるネイティブアプリの場合は

  • iOS用のアプリはiOSでのみ作動
  • Android用のアプリはAndroidでのみ作動

という傾向があります。

実際に、ダウンロードしようとしたアプリが自分の機種では対応していなくてがっかりしたことがある人も多いのではないでしょうか。

ネイティブアプリも両OSに対応させることもできますが、そのためにコーディングをしなくてはなりません。

対策費用が2倍かかってしまいますので、運営側としては大きなデメリットとなります。

しかしPWAの場合はiOSとAndroid、両方のデバイスで使うことができるので、そのコストも手間も抑えることができるというわけです。

サービスを提供するまでの時間も早まるので、企業にとってはとても大きなメリットといえます。


顧客満足度を高めることができる

PWAを実装すると先ほどご紹介した通り、

  • 高速で見たいWEBページを見ることができるようになる
  • オフライン下でも閲覧できるようになる
  • アプリのように簡単にアクセスすることができるようになる

という特徴があります。

これにより、ユーザー(顧客)の満足度を高めることができるというのも大きなメリットです。

スピードが遅いことにより、ユーザーがwebページから離脱してしまう可能性を減らすことができます。

ホーム画面にアイコンを設置することで閲覧の機会を増やす、プッシュ機能で最新の情報を提供することも可能です。

そのため、より適切なタイミングで多くの情報をユーザーに与えることができるようになるというわけです。

満足度の高いモバイルサイトはユーザーのリピート率が高くなることも見込めますので、ユーザーをファン化させることもできます。


アプリよりホーム画面にアイコンを設置してもらいやすい

PWAサイトはアプリよりもホーム画面に設置してもらいやすく、ユーザーとの接触頻度を上げられる可能性が高いのも特徴です。

ネイティブアプリは、App StoreやGoogle Playなどのアプリストアからインストールしなければなりません。

そのため外出先ではインストールを控えてしまったり、インストールする時間でユーザーが諦めてしまったりします。

そうなると始めてくれるまでのステップで顧客を逃してしまうことも多いのです。

それに対して、PWAはブラウザで見ているページをホーム画面に登録するだけでアプリのように使用可能になります。

手軽にホーム画面に設置してもらいやすいというわけです。


アクセス数が増えやすい

PWAなら、

  • iOSとAndroidの両方のデバイスで使える
  • 高速化などで顧客満足度を高められる
  • アプリよりもインストールしてホーム画面に設置してもらいやすい

このような機能により、アクセス数は自然と増えやすくなってくるという特徴もあります。

日経新聞の電子版サイト「日経電子版」は、PWA導入によりホーム画面にアイコンを追加するユーザーが多くなりました。

そのユーザーからのアクセス数は約2倍にまで伸ばせたという事例もあります。

サービス内容は一緒でも、このように提供方法を変えるだけで数値が変化するということがわかる良い事例です。


アプリサイトに審査してもらう手間や費用が不要

ネイティブアプリをリリースするためには、App StoreやGoogle Play等のアプリストアに審査をしてもらう必要があります。

そのため手間や費用もかかるのです。対してPWAなら審査の必要がありません。

ユーザーにWebサイトから直接ホーム画面に設置してもらうことができるので手間や費用が省略できます。

つまり、時間もかけずにサービスを始めることができるのです。

逆に、アプリサイトからの流入が減ってしまうことがデメリットになることもあるでしょう。

PMAのWEBサイトでもアプリサイトに登録することもできるので、顧客の動きを見て判断してから動くこともできます。


WEBサイトのアクセス解析をすることができる

PWAはネイティブアプリではなく、Webサイトです。

googleアナリティクスなどのアクセス解析機能を利用して、数字を分析して対策することができるのも大きなメリットとなります。

今まで使っていたデータで、PWA化したことによりどのように数値が変化したかどうかも比較して分析することが可能です。

効率的なサイト改善対策を実行することができます。


PWAはネイティブアプリより管理や実装が簡単！

さらに、PWAはネイティブアプリより管理や実装が簡単だといわれています。

PWAは、HTML・Javascript・CSSで構成されているものです。

そのため開発がネイティブアプリより簡単で、運営する上で管理もしやすいという特徴があります。

ネイティブアプリの場合、開発時に

  • プログラミング
  • モバイル環境ごとの複数アプリ作成
  • アプリストアでの審査

が必須になるのでこれによる手間がかかり、作成までの費用がかさんでしまうのです。

それに加えて、ユーザーにサービスを提供するまで時間がかかってしまうので、機会損失をしてしまう可能性もあります。

しかし、PWAではこれらのマイナス要素が解消され、費用や手間を抑え、時短でサービスの提供の開始が可能です。


PWAを実装する手順は？

続いて、PWAのWebサイトを実装するための手順を簡単にご紹介していきます。


Webサイトをhttps化させる

PWAのWebサイトを実装するには、Webサイトをhttps化するのが第一条件です。

PWAはService Workerという技術でプログラミングされいます。

https化されていないWebサイトの状態だと、ネット接続のハイジャックや改ざんのリスクが伴うのです。

Service Workerはアプリのように高速で動き、ユーザーに不信感を与えないような信頼性のある動作をするための仕組みのこと。

また、その仕組みで動作しているプログラムもService Workerといいます。


ウェブアプリマニフェストを作成する

PWAはホーム画面にアイコンを設置することができることも条件だとお伝えしました。

そのシステムを作り出すには「ウェブアプリマニフェスト」を作成する必要があります。

ウェブアプリマニフェストで設定する項目は

  • アプリの画像
  • 説明文
  • 起動時の画面

です。


Service Workerを設定する

Service Workerを設定することで、ブラウザからのリクエストは全てService Workerを通じて実行されるようになります。

Service Workerはリクエストに対してサーバーリソースを取得したり、ブラウザ内のキャッシュを作成したりすることが可能です。

PWAはServiceWorkerを設定することで、

  • オフライン状況下での操作
  • バックグラウンドの同期
  • プッシュ通知

を利用することができるようになります。この設定をすることも重要なステップです。

PWAを理解する上でService Workerの役割は非常に大きな役割を果たすので、この働きを理解しておきましょう。


PWAを実装する場合の注意点

多くのメリットがあるPWAですが、実装する場合には注意点もあります。


ブラウザによってPWA対応に差がある

PWAは、近年導入された技術のため、ブラウザによっては対応に差がある点も認識しておく必要があります。

さらに、ブラウザの今後のアップデートにより、PWAが正常に稼動しないケースが出てくる可能性も否定できないのです。

都度状況に合わせて対応を変えていかなければなりません。


ネイティブアプリとの併用は大変・費用も2倍

PWAはネイティブアプリに近い働きをしますが、ネイティブアプリの働きを完璧に果たすものではありません。

ネイティブアプリのサービスをすでに提供している場合はPWAの管理もしなくてはならず、手間がかかってしまう可能性もあります。

また、管理費用も2倍かかってしまう場合もあるでしょう。

2つを併用している場合、自社のサービスはPWAとネイティブアプリのどちらのほうがメリットが大きいのかを一定期間テストしてみます。

それからどちらかに一本化するのがおすすめです。管理自体しやすくなりますし、コスト面でもプラスになるという可能性もあります。


まとめ

PWA（Progressive Web Apps）とはどのようなものかを、PWAの機能や実装メリットをデメリットや注意点も含めて解説してきました。

混乱してしまいがちな「ネイティブアプリ」との違いも紹介したので、相違点やそれぞれの特徴をより深く理解できたのではないでしょうか。

PWAを実装してアクセス数やユーザー満足度を上げ、利益を上げている企業もどんどん増えています。

今回ご紹介した注意点も踏まえて、是非実装してみてください。