スマートフォンアプリの代わりになる！？グーグルが進めるPWA(Progressive Web Apps)とは

みなさんがウェブアプリケーションを開発する時に、同時にスマートフォンアプリの開発も検討することは多々あると思います。
しかし、ウェブアプリとスマートフォンアプリは開発に用いるプログラミング言語も違うので、コストがかかってしまいます。
さらに、それを運用するとなるとなおさらです。
そんなコストをかけて、スマホアプリを作って採算が取れるのだろうか…そんな悩みはありませんか？
そんな時はPWAで開発することを検討しましょう。
この記事では、PWAとは何か、どんなことができるのか、どんなメリットがあるのかを解説していきます。

PWAとは

PWA（Progressive Web Apps）とはGoogle社のプロジェクトで、ウェブアプリでも、ネイティブアプリのような動きができるようにしようというものです。
まずはPWAの前にウェブアプリとネイティブアプリについて見ていきましょう。

ウェブアプリとネイティブアプリって何が違うの？

そもそも、いわゆるアプリケーションと呼ばれるものには、ウェブアプリとネイティブアプリがあります。
前者はウェブブラウザで動くアプリケーション、後者はPCやスマートフォンなどにダウンロードして使用するものです。
ウェブアプリはブラウザがインターネットにアクセスできないと使用できませんが、ネイティブアプリは、PCやスマートフォンの内部で動くので、インターネットにつながっていない状態でも使用することができます（一部機能を除く）。
では、ネイティブアプリってどんなものがあるのでしょうか？

ネイティブアプリの代表的なものって？

ネイティブアプリに該当するものは、例えば皆さんが使ったことがあるであろうExcelやWord、PowerPointなどがそうです。
あれはあくまでPCの中で動作しているので、インターネットに繋がっていなくても使えるのです。
他にも、Adobe IllustratorやPhotoshopもそうですね。
アプリストアからスマートフォンにダウンロードして使う、スマートフォンアプリと呼ばれるものも、ネイティブアプリの一種です。

PWAとはどんなもの？

PWAとは、ウェブブラウザを通して使用するウェブアプリなのに、スマートフォンアプリのような動きをするもののことです。
例えば、オフラインでも使えたり、プッシュ通知などの機能があったり…
これらはすべて、スマートフォンアプリの特徴です。

PWA自体は、何らかの特別な技術というわけではなく、Google社が定める要素を備えたウェブアプリのことを指します。
その要素は主に、Reliable, Integrated, Fast, Engagingの4つです。

Reliable	ネットワークの状態に関係なく即座に読み込める
Integrated	体験をよりデバイス・OSに合わせた形にする
Fast	アニメーションでが滑らかで、操作にすばやく反応する
Engaging	のめり込めるようなUXがある

 

ここからはPWAでどんなことができるのか、PWA導入のメリット・デメリットを見ていきたいと思います。
しかしその前に、スマートフォンアプリの現在の市場を再確認していきたいと思います。
そうすることで、PWAを採用することを検討すべき理由がお分かり頂けるでしょう。

『モバイル市場年鑑2019』を読み解く

アプリケーションの調査会社の世界最大手のApp Annie社が、『モバイル市場年鑑2019』を発表しています。
今回は、この中から一部のデータをご紹介していきます。

アプリダウンロード数は35%増

スマートフォンアプリのダウンロード数は、全世界で1940億にもなり、2016年から35%の増加になっています。
これだけ見ると、スマートフォンアプリの市場は非常に大きいものと思われます。
特に、新興国では市場が拡大しています。

日本のアプリストアでの消費支出は横ばい

さらに、世界全体のアプリストアでの消費支出額は、1010億ドルとなり、2016年から75%増となっています。
しかし日本の場合、アプリストアでの消費支出額はほぼ横ばいとなっています。
2018年はアプリストアでの消費の40％を中国が占めたとのことで、アメリカは若干伸びていますが、日本やイギリスでは消費支出額の伸びは大きく鈍化しています。

モバイル市場年鑑のデータではありませんが、App Annie社は過去に、世界で最もスマートフォンアプリをダウンロードしたのは日本だというデータを発表したこともあります。
つまり、日本におけるスマホアプリ市場は飽和しつつあると言えるでしょう。

