PWAとは?事例・メリット・実装手順を解説!

サイト改善|更新:2018.04.19|公開:2018.04.19

こんにちは。アクセス解析の人工知能「AIアナリスト」運営チームの堀です。
この記事では、Googleが推進しているプロジェクト・技術であるPWA(Progressive Web Apps)について解説します。

Webサイトをモバイル対応にしてモバイルユーザビリティを高めているという方は多くいらっしゃるかと思います。
しかし、モバイル用のアプリとは異なり、あくまでもWebサイトであるため、プッシュ通知を届けたりホームボタンを設置したりといったアプリのような機能はありません。
そのような機能をWebサイトでも実現できるのが「PWA」です。

この記事ではPWAについて、いつ使われるのか、どんなメリットがあるのか、どうやって実装するのかなどを詳しく解説します。PWAによって快適なユーザー体験を実現しましょう。

目次

PWAとは

PWAとは、Googleによる、モバイルユーザーの体験(UX)向上を目的とするプロジェクト・技術のことです。プログレッシブウェブアプリの略称です。Webサイトとアプリの両方の利点を取り入れ、まるでアプリのように扱うことのできるWebサイトが実現します。
たとえばTwitterはPWAを導入し「Twitter Lite」を提供しています。
TwitterをWebサイトで閲覧する際に、まるでアプリのようなデザイン・使い方で閲覧することができるという、PWAの一例です。
アプリの画面はこのようになっています。
Twitter画像

一方、Twitter Liteの画面はこちらです。
TwitterLite画像

アプリとWebサイトでほとんど違いがみられません。また、Twitter Liteはデータ通信量も抑えられ、サクサクと動きます。
さらにホーム画面にもTwitter Liteのアイコンが表示されています。
TwitterLiteアイコン

このように、Webサイトでありながらアプリのような操作ができるのがPWAの大きな特徴です。他の企業のPWA導入事例はGoogle Developersのcasestudyで見ることができます。

PWAにするメリット

WebサイトをPWAにすると、ユーザーと企業の双方にメリットがあります。

  • ページの読み込みが速い

PWAの場合、データ通信量が抑えられて読み込みが高速化されます。
そのためユーザーにとって負担が少なく、より快適にコンテンツを利用してもらうことができます。

  • オフラインでも動く

通信が一時的に途絶えても、継続してWebサイトを閲覧することができます。
ページ遷移を伴う操作も可能です。

  • アプリではないためインストールがいらない

インストール不要のためユーザーの手間が省かれ、CVに到達しやすくなります。
「インストールのためにAppStoreでアプリを検索してパスワードを入力してアプリを起動して会員登録して…」という手間を面倒に感じて途中でやめてしまったという経験はありませんか?
インストール無しでアプリと同様の機能を提供できれば、このような離脱を防ぐことができます。

  • プッシュ通知を送信することができる

Webサイトでありながらプッシュ通知を送信することができます。
特にECサイトにおいて、カゴ落ち(買い物カゴに商品が選択されている状態)であるものの購入には至っていないという場合に、プッシュ通知を送信して購入を促すことで購入完了数が増えたという事例があります(Google Developersより)。

  • アプリではないためアップデートやリリースの審査がいらない

アプリをリリースする際に必須となるAppStoreの審査を受ける必要がなく、手間を省くことができます。

  • GPS機能を使える

GPS機能を利用できるため、ユーザーの位置情報に応じてコンテンツを提供することができます。

  • ホームスクリーンにアイコンを追加できる

アプリのアイコンのように、ホーム画面にアイコンを追加することができます。アプリと同様、ホーム画面から簡単にアクセスしてもらうことができ、流入数増加につながります。
このように、モバイルユーザーにとっては、通信量を減らしながらアプリの使い心地を体感できる、使いやすいWebサイトになります。
企業にとっては、モバイルユーザーの使い勝手を良くすることでWebサイトへの流入数・CV数を増加させることができます。
また、PWAはGoogleが推進するプロジェクトであるため、今後SEOの面でもPWAであることが重要となってくる可能性があります

PWAを実装する手順

PWAのWebサイトを構築する手順は次の3ステップです。

1)httpsを有効化する

PWAのWebサイトを実装するには、Webサイトをhttps化しておく必要があります。
なぜなら、PWAの核となるService Workerという技術は接続へのハイジャックや改ざんができてしまうため、Webサイトがhttps化されている状態でなければ使用することができないからです。
また、Webサイトをhttps化することは以前からGoogleも推奨しており、ユーザーの信頼を得られるため、SEOの面でも効果があります。まだhttps化していないという方はこれを機に対応しておきましょう。

2)ウェブアプリマニフェストを作成する

ウェブアプリマニフェストを作成することで、普通のアプリのようにホーム画面からアイコンをタップするだけで起動できるようになります。起動時の画面をアプリのようなデザインにすることも可能になります。
ウェブアプリマニフェストではアプリの画像や説明文、起動時の画面を設定する必要があります。

3) ServiceWorkerを設定する

ServiceWorkerを設定することで、オフラインでの操作、定期的なバックグラウンドの同期、プッシュ通知の送信などが可能となります。Service WorkerはブラウザがWebページとは別にバックグラウンドで実行するスクリプトです。
つまり、Webページを閉じた状態でも、ブラウザ上でスクリプトを実行することができます。

ここでは具体的な実装方法は割愛しますので、より詳細な手順を知りたいという方は脱ネイティブ!Googleが推進する「PWA」にたった数時間で対応する方法をご覧ください。

PWAを実装してより快適なWebサイトにしよう

PWAについて紹介してきました。PWAはユーザーにとっても企業にとってもメリットのある技術です。工数はかかりますが、開発担当と相談してぜひ実装してみてはいかがでしょうか。
また、アプリではないため、Webサイトのアクセス解析をそのまま利用できることも利点です。
PWAにしたことでどれほど成果があがったかをGoogleアナリティクスなどアクセス解析ツールで確かめ、サイト改善に役立てましょう。
その際、Googleアナリティクスとともにおすすめなのが弊社ツールAIアナリストです。
AIアナリストはGoogleアナリティクスのデータと連携してサイト改善案を自動で出してくれるツールです。
無料で登録できるのでぜひ試してみてはいかがでしょうか。

アクセス解析データを最大限CVRアップに役立てられる「AIアナリスト」の無料登録はこちら


この記事を書いた人

堀 文香

東京大学経済学部在学中のインターン生で、マーケティングチームに所属しています。

閉じる

この先続行することで利用規約に同意したものとします。

法人・組織名必須

担当者名必須

メールアドレス必須

電話番号必須

パスワード必須