PWA（プログレッシブウェブアプリ）とは？　Google推奨のクロスプラットフォームを徹底解説

PWAとは、Webサイトをアプリのように使えるようにする技術のこと。Android、iOSなどの環境に左右されずに使用することができるクロスプラットフォーム技術として注目を集めています。

開発におけるメリットが豊富かつ、ユーザーの利便性が高いことから、近年さまざまなサービスに導入されています。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書

PWAとは？

PWAとは、Progressive Web Apps（プログレッシブウェブアプリ）の略称。2015年に開催されたChrome Dev Summitで提唱され、現在もGoogleによって導入を推奨されています。

まず初めに、PWAの基礎知識やネイティブアプリとの違い、さまざまなサービスがPWAを取り入れている理由から解説します。

PWAの基礎知識

PWAの特徴は、WebサイトのコンテンツをアプリのようにPC・スマートフォンにインストールできる技術のこと。

Android・iOS双方のプラットフォーム上で、同じ仕様のアプリケーションを動かせるクロスプラットフォーム技術です。

素早いWebページの読み込みや操作が可能になることから、Googleが導入を推奨しています。

PWAは、アプリストアを介さずにWebサイトから直接インストールすることが可能。インストール後にスマートフォンのホーム画面にアイコンを表示したり、プッシュ通知を送ることもできます。

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

ネイティブアプリとは、iOS/Androidそれぞれの環境に合わせて作られた専用アプリのこと。つまり、私たちが普段Apple StoreやGoogle Playなどのアプリストアからダウンロードして使っているアプリはすべてネイティブアプリです。

PWAはWebサイトであり、ネイティブアプリではありません。しかし、Webサイトから直接インストールし、ホーム画面にアイコンを表示できるため、アプリと似たような使い方をすることができます。

PWAが注目される理由

ネイティブアプリをリリースするには、AndroidやiOSといったそれぞれの環境に合わせた専用アプリを開発する必要があります。また、ストア申請やアップデートを実施するごとに運用コストがかかります。

PWAであれば、OSに合わせた専用アプリを開発する必要がなく、ストア申請やアップデートの手間も省けるため、開発・運用コストを抑えることができます。

また、表示速度が素早く、オーガニック検索から流入できるなど、ユーザーにとってもメリットが豊富。ユーザーの利便性を向上させることができるため、さまざまなサービスに取り入れられています。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書

PWAを導入するメリット

PWAを導入するメリットを詳しく紹介します。

Android / iOSどちらでも使える

あらゆるデバイスで使用できるネイティブアプリをリリースするためには、Android、iOSのそれぞれに対応した専用アプリの開発が必須になります。

しかし、PWAであればデバイスやOSに左右されないため、1つのプロダクトを開発するだけで、すべてのデバイスに対応することが可能に。結果として、開発期間や費用などのコスト削減につながります。

ストア申請が不要

ネイティブアプリをリリースしたり、バージョンアップデートを実施する場合、アプリストアへの申請と審査が必要になります。

しかし、ストアを介さずWebサイトから直接インストールできるPWAであれば、ストア申請の手間がかかりません。

また、新機能の更新時にアップデートする必要がないため、ユーザーの利便性向上につながる上、アップデート忘れによるユーザーの離脱を防ぐことが可能です。

加えて、AppleやGoogleのガイドラインを遵守する必要がなく、自由度の高いアプリ開発が可能になります。

検索からリーチできる

検索エンジンからサイトに流入できることも、WebサイトであるPWAならではのメリット。

ネイティブアプリは一度アンインストールされてしまえば使われなくなってしまいますが、PWAは検索で流入してきたユーザーに対して何度もリーチすることが可能です。

表示速度が速い

PWAはキャッシュ機能により、ページ読み込み速度が速いのも特徴です。読み込み速度の速さはユーザーの利便性を高め、SEOの観点からも評価されやすくなります。

また、あらかじめページを読み込んでおくことでオフラインでも閲覧することが可能です。

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

PWAもネイティブアプリのようにスマートフォンのホーム画面にアイコンを表示させることができます。

ブラウザのブックマークよりもユーザーの目につきやすく、Webサイトへの再訪を促しやすくなります。

プッシュ通知を送ることができる

PWAはプッシュ通知を送ることができます。（以前はAndroidとChrome環境でのみ利用可能でしたが、2023年３月リリースのiOS / iPadOS 16.4からプッシュ通知がサポートされました）

プッシュ通知を使えばユーザーに直接的に新たなコンテンツを訴求することができ、Webサイトへの再訪を促すことができます。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書

PWAを導入するデメリット

一方、PWAを導入するデメリットも存在します。

通常のモバイルサイト制作と比較しコストがかかる

PWAはネイティブアプリと比べると開発費用は抑えられますが、通常のモバイルサイト制作のみを開発する場合と比べると開発費用が上がります。