アプリ開発のコストパフォーマンスは良くない？

これらを鑑みると、新しくスマートフォンアプリをダウンロードしてもらい、なおかつ使い続けてもらうのはなかなか至難の技ではないでしょうか。
実際、みなさんがいつも使っている店舗で、店員から「よろしければアプリをダウンロードしてください」と言われたらどのように思うでしょうか？
正直、多くの方が少しめんどくさいな…と思うのではないでしょうか？
そこで、PWAの出番なのです。
PWAがスマートフォンアプリの代わりになります。
初期コストをかけずにサービスを開発する際は、非常に有効な手段になるでしょう。

PWAってどんなことができるの？

では、PWAではどんなことができるのでしょうか？
大きくは以下の３つです。

1. ユーザーの端末にインストールできる
2. ネイティブアプリのような使用感
3. 表示速度の高速化

それでは、一つひとつみていきましょう。

ユーザーの端末にインストールできる

まずは、スマートフォンアプリのように、スマホのホーム画面に追加できることが挙げられるでしょう。
これによって、ユーザーが自社のサービスにアクセスしやすくなります。
さらに、ショートカットをホーム画面に設置した場合と異なり、後ほど紹介するキャッシュの利用やプッシュ通知を行うことができます。
さらに、PWAはサイトへのアクセスが主な機能ということもあって、スマホアプリよりも軽量であることが多いです。

ネイティブアプリのような使用感

次に、上記で述べた通り、ネイティブアプリの代わりになることです。
ウェブアプリにネイティブアプリのような使用感を与えることで、事業全体のコストを下げることができます。
では、ネイティブアプリのような使用感とは、どのようなものでしょうか。
今回は代表的な4つをご紹介します。

プッシュ通知

1つ目はプッシュ通知です。
ユーザーの利便性向上のため、プッシュ通知でお知らせするという機能は、スマートフォンアプリではよくある機能です。
PWAを採用することで、ウェブアプリでもプッシュ通知を行うことができます。
さらに、デバイスへのインストールを促すバナーも設置することができます。

キャッシュの利用

2つ目はキャッシュの利用です。
キャッシュを使うことでオフラインでもサイトにアクセスすることができるようになります。
もちろん、どうしても通信が必要な機能は制限されますが、オフライン時にデータを保持できるようになっているため、大きな利便性があるでしょう。

位置情報の利用

3つ目は位置情報の利用です。
スマートフォンのアプリでは、位置情報を利用したサービスも数多くありますよね。
PWAでは、スマホアプリのようにユーザーの端末の位置情報を利用することができます。
しかも、スマホアプリと違ってダウンロードしてもらう必要がないので、利便性の向上が期待できます。

表示速度の高速化

最後に、ネイティブアプリに比べて表示速度を高速化することができます。
サイトの閲覧には通常、通信が必要ですが、サイト内のデータやユーザーの通信制限などによって、サイトの情報がなかなか表示されないことがあります。
しかしPWAはキャッシュを利用するため、ページの読み込み速度が非常に早くなります。

キャッシュについてはこちらをご覧ください。

キャッシュとは？Webサイト高速化にかかせない機能をご紹介！

さらにPWAでは、ロードを待っている間にオリジナルのスプラッシュスクリーン（アプリケーション起動中に現れる画面）を設定できます。

PWAを導入するメリット

ここまで、PWAでできることをご紹介しました。
では、PWAを採用することで、どのようなメリットがあるのでしょうか？
スマートフォンのアプリを作らず、PWAでウェブアプリを作ることで、開発コストを減らせる以外に何か大きなメリットがあるのでしょうか？
代表的なメリットは以下の3点です。

1. ユーザーエンゲージメントの向上が期待できる
2. ユーザー体験の改善が見込める
3. 開発の自由度が上がる

ユーザーエンゲージメントの向上が期待できる

PWAの導入によって、ユーザーの端末にアイコンをインストールしたり、プッシュ通知を行ったりすることで、ユーザーエンゲージメントの向上が期待できるでしょう。
例えば、一定期間アクセスがないユーザーにキャンペーンの告知を行うことができます。
さらに、端末にインストールをするためのバナーを設置して、ダウンロードを促進できることも、エンゲージメントの向上に貢献します。
PWAはスマホアプリよりも比較的軽量であることもメリットでしょう。

