PINTO!株式会社PLAN-Bの情報発信メディア

2019.06.07

五十嵐 和希

SEO SOLUTION

PWAの機能と活用方法をおさらい!パフォーマンス向上に欠かせないPWAとは?

WRITER

五十嵐 和希

株式会社PLAN-B 事業統括本部 ビジネス開発部 Juicer

2013年中途採用でPLAN-Bに入社。東日本エリアの営業マネージャーを経て、2017年にビジネス開発ユニットを立ち上げ、オウンドメディア運用と事業開発を行う。その後、2018年よりJuicer事業部へ異動。自社開発DMP「Juicer」の販売戦略を中心としたマーケティング活動に従事。

目次
    1. PWAとは?
    2. PWAの機能
      1. ホーム画面にアイコンの追加
      2. アプリのダウンロードが不要
      3. プッシュ通知の配信
    3. PWAのメリット・デメリット
      1. PWAのメリット
        1. キャッシュの利用による高速化およびオフライン対応
        2. 検索結果からの流入が見込める
        3. デバイス毎に開発する必要が無い
      2. PWAのデメリット
        1. インストールの管理が出来ない
        2. ブラウザによって動作環境が異なる
    4. PWAを活用する方法
    5. まとめ:ウェブサイトのパフォーマンス向上にPWAの実装を検討しよう!

年々スマートフォンの平均利用時間が伸びていると共に、アプリの利用時間も大幅に増えています。また現在はブラウザを利用する時間よりも、アプリの利用時間が上回っているということもあり、アプリの導入を検討する方も増えているのではないでしょうか。ただし、これから導入を検討するのであれば、PWAの実装も視野に入れておくことをおすすめします。

PWAとは?

PWA(Progressive Web Apps)は2015年にGoogleからリリースされた、ウェブサイトをネイティブアプリと同じような感覚で利用出来る仕組みのことを指します。PWAの実装には大きく分けて「ウェブサイトのhttps化」「manifest.jsonの作成」「service-worker.jsの実装」と3つの条件が必要です。PWAの正式リリースから今日まで、様々な企業が導入し成果を上げています。

PWAの機能

PWAを実装することで利用出来る機能例をご紹介します。

ホーム画面にアイコンの追加

ネイティブアプリと同様に、スマートフォンのホーム画面にアイコンを追加することが出来ます。ウェブサイトのページもホーム画面に設定することは可能ですが、アイコン表示ではなく、ページ内容の一部が表示される様になります。またスマホ用のファビコンを設定することでアイコンが表示されますが、タップした先のページは通常のウェブページなので、ネイティブアプリの様なUIではありません。

アプリのダウンロードが不要

従来のネイティブアプリの場合、App StoreやGooglePlayからアプリをダウンロードする必要がありましたが、PWAを実装すると、ウェブサイト内からホーム画面への追加が出来る様になります。またApp StoreやGooglePlayでは、アプリ登録の際に審査が必要ですが、その様な審査も必要ありません。限られたブラウザではありますが、ウェブサイト内でホーム画面への追加を促すバナーを表示させることが出来るので、PWA対応の認知にも役立ちます。

プッシュ通知の配信

ウェブサイトでありながら、PWAを実装することでプッシュ通知が利用出来ます。通常ウェブサイトにおける既存ユーザーへのアプローチというと、会員登録を経て、メルマガ配信をするなどが一般的でしたが、PWAではプッシュ通知にてウェブサイトへの再訪問を促すことが可能です。ただし、不特定多数のユーザーに通知出来るわけではなく、必ず許諾してもらう必要があります。

PWAのメリット・デメリット

PWAの良い部分はアプリに近い機能やUIが実現出来るという点だけではありません。実装前にメリットとデメリットを把握しておきましょう。

PWAのメリット

PWAのメリット

キャッシュの利用による高速化およびオフライン対応