これは、ホーム画面追加時のアイコン化やプッシュ通知など、PWAとして機能させるための開発・実装作業が必要になるためです。

世の中の動向に影響される可能性がある

2024年2月、欧州連合（EU）域内で、iOS 17.4のベータ版においてPWAのサポートが突如廃止され、のちに撤回されるという事象が発生しました。

これはAppleによるデジタル市場法（DMA）を順守するための措置だとされ、App Storeの申請コストを回避していたPWAアプリ開発者にとって大きな痛手となると思われました。

ところが多くの批判に晒されたため、3月にはその廃止を撤回するという発表がなされました。

今回の措置は欧州連合（EU）域内での事象でしたが、今後、新たな規制や法令により、同様の事態が国内で発生することもあり得ます。

PWAの導入に限った話ではありませんが、世の中の動向や世界情勢についても注視しておく必要があります。

Googleのチェックリスト：PWAの条件とは？

モバイルサイトをPWAにするためのチェックリストがGoogleから公開されています。

このチェックリストには、PWAを作成するうえで最低限遵守すべき項目をまとめた「コアチェックリスト」と、さらに質の高いPWAを目指すための「より最適なPWAのためのチェックリスト」の２種類があるため、それぞれについて詳しく紹介します。

PWAのコアチェックリスト

コアチェックリストには、PWAを作成するうえで守らなければならない最低限の5つの要素がまとめられています。

より最適なPWAのためのチェックリスト

PWA作成の必要最低限の要素をまとめたコアチェックリストに加えて、Googleはより質の高いPWA作成のためのチェックリストも公開しています。

➡︎【資料ダウンロード】アプリ開発の企画～発注の教科書

日本・海外のPWA導入事例10選

PWAは国内外のさまざまなサービスに取り入れられています。ここでは、代表的な事例を厳選して紹介します。

Twitter

Twitterも、2017年4月よりデフォルトのモバイルサイトに「Twitter Lite PWA」を導入しています。

同社は80％以上のユーザーがモバイルを利用している状況から、モバイルのWeb体験を向上することを課題に感じ、インスタントロード、ユーザーエンゲージメントの向上、データ消費量の削減を目的としてTwitterLiteを開発。

これにより、ユーザーにより質の高いUXを提供できるようになりました。

出典：Google PWAケーススタディ「Twittter Lite」

SUUMO

国内の主力不動産サイト「SUUMO」もPWAを導入。

同社は、サイトを訪れるユーザーの大半がスマホからアクセスしている状況を鑑み、モバイルサイトの利便性向上を急務としていました。

当初はネイティブアプリのダウンロードを推進していましたが、ユーザーにアプリをダウンロードさせ再エンゲージさせることは困難で費用がかさみ、対応策としてモバイルアプリと同様の高速で魅力的なUXを提供できるPWAを開発しました。

アジア航測社は、航空測量をベースとして事業を展開する空間情報コンサルタント企業。同社は測量した水中の地形データを活用して海底地形マップが見られる釣り人向けのメディアサービス「釣りドコ」にPWAを取り入れました。

リリース後のコンテンツマーケティング戦略においてもオーガニック検索での流入を見込むことを念頭にPWA開発を実施。これにより、OSごとの開発やストア対応が不要となり、開発費用や運用にかかるリソースを削減できました。

★詳しくはこちら

日本経済新聞

4億5000万以上の月間UU数を誇る日本経済新聞のWebサイトも、より良いUXを実現するためにPWAを導入しました。

同社は、スマートフォン利用者の増加に伴うモバイルサイトのニーズの高まりを受け、読み込み速度やモバイル向けに最適化されていないページが複数のエリアに存在しているなどの課題を解決する必要性を感じていました。

対応策としてPWAを開発し、大幅なパフォーマンスの改善とともにビジネス面でも大きな影響が生み出されています。

出典：Google PWAケーススタディ「日本経済新聞」

Alibaba

世界最大のオンラインBtoB取引プラットフォーム「Alibaba.com」もPWAを導入。

当初、Alibabaはモバイルサイトをユーザーがアプリへ移行するためのプラットフォームとみなしていましたが、多くのユーザーがブラウザ内にとどまる傾向を受け、PWAを取り入れました。

出典：Google PWAケーススタディ「Alibaba」

ランコム

高級化粧品ブランドのランコムは、デスクトップサイトと比較した際のモバイルサイトのコンバージョン率の低さを課題に感じ、モバイルサイトのUX改善のためPWAを導入。

出典：Google PWAケーススタディ「ランコム」

MakeMyTrip

MakeMyTripは月間800万ユニークユーザーのWebサイトを持つインドを代表する旅行会社。

同サービスのユーザーは大半がネイティブアプリを使用しており、予約の半数以上がネイティブアプリ経由となっています。

しかし、同社は10億人を超えるインドの旅行市場で新規顧客を獲得するにはモバイルWebサイトのUX向上が必須と考え、PWA開発に着手。