PWA（プログレッシブウェブアプリ）とは？基礎知識や機能・メリットをご紹介

PWAとは？

PWA（Progressive Web Apps）とは、「WebサイトやWebアプリをネイティブアプリのようにインストールする技術」のことです。HTMLやCSS、Javascriptを使うことで実現します。

ネイティブアプリとは、App StoreやGoogle Playストアといったアプリストアからインストールするアプリを指します。インストールしたのち、iOSやAndroidといった各環境で使用します。

それに対し、PWAはアプリストアを介さずに直接Webサイトからインストールします。インストール後は、他のアプリと同様にスマートフォンのホーム画面に並びます。タップすれば、アプリのような感覚でWebサイトを閲覧できます。

PWAの特徴は、以下の3つです。

• 信頼性（ネットワークの状態に影響されず起動するか）
• 高速性（スクロールなどの動作がスムーズか）
• アプリのような動作

最後の「アプリのような動作」とは、以下をはじめとする条件があります。

• オフラインでも使える
• プッシュ通知の機能が使える
• 端末の画面全体に表示できる
• ホーム画面にアイコンを表示できる

「アプリストアからインストールする必要がない」という点を除けば、PWAは私たちが日常的に使うアプリと同じような特徴を持っていることがわかります。

PWAが注目される背景

ネイティブアプリはiOSやAndroidといった環境に合わせて使うため、それぞれの専用アプリを開発する必要があります。開発後も、アップデートなどの手間やコストが発生するというデメリットが存在します。

PWAの場合は、iOSやAndroid用に個別にアプリを開発する必要がありません。アプリストアへの登録も不要なため、開発や運用にかかるコストを抑えられます。これらのメリットにより、自社のWebサイトにPWAを対応させる企業も多く存在します。

また、PWAが普及する環境が整ったことも注目を集めている要因の一つです。PWAはiOSで利用できなかったため、iOSのユーザー数が多い日本で注目される機会は少ない傾向にありました。しかし、2018年にAppleがiOSのブラウザであるSafariに「Service Worker」と呼ばれる機能を搭載します。これにより「iOS + Safari」の環境下でPWAが活用できるようになりました。

MicrosoftもブラウザのMicrosoft EdgeにPWAを対応させるなど、PWAが活用しやすい環境がますます広まっています。Androidのユーザー数が高い海外では、日本よりも早くPWAが普及したと言われています。PWAが使いやすい環境が整うことで、日本でも同じように普及していくと考えられています。

PWAの基本構成

PWAでWebサイトをアプリとしてインストールすると、ホーム画面にアイコンが表示されます。これをタップするとWebサイトが立ち上がります。

ブラウザでWebサイトを表示させると、アドレスバーやメニューバーが表示されるなど、そのブラウザに応じた枠組みの中で閲覧することになります。それに対し、PWAではブラウザの影響を受けません。

どちらで閲覧してもWebサイトの中身は同じです。しかしPWAを活用することにより、ネイティブアプリのような感覚で閲覧できます。

PWA導入のメリット

ホーム画面からアクセスできる

PWAはホーム画面にアイコンを表示できるため、Webサイトへのアクセスがスムーズになります。

ブラウザにはブックマーク機能がありますが「ブラウザを開く→ブックマークを開く→目的のWebサイトを探して開く」という操作が必要です。ステップが多くなってしまい、心理的な負担からユーザーのアクセスを阻害してしまう可能性があります。

PWAの場合は1回のタップでWebサイトを開けるため、ユーザーは楽にアクセスできます。明確なアクセスの目的がなくても、ホーム画面でアイコンが目に入ったからという理由でなんとなくアクセスすることもあるでしょう。

これにより、企業としてもアクセス数や再訪率、コンバージョン率向上などのメリットを享受できる可能性があります。

アプリストアを利用する必要がない

PWAはWebサイトから直接インストールできるため、App StoreやGoogle Playストアといったアプリストアを利用する必要がありません。

ネイティブアプリをインストールするためには「アプリストアにアクセスする→目的のアプリを探す→インストールをする」という手順が必要です。

それに対しPWAでのインストールは、ブラウザでWebサイトを閲覧している際に行います。操作方法はブラウザによっても異なりますが、一般的にはメニューから「ホーム画面に追加」などの項目をタップすることによりインストールされます。アプリストアにアクセスする必要がないため、ネイティブアプリよりも少ない時間や手間でインストールできます。このような理由から、ユーザーにインストールしてもらいやすくなる可能性があります。

企業としても、アプリストアへ配信する際の申請などの手間が削減できます。また、アプリストアの仕様やガイドラインなどに囚われることがなく、自由度が高い運用ができることもポイントです。

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

GoogleやYahoo!などの検索エンジンからの流入・インストールが期待できるのもメリットの一つです。

ネイティブアプリは不要になればユーザーにアンインストールされ、それ以降は企業や商品の存在を思い出してもらえないこともあります。それに対しPWAは、検索でヒットしたことをきっかけにユーザーが戻ってくることも考えられます。一時的にアイコンを削除してしまったユーザーでも、質や利便性などの点でWebサイトが気に入れば、何回でもインストールしてもらえる可能性があります。

これらの理由から、検索からの流入でWebサイトをインストールできることには、ユーザー数やアクセス数などの観点からメリットがあると言えます。

開発・コストが削減できる

