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

2020.10.29

五十嵐 和希

SEO SOLUTION

PWA(プログレッシブウェブアプリ)とは?機能やメリット、注意点を解説!うまく実装してパフォーマンス向上

WRITER

五十嵐 和希

株式会社PLAN-B システム開発本部 PDMチーム

大手広告主企業での広告宣伝部、総合広告代理店でのプロモーション部を経験し、PLAN-Bへ入社。
企業のオウンドメディア立ち上げ支援や自社開発DMP「Juicer」のマーケティング責任者を担う。
現在は自社開発プロダクト「SEARCHWRITE」のプロダクトオーナーとしてPMFに向けた活動を担当している。

目次
    1. PWAとは
    2. PWAの機能
      1. アプリのダウンロードが不要
      2. プッシュ通知の配信などアプリのような機能の実装
      3. キャッシュの利用による高速化およびオフライン対応
    3. PWAのメリットと注意点
      1. PWAのメリット
        1. ユーザーが増加する
        2. 直帰率が低下する
        3. コンバージョン率が向上する
        4. リピーターが増加する
      2. PWA導入の注意点
        1. ブラウザによって動作環境が異なる
        2. ネイティブアプリも運用している場合、管理コストが2倍に
        3. 通常のモバイルサイトと比較してコストがかかる
    4. Webサイトやアプリとの違いについて
    5. PWAの導入方法
    6. PWAを導入した成功事例
      1. 日経新聞社
      2. Twitter
      3. SUUMO
      4. George
      5. ランコム
    7. まとめ:PWAを実装してパフォーマンスを向上しよう

ネイティブアプリのように高速なWebサイトを作成できる、PWA(プログレッシブウェブアプリ)。
Webサイトとネイティブアプリの良い部分を掛け合わせられるツールとして、最近は注目が集まっています。

PWAを実装すると様々なメリットがあり、ビジネス成果にもインパクトしてきます。
今回はそんなPWAについての概要から、導入のメリット、事例まで詳しく紹介します。

PWAとは

PWA(プログレッシブウェブアプリ)とは、Progressive Web Appsの略で、モバイル向けのWebサイトをアプリのように使える仕組みのことを指します。

PWAは通常のWebページとネイティブアプリ※1それぞれの良い部分を合わせもっており、Webページのように大きなリーチを得ることが出来ながら、プッシュ通知やホーム画面へのアイコン追加などネイティブアプリのような高機能を搭載することが出来ます

※1)ネイティブアプリ

JavaやObject-Cなどを用いて開発されているアプリで、App Storeなどのアプリストアからインストールして使用するアプリです。chromeやfirefoxなどのブラウザ上で使用するWebアプリと比較して、「動作が早い」「カメラなどのスマホ自体の機能との連携が可能」「インターネット接続無しでの利用も可能」などの特徴があります。

 

PWAの機能

PWAはHTML,CSS,JavaScriptを用いて作られますが、実装することで利用出来る機能例をご紹介します。

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

PWAを実装すると、ネイティブアプリと同様にホーム画面へのアイコン追加が出来るようになります。

従来のネイティブアプリの場合、App StoreやGooglePlayからアプリをダウンロードする必要がありました。
しかしPWAを実装するとその必要がなくなるため、ユーザーも容量を気にせずホーム画面に追加することができるようになります。

またApp StoreやGooglePlayでは、アプリ登録の際に審査が必要ですが、PWAの場合はそのような審査も必要ありません。

一部限定されたブラウザではあるものの、ウェブサイト内でホーム画面への追加を促すバナーを表示させることが出来るので、PWA対応の認知にも役立ちます。

プッシュ通知の配信などアプリのような機能の実装

プッシュ通知の配信など従来ネイティブアプリでしか出来なかった機能がWebブラウザでも実装可能になります。

またPWAを実装することで、UIをネイティブアプリのように設計することができます。
具体的にはブラウザ上のメニューバーを消す、ホーム画面のアイコン設定などが可能です。

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

PWAを実装することで、ウェブサイトのコンテンツがキャッシュされ、表示速度が高速化されるようになります。

PWAを実装する際に使用するservice worker,jsによって、ウェブサイトのコンテンツがキャッシュされます。
そのキャッシュを利用することで、通常のウェブサイトのページ読み込みが短縮され、ページを高速表示させる仕組みができるのです。

