「PWA」とは？ネイティブアプリとの違いと開発方法・手順まとめ

PWA（プログレッシブウェブアプリ）はWebサイトをネイティブアプリのように扱える技術のことです。

ネイティブアプリと同じくアイコンをホーム画面に追加できたり、サイト更新のタイミングでユーザーにプッシュ通知を送ることができます。

開発費用を抑えながらもアプリと同様の機能を利用できるため、その利便性から導入を検討する企業は増えています。

PWAを導入することでプッシュ通知やホーム画面の追加機能を通じて接触機会を増やすことができるため、ニュースサイトやコンテンツマーケティングを行う企業は導入することでアクセスアップや新規顧客の獲得につながります。

そこで本記事では、PWAの基礎知識から開発するメリット・デメリット、実際に開発する方法を解説します。

この記事を読むことであなたのWebサイトにPWAを導入すべきか、導入する場合は何から始めればいいかを詳しく知ることができます。

Googleアナリティクス初心者が簡単にサイト改善する方法

PWAとはWebサイトをスマホアプリのように使える仕組み
PWAのメリット
PWAのデメリット
- 一部OSでは機能が制限させる可能性がある
- 通常のWeb制作と比べると開発費用が割高になる
PWAと相性が良いケース
PWAの導入で読み込み速度・PV数・CV数がアップした事例
PWAを開発する方法
- PWAを専門業者に外注して開発する場合
- 自社開発する場合
PWAの開発手順
まとめ

PWAとはWebサイトをスマホアプリのように使える仕組み

PWA（プログレッシブウェブアプリ）とは、Webサイト・Webアプリをネイティブアプリと同じ感覚で使えるようにするための仕組みのことです。

PWAはネイティブアプリとは異なり、「App Store」や「Google Play」などのアプリストアを介さず、Webサイトからインストールします。

インストールされたアプリはスマホのホーム画面に追加され、アプリと同じ感覚で利用が可能です。オフラインでも利用可能ですし、プッシュ通知などの機能も使えます。

PWAとネイティブアプリの違いは以下の通りです。

比較項目/種類	PWA	ネイティブアプリ
ダウンロードの必要性	なし	あり
更新の必要性	なし	あり
開発費用	0~15万円	250万~
ストア（Google・Apple）の審査	なし	あり

参考：アプリの作成費用はいくら必要？種類別・機能別で徹底解説！│LISKUL

PWAのメリット

PWAのメリットは以下の通りです。

プッシュ通知を送れるから接触機会が増やせる
アプリ開発よりも費用安い
アプリのダウンロード・アップデートを行う必要がない
検索エンジンからの流入も期待できるからアクセスアップにつながる
オフライン時でも利用できる

プッシュ通知を送れるから接触機会が増やせる

PWAを導入することでWebサイトの更新時やキャンペーン施策を実施した時にプッシュ通知を送付することが可能です。

プッシュ通知とはユーザーのスマートフォンに通知を発信する機能で、プッシュ通知を行うことでユーザーに最新情報を共有でき、Webサイトを開いてもらえる接触機会を増やすことができます。

プッシュ通知による接触機会が増えることで、Webサイトへのアクセス・CV向上が見込めます。

参考：プッシュ通知サービス厳選7選！無料・有料サービスを徹底比較│LISKUL

アプリ開発よりも費用安い

PWAはアプリ開発と比べて費用が安いことも魅力の一つです。

通常、アプリ開発を行う場合はiOS(iPhone)とAndroidそれぞれに対応したアプリを開発する必要があるため、工数分の費用がかかります。

両方のOSに対応したアプリを作ることでユーザー数の増加が見込めますが、その分費用がかかってしまいます。

しかし、PWAはiOS・Android用に開発する必要がなく、既存のWebサイトに変更を加えるだけでPWAを導入できます。

ご自身で行う場合は費用がかかりませんし、外注した場合でも数十万円で対応してもらえるため、開発コストを抑えてアプリ同様の機能を利用できます。

アプリのダウンロード・アップデートを行う必要がない

PWAはアプリのようにダウンロードやアップデートを行う必要がありません。

ファッションアプリやニュースサイトなど、目的ごとにアプリをダウンロードする必要はありませんし、新機能の更新時にアップデートする必要もないため、ユーザーの利便性向上につながります。

アプリは基本的にアップデートをしなければ使えなくなる仕様なので、アップデート忘れによるユーザーの離脱を防ぐことができます。

検索エンジンからの流入も期待できるからアクセスアップにつながる

ネイティブアプリはアプリストアでしか表示されず、検索エンジンによる直接的な流入はありません。一方でPWAはWebサイトの情報を元に表示される仕組みであり、インストール以外にも検索エンジンからのアクセスが期待できます。