ユーザー体験の改善が見込める

さらに、PWAでできることのところで説明した通り、キャッシュを利用してページの表示を高速化したり、オフラインでも使用できるようにすることで、サイトからの直帰率を減らすことができます。
直帰率とは、ユーザーがアクセスした最初のページから別のページに移動することなくそのサイトを離れてしまう確率のことです。
サイトの読み込みまでの時間が2秒であれば直帰率は9%程度ですが、読み込みまで5秒になると直帰率が38%と4倍以上になってしまうというデータもあります。
それほど、サイトが表示される速度を高速にするということは非常に重要です。
PWAはサイト高速化に大きく貢献できるでしょう。

開発の自由度が上がる

スマートフォンのアプリでは、スマートフォンにダウンロードして使うという特性上、OSの仕様を考慮しなければならないことが多々あります。
しかしPWAでは、インターネットに接続してサイトへアクセスして使うことが主なので、OSの影響を受けにくいのが特徴です。
ただ、オフラインでの動作は多少OSの影響を受けるかもしれません。
またPWAは、スマホアプリと違ってアプリストアの審査を待つことなくリリースを行うことができます。
この点でも、比較的開発の自由度を担保できるでしょう。

PWAを採用するデメリット

これまでPWAのメリットを見てきました。
それでは反対に、PWAを採用するデメリットはあるのでしょうか？
主なデメリットは以下の3点です。

アプリストアへの登録は別途必要
スマートフォンアプリを運用している場合はコストが重複
iOSでは一部機能が未対応

アプリストアへの登録は別途必要

スマートフォンのアプリは、アプリストアへ登録し、ストア内でユーザーに見つけてもらったり、アプリ紹介サイトに取り上げられたりします。
それに対してPWAは、アプリストアに登録されるわけではないので、独自にインストールを促す必要があります。
ただ、PWAもアプリストアに登録できるようになっています。
その場合は、別途登録の作業が必要です。

スマートフォンアプリを運用している場合はコストが重複

すでにスマートフォンのアプリを運用している場合、スマホアプリのようなユーザー体験を提供するPWAの導入は、コストの重複になってしまう可能性があります。
その点には注意してPWAの導入を検討しましょう。

iOSでは一部機能が未対応

記事の下部にまとめていますが、iOSではPWAで実装できる機能の一部が未対応となっています（2019年10月時点）。
iOSのバージョンが上がるにつれて、少しずつ対応が進んでいますが、まだまだ充分とは言えない状況です。
PWA導入の際は、バージョンごとにiOSのPWA対応状況をチェックする必要があるでしょう。

WindowsにもPWAが対応

2018年10月16日、WindowsのChrome 70でデスクトップ版PWAのサポートが開始されました。
これによって、WindowsでもPWAが本格的に対応したことになります。
これはPWAの普及にとって追い風となるでしょう。
デスクトップ版では、スマホアプリの代用とはなりませんが、ページの高速化などの様々なメリットがあります。

PWAの導入事例

ここまでPWAのメリットやデメリットをご紹介してきました。
では、実際にPWAを導入している企業の事例を見てみましょう。
今回は、Googleの開発者向けウェブサイトで紹介されているものを引用します。

SUUMO

まずは、不動産や住宅の情報サイトであるSUUMOです。
日本の11%近い人口にサービスを提供する、日本トップクラスの不動産サイトです。
SUUMOは比較的早くから、PWAの導入に取り組んできました。
SUUMOはPWAによって、オフラインサポート・プッシュ通知・高速でスマホアプリのようなユーザー体験を提供することことができるようになりました。
その結果、読み込み時間を1/4に短縮、プッシュ通知の開封率を31%まで上昇させるなどの成果を上げています。

（参考：https://developers.google.com/web/showcase/2016/suumo）

日経新聞

次に、日経新聞の例を見てみましょう。
日経新聞は、紙媒体だけでなく電子版にも力を入れており、電子版には毎月4億5,000万人以上のユーザーがアクセスしていると言われています。
そんな日経新聞でも、PWAが採用されています。
日経新聞はPWAで、オフラインで動作させるためのService Workerを採用し、ネットワーク状態に関わらず、ユーザーが戸惑わないパフォーマンスを提供することができるようになりました。
さらにキャッシュストレージを利用することで、トップ記事を常に表示し、瞬時に読み込める状態を保つことができるようになりました。
それによって、自然検索による流入が2.3倍、コンバージョン数が58％増、セッションあたりのページビュー数が2倍になるなどのインパクトをもたらしています。

