PWA(Progressive Web Apps)とは? 実装のメリットや注意点を解説

PWAとは

近年、Webに関する新たな技術が続々と登場しており、開発者やユーザーが快適に利用できる時代となっています。Webを快適に利用できる技術の一つに「PWA」があります。

 

PWAという言葉を知っていても、詳しい機能やメリットまで理解していない人もいるのではないでしょうか。

 

SEOコンサルタント今回は、PWAの機能やメリット、そして導入事例について解説していきます。

PWAについて

PWAとは?

PWAとは「Progressive Web Apps」の略で、モバイル向けに作られたWebサイトを、あたかもネイティブアプリのように利用できる仕組みです。Webサイトなのにネイティブアプリのように、素早いレスポンスやプッシュ通知ができます。

ネイティブアプリは、一度AppStoreやGoogle Playなどからアプリケーションを自分の端末にダウンロードしなければなりません。しかし、Webサイトであればダウンロードの必要がなく、URLさえ知っていればどのデバイスからでもアクセスできます。

ただし、Web経由で見る場合は、動作が遅かったりプッシュ通知が届かないなどの不都合があるため、ネイティブアプリよりも不便なところがあります。

PWAは、Webサイトにネイティブアプリの良さを導入させた仕組みで、Webサイトであるにもかかわらず素早いレスポンスやプッシュ通知を実現できます。

PWAとAMPの関係

PWAとAMPの関係を見る前に、それぞれの仕組みから理解しましょう。

 

先述の通り、PWAは、Webサイトをアプリ化する仕組みです。対してAMPは、「Accelerated Mobile Pages」の略で、スマートフォンからWebサイト表示する際に高速化する仕組みを指します。

 

最近では、PWAとAMPを組み合わせて補完し合うPWAMP(プワンプ)が登場しました。

 

PWAMPには、

 

  • AMP as PWA
  • AMP to PWA
  • AMP in PWA

 

の3パターンに基づいた実装方法があり、それぞれに特徴があります。例えば、AMPにはWebサイトをキャッシュする機能がありますが、PWAによってAMPだけをキャッシュせずにできます。PWAMPの活用でユーザビリティが向上し、Webページの滞在時間増加につながります。

PWAの機能

PWAを活用するためには、PWAの機能を把握しておく必要があります。PWAが持つ機能としては、次の4機能が挙げられます。

 

  1. プッシュ通知
  2. ホーム画面にアイコン追加
  3. 表示スピードの高速化
  4. オフライン環境での閲覧

それぞれの機能を見ていきましょう。

プッシュ通知

 

プッシュ通知とは、アプリのお知らせがスマートフォンに届く機能を指します。プッシュ通知の例としては、LINEのメッセージやニュース速報などが挙げられます。

 

WebサイトはURLを参照して表示させているため、お知らせ等があってもスマートフォンに対して通知が来ません。しかし、PWAを導入すればWebサイト閲覧時にポップアップで「http://~~~(サイトのURL)が、通知を送信しようとしています」というメッセージが表示され、ユーザーが「許可」を選択するとプッシュ通知が設定されます。

 

プッシュ通知機能により、ネイティブアプリと同様にアイコンをタップするだけですぐに利用できます。

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

 

スマートフォンアプリは、インストールするとホーム画面にアイコンが表示されるため、スマートフォンアプリ同様にアイコンをタップするだけでアクセスできます。

 

ホーム画面からのアクセスにより、Webブラウザを立ち上げずして直接アクセスできるため、ユーザビリティが向上して再訪問の確率が上がります。

 

アイコンを追加するには、Webサイトを訪問したときにポップアップで許可通知が届くので、通知を許可するとアイコンが表示されます。

表示スピードの高速化

 

PWAには、プリキャッシュ機能と呼ばれるものがあります。プリキャッシュ機能とは、次に表示されるWebページをあらかじめ読み込む機能です。

 