ネイティブアプリの場合、iOSやAndroidそれぞれに対応したアプリ開発が必要です。iOS用のアプリをAndroidで動作させるといったことはできません。ネイティブアプリを開発する際は、iOS用とAndroid用の両方を開発するのか、またはどちらか片方を開発するのか検討する必要があります。両方のOS用にそれぞれアプリを開発すれば、ユーザー数は増加する反面、開発にかかるコストも増加します。

PWAはOSに左右されないため、1回の開発で全ての端末に対応させることができます。これにより、開発にかかる時間や費用の削減に繋がります。

プッシュ通知が使える

プッシュ通知とは、ネイティブアプリからユーザーの端末に通知を配信する機能です。スマートフォンのステータスバーやロック画面など、設定に応じた場所に通知が表示されます。プッシュ通知には企業や商品などの情報を伝える目的があり、マーケティング施策として頻繁に使われる手法です。

PWAでも、ネイティブアプリと同じようにプッシュ通知が使えます。新商品やキャンペーンのお知らせなどを配信することにより、ユーザーがアクセスするきっかけになります。Webサイトによっては「ネイティブアプリを開発しなくても、PWAで充分」と感じるケースもあるでしょう。

なお、PWAを介したプッシュ通知は「Android + Google Chrome」の環境で行うのが一般的です。iOSやSafariには、2022年3月現在は未対応です。

ユーザーの直帰率が下がる

Webサイトの読み込み時間は、ユーザーが閲覧するかどうかの判断材料になります。中には「読み込み時間が3秒を超えると閲覧を諦める」というユーザーも存在します。アクセスの機会を逃さないために、読み込み時間は1秒でも短縮したいところです。

PWAはアイコンをタップしてすぐ起動するため、読み込み途中での離脱を防げる可能性があります。これにより、Webサイトにおける指標の一つである「直帰率」を下げることにつながります。

通信量・データ容量が少なくて済む

PWAはネイティブアプリに比べ、通信量やデータ容量が少ないというメリットがあります。これにより、低速な回線での利用や、低スペックな端末でも利用可能になります。通信制限がかかってしまった場合や、通信環境が良くない場所に行った場合でも、問題なく使用できるでしょう。実際に、PWAは充分な通信環境が整っていない途上国でも好まれて使用されています。

また、インストールする際も数百バイト程度と、アプリストアからのインストールよりも軽い傾向にあります。

表示速度が早い

PWAはキャッシュによりWebサイトを表示させるため、表示速度が早いという特徴があります。キャッシュとは、Webサイトの情報を初回のアクセス時に保管しておく機能です。一度読み込んだデータを呼び出すことで、2回目以降のアクセスは表示速度が早くなります。

PWAはオフラインでも使えるため、電波の状況に左右されることもありません。オフライン時に入力したデータを、オンライン時に送信するといったことも可能です。

ホーム画面からのアクセス時はもちろん、Webサイト内でのページ遷移の際にも、同様に読み込み時間が短縮されます。閲覧時にユーザーにストレスを与える要素が少なく、結果としてWebサイトの滞在時間が増えることが期待できます。

ユーザー数が増える可能性がある

本項で紹介した通り、PWAはさまざまなメリットがあります。アプリストアからのインストールが不要で、表示速度が早いなど、ユーザー側のメリットも豊富です。

これらのメリットから、PWAを導入することで、より多くのユーザーにWebサイトを見てもらえる可能性が高まります。中には「PWAの導入で50%程度のアクティブユーザーが増加した」という事例も存在します。

日本人がインストールし、実際に使用しているネイティブアプリの数は、25個〜30個程度と言われています。メールアプリやブラウザ、各種SNSなど、ユーザーの生活に欠かせないアプリも多く含まれると考えると、そのほかのアプリがそこに入るのは狭き門です。せっかくインストールしてもらっても、質が低かったり、必要がなくなったりすれば、すぐに使われなくなってしまうでしょう。

コストをかけてそのようなネイティブアプリを作るよりも、PWAとして導入するという選択をしたほうが、結果としてアクティブユーザーが増加するケースもあります。

PWA導入の成功事例2選

Pinterest（ピンタレスト）

画像検索サイトであるPinterestも、PWAを取り入れています。Pinterestのスマートフォン向けWebサイトはデータ量が膨大で、以前は読み込みに23秒間と長い時間がかかることがありました。PWAの導入により、より少ないデータ量での表示を実現しています。具体的な効果は、以下の通りです。

• 読み込み時間が23秒から5.6秒に短縮
• 滞在時間が40％増加
• ユーザーから得られる利益が44％増加

画像引用：Pinterest

The Weather Channel

3つ目は、世界のユーザーが利用する天気予報サイトである「The Weather Channel」です。ネイティブアプリも開発していますが、約半数のユーザーはWebサイトからのアクセスでした。

これを踏まえ、Webサイトをより利用してもらいやすくする目的でPWAを導入したことにより、通信技術や端末の性能に囚われず、多くの人が利用しやすい環境が整いました。具体的には、以下の効果が確認されています。

• サイトの表示速度を80%向上
• 50万人のユーザーがプッシュ通知を導入

画像引用：The Weather Channel

まとめ

PWAを導入することで、ユーザーはネイティブアプリのような感覚でWebサイトを閲覧できます。PWAを介した利便性の向上により、アクセス数やコンバージョン率の向上など、企業にとっても多くのメリットを受け取れる可能性があります。また、開発にかかるコストが削減できることも魅力的です。

PWAに注目が集まる反面、多くの企業ではPWAとネイティブアプリを併用しています。ユーザーの傾向やコストといった面から「PWAとネイティブアプリの両方」「いずれか片方」など、今後の方針を検討していきましょう。