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

2020.06.23

五十嵐 和希

SEO SOLUTION

PWA(プログレッシブウェブアプリ)の機能と活用方法をおさらい!パフォーマンス向上に欠かせないPWAとは?

WRITER

五十嵐 和希

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

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

目次
    1. PWAとは
    2. PWAの機能
      1. ホーム画面にアイコンの追加
      2. アプリのダウンロードが不要
      3. プッシュ通知の配信
    3. PWAのメリット・デメリット
      1. PWAのメリット
        1. キャッシュの利用による高速化およびオフライン対応
        2. UIをネイティブアプリのように設計可能
        3. アプリのインストールの必要がない
        4. ログインしていないユーザーの情報を蓄積できる
        5. 検索結果からの流入が見込める
        6. デバイス毎に開発する必要が無い
      2. PWAのデメリット
        1. インストールの管理が出来ない
        2. ブラウザによって動作環境が異なる
        3. 対応していないブラウザがある
        4. ネイティブアプリも運用している場合、管理コストが2倍に
        5. ネイティブアプリと比較して、ユーザーに接触する機会が少なくなる可能性がある
        6. 通常のモバイルサイトと比較してコストがかかる
    4. Webサイトやアプリとの違いについて
    5. 導入方法
    6. PWAを活用する方法
    7. まとめ

Webサイトにおいてページ表示速度は年々重要度が増してきており、近年ではAMPページなど高速でWebページの読み込みが出来る技術が生まれてきています。今回こちらの記事でご紹介するPWA(プログレッシブウェブアプリ)でサイトを構築すれば、ネイティブアプリのように高速なWebサイトを作成することができます。


PWAとは

PWA(プログレッシブウェブアプリ)とは、アプリのように高速でページ表示ができるWebサイトの事です。通常のWebページとネイティブアプリ※1それぞれの良い部分を合わせもっており、導入したサイトではコンバージョンの改善やリテンション等に大きな効果があると言われています。

※1)ネイティブアプリ

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

実際にPWAを体験するには、スマホのSafari以外のブラウザからサンプルサイトを見て頂くのが分かりやすいかと思います。

URLを開いた後、メニューから「ホーム画面に追加」をし、ホーム画面から「I/O 2016」のアイコンをタップします。すると通常のブラウザで開いている時とは違うUIでサイトが開かれるのが確認できるかと思います。

【Google I/O 2016】https://events.google.com/io2016/ ※safariには未対応

I/O 2016


PWAの機能

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

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

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

またスマホ用のファビコンを設定することでアイコンが表示されますが、タップした先のページは通常のウェブページなので、ネイティブアプリの様なUIではありません。

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

従来のネイティブアプリの場合、App StoreやGooglePlayからアプリをダウンロードする必要がありましたが、PWAを実装すると、ウェブサイト内からホーム画面への追加が出来る様になります。

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

プッシュ通知の配信

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

ただし、不特定多数のユーザーに通知出来るわけではなく、必ず許諾してもらう必要があります。


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

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

PWAのメリット

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

・キャッシュの利用による高速化およびオフライン対応
・UIをネイティブアプリのように設計可能
・アプリのインストールの必要がない
・ログインしていないユーザーの情報を蓄積できる
・検索結果からの流入が見込める
・デバイス毎に開発する必要が無い

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

PWAを実装する際に使用するservice worker,jsによって、ウェブサイトのコンテンツがキャッシュされます。そのキャッシュを利用することで、通常のウェブサイトのページ読み込みが短縮され、ページを高速表示させることが出来ます。ページの読み込み速度が遅くなる程、ユーザーの離脱率が上がってしまう為、コンバージョン率にも悪い影響を与えます。読み込み速度は出来るだけ速くするように心がけましょう。

またキャッシュの利用は高速化だけでなく、オフラインでのサイト利用を可能にします。オフライン対応にすることで、ネット環境が不安定で回線が繋がり辛い状況でもコンテンツが閲覧出来ます。

UIをネイティブアプリのように設計可能

ブラウザ上のメニューバーを消したり、ホーム画面のアイコン設定などができるので、アプリのようなUI設計が可能です。

アプリのインストールの必要がない

アプリストアからのインストールの必要がなく気軽に利用する事が出来ます。また、ページの更新を行う際にも、アプリの場合はストアの審査が必要ですがPWAであれば自由に更新出来ます。

ログインしていないユーザーの情報を蓄積できる

通常のWebサイトではログインしているユーザーに対しての情報を集めますが、PWAはログインしていないユーザーの情報も集める事ができます。

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

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

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

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


PWAのデメリット

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

・インストールの管理が出来ない
・ブラウザによって動作環境が異なる
・対応していないブラウザがある
・ネイティブアプリも運用している場合、管理コストが2倍に
・ネイティブアプリと比較して、ユーザーに接触する機会が少なくなる可能性がある
・通常のモバイルサイトと比較してコストがかかる

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

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

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

1つのソースで複数のOSに対応出来るPWAですが、一部のOSで若干動作環境が異なる点があります。例えばAndroidでは「ホーム画面への追加」を促すバナーを表示させることが出来ますが、iOSでは出来ません。

またiOSではプッシュ通知の機能も利用不可です。iOSによるPWAの利便性は少しずつ改善されているものの、やはりAndroidユーザーに対する機能と比べると劣ってしまう印象です。

対応していないブラウザがある

2017年7月時点では、iPhoneの標準ブラウザであるsafariには対応していません。iPhoneは日本国内で広く普及しているので、safariに対応していないのは大きなデメリットの1つといえます。

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

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

ネイティブアプリと比較して、ユーザーに接触する機会が少なくなる可能性がある

ネイティブアプリではApp StoreやGoogle Playなどのアプリストア上でユーザーに接触する事が出来ますが、PWAはWebサイトを訪れたユーザーのみ接触可能です。

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

通常のモバイルサイトの制作と比較して制作コストが高くなります。また、PWAの普及率はまだまだ低いため、導入についての事例やドキュメントが少ないというデメリットも存在します。


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

冒頭でもお伝えしたとおり、Webサイトとネイティブアプリの良い部分を併せ持ったような特徴があります。

機能Webサイト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

ブラウザの履歴を操作するためにします。


PWAを活用する方法

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

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

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


まとめ

現状では、日本で大きなシェアを獲得しているiPhoneの標準ブラウザであるSafariに対応していない等のデメリットは存在していますが、

  • ストアの審査なしで更新できるアプリ
  • 高速化やプッシュ通知によるサイト内でのユーザー体験の向上
  • ホーム画面からのアクセスによる再訪問率の改善

など、多くのメリットが存在しています。Safariへの対応も含めて、今後の動向に期待が出来る技術です。サイトの高速化を目指すのであれば、AMPだけでなくPWAも検討してみると良いでしょう。

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

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

SEARCH WRITE