またPWAを実装することで行えるキャッシュの利用は高速化だけでなく、オフラインでのサイト利用を可能にします。

カスタムオフラインページを事前にキャッシュしておくことで、ネット環境が不安定で回線が繋がり辛い状況でもコンテンツが閲覧できるようになります。
必ずしもネット環境が必要ではないような機能はオフラインでも使えるようにすることで、よりユーザーが利用しやすい環境を作ることができます。

PWAのメリットと注意点

PWAの特徴については理解できたかと思います。
ここからはその結果どのようなビジネスインパクトがあるのか、導入によるメリットについて解説していきます。

PWAのメリット

PWAを実装する上でのメリットは以下の通りです。

  • ユーザー数が増加する
  • 直帰率が低下する
  • コンバージョン率が向上する
  • リピーターが増加する

ユーザーが増加する

ネイティブアプリだけを展開しているサービスの場合、PWAを導入することで以下の二つの理由からユーザー数の向上が見込めます。

  1.  検索から発見されることができる
  2. アプリインストールから解放される

PWAを実装することで検索画面からサービスを発見することができるようになります。ネイティブアプリではコンテンツを拡充しても検索結果には表示されなかったため、PWAで検索エンジンに認識されるようになればユーザー数の向上が見込めます。
Webサイトトラフィックの半分以上がオーガニック検索からというデータからも重要度がわかるかと思います。

またアプリインストールというハードルから解放されます。ユーザーの50%はアプリをダウンロードしたくないと考えており、場合によってはアプリダウンロードが必要なためリーチできていないユーザーもいると考えられます。

上記理由よりPWAを実装することでユーザーの増加を見込むことができるようになります。

直帰率が低下する

PWAを実装し、表示速度の改善とオフラインでの使用が可能になることで直帰率が低下することが見込めます。

実際ページの読み込み速度が1秒から10秒になった場合、直帰率が123%増加するという調査もあります。

コンバージョン率が向上する

プッシュ通知など従来のサイトでは出来なかったことができるようになり、コンバージョン率の向上も見込めるといわれております。

実際にCarrefourではプッシュ通知によりコンバージョン率を350%向上させたという事例があります。

リピーターが増加する

Webサイトしか持っていないサービスでは、ホーム画面にアイコンを追加できたり、プッシュ通知を送信できたりと、PWAを実装することで従来よりも再訪問を促しやすくなります。


このようにPWAを実装することでビジネスにインパクトする見込みがあることがわかっていただけたかと思います。
ここからはPWAを導入する上で注意しておくべき点についてご説明します。

PWA導入の注意点

PWAを導入する上で注意すべき点は以下の通りです。

  • ブラウザによって動作環境が異なる
  • ネイティブアプリも運用している場合、管理コストが2倍に
  • 通常のモバイルサイトと比較してコストがかかる

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

1つのソースで複数のOSに対応出来るPWAですが、一部のOSで若干動作環境が異なる点がデメリットでもあります。

例えばAndroidでは「ホーム画面への追加」を促すバナーの表示が可能ですが、iOSでは出来ません。
加えてiOSではプッシュ通知の機能も利用不可です。
iOSによるPWAの利便性は少しずつ改善されているものの、やはりAndroidユーザーに対する機能と比べると劣ってしまう印象です。

ネイティブアプリも運用している場合、管理コストが2倍に

既にネイティブアプリを運用している場合は、新たにPWAを実装することで、単純に管理コストが2倍になる可能性があります。

ただし将来的にPWAへ全てを移行する選択肢もあるため、長期的に見ればPWAを導入した方が管理コストを削減できる場合もあるでしょう。

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

PWAの実装には、通常のモバイルサイトの制作と比較して制作コストが高くなるデメリットがあります。

また注目度が高まるPWAですが、普及率はまだまだ低いため、導入についての事例やドキュメントが少ないというデメリットも存在します。

Webサイトやアプリとの違いについて

Webサイトとネイティブアプリの良い部分を併せ持つPWA。ここでより細かい項目について、Webサイト・アプリとの違いを比較していきましょう。

機能WebサイトPWAモバイルアプリ
オフライン×
アプリストア××
レスポンシブ対応
検索×
ローカル通知×
プッシュ通知×
ダウンロード××
素早いアップデート ×

PWAの導入方法

PWAを開発するには、PWAを開発するにはいくつかのブラウザAPIを利用して、Googleの「ProgressiveWebAppChecklist(Google Developers)に沿ってページを作成する必要があります。