ネイティブアプリは一度アンインストールされてしまうと、接触機会がない限りは再度インストールされることはありません。

しかし、PWAは検索でヒットすることもあり、再度ユーザーと接触できる可能性があり、一度離れたユーザーが戻ってくる可能性があります。

そのため、PWAはネイティブアプリに比べてユーザーとの接触機会が多く、検索エンジンによる流入も見込めることからアクセスアップを期待できます。

オフライン時でも利用できる

PWAはキャッシュを利用してWebサイトを表示させるため、オフライン時でも表示できます。

キャッシュとは一度アクセスしたWebサイトの情報を保管しておく機能のことで、オフライン時でもWebサイトを開けるだけでなく、２回目以降のサイトの表示速度が早くなります。

このため、Webサイトの閲覧を通信回線の状況に左右されないため、ユーザーにストレスを与えない環境を提供できます。これにより、ユーザーの利便性や滞在時間の向上が期待できます。

Webサイトの表示速度はユーザーがページを移動するきっかけにもなる重要な項目になるため、Webサイトの表示速度が遅く、改善が見られない場合などにもPWA導入はおすすめです。

PWAのデメリット

PWAのデメリットは以下の通りです。

一部OSでは機能が制限させる可能性がある
通常のモバイル制作と比べると開発費用が割高

一部OSでは機能が制限させる可能性がある

PWAは一部OSでは機能が制限されています。AndroidではPWAにおける全ての機能が使えますが、iOS/ipadOSは「プッシュ通知」を利用することができません。

ただし、MacOSのみPWAのプッシュ通知を利用できます。

MacOSに対応しているということは、iOS/ipadOSでもプッシュ通知が利用できるようになるはずですが、現状は利用できないままとなっています。

通常のWeb制作と比べると開発費用が割高になる

PWAはネイティブアプリと比べると開発費用は抑えられますが、通常のWeb制作と比べると開発費用が若干割高になります。

というのも、PWAを導入するためにはホーム画面追加時のアイコンやPWAとして機能させるための開発・実装作業が必要になるためです。

その分PWAの恩恵は受けられますが、注意したいのは現状iOSでのプッシュ通知が利用できないという点です。

プッシュ通知が魅力の一つでもPWAですが、AndroidよりもiPhoneの所有者が多い日本では、費用対効果が合わない可能性があります。

ただ、Webサイトによっては「Androidユーザーの方がアクセスが多い」というケースもあるため、顧客分析を行ってから導入を検討するのが無難です。

PWAと相性が良いケース

PWAはスマホアプリを作るほどの開発予算を割けない場合や、アプリ程の多機能が不要なケースに向いています。例えば以下の例のようなケースであれば、PWAと相性が良いでしょう。

ホーム画面に追加してもらい、ユーザーとの接触を増やしたい
Webサイトの表示速度を改善したい
オフライン機能を追加したい

ただし、現状iPhoneユーザーの多い日本では機能が制限される可能性があるのでその点だけ注意してください。

サービス利用者のうち「Androidユーザーが多い」という分析結果が出るならPWA相性は良いですが、iOSユーザーが多い場合はプッシュ通知が使えないことを理解した上で導入する必要があります。

表示速度の遅いサイト

モバイルサイトの表示速度が5秒を超える場合はPWAの導入を検討しましょう。

Webサイトの表示速度はユーザーの離脱率に大きく関係しています。Webサイトの表示速度テストツールを提供する「Pingdom」がおこなった調査では、Webサイトの表示速度が2秒かかった場合は離脱率が9％なのに対し、5秒を超える場合は38％にまで増えるという分析結果が出ました。

参考：Does Page Load Time Really Affect Bounce Rate?│Pingdom Roya

これを踏まえると、Webサイトの表示に5秒以上かかっている場合は合計アクセス数の4割近くを逃していることになり、大きな機会損失と言えます。

PWAはWebサイトのキャッシュを保存することで、２回目以降の表示を高速化できるため、モバイルサイトの表示速度が5秒以上かかっている場合はPWAの導入をおすすめします。

モバイルサイトの表示速度はGoogleが提供している「PageSpeed Insights」でURLを入力すればモバイル・PC両方のページ表示速度を計測できます。

計測後は「First Contentful Paint（ユーザーがサイトを表示するまでにかかる時間）」のサイト表示にかかる秒数を確認してください。

ニュース・読み物サイト

ニュースサイトや読み物サイトはPWAの導入がおすすめです。

リアルタイム性の高いニュースサイトやトレンドをまとめた読み物サイトでは、ユーザーの隙間時間に読まれることが多いので、利便性を損なわないPWAの導入がおすすめです。