PWAは、プリキャッシュ機能によってサクサクとWebページが表示されるため、ユーザーがストレスを感じずにページを読み進めていけます。ユーザーがつかいやすいWebサイトはSEO対策にもつながるため、サイトへの流入数も増加するでしょう。

オフライン環境での閲覧

 

PWAに対応したWebサイトは、キャッシュによってオフライン状態でも閲覧が可能となります。キャッシュとは、一度閲覧したWebページやページ内で使われている画像をハードディスクに保存する機能を指します。

 

キャッシュはオフライン表示を可能にするだけではなく、Webサイトに再度訪問するときの読み込み速度向上にもつながります。

PWAをサイトに実装するメリット

PWAには、多くの機能があると分かりました。では、実際にPWA対応のWebサイトにするとどのようなメリットがあるのでしょうか。

 

ここでは、サイト運営者側利用者側のメリットをご紹介します。

サイト運営者側のメリット

 

まずは、サイト運営者側のメリットから見ていきましょう。メリットは、大きく次の3つが考えられます。

  1. ユーザータッチポイントの増加
  2. アプリ審査不要のため即時公開可能
  3. SEO対策になる

各メリットを解説していきます。

ユーザータッチポイントの増加

 

PWAによって、ユーザーとの接触機会増加が期待されます。PWAの機能でも紹介したとおり、プッシュ通知によってユーザーが手軽にWebサイトを確認できます。

 

また、Webサイトが高速化されれば、ユーザー満足度が上がり、再度訪問する機会が増えるでしょう。

アプリ審査不要のため即時公開可能

 

PWAはあくまでもWebサイトをアプリのように見せる仕組みのため、公開するための審査等が必要なく、完成した段階ですぐに公開できます

 

Androidアプリであれば「Google Play」、iOSアプリであれば「App Store」に審査をしてもらい、審査に通ったアプリのみがStore上に掲載されます。審査は、不具合などで問題が発生しないか、アプリの説明文が十分かなどの観点で行われます。

 

審査の時間は、長ければ1カ月程度かかる場合もあるため、すぐに公開できるPWAは魅力的と言えます。

SEO対策になる

 

PWAは、先述の通りサイトの表示を早くするためユーザーの満足度が向上します。SEOの評価観点として、「ユーザーファーストか」という評価項目があるため、ユーザーの満足度向上がSEO対策にもつながります

サイト利用者側のメリット

 

続いて、サイトを利用する側のメリットもご紹介しましょう。利用者側は、以下にある2つのメリットが考えられます。

  1. 目的サイトをすぐに閲覧可能
  2. ノンストレスなブラウジングを実現

各メリットを解説していきます。

目的サイトをすぐに閲覧可能

 

PWAの機能の1つのプッシュ通知により、ホーム画面のアイコンをタップすればすぐにWebサイトを閲覧できます

 

PWAを導入していない場合は、ブラウザを開いてからブックマークや検索で対象のWebサイトに訪問するため手間がかかります。わざわざブラウザを開く手間を削減するためにも、PWAの導入は効果的でしょう。

ノンストレスなブラウジングを実現

 

PWAに対応したWebサイトは、プリキャッシュ機能によって次ページを読み込んでくれるため、ストレスないブラウジングを実現できます。

 

プリキャッシュ機能はブラウザの表示速度を上げるだけではなく、オフライン時の利用も可能にするためユーザーにも魅力的なWebサイトとなるでしょう。

PWA実装時の注意点

 

メリットの大きいPWAですが、導入するにあたっていくつかの注意点があります。ここでは、以下に記載した3つの注意点をご紹介しましょう。

  1. ブラウザごとに動作環境が異なる
  2. 既存ネイティブアプリもあると管理工数が増える
  3. SSL化が必須

 

ブラウザごとに動作環境が異なる

 

PWAは、使用するブラウザによって対応していない場合があるため注意しましょう。基本的に、Google ChromeであればiOS版を除いて利用できますが、Internet ExplorerやEdge、Safari等では対応不能となっています。

 

もしこれから導入される方は、利用されるブラウザを想定したうえで検討をしていきましょう。

