Webサイトをアプリ化！PWAとは？ネイティブアプリとの違いも解説

アプリ事業を始めるにあたり、AndroidとiOS両方でリリースするのか、Web版だけで配信するのかによって、開発コストや求められる技術も変わってきます。

本記事では、Web版アプリケーションであるPWAをテーマに、そのメリットやネイティブアプリとの違いについて解説します。
PWA導入を検討している方は、ぜひ開発方法を決める参考にしてください。

1.Webサイトをアプリ化！PWA（Progressive Web Apps）とは？

PWAとは、WebアプリやWebサイトをネイティブアプリのように扱える技術のことです。
従来のウェブサイトとは異なり、オフラインでも動作する機能や、プッシュ通知の送信といったネイティブアプリと同様の機能をウェブ上で実現できます。

ネイティブアプリよりも開発コストが抑えられることや利便性の高さから、導入を検討する企業が増えています。

PWAはアプリの動作に必要なコードをWeb上で保管するため、アプリ使用に必要なデータ容量も少量で問題ありません。

また、PWAはオフラインで動作することも可能なので、アプリを使用するために常にインターネットに接続しなくて良いというメリットもあります。

PWAの構成要素は？

PWA（Progressive Web App）は、基本的に以下の要素から構成されています。

Service Worker（サービスワーカー）：Service Workerは、PWAの中心的な部分です。
ウェブアプリがオフラインで動作したり、ページを高速に読み込んだりするのに役立ちます。
例）ネットワークに接続できない場合でも、以前に表示したコンテンツを表示するなど
HTTPSのサーバー：PWAを作成するためには、セキュリティが確保されたHTTPSプロトコルを使うサーバーが必要です。（Webサイトを作るときと同じです！）
Single Page Application（SPA）： SPAは、ページ遷移を滑らかに、ウェブアプリケーションをよりアプリのように感じさせる技術です。
App Manifest（アプリマニフェスト）：アプリマニフェストは、PWAの外見を設定する設定ファイルです。アプリの名前やアイコン、スタートページ、テーマカラーなどを指定します。これにより、ユーザーはウェブアプリをホーム画面に追加でき、アプリのようにアクセスできます。

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

ネイティブアプリとは、App StoreやGoogle Playなどアプリストアを経由して、インストールするアプリのことです。

PWAとネイティブアプリの違いを以下の表にまとめました。

項目	PWA	ネイティブアプリ
ダウンロードの必要性	なし	あり
更新の必要性	なし	あり
ストア（Google・Apple）の審査	なし	あり

PWAとネイティブアプリとの大きな違いは、動作する場所にあります。
PWAはWeb上で動作しますが、一方ネイティブアプリは端末上で動作します。
また、PWAはネイティブアプリとは違いストアの審査が必要ないため、手数料がかからないのもメリットの一つです。

ただ、PWAはネイティブアプリに比べて動作が遅いため、電子書籍のように操作が単純で動作スピードを必要としないアプリが適しているでしょう。

ハイブリッドアプリとの違いは？

ハイブリッドアプリとは、ネイティブアプリとWebアプリの2つの特徴を合わせ持ったアプリのことです。

ハイブリッドアプリとPWAの違いを以下の表にまとめました。

項目	PWA	ハイブリッドアプリ
ダウンロードの必要性	なし	あり
更新の必要性	なし	なし
ストア（Google・Apple）の審査	なし	あり

PWAとハイブリッドアプリはよく似ていますが、開発コストや提供方法に大きな違いがあります。ハイブリッドアプリはアプリストアを経由しますが、PWAはアプリストアの審査を必要としないため、自由度が高いといえるでしょう。

ただ、ハイブリッドはアプリストアからの流入が狙える一方で、PWAは自社で集客する必要があるという点に注意が必要です。

2.PWAのメリット

PWAのメリットは以下の5つです。

ストアへの申請が不要
検索結果からの流入が期待できる
開発コストの削減につながる
ホーム画面にアイコンを表示できる
プッシュ通知が利用できる

ネイティブアプリやハイブリッドアプリではなくPWAでの開発を考えている方は、どのようなメリットがあるのかぜひ参考にしてみてください。

ストアへの申請が不要

PWAはApp StoreやGoogle Playといったアプリストアの審査が不要です。

従来のネイティブアプリの場合は、iOSならApp Storeに、AndroidならGoogle Playに必ず申請しなければなりません。

特に、iOSの場合はAppleから承認されるまではApp Storeに反映されないため、審査を受け、承認されなければユーザーに届かないというデメリットがあります。

また、ストアに申請しても許可を得られない場合もあるため、リリース延期や修正作業などの手間がかかる可能性もあるでしょう。

一方、PWAはOSによる縛りがなく、ストアへの申請も必要ないため、開発後すぐにユーザーに届けられます。

検索結果からの流入が期待できる

ネイティブアプリがアプリストアからのインストールでしかコンテンツを表示できないことに比べて、PWAはあくまでWebアプリのため、検索結果にコンテンツを載せられます。

そのため、ユーザーの検索キーワードに応じて、新たなユーザーの流入が期待できるというのは大きなメリットです。

ただ、アプリストアからの流入は見込めないため、自社で集客する必要があります。主な集客方法にはSNSを使ったPR活動やWeb広告を使うといった方法がありますが、いずれも手間や費用がかかってしまうという点に注意しましょう。

