目次
Contents
はじめに
近年、ネイティブアプリのような機能を兼ね備えたモバイル向けWebサイト・Webアプリを開発できるPWA（Progressive Web Apps）が注目を集めています。
PWAは、Webサイトでありながらスマホのホーム画面にアイコンを設置でき、ページの読み込みも早いことなどから、日本でもPWAを採用する企業が出始めています。
PWAが注目される理由
PWAは2015年頃からGoogleが主導して推進しているコンセプトで、Google Dev Summitで多くのセッションが取り上げられ、世界に広まってきました。
そして現在では、X(旧Twitter)やGoogleフォト、YouTube MusicなどもWeb版ではPWAが採用されています。
その主な理由としては、OSに依存せず、ネイティブアプリよりも開発コストがかからない傾向にある、ということが挙げられるでしょう。
ネイティブアプリ・ハイブリッドアプリとの違い
PWAはAndroidやiOSといったスマホのOSに依存しません。また、ホーム画面へアイコンの設置が可能であることや、一部オフライン環境でも使用可能という点で、従来のネイティブアプリやハイブリッドアプリとは区別されます。
●ネイティブアプリとの違い
ネイティブアプリは、一般的にはGoogle Play(Android)やApp Store(iOS)からスマホにダウンロードして利用できるアプリケーションのことです。
そのため、ネイティブアプリの開発を行う場合は、どのOSでの使用を想定し開発を行うのか、ということを決定する必要があります。
例えば、Android対応にするか、iPhoneやiPadなどで使えるiOSにするのか、あるいは両方に対応するのか、などです。
また、リリースする際は、それぞれのストアに申請の上承認される必要があり、当然そのための費用もかかります。
※参考費用(2023年時点)
・Android
Google Play登録費 ：$25（初回登録費）
・iOS
Apple Developer Program：$99 (年間費用)
それに対してPWAは、ネイティブアプリのような機能を備えながらも、WebアプリであるためOSに依存せず、ストアからのダウンロードも不要です。
また、申請や承認を得る必要もなく、リリースのための費用がかからない、という特徴もネイティブアプリとの大きな違いです。
●ハイブリッドアプリとの違い
ハイブリッドアプリは、Webサイトを作成する技術で開発されたAndroidや iOSのアプリのことを指し、開発にもWebサイトの構築時に用いられるHTML５・CSS３・JavaScriptなどが使われます。
端末上のネイティブ環境で動作し、コンテンツはWebの仕組みを読み込むため、ハイブリッドと呼ばれます。
OSに依存しない特徴はPWAと似ていますが、Web通信が求められるため動作が重くなりやすいことや、ネイティブアプリと同様にスマホへのインストールが必要になることから、PWAとは性質が異なります。
PWAのメリットとデメリット
すでにご紹介したものもありますが、PWAにはネイティブアプリやハイブリッドアプリにはない特徴があるため、導入するにあたっては、メリット、また、当然ながらデメリットの考慮も必要になります。
●メリット
PWAはネイティブアプリのような機能を備えていますが、ネイティブアプリにはないメリットが多数あります。
PWAを導入するメリットとしては、下記のような例が挙げられます。
・新規ユーザーの獲得
・リピート率の向上
・直帰率を抑える
（新規ユーザーの獲得）
PWAはネイティブアプリとは異なり、Webの検索結果にコンテンツを載せることができます。一方ネイティブアプリは、各ストアを経由してスマホにダウンロードすることでしかコンテンツを表示させられません。
PWAはあくまでWebアプリなので、キーワードなどを使用して新しいユーザーを流入させやすい、という点は、ネイティブアプリと比較して大きなメリットだと考えられます。
（リピート率の向上）
PWAは、ネイティブアプリのようにホーム画面へアイコンを設置可能で、アイコンのデザインも任意のものを設定できます。
そのため、スマホを開く度にユーザーの目に入り、簡単にアクセスすることが可能です。
また、プッシュ通知機能を活用することで、新しいコンテンツやキャンペーンをアピールできることから、リピート率の向上が見込まれます。
（直帰率を抑える）
直帰率とは、サイトを訪れたユーザーのうち、1ページしか見なかったユーザーの割合を表す指標です。
一般的に直帰率の目安は40%程度とも言われていますが、実際には厳密な目安は存在せず、直帰率はサイトの流入状況やページの構造によって大きく異なります。
ただ、「動作開始時間が2秒遅いだけで直帰率が50%程度増加する」という事例もあるため、あらかじめデータをローカルにキャッシュしているPWAは、通常のWebサイトと比較して表示速度が速く、直帰率を抑えられる可能性があります。
また、PWAはキャッシュを利用することで、オフラインでも閲覧できます。
●デメリット
PWAの導入を検討する上で、iOSにおいて一部の機能が利用できないという手メリットについては、考慮が必要ではないでしょうか。
現在は、iOS16からプッシュ通知に対応したこともあり、Andoroid(Chrome)ともほとんど遜色なく使用できるようになりましたが、バナー通知については引き続き非対応となっています。
バナー通知は、主にホーム画面へのアイコンの設置を促す表示であり、Android(Chrome)ではバナー通知から直接配置可能です。
一方、iOSではユーザー自身でホーム画面へ追加する操作を行う必要があることから、ユーザーにサイトを保存できると思ってもらえず、機会損失につながる恐れがあります。
ただ、最近はプッシュ通知機能の追加なども含め対応機能が増加しているので、今後に期待といったところでしょうか。
PWAの事例
PWA導入事例と効果について、いくつかご紹介させていただきます。
●X(旧Twitter)
・PWAを導入した「Twitter Lite」をリリースし、ネイティブアプリと同じように
ユーザーがブラウザを閉じていてもプッシュ通知の配信が可能に
・送信されたツイートが75％増加
・直帰率が20％減少
●日経電子版
・ネイティブアプリに加えてPWAを公開し、セッションあたりのページビュー数が2倍に
・ユーザーが操作可能になるまでの時間が14秒減少
・キャッシュの利用により読み込みが75%高速化
●SUUMO
・PWAを導入したことによってページの読み込みにかかる時間を75%削減
・プッシュ通知の開封率も31%と高い数値を記録
最後に
今回のブログでは、近年注目されているPWA について、また、その特徴や導入にあたってのメリット・デメリットについて書かせていただきました。
PWAとはどういうものか？ということに焦点をあてた内容になっていますので、実際にはどのように開発を行うのか、どうすればPWA になるのかといった疑問が残るかもしれません。
次回のブログでは、そういった疑問を含め、実際の開発手法や、PWA であるために満たすべき要件なども併せて深堀していきたいと思います。
記事 ： K.K