既存ネイティブアプリもあると管理工数が増える

 

これからPWAに対応させようとしているWebサイトが既にネイティブアプリとして提供されている場合、管理工数が二倍に増えてしまいます。

 

まだアプリとしてリリースしていない場合は、新たに導入をするため工数の増加につながりません。しかし、既に存在している場合は工数の増加につながるため、考慮したうえで導入を検討しましょう。

SSL化が必須

 

SSL化とは、httpからhttpsに変換し、Webブラウザとサーバー間のデータ通信を暗号化する仕組みを指します。

 

PWAは、SSL化したWebページを対象とする技術のため、SSL化していないhttpのWebページが存在する場合は作り変えなければならないため手間がかかってしまいます。

 

また、SSL化にあたってWebサイトのURLが変わるため、変更前のURLにリダイレクト処理を実装するなどの対応が必要です。

PWAの導入方法

 

PWAを導入するためには、次の3ステップにしたがって進めていく必要があります。

  1. WebサイトのSSL化
  2. マニフェストファイルの作成
  3. ServiceWorkerの設定

順に説明していきましょう。

ステップ①:WebサイトのSSL化

 

PWAは、SSL化したWebサイトが前提の技術のため、まずはSSL化から始めましょう。SSL化しなければならない理由は、ステップ③で解説する「ServiceWorker」がhttpsのWebサイト上でしか動作しないからです。

 

SSL化は、構築しているサーバーやコンテンツによって設定方法が異なるため、修正方法を確認したうえで進めていきましょう。

ステップ②:マニフェストファイルの作成

 

マニフェストファイルとは、PWAの設定項目を定義するファイルを指します。マニフェストファイルは、主に次の項目を含んでいます。

  • Webサイトの表示テキスト
  • ホーム画面に表示するテキスト
  • アイコン起動時に呼び出される最初のWebページ
  • アイコンの色
  • アイコン起動時の背景
  • アイコンの画像
  • アイコンの起動方法

その他の設定内容を知りたい方は、下記のサイトを参考にしてください。

参考: ウェブアプリマニフェスト

ステップ③:ServiceWorkerの設定

 

ServiceWorkerは、主にオフライン時の利用で必要となる機能を提供するスクリプトファイルです。

 

ファイルは、JavaScriptとHTMLで構成されており、プッシュ通知やプリキャッシュ機能などを記述します。詳しい記述方法については、下記のサイトを参考にしてください。

 

参考: Service Worker の紹介

PWAの導入事例

 

PWAは、多くの企業で導入されています。中でも広く知られた2つの企業事例に注目してみました。

日経電子版(株式会社日本経済新聞社)

 

日本経済新聞社が提供する「日経電子版」は2016年にPWAを導入し表示速度が以前の2倍になりました。

 

開発チームは、KPIに「ページ表示速度向上」を掲げており、速度を上げるためにService Workerをつかい始めたようです。現時点で、ネイティブアプリとほぼ変わらない速度が出るようになりました。

 

参考:PWAで表示速度が2倍に! スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット&デメリット

SUUMO(株式会社リクルート)

 

大手物件検索サイト「SUUMO」では、PWAに対応したWebサイトを実現しています。スマートフォンの全画面表示をしてくれるため、ネイティブアプリと同様の操作感で利用できます。

 

PWAを導入した結果、「ロード時間の75%短縮」「Webプッシュ通知からの31%のオープン率」を達成しています。

 

参考: Google Developers case Suumo

 

SEOコンサルタント【まとめ】
今回は、PWAの機能やメリット、そして導入事例を解説しました。PWAは、Webサイトをネイティブアプリのようにつかえる技術で、ユーザビリティの向上につながります。PWAを導入している企業はまだまだ少ないため、早めに導入すればユーザー満足度を上げて他社との差別化を図れるでしょう。これからPWAの導入を検討している方は、今回の記事を参考に進めていきましょう。

 

SEO対策のお申込みボタン

格安SEOのTOPページへ戻る