コンテンツ
PWAとは？その特徴を解説！
PWAとは「Progressive Web Apps（プログレッシブ・ウェブ・アプリ）」の略で、WebサイトやWebアプリをネイティブアプリ（アプリケーションストアを介し、端末へインストールして使用するアプリケーション）のようにインストールして使用する仕組みのことです。
PWAを導入すると、PCやモバイル端末のホーム画面へのアイコンの追加やプッシュ通知などの機能を、Webサイトに対して利用することができます。
ユーザーはアプリを起動するようにアイコンからWebサイトを表示でき、URLを直接読み込むので素早く閲覧可能で、ネットワークに影響されずに使用できるといった特徴があります。
PWAで何ができるの？3つの機能を紹介！
PWAで何ができるのか、具体的な機能についてご紹介しましょう。
ホーム画面にアイコンを表示
PCやスマートフォンのホーム画面に、Webサイトに直接アクセスするためのアイコンを表示できます。これにより、アイコンをタッチするだけで素早くサイトにアクセスできるようになりました。
Webサイトを高速に表示する
PWAを導入すると、Webサイトを閲覧するために必要なデータを一時的に保存しておくことができます。これにより、Webサイトを高速に表示することができ、ネットワークの状況が悪い時でもWebサイトを閲覧することが可能です。
プッシュ通知
これまでWebサイトでは利用できなかったプッシュ通知が可能です。最新の情報やお知らせが通知できます。
ネイティブアプリやWebブラウザとPWAの違いは何？
PWAの基本的な機能を理解したところで、従来のネイティブアプリやWebサイトとはどのような違いがあるのか、みていきましょう。
まず、ネイティブアプリとは、PCやスマートフォンにインストールするアプリケーションのことです。「App Store」や「Google Play」といったアプリストアから入手します。インストールして使うので、ネットワークにつながっている必要はありません。
Webサイトとは、インターネット上で公開されている複数のWebページの集まりで、Webブラウザで閲覧します。また、WebアプリはWebブラウザで使うアプリケーションです。
端末にインストールすることなく利用できますが、ネットワークにつながっていない環境では利用できません。
それぞれに特徴がありますが、PWAはWebサイトやWebアプリをネイティブアプリのようにインストールし、ネットワークにつながっていない状態でも利用することができます。いわばWebとネイティブアプリの良い部分を抽出したものといえるでしょう。
PWAを使うメリット・デメリット
では、PWAを使うことで、どのようなメリットがあるのでしょうか。デメリットとともにご紹介します。
PWAを使うメリット
PWAのメリットとして、以下のことが挙げられます。
まずはユーザーにとってのメリットをみていきましょう。
ホーム画面のアイコンで手軽に使える
PWAを使うことで簡単にホーム画面にアイコンが作成され、クリックすることで手軽にWebページを閲覧できます。
表示が早く、ストレスが少ない
PWAはキャッシュ機能を持ち、ページを読み込みます。そのため表示が早く、オフラインでも閲覧することができ、ユーザーにとってストレスが少ないでしょう。
次に、企業にとってのメリットです。
アクセス数の増加
PWAを導入すれば、Webサイト・アプリのアイコンをホーム画面に設置できます。そのため、Webブラウザを起動し、URLを入力したりサイトを検索する必要がなく、アイコンをクリックするだけで閲覧が可能です。
Webサイトを表示するまでの手間が省けるため、アクセス数の増加が期待できます。
サイトからの直帰率を減らせる
直帰率とは、最初に表示したWebページから他のページに遷移することなくサイトを離れたユーザーの割合のことです。そのサイトへのユーザーの満足度を測る指標となり、企業にとっては減らしたいものとして考えられています。
サイトの読み込みに時間がかかると、この直帰率が増加するといわれています。
PWAを導入することで、Webサイトを高速で表示でき、オフラインでもサイトの閲覧ができます。これにより、ユーザーのサイトからの直帰率を減少させることが期待できます。
アプリサイトの審査が必要ない
ネイティブアプリは「App Store」や「Google Play」などのアプリストアの審査が必要となります。そのため、アプリを配信するためには相応の時間やコストがかかります。
PWAはアプリサイトの審査が必要ありませんし、ユーザーにとってもアプリと比べてインストールするハードルが低くなります。
OS別の開発が必要ない
ネイティブアプリであれば、iOS用、Android用とそれぞれ別々に開発しなければなりません。PWAは、サイトを作ってしまえばどのOSでも使うことができます。
PWAを使うデメリット
反対に、PWAを使うことで生じるデメリットはあるのでしょうか。
Webブラウザに依存する
PWAはOS別の開発を必要としないのですが、Webブラウザに依存してしまいます。例えば現状では「Safari」と「Chrome」では動作に差が出るということもあり、今はまだネイティブアプリとまったく同じように活用するのは難しいといえるでしょう。
利用者数を把握しづらい
アプリストアからダウンロードしてインストールする必要がないのですが、その反面、ダウンロード数やアンインストールの数を把握することができず、利用者数を把握することが難しくなります。
結局どれにしたら良い？こんなアプリ開発にはPWAが向いている！
このように、さまざまなメリットがあり注目を集めるPWAですが、ネイティブアプリに替わって今後の主流になり得るかというと、現状では先述したようなデメリットもあることから難しいといわれています。
現状におけるPWAの導入事例をみてみると、ネイティブアプリに替わるものとしてではなく、PWAの機能を活かしたWebサイトの運用を目的としているようです。
ですので、ネイティブアプリの開発とは分けて考え、Webサイトを効果的に運用する方法として導入するのが向いているでしょう。
PWAを導入するには？2つのリストをチェックしよう
PWAを作成する上で守るべきチェックリストが、googleから2種類公開されています。最低限守るべき内容をまとめた「基本的なプログレッシブWebアプリのチェックリスト」と、より高いレベルを目指すための「最適なプログレッシブWebアプリのチェックリスト」です。
「基本的なプログレッシブWebアプリのチェックリスト」にはPWAの基本的な5つの項目がまとめられています。
1.ページ読み込み速度
ページ読み込み速度はユーザビリティや離脱率に大きな影響を与えます。
2.あらゆるブラウザに対応
ユーザーは任意のブラウザを使用するため、あらゆるブラウザに対応する必要があります。
3.あらゆる画面サイズに対応
ユーザーはあらゆるデバイスで利用するため、あらゆる画面サイズに対応する必要があります。
4.カスタムオフラインページを提供
オフラインの状況下でも、以前読み込んだコンテンツを表示します。
5.インストール可能
インストールしてデバイスのホーム画面にアイコンを表示します。
より質の高いPWAを作成するためのチェックリストとして用意された「最適なプログレッシブWebアプリのチェックリスト」には、以下の項目がまとめられています。
オフラインで動作する
オフラインの状況下でもオンライン時と同様に動作します。
アクセシビリティ
WCAG2.0アクセシビリティ要件を満たす必要があります。
検索可能
検索してサイトにリーチできなければいけません。
入力方法
どの入力デバイスでも同様に入力できる必要があります。
許可要求のコンテキストを提供
API使用の許可を要求する際、コンテキストを提供します。
コードベースを正常に保つ
アプリケーションを最新の状態にし、コードベース（特定のソフトウェアやアプリケーションを構築するために使われるソースコードの集まり）を正常に保ちます。
PWAを導入した3つの成功事例
最後に、PWAの導入事例をご紹介します。
Twitterは3億人をこえるアクティブユーザーを持ちますが、その約8割がモバイルユーザーであり、モバイルサイトに「Twitter Lite PWA」を導入しています。
これにより、ページビューの増加、ツイートの増加、離脱率の減少といった効果がありました。
日経電子版
日経（日本経済新聞）の電子版サイトは毎月900本の記事を作成し、300万人に閲覧されています。ページ速度の改善を目指してPWAを導入し、パフォーマンスが2倍になったといわれています。
Alibaba
世界最大のオンラインBtoB取引プラットフォームである「Alibaba」もPWAを導入しています。その効果として、コンバージョン率の増加やアクティブユーザーの増加などがありました。
以前はiOSに対応しておらず、日本国内ではなかなか普及しなかったPWAですが、ようやく環境が整い、今後は様々なサイトで導入が進んでいくことでしょう。
サイト運用の向上のために、導入を検討してみてはいかがでしょうか。
これまでみてきたように、ユーザーの負担が増えて利便性が損なわれてしまう多要素認証に対し「リスクベース認証」を使うことで、ユーザーの負担を最小限に抑えながら不正アクセス対策を実現することができます。
情報漏洩のリスクを少なくするために、非常に重要な機能といえるでしょう。
PWAを活用したアプリを開発するには
「Progressive Web Apps（プログレッシブ・ウェブ・アプリ）」についてご紹介させていただきました。
ネイティブアプリを開発するのか、Webアプリとするのか迷う事もあるかと思います。
Samuraiでは、利用ケースに応じたご相談も可能です。新規サービスの開発なども調査段階から対応可能ですので、お気軽にご相談ください。
この記事を書いた人