オンライン・オフラインの垣根をなくすことでユーザビリティが向上するだけでなく、表示速度向上や離脱率低下によりアクセス数の向上やコンバージョン増加にもつながります。

情報の検索が目的のサイト

情報の検索が目的であるサイトは「検索速度」がサイトの利便性に直結するため、キャッシュの保存で表示を高速化できるPWAの導入がおすすめです。

情報検索が目的のサイト例としては「不動産サイト」や「トラベルサイト」などが挙げられます。これらのサイトは「自分に合った物件を見つけたい」「旅行先を見つけたい」などの情報の検索が目的であるサイトです。

これらは表示速度や操作性が重要で、ユーザビリティの低さがページ離脱に直結します。

こういったサイトでは、キャッシュを保存してオフラインでも閲覧できるPWAの導入がおすすめです。

PWAの導入で読み込み速度・PV数・CV数がアップした事例

PWAを導入することで成果を上げた事例は国内でも複数あります。

実際に、ニュースサイトの日経電子版では、PWAを導入して以下のような成果が出ました。

読み込み速度が約2倍向上
コンバージョンが58％上昇
1日あたりのアクティブユーザーが49％上昇
自然検索流入が2.3倍向上
1セッションあたりのPV数が2倍に向上

参考：Nikkei achieves a new level of quality and performance with their multi-page PWA│web.dev

このように情報を提供するWebサイトとPWAは相性がよく、導入後すぐに効果が現れることもあります。

そのほかにも事例はたくさんありますが、PWA導入の判断基準としては「離脱率が高いサイト」「オフライン環境でも問題なく作動するサイト」「サイトの高速化が重要なサイト」これらに当てはまる場合は導入を検討しましょう。

参考：PWAの6つの成功事例と、事例から見えた導入すべきサイトの特徴│LISKUL

PWAを開発する方法

PWAを開発する方法は以下の２通りになります。

外注
自社開発

どちらを選ぶべきかの分水嶺は「担当人材が確保できるか」です。

社内にPWA開発の知識・ノウハウがない場合は外注するのが無難です。社内に開発部署があり、担当人材のリソースを確保できるという場合は自社開発でコストを抑えながら進めるのが良いでしょう。

委託先は「専門業者」と「フリーランス」があり、費用面ではフリーランスのほうがフリーランスの場合はPWA開発に関する知識や経験が求められることもあるので

PWAを専門業者に外注して開発する場合

PWAを専門業者に外注する場合は「専門業者」か「フリーランス」に依頼する場合で費用間や開発規模か異なります。

依頼業者	費用
専門業者	10〜100万円
フリーランス	5〜10万円

PWA開発はJavaScriptとHTMLで実装できるため、アプリ開発と比べるとそこまで費用がかかりません。

専門業者に依頼する場合は運用費用として月額料金がかかる可能性があります。ですが、企画から設計まで全て任せることができるので、社内にPWAに関しての担当部署や専門知識のない企業は専門業者への依頼がおすすめです。

一方でフリーランスに外注する場合は、開発の方向性を決めた上で発注する必要があります。そのため、PWA開発に関しての一定の知識が必要になります。

後ほど紹介するPWAの開発の手順を元に「何が必要で、何をフリーランスに依頼すべきか」を理解しておくことが必要です。

自社開発する場合

自社開発の場合はWebサイトにPWAを実装するためのアイコンやコードをJavaScriptとHTMLでの実装が必要です。

一からコードを書いて開発する場合と、PWA開発を楽にしてくれるツールを使った開発方法があります。

例えば、PWA開発には動作のルールを記述したマニフェストファイルを作成する必要がありますが、「マニフェストジェネレーター」を活用すれば必要事項を記入すれば自動でコードを作成してくれる便利なサービスもあります。

このようにサービスを併用して開発する場合と自社でコードを作成する2つの方法があります。PWA実装に役立つサービスは無料で利用できるものも多く、開発コストは人件費のみになります。

PWAの開発手順

PWAの開発手順は以下の通りです。

Webサイトのアイコンを用意する
マニフェストファイルを作成する
Service Worker APIに対応する
サイトに配置する

基本的にPWAの自社開発にはHTMLやJavaScriptを理解している専門の人材が必要不可欠です。

専門の人材がいない場合はPWA開発の流れだけでも理解し、これを元に専門業者やフリーランスに外注を依頼しましょう。

1.PWAのアイコンを用意する

まずはホーム画面に追加した時に表示されるアイコンを用意する必要があります。

オリジナルのアイコンを用意しなければたくさんあるスマホホーム画面から自社のPWAを選んで再訪問してもらうことはできません。

