PWA は、Webサイトをスマートフォン上でアプリのように動作させる画期的な仕組みですが、しっかりと理解できている方が少ないのではないでしょうか。
PWAは有益な仕組みですが、モバイルサイトやネイティブアプリを代替するものではなく、両者の良さを継承しつつ並存しうる存在です。
この記事では、PWAの概要説明とできること、PWAのメリットデメリットなどを解説します。
以下、参考書籍です。
Contents
PWA （Progressive Web Apps）とは
PWA とは、「Progressive Web Apps」の頭文字を取った略称で、モバイル向けWebサイトをスマートフォン向けアプリのようなユーザー体験を提供する技術です。
レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトが、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用することでPWAとして使用することができるようになります。
インストールしなくてもアプリのように使うことが可能であったり、プッシュ通知を使用可能であったり、検索エンジンからURLにて検索可能であるなど
ネイティブアプリとモバイルサイトの良さを両立することができ、人気を博しています。
サイトがPWAかは、Googleがチェックリスト（Progressive Web App Checklist）を提供していますので、確認可能です。
（参考）Webアプリとは
Webアプリとは、ブラウザ上で使えるアプリケーションのことです。chromeやsafariといった検索エンジンから検索することが可能なので、端末にアプリインストールなしで機能を使えます。
「アカウントがあれば、多数の端末で使える」「常に最新情報を表示できる」などのメリットがありますが、インターネットに繋がっていない環境では使えません。
（参考）ネイティブアプリとは
ネイティブアプリとは、端末にインストールし、使用するアプリケーションです。オフラインでも動作することが可能です。App StoreやGoogle Playといったアプリストアから入手するもののため、リリースやアップデートの際は審査があります。chromeやfirefoxなどのブラウザ上で使用するWebアプリと比較して、「動作が早い」「カメラなどのスマホ自体の機能との連携が可能」「インターネット接続無しでの利用も可能」などの特徴があります。
PWA で実装できる機能
前章にてPWAの概要を解説しました。そこでPWAは、アプリとウェブの良い点を兼ね備えた技術ということ。では、具体的にどのような機能をお伝えしましたが、実際にどんなことができるのでしょうか。
本記事では使用可能な機能を以下６つ解説します。
[st-mybox title=”使用可能な機能” webicon=”st-svg-list-ol” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”” borderwidth=”3″ borderradius=”5″ titleweight=”bold” title_bordercolor=”#757575″ fontsize=”” myclass=”st-mybox-class st-title-under st-list-no” margin=”25px 0 25px 0″]
- プッシュ通知
- アイコンのホーム画面への追加
- インストール不要で、ネイティブアプリのような使用感
- 表示スピードの高速化
- オフラインでの閲覧可能
- URLでアクセス可能
- GPS（位置情報）の利用
[/st-mybox]
プッシュ通知
ネイティブアプリで実装可能なプッシュ通知を送ることができるようになります。ブラウザを閉じている状態のユーザーにもプッシュ通知を送ることで、格段に接触回数を増やすことに繋がります。
ただし現時点ではIOSでプッシュ通知およびバナー通知は非対応となりますので、注意が必要です。Androidではどちらも対応しています。
IOS側も今後対応するようになりそうですので、対応したら更新したいと思います。
アイコンのホーム画面への追加
ホーム画面に、アイコンとして追加することができます。単にショートカットをホーム画面に設置した場合と異なり、プッシュ通知やキャッシュの利用などネイティブアプリでしか利用できなかった機能を利用できるようになります。
ネイティブアプリと同様に、ホーム画面から直接アクセスでき、ワンタップでアクセスできるので、再訪問の増加が予想されます。
またUIとしても、アイコンから起動したサイトはURLバーもなくフルスクリーンで表示出来るので、webサイトに比べて優れていると言えます。
インストール不要で、ネイティブアプリのような使用感
PWAは、アプリではないので、ユーザーはストアでダウンロードやインストールする手間はかかりません。にもかかわらず、アプリのような見た目・使用感を実現することができます。
フルスクリーンモードでの表示になるので、アイコンから開いたPWAはネイティブアプリとそん色ないUI・UXを提供可能です。
表示スピードの高速化
ページの表示速度を改善することができます。PWAにはキャッシュを使用することで、ユーザーがページを読んでいる間に、次のページのデータを読み込むという機能を包括しているので、webサイトに比べて高速での表示が可能となります。
SEOでの上位表示の条件としてページの高速表示が挙げられるなど、Googleは高速なページ処理は大きな評価項目になっているので、大きなメリットと言えます。
オフラインで閲覧可能
ネイティブアプリと同じようにキャッシュを利用できるので、あらかじめ情報を読み込んでおくことができオフライン環境でもサイトの閲覧が可能です。
また、オフラインの間に入力された情報をオンラインに接続されたときに送信するという機能も使用可能となります。
URLでアクセス可能
アプリと同じような機能を持ちますが、webサイトなので検索エンジンから検索結果に表示されます。
新規との接点は検索エンジンのほうがアプリストアより優れているため、大きなメリットとなります。
また使用側としてもアプリの情報を他人に共有する際にURLを送れば自分が見ている画面を共有できる点もメリットの１つと考えれらます。
GPS（位置情報）の利用
GPS（位置情報）の利用が可能となりま。GPS（位置情報）を利用して、各地でのサービスをリアルタイムに提供することが可能です。
プッシュ通知と組み合わせると店舗の近くを通った時にクーポンの提供などの付加価値の高いプッシュ通知を提供することができます。
PWA 導入のメリット
前章までで、PWAで実現できることなどについて解説してきました。それらを踏まえて本章ではPWA導入のメリットを解説します。
メリットは、サイト運営者とユーザー双方の視点に分けて説明いたします。
サイト運営者にとっての PWA 導入 メリット
サイト運営者にとってのメリットは以下があると思います。
ユーザーとの接触が増えることで利用者数を向上させることができる。
PWAはアイコン化・プッシュ通知・URLでの共有など、Webブラウザやネイティブアプリの良さを両立しています。そのため、サイトへの流入増加、およびエンゲージメントの向上が期待されます。
ネイティブアプリよりも開発・運営等にかかるコストを抑えられる
ネイティブアプリはGoogleやAppleへの審査工程や手数料の支払いが発生します。また、開発自体もプラットフォームに合わせて設計・開発を行う必要があり、難易度が高いです。
一方、PWAはプラットフォームに依存していないため、比較的自由度の高い開発及び審査等を無で実装ができるため、運用コストも軽減できます。
特にIOSとAndroidアプリ、Webサイトで３つのアプリケーションをそれぞれ運用する必要がなくなることによる運用コストの削減は運用期間が長くなればなるほど効果を発揮します。
マーケティング戦略の自由度が高い
プッシュ通知機能は、ダイレクトマーケティングやリターゲティングマーケティングにも活用できます。SEOやSNS等のマーケティングだけでなく、こうした戦略を取れることにより、マーケティング戦略の幅を広げることができます。
Webサイトのアクセス解析が利用できる
PWAは、アプリのように使えるWebサイトです。Webサイトに実施したSEO対策は有効に働きます。Googleアナリティクスなどのアクセス解析を利用して、通常のWebサイトと同じように分析や改善も行えます。SEO改善のアプリケーションはネイティブアプリに比べて安価で多くのアプリケーションが提供されているため、分析と対策がしやすいことも好条件です。
ユーザーのサイト直帰率を下げられる
直帰率とは、Webサイトの1ページのみ閲覧して、別のページは閲覧しなかったユーザー行動に対する確率です。読み込みが遅いページやアクセスしづらいページでは、直帰率が増加してしましますが、Webサイトの表示速度を向上し、オフラインでのアクセスを可能となるため改善可能となります。
ユーザーにとっての PWA 導入 メリット
ユーザー視点のメリットとしては以下があると思います。
ホーム画面から簡単にアクセスできる
ブラウザを立ち上げる→検索する→目的のページに飛ぶというステップが必要であった従来のWebサイトと比べ、ホーム画面のアイコンをタップするだけで目的のWebページを開けるようになるため、利便性が大きく向上します。
閲覧時のストレスが少ない
キャッシュ機能によりバックグラウンドでページを読み込んでくれるので、Webサイトに比べて表示速度が早いです。読み込みで待機するというのは閲覧時のストレスとなりますが、軽減することができます。
情報を共有しやすい
ユーザー同士で情報を共有する際にネイティブアプリでは共有ボタンなどを利用するかスクリーンショットを別のチャットアプリを立ち上げて、共有したい相手に送信するというプロセスが必要でした。
しかしPWAならURLを送信するだけで共有できるため、ユーザー体験の向上に大きく寄与できます。
PWA 導入のデメリット
前章では、PWAのメリットを解説しました。
本章ではデメリットを紹介いたします。メリットと同様サイト運営者とユーザー双方の視点で解説します。
サイト運営者にとっての PWA 導入デメリット
既存のアプリがある場合、管理の手間が増える
現在ネイティブアプリを作成されていない場合特に考慮する必要はありませんが、すでにネイティブアプリを展開している場合、
PWAとネイティブアプリの両方を管理する必要があります。単純計算、運用の手間が2倍かかることになります。
マーケティングの観点やネイティブアプリとPWAサイトの双方の役割を明確化し、一本化するか双方管理するか開発前に検討する必要があります。
SSL化が必要になる
PWAは、httpsを前提にした技術です。PWA化しようと考えているサイトがHTTPで構築されている場合、httpsへの移行対応が必要となるため、導入の手間大きくなります。
アプリストア経由で新規ユーザーに接触出来ない
検索エンジンにて検索することはできますが、アプリストアに出店することはできません。
アプリストアでの接触を検討している場合は、PWA化ではなくネイティブアプリとWebサイトの併用が適していると考えられます。
iOSでは機能が制限される
メリットの１つとしてあげられたプッシュ通知ですが、現時点ではAndroid限定の機能となります。
アップデートにてiOSでも使用可能となる可能性はあります。そのほかにも使用できない機能がありますので、確認してから開発を進めてください。
ただしiOSもアップデートを実施する際にPWAの使用可能機能が増加しているので、今後使用可能となる可能性は高いと考えています。
ユーザーにとってのデメリット
更新やアップデートに弱い
キャッシュ機能を用いることで、PWAは素早い読み込みやオフラインでの利用を可能にしています。しかし、Webページの更新やアップデートが行われると、キャッシュされたデータの一部は使えなくなります。また、キャッシュデータはデバイスに保存されるため、データ容量が重くなると動作が遅くなる可能性もあります。
iOSの機能不足
サイト運営者側でも記載しましたが、iOS14ではプッシュ通知とバナー通知は対応外となっています。まだこれから改善していくと思われますが、
iPhoneやiPadユーザーからすると本来のメリットを享受しきれない状況にあります。
導入事例
実際に導入した会社がどのような効果を得られたか解説します。
Twitterは、ネイティブアプリとは別に2017年に、軽量版Twitter LiteをPWAで実装しました。データ量を削減することで、セッション毎のページ数を65％増やすことに成功し、ツイート数も75％上昇、直帰率は20％減少しました。
通信速度が遅い国でも利用できるようになったことも導入成功の結果の１つと考えれらます。
SUUMO
SUUMOでは2015年12月にPWAを実装し、「Service Worker」を利用したプッシュ通知機能を導入したことをプレスリリースしました。これによりアプリをインストールしていないユーザーに対しても、新着情報をプッシュ通知を送信することができるようになりました。ネイティブアプリに比べて軽量化されたPWSサイトでは、ページを読み込む時間が75%減少しました。また、プッシュ通知は開封率31％に増えました。
まとめ
PWA導入はいくつかの課題があるものの、多くの企業にて導入を検討すべきポテンシャルを秘めていると考えられます。
特に既にWebサイトを運営している企業であれば最短1時間程度で実装可能ですので、試しにPWA化してみてはいかがでしょうか。
また、まだサイトもない場合はノーコードサービスにて作成することでアプリケーションの導入コストを抑えることができるようになります。
以下にて解説していますので、よければ合わせて確認ください。
ノーコード （NoCode）とは？メリット・デメリットや今後の展望を解説
おわり