ページ作成にはAppShellと呼ばれるPWA実装のためには、以下の項目が最小限必要です。

  • HTML・CSS・JavaScriptの構築
  • ページのSSL化など

これ以外にもチェックリスト項目は複数存在していますが、chromeの拡張機能「Lighthouse」を使用する事で、多くの項目の調査を簡単に行うことができます。

詳細な開発方法については専門的な内容になるため今回の記事では割愛しますが、導入を検討されている方は「はじめてのプログレッシブWebアプリ(Google Developers)」にサンプルコードを含めた詳細な内容が掲載されているので、そちらを参照して下さい。

また、Googleが提供している「WebStarterKit(Google Developers)」を利用する事で、PWAの実装に必要なファイルのテンプレートを利用する事ができます。

補足:PWA実装のために必要APIについて

Service Workers

プッシュ通知やオフライン対応のために使用します。プッシュ通知やオフラインでの読み込みが出来るのは、PWAの軸とも言える「Service Worker」という技術が影響しています。

PWAの実装にはこのService Workerが必須となり、現在ではsafariなどの一部のブラウザでは対応していません。SafariはiPhoneの標準ブラウザですので、PWAがそこまで普及していない理由の1つと考えられます。

Geolocation API

位置情報の取得のために使用します。

Webストレージ(Local StorageやSessionStorageなど)

オフラインにデータを保存するためにします。

History API

ブラウザの履歴を操作するために必要なAPIです。

PWAを導入した成功事例

ここからはPWAを導入し、実際に成果が改善された事例をご紹介します。

日経新聞社

PWAの導入によって、日経新聞社のLighthouseのスコアは23点から82点に上昇し、アクセス数やコンバージョン率などに良い結果をもたらしています。

日本経済新聞社は複数ページのPWAで新しいレベルの品質とパフォーマンスを実現しています。

Twitter

TwitterではPWAを実装したことにより、エンゲージメントの向上に加え、データ量の削減を実現しています。

セッション毎のページ数が65%向上し、またツイート数も75%上昇しています。データ量の削減により、通信速度が遅い国や地域でも、不快に感じることなく利用出来る様になります。

ネイティブアプリで成功している企業でも、PWAの導入で更なるパフォーマンスの向上を図ることが可能です。

SUUMO

リクルート住まいカンパニーが運営するSUUMOは、日本の約11%もの人が利用する、国内でもトップクラスの不動産情報を発信するサイトです。

そんな抜群の知名度を誇るSUUMOは、2015年にスマートフォン向けWebサイトである「Service Worker」を導入しました。

「Service Worker」でプッシュ機能を実装したことで、ロード時間の75%減少や、 Webプッシュ通知による31%のオープン率を達成しました。

George

続いて紹介するのは海外企業におけるPWA導入事例です。

George社はイギリスを代表する衣料品メーカーであり、2018年2月にサイトをPWAにアップグレードさせました。

その結果、ページの平均読み込み時間が大幅に短縮されただけでなく、コンバージョン率を31%向上させ、一訪問あたりのページビューが20%増量する結果になりました。

George社の事例からもわかるように、PWAの導入はユーザーのモバイルエクスペリエンスを大きく高める効果が見込めるといえます。

ランコム

フランスの高級化粧品メーカーであるランコムは、2017年にモバイルサイトをPWAに実装しました。

かねてよりモバイルユーザーの多いランコムでしたが、デスクトップユーザーとコンバージョン率は高まらない問題を抱えていました。

そこでいち早くPWAを導入したランコムですが、結果的にコンバージョンが17%、モバイルセッションを51%増加させることに成功しました。

まとめ:PWAを実装してパフォーマンスを向上しよう

PWAを実装することで表面的なUIの改善だけでなく、ビジネスにインパクトするメリットが多数あることを理解していただけたかと思います。
ぜひ実装を検討してみてください!

PWAとよく勘違いされるものとしてAMPというものもありますので、整理のために以下の記事も是非ご覧ください。

AMPに関しても詳しく知りたい方は以下の記事をご覧ください。
一歩先を行くSEO!今後の主流「AMP対応」とは?記事タイプ別に徹底解説!

SEOをもっと学びたい方はこちらもチェック:SEO対策の全てを紹介!
SEOの内部対策についてはこちらもチェック:SEO内部対策を徹底解説!

SEARCH WRITE