（参考：https://developers.google.com/web/showcase/2018/nikkei）

Twitter

日本のみならず世界中で使われているTwitterでもPWAが導入されています。
Twitterは全世界で3億2800万人のアクティブユーザーを抱えており、80%以上がモバイル端末からアクセスされています。
そのためTwitterは、PWAを通じてより高速で、より信頼でき、より人を惹きつけるウェブ上でのユーザー体験を提供することを目指しています。
TwitterはPWAによって、セッションあたりのページ数65%増、ツイート数75%増、直帰率20%減という結果を出しています。

（参考：https://developers.google.com/web/showcase/2017/twitter）

このように、日本あるいは世界で、PWAの導入が始まっています。
しかし前述した通り、iOSではまだまだPWAで制限されている機能があります。

iOSでPWAを導入する際の注意点

PWAはGoogle社が始めたプロジェクトということもあり、Androidではかなり対応が進んでいます。
それに比べてiOSではまだまだ未対応な部分が多く、注意が必要です。
ではその注意点とはどういった部分なのでしょうか？

機能が一部制限されている

iOSで気をつけなければならないことは、PWAで使える機能が一部制限されているということです。
今回はiOS12時点で、PWAの制限されている機能をいくつかご紹介します。
代表的なものは以下の5つです。

1. データ量が制限される
2. プッシュ通知が使えない
3. インストールを促すバナーが設置できない
4. アプリ内課金ができない

データ量が制限される

まずはデータ量です。
オフラインでのデータ容量が50MBまでに制限されています。
ユーザーがオフライン状態で操作した時の設定には注意が必要です。

プッシュ通知が使えない

次にプッシュ通知です。
スマホアプリでは、ユーザーが情報を見逃すことがないよう、様々な情報をプッシュ通知で知らせてくれます。
特に、チャットアプリなどでは重要な機能ですよね。
しかし、iOS12時点ではプッシュ通知も未対応です。

インストールを促すバナーが設置できない

Androidでは行えた、端末へのインストールを促すバナーも設置できません。
しかし、ホーム画面へのインストールは問題なく行うことができます。
iOSの場合には、バナー以外の方法でホーム画面の追加を促す必要があります。

アプリ内課金ができない

アプリ内課金もiOS12時点では未対応です。
しかし、導入事例に挙げたSUUMOのように情報を検索するなど、無料で使用するアプリであれば問題ないでしょう。

上記でまとめた通り、iOSではAndroidで実装できるいくつかの機能が未対応となっています。
今後、iOSがどのようにPWAに対応していくのか目が離せません。

PWAを導入するには

この記事の序盤で述べたように、PWAは何か特別な技術だというわけではなく、Google社が定めた条件を満たしたウェブアプリということです。
したがって、PWAの導入はそこまで技術的に難しいものではありません。
HTTPS化やオフライン体験をサポートするService Workerを有効にすることで、すぐにPWAに対応させることができます。

まとめ

PWAは、スマートフォンアプリ市場が鈍化する成熟国では、サービスの開発コストを削減する手段となり得るかもしれません。
しかし、iOSはバージョンが上がるごとに徐々に対応してきているとはいえ、未対応な部分が多い状態です。
PWAは始まって日が浅く、今後の動きが期待されます。
しかし導入事例でご紹介したように、ユーザーエンゲージメントの向上やユーザー体験の改善が期待できるなど、導入のメリットも大きいでしょう。
スマートフォンのアプリを開発しようか検討している方は、PWAの検討も進めてみてください。

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

---

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

自社サイトのウェブアクセシビリティ状況、診断してみませんか？

株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されています。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。

こんなお悩みはありませんか？

• どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
• 今のサイトで問題のあるページを一覧化して欲しい…
• ウェブアクセシビリティの具体的な改善方法を知りたい…

WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。

また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！

ウェブアクセシビリティ診断のお申し込みはこちら