アイコンにする画像サイズは512×512ピクセルの画像を用意しておけば問題ありません。重要なのは正方形の画像を用意することです。

2.マニフェストファイルを作成する

アイコンが用意できたらマニフェストファイルを作成します。マニフェストファイルとはWebアプリの基本的な情報が含まれているファイルのことです。

PWAではJSON形式のファイル（JavaScriptを記述するファイル）を作成し、HTMLと紐付けする必要があります。ただし、マニフェストファイルはご自身で作成すると時間も手間もかかるので、ここではマニフェストジェネレーターを活用しましょう。

マニフェストジェネレーターとは、サイト名やアイコン画像をアップロードすれば自動的にマニフェストファイルを作成してくれるツールです。

画像の赤枠にある箇所にPWAとして表示する名前とURLを入力し、アイコン画像をアップロードした後に「GENERATE MANIFEST」をクリックするとzip形式のファイルが作成されます。

これをサーバーに設置すればマニフェストファイルとアイコンの準備は完了です。

参考：PWAのmanifest.jsonとiconsの各サイズのアイコン画像を自動生成してくれるApp Manifest Generatorの紹介│Qiita

3.Service Workerを作成する

Service Workerとは、スマホにプッシュ通知を送る機能やオフライン環境でも動作するようにローカル環境にキャッシュを保存できるJavaScriptです。

Service Workerとして使用するJavaScriptのファイル名を「service-worker.js」と設定し、このファイルを登録するindex.html内に以下のようなJavaScriptのコードを記述します。

<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘service-worker.js’).then(reg => {
console.log(‘サービスワーカーを登録しました’, reg);
}).catch(err => {
console.log(‘登録失敗’, err);
});
}
</script>
引用：ブラウザからインストールできるアプリPWAを作ってみよう

その後、 Service Worker となる「service-worker.js」ファイルに以下のようなコードを記述します。

// キャッシュしたいファイルの一覧を指定 — (*1)
const cacheFiles = [‘index.html’, ‘logo.svg’];
const cacheName = ‘v1’;
// インストール時に実行されるイベント — (*2)
self.addEventListener(‘install’, event => {
// キャッシュしたいファイルを指定
caches.open(cacheName).then(cache => cache.addAll(cacheFiles));
});
// インストール後に実行されるイベント
self.addEventListener(‘activate’, event => {
// 必要に応じて古いキャッシュの削除処理などを行う
});
// fetchイベント
self.addEventListener(‘fetch’, event => {
// キャッシュがあればそれを返す — (*3)
event.respondWith(
caches.match(event.request).then(function(resp) {
return resp || fetch(event.request).then(function(response) {
let responseClone = response.clone();
caches.open(cacheName).then(function(cache) {
cache.put(event.request, responseClone);
});
return response;
});
}).catch(function() {
return caches.match(‘logo.svg’);
}));
});
引用：ブラウザからインストールできるアプリPWAを作ってみよう

4. サイトに配置する

作成したファイル全てをWebサイトに配置しましょう。Webサイトに配置する場合はhttps対応のサーバーにアップロードする必要があります。

PWAはサーバーのかわりにキャッシュを読み込んでオフライン環境でもページを閲覧できることから「セキュリティの高さ」が重要視されています。

そのため、安全な通信環境を提供できるhttpsのサーバーでなければPWA化できませんので注意が必要です。

ちなみにWordPressで作成したサイトの場合は「PWA for WordPress」を導入することでコードの記述や設定をせずに簡単にPWA化が可能です。

これからPWA対応のサイトを作るのであればWordPressでWebサイトを制作するとコストを抑えたPWA化を実現できます。

参考：ブラウザからインストールできるアプリPWAを作ってみよう│TECH+（テックプラス）

まとめ

この記事では、PWAの基礎知識やネイティブアプリとの違い、メリットやデメリットについて解説しました。

PWAを活用することでWebサイトの情報をキャッシュとして保存できるため、サイトの高速化やオフライン環境で利用でき、ユーザビリティを向上させられます。

現状はAndroidユーザー限定ですが、プッシュ通知も送ることができるため、ユーザーとの接触機会を増やすことができ、WebサイトのアクセスやCV増加に繋げられます。

PWAの開発は「外注」か「自社開発」かの2通りの方法があります。外注の場合、「専門業者」と「フリーランス」と委託先が分かれます。

社内に開発部署がない場合は専門業者に依頼するのが無難です。社内に知識を持つ方がいる場合、フリーランスに委託するという選択肢も出てきます。

開発部署があり、工数も割けるという場合、自社開発を検討してみてください。