2021年08月07日 -

PWA(Progressive Web Apps)とは?機能や効果、導入メリット、事例などを徹底解説!

モバイルサイト上でネイティブアプリのようなUXを提供するPWAには、どのようなメリット、効果があるのでしょうか?「PWAがいまいちどんなものなのかわかっていない」そんな方のためにこのページでは機能や効果、実際の事例などを総ざらいしていきます。ぜひここで疑問点を解消していってください。

PWA(Progressive Web Apps)とは?

PWAとは「Progressive Web Apps」を略した言葉で、モバイルサイト上でネイティブアプリのようなUXを提供する技術です。アプリのインストールが不要にもかかわらず、ホーム画面へアイコンを追加したり、プッシュ通知を設定できます。また、ページ表示や読み込み速度を高速化できたり、オフライン閲覧もできたりとPWAにはさまざまなメリットがあります。

PWAがSEOにもたらす効果

PWAは直接的にSEOに良い効果をもたらしてくれるわけではありません。UIの改善によるアクションの向上など、ユーザビリティの観点から間接的にSEOの効果を期待できます。例えばPWAを活用すると、以下のような効果が期待できます。

・Webサイトの読み込みが速くなり、検索エンジンに評価されやすい
・オフライン状態でもコンテンツが利用できるため、ユーザーの離脱率が下がり、滞在時間が上がりやすい
・リッチなUIを実現し、ユーザビリティの向上につながりやすい

PWAとアプリとの違い

PWAとアプリの違い
PWA アプリ
開発者側 ・開発の自由度が高い
・アプリ開発の際、プラットフォームを分ける必要がない
・開発や実装の際、GoogleやAppleなどのガイドライン審査が必要になる
・プラットフォームごとにアプリを開発する必要がある
ユーザー側 ・AndroidとiOSの両方でアプリが利用できる
・アプリストアを経由したインストールが不要
・AndroidとiOSの両方に対応していないアプリがある
・アプリストアを経由したインストールが必要

PWAとブラウザとの違い

PWAとブラウザの違い
PWA ブラウザ
開発者側 ・ユーザーの許可さえがあれば、ホーム画面へのアイコン追加やプッシュ通知が可能
→ユーザーとの接触を増やせる
・ブラウザ上でのみアプリやサイトにリーチする
→ユーザーが訪問してくれないと接触できない
ユーザー側 ・オフライン環境でもアプリやサイトを利用できる
・プリキャッシュができるためページの読み込み速度が速い
・オンライン環境でないとアプリやサイトを利用できない

PWAの主な機能

1.ユーザーの端末へインストール可能
2.キャッシュ機能の利用
3.プッシュ通知機能によるユーザーアクション

ここでは、PWAの機能について3点解説します。

1.ユーザーの端末へインストール可能

PWAでは、ユーザーの端末へアプリやサイトを直接インストールでき、スマホやデスクトップのホーム画面にアイコンとして設置できます。

インストール後はネイティブアプリのように使用することができ、ユーザーはアイコンをタップするだけでアプリを起動可能。アイコン化することで、検索エンジンなどの外的要因に左右されず、ユーザーに直接サービスを提供できるため、Webページへのアクセスやコンバージョンの拡大が期待できます。

2.キャッシュ機能の利用

PWAでは、キャッシュ機能を設定できます。

キャッシュ機能とはWebで表示されたデータをデバイスに一時的に保存することで、キャッシュが完了しているページは表示速度が非常に速く、オフライン状態でも不備なく閲覧できます。このように表示速度が早くなるとUXの向上が期待でき、結果としてSEO的に評価される可能性につながります。

3.プッシュ通知機能によるユーザーアクション

PWAでは、プッシュ通知機能を設定できます。プッシュ通知機能とは、アプリやサイトのお知らせを自動通知してくれる機能です。例えば、SNSやメールなどのお知らせは、プッシュ通知としてスマホ画面に表示されます。

プッシュ通知はアプリが起動されていない状態でも機能するため、ブラウザで表示するよりユーザーとの接触回数を増やせます。

PWAを導入するメリット・デメリット

PWAを導入するメリデメ
メリット デメリット
開発者側 ・ユーザーアクションが増える
・ネイティブアプリよりも開発運営コストを削減できる
・アプリ審査なしで公開できる
・SEO対策につながる
・コンテンツが検索で表示される
・アプリストアから新規ユーザーを獲得しづらい
・SSL化が必要
ユーザー側 ・ホーム画面から簡単にアクセスできる
・コンテンツ閲覧時のストレスが少ない
・更新やアップデートの手間がかかる
・iOSの機能不足

【一覧】PWA導入・成功事例3選

ここでは、PWAの成功事例について3つご紹介します。

事例1:Twitter

参考:Google Developers「Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage

Twitterでは、「Twitter Lite」というPWAがリリースされています。
Twitter Liteの実装により、使用時のスマホ内容量を制限されることなく、Twitterを操作できるようになりました。もちろんホーム画面にTwitterのアイコンを追加し、ネイティブアプリのように利用することも可能です。

実際にGoogleが公開しているケーススタディーを見ると以下のような成果が得られています。

【成果】

・PVが約65%増加
・離脱率が20%減少
・1セッションあたりのページビューが65%増加
・アプリユーザーと比較し、ツイート数が75%増加
・アプリユーザーと比較し、離脱率が20%減少

参考:Google Developers「Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage

事例2:日経電子版

参考:Google Developers「日本経済新聞社は複数ページのPWAで新しいレベルの品質とパフォーマンスを実現

日経電子版のようなニュース系アプリでは、ページの表示速度がUXの向上に直結します。そこで日経電子版では、速度改善を目標にPWAを導入しました。

実際にGoogleが公開しているケーススタディーを見ると以下のような成果が得られています。

【成果】

・読み込み速度が前指標と比較して約2倍になる
・58% のコンバージョン増(会員登録)
・49% の1日当りアクティブユーザー数増
・操作できるようになる時間(Time-To-Interactive)が約14秒短縮される
・自然検索流入が約2.3倍になる
・1セッション当りのPVが約2倍になる

参考:Google Developers「日本経済新聞社は複数ページのPWAで新しいレベルの品質とパフォーマンスを実現

事例3:Suumo

参考:Google Developers「Suumo

大手物件検索サイト「Suumo」もPWAを導入しています。

大手物件検索サイトでは、膨大なデータから検索条件を絞り込むため、情報の表示速度はUXに大きな影響を及ぼします。
実際にGoogleが公開しているケーススタディーを見ると以下のような成果が得られています。

【成果】

・ページの読み込み時間が75%減少
・プッシュ通知の開封率が31%

参考:Google Developers「Suumo

PWAの特徴をつかんでユーザビリティの高いコンテンツを作ろう!

今回はPWAの機能や効果、導入するメリット、導入事例について解説しました。
PWAの導入はSEO対策に効果的です。他社のコンテンツに差をつけるためにも、ぜひこの機会にPWAを導入したSEO対策を始めてみてはいかがでしょうか。

SEO対策にはPWA以外にもたくさんの成功ポイントがあります。もしSEOに関して何か不安があれば、いつでも弊社へご相談ください。SEOを考慮した最適解をご提示いたします。