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

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

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

PWAについて

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

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

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

PWAとAMPの関係

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

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

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

PWAMPには、

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

PWAの機能

PWAを活用するためには、PWAの機能を把握しておく必要があります。PWAが持つ機能としては、次の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つが考えられます。

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

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

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

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

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

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

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

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

SEO対策になる

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

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

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

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

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

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

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

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

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

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

PWA実装時の注意点

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

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

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ステップにしたがって進めていく必要があります。

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

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

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

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

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

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

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

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

ステップ③：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

まとめ

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

SEO対策の東京SEOメーカーTOPへ戻る

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。