開発コストの削減につながる

PWAは、一つ作成するだけでさまざまなデバイスに対応できるため、開発期間や開発コスト削減につながります。ネイティブアプリとは異なり、アプリのインストールやアップデートも不要なほか、オフラインでも動作できます。

また、ネイティブアプリを開発するには、iOSアプリ用のObjective-CやAndroidアプリ用のJavaなどプラットフォームごとにネイティブ言語の知識が必要です。一方、PWAはWeb技術を使って開発するため、Web開発のスキルがあれば、ネイティブアプリやハイブリッドアプリに比べて比較的容易に開発できます。

ホーム画面にアイコンを表示できる

ブラウザで表示されたページを、ホーム画面に追加することは従来のWebアプリでも可能です。しかし、PWAはネイティブアプリ同様、ホーム画面にアイコンを表示できるだけでなく、任意のデザインのアイコンとしてホーム画面に表示できます。

ホーム画面に表示されたアイコンから、ユーザーの端末に保存されているキャッシュを利用することでオフラインでも利用できるというメリットもあります。

プッシュ通知が利用できる

PWAは、Webアプリでありながらネイティブアプリの機能であるプッシュ通知が利用できます。そのため、利用するユーザーはブラウザを開いていなくても通知を受け取ることが可能です。

プッシュ通知を利用すれば、イベントのお知らせや新商品情報などユーザーにとって役立つ情報を提供できるため、リピート購入やユーザーの復帰率向上につながるでしょう。また、PWAのプッシュ通知はネイティブアプリ同様、ユーザーの許可を得ないと送信されないため、セキュリティ上の問題も軽減できます。

3.PWAのデメリット

PWAのデメリットは、以下の2つです。

ブラウザによって動作環境が異なる
速度の低下により、ユーザー体験悪化のリスクがある

ブラウザによって動作環境が異なる

PWAは、ネイティブアプリとは異なり一つ開発すればさまざまなデバイスに対応できますが、OSによっては若干動作環境が異なる点がデメリットの一つです。

以下の表でAndroid、iOSの動作環境の違いをまとめました。

	Android	iOS
ホーム画面への追加を促すバナー表示	可能	不可能
プッシュ通知の利用	可能	不可能

現状PWAはAndroidユーザーの機能は充実していますが、iOSでは使えない機能が多く、利便性が低いといえます。

速度の低下により、ユーザー体験悪化のリスクがある

PWAはインターネット上で実行されるため、インターネット接続が悪い場合は回線速度が低下し、ユーザー体験悪化のリスクがあります。

複雑な構造のアプリの場合はより顕著になります。

そのため、PWAを利用してアプリを開発する場合は、電子書籍のように動作スピードを必要としないアプリを選ぶと良いでしょう。

4.PWAの導入事例

ここではPWAの4つの導入事例を紹介します。

Alibaba
Spotify
Retty
日経電子版

Alibaba

参考：Alibaba

Alibabaは世界最大級のBtoBオンラインプラットフォームです。PWAを導入したことによって、以下の成果が出ました。

全ブラウザでのコンバージョンが76%増加
iOS で 1 か月のアクティブユーザー数が14%増加、Androidで30%増加
インタラクション率（表示された広告をユーザーが操作した頻度）が4倍に向上

Alibabaは多くのユーザーがアプリではなく、ブラウザでの利用を望んでいることから、PWAの導入に踏み切ったようです。

参考：web.dev｜Alibaba

Spotify

参考：Spotify

Spotifyは北欧発の音楽プレーヤーアプリで、2023年12月現在数千万以上の音楽やコンテンツが登録されています。

SpotifyはPWA導入以前に、アプリストアから30%の手数料に関して課題を抱えていました。

PWAを導入したことによって、独自で適応性のあるUIを備えており、ネイティブアプリよりも回線速度に優れているほか、ホーム画面に追加することも可能です。

参考：TIRGEN｜Spotify PWA：人々に愛される理由

Retty

参考：Retty

Rettyは日本最大級のグルメサービスです。モバイル端末からのユーザー体験向上を図ることを目的にPWAを導入しました。PWAを導入したことによって、以下の変化がありました。

モバイル向けWebページの高速表示
プッシュ通知でユーザーに最新のお知らせを提供する

プッシュ通知はこれまでアプリユーザーのみ通知できましたが、スマートフォンやタブレットのユーザーに対しても新着・おすすめ情報を通知することが可能になりました。

参考：PRTIMES｜Retty

日経電子版

参考：日経電子版

日経電子版は、日本経済新聞が提供するニュースメディアです。紙媒体の新聞に加えて、電子版への月間アクセス数は4 億5,000万回を超えているようです。PWAを導入したことによって、以下の成果が出ました。

	パフォーマンスの向上	ビジネスへの影響
成果	SpeedIndexが2倍インタラクティブまでの時間が14秒短縮プリフェッチで読み込みが75%高速化	オーガニックトラフィックが2.3倍コンバージョン（サブスクリプション）が58%増加1日のアクティブユーザー数が49%増加セッションあたりのページビュー数が2倍

日経電子版は、サイトが複数の領域でモバイル用に十分に最適化されておらず、読み込みに非常に時間がかかっているという課題を抱えていました。そこでPWAを導入し、サイトの読み込み時間が早くなり、ユーザーのサイト離脱率の減少につながりました。

参考：web.dev｜日経電子版