PWAを実装する際に使用するservice worker,jsによって、ウェブサイトのコンテンツがキャッシュされます。そのキャッシュを利用することで、通常のウェブサイトのページ読み込みが短縮され、ページを高速表示させることが出来ます。ページの読み込み速度が遅くなる程、ユーザーの離脱率が上がってしまう為、コンバージョン率にも悪い影響を与えます。読み込み速度は出来るだけ速くするように心がけましょう。またキャッシュの利用は高速化だけでなく、オフラインでのサイト利用を可能にします。オフライン対応にすることで、ネット環境が不安定で回線が繋がり辛い状況でもコンテンツが閲覧出来ます。

検索結果からの流入が見込める

ネイティブアプリのみを運用している場合、アプリをインストールしたユーザーしか利用することが出来ませんでしたが、通常のGoogleやYahoo!などの検索結果から流入したユーザーに、アプリと同様のUIを提供することが出来ます。無料で多くのユーザーを獲得するには、検索結果からのアクセスは欠かせません。

デバイス毎に開発する必要が無い

ネイティブアプリでは、AndroidとiOSなど、対応するデバイス毎に開発が必要ですが、PWAでは1つのソースで複数のデバイスに対応させることが出来るので、開発コストを抑えられます。新規参入のサービスで、開発コストをあまり掛けられない場合には、PWAの実装をおすすめします。

PWAのデメリット

PWAのデメリット

インストールの管理が出来ない

PWA経由のアクセスを取得することは可能ですが、どれ位ホーム画面に追加されて、削除されたかというデータを取ることが出来ません。単純にPWA経由のアクセスが増えているということだけでも十分なデータではありますが、プッシュ通知を行う際の管理が難しくなる恐れがあります。

ブラウザによって動作環境が異なる

1つのソースで複数のOSに対応出来るPWAですが、一部のOSで若干動作環境が異なる点があります。例えばAndroidでは「ホーム画面への追加」を促すバナーを表示させることが出来ますが、iOSでは出来ません。またiOSではプッシュ通知の機能も利用不可です。iOSによるPWAの利便性は少しずつ改善されているものの、やはりAndroidユーザーに対する機能と比べると劣ってしまう印象です。

PWAを活用する方法

PWAを活用することで、ウェブサイトに関する様々なパフォーマンスを向上させることが出来ます。

第一に読み込みスピードに問題がある場合は、PWAの実装を検討しましょう。
Lighthouseを使用して読み込み時間に改善の余地がある際は、PWAによる高速化でスコアが向上する可能性があります。実際にPWAの導入によって、日経新聞社のLighthouseのスコアは23点から82点に上昇し、アクセス数やコンバージョン率などに良い結果をもたらしています。 日本経済新聞社は複数ページのPWAで新しいレベルの品質とパフォーマンスを実現しています。
参照:日本経済新聞社は複数ページのPWAで新しいレベルの品質とパフォーマンスを実現

ネイティブアプリを使用している企業も例外ではありません。TwitterではPWAを実装したことにより、エンゲージメントの向上に加え、データ量の削減を実現しています。セッション毎のページ数が65%向上し、またツイート数も75%上昇しています。データ量の削減により、通信速度が遅い国や地域でも、不快に感じることなく利用出来る様になります。ネイティブアプリで成功している企業でも、PWAの導入で更なるパフォーマンスの向上を図ることが可能です。
参照:Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage

まとめ:ウェブサイトのパフォーマンス向上にPWAの実装を検討しよう!

これからアプリを検討する方であれば、まずはPWAの実装を検討してみてください。PWAのメリットとしてアプリと同等に近いUIを実現出来るという点が挙げられますが、開発コストの削減など、ネイティブアプリよりも優れた点もあります。特にウェブサイト自体のパフォーマンス向上を図ることが出来るPWAは、仮にネイティブアプリを利用していたとしても、実装して損することはありません。Lighthouseのスコアが低く、ウェブサイトのパフォーマンスの改善が頭打ちしてしまったという場合は、PWAの実装で好転するかもしれません。