【PWA導入成功事例9選】PWAとネイティブアプリは何が違う？

「PWAは、Webサイトをスマートフォン上でアプリのように動作させる仕組みです」。このような説明をよく見かけますが、意味がきちんと分かる人は少ないのではないでしょうか？　PWAはたしかに有益な仕組みですが、ネイティブアプリがなくなる気配はありません。

この記事では、そもそもPWAとは何かを説明したうえで、PWAのメリットやネイティブアプリとの関係、そしてPWAの導入成功事例を紹介します。

PWAとは何か

PWAは「Progressive Web Apps」の略で、スマートフォン上でアプリのように動かせるモバイル向けのWebサイトです。PWAはHTML、CSS、Javascriptを使って実現されます。モバイルサイトがPWAであるためには、信頼性、高速性、アプリのような動作、といった特徴を兼ね備える必要があります。

サイトがPWAであるかどうかについて、Googleがチェックリスト（Progressive Web App Checklist）を用意しています。3つの特徴の具体的な内容は以下のようなものです。

信頼性

ネットワークの状態が悪くても即座に起動するか、という点です。事前に情報をキャッシュすることによって対応するのが一般的です。

高速性

ユーザーの要求に即座に反応するか、という点です。動作がスムーズでスクロール時にギクシャクしないことが求められます。

アプリのような動作

オフラインでも動作するか、という点です。プッシュ通知が使える、全画面表示できる、デバイスのハードウェアにアクセスできる、ホーム画面にインストールできる、アプリのストア（App Store、Google Play）からダウンロードする必要はないといった条件が求められます。

2019年現在、PWAは業界で広く採用されています。

PWAを導入するメリットとは

つぎに、PWAを導入するメリットについて、企業とユーザーそれぞれの立場から見ていきます。

企業にとってのメリット

PWAの高速性とアプリのように使える自由度により、企業はユーザーのモバイル体験の質を高めることができます。モバイル体験の質の向上により、多くのユーザーを惹きつけることができます。

PWAサイトを1つ作ればすべてのデバイスで使える

ネイティブアプリの場合、iOS用のアプリはiOSでのみ動作し、Android用のアプリはAndroidでしか動作しません。ネイティブアプリをスクラッチ開発し、両OSに対応させる場合、コーディングのコストが2倍になります。PWAの場合、一度サイトを作ってしまえば、iOSとAndroid、両方のデバイスで使うことができます。

アプリよりも多くのユーザーに使ってもらえる

PWAサイトは、アプリに比べてインストールのハードルが低いと言えます。アプリを使うとき、ユーザーはApp StoreやGoogle Playからアプリをインストールしなければなりません。日本人が持っているアプリは平均で80個、使っているのは25個であることを考えると、これは非常に高いハードルです。PWAなら、ブラウザで見ているページをホーム画面に登録するだけでアプリのように使えます。

参考：App Ape Lab.「アプリ市場トレンドレポート2018」

ユーザーの直帰率が下がる

ページの読み込み時間が3秒を超えるとユーザーはサイトの閲覧を諦める、というデータがあります。あるニュースサイトでは、ページの読み込み時間が1秒増すごとにユーザーが10％減少しました。

しかし、PWAサイトはページの読み込みが速く、オフラインでも使えることから、PWAはユーザーにっとって非常に使いやすいWebサイトです。PWAの高速性は、ユーザーの直帰率を下げる切り札になります。

参考：Google Web Fundamentals「パフォーマンスが重要なのはなぜか」

プッシュ通知が使える

プッシュ通知はネイティブアプリのさまざまな機能の中でも、特に重要なマーケティング・集客手段です。プッシュ通知を適切に使うことでユーザーとのつながりを深め、サイト訪問や購買に結びつけることができますが、PWAもアプリと同じようにプッシュ通知を使うことができます。

ユーザーによってのメリット

PWAはユーザーから見ると、ショップでダウンロードすることなく使えるアプリのようなものです。

ホーム画面にインストールしてアプリのように使える

ユーザーがPWAサイトを開くと、まるでアプリのように使えることに驚くはずです。通常画面の下部に位置する、「サイトをホーム画面に追加」というボタンを押すだけでアイコンが作成され、スマートフォンのアプリのように使うことができます。PWAは、ユーザーにとって、気軽に使えるアプリのようなものです。

表示が速いので閲覧時のストレスがない

PWAはキャッシュ機能により、バックグラウンドでページを読み込んでくれます。読み込みのために待つ時間が少ないので、ユーザーはストレスなくサイトを閲覧できます。オフライン環境でも動作するので、ユーザーのストレスはさらに軽減されます。

PWAとネイティブアプリの違い

PWAの機能はネイティブアプリにくらべて遜色ないようにも見えます。それではPWAとネイティブアプリにはどのような違いがあるのでしょうか？

PWAはあくまでもWebサイトであり、ユーザーはWebサイトにアクセスする意識で使う場合が多いでしょう。ネイティブアプリのようにApp StoreやGoogle Playからダウンロードする必要がない分だけ、気軽に使えるとは言えますが、ユーザーとのエンゲージメントが強化しにくい部分もあります。

開発コストの面から見ると、iOSとAndroidの2つのアプリを開発する必要がない代わりに、PWAはコーディングが必要です。モジュール化されたネイティブアプリの開発環境が次第に広がりを見せています。その場合、コーディングは不要となるので、PWAは開発コストの面でかなわないかもしれません。

PWAは世界展開を狙う企業が、新興国向けにデータ量を減らしたサービスを展開するときに使われることが多く、よりリッチなモバイル体験のためにはネイティブアプリを必要とします。多くの企業はPWAとネイティブアプリ両方のサービスを展開しています。

ネイティブアプリの開発を検討する際には、下記の記事も参考にしてみてください。

アプリ開発会社16選｜得意ジャンル&費用感を会社別に紹介

PWA導入による成功事例9選

PWAを導入することで、ユーザーのモバイルサイト体験を改善することができます。PWAの導入による成功事例をご紹介します。

【事例①】Retty(https://retty.news/)

日本最大級の実名グルメサービスの「Retty（レッティ）」は、ニュースメディア「Rettyグルメニュース」にPWAを導入しました。PWAによる主な改善点は以下の2つです。

• Webページの高速表示
• プッシュ通知で新着記事をお知らせ

コンテンツをあらかじめキャッシュに入れておくことで、初めて訪れるときでも素早く表示されます。アプリをダウンロードしたユーザーだけでなく、ブラウザを使って閲覧しているユーザーに対しても、新着やオススメ記事の情報を通知できます。

参考：PRTIMES「実名グルメサービスRetty、PWA対応により「Rettyグルメニュース」の表示速度を高速化」

【事例②】SUUMO(https://suumo.jp/)

2015年、リクルート住まいカンパニー様は、不動産・住宅サイト「SUUMO（スーモ）」のスマートフォン用Webサイトに、Webブラウザの最新技術「Service Worker」を利用したプッシュ通知機能を実装・公開しました。これによりアプリを使っていないユーザーでも、探す条件に合致した新着物件の情報をプッシュ通知で受け取り、より手軽に物件情報にアクセスできます。以下のような効果が確認されています。

• ページ読み込み時間が75％減
• プッシュ通知の開封率が31％に

参考：リクルート住まいカンパニー「プレスリリース」、Google PWA導入事例「SUUMO」

【事例③】Twitter

2017年、Twitterは軽量版「Twitter Lite」を発表しました。Twitter Liteの目的は、

• データ利用料を最小限にして読み込み速度を上げること
• デバイス上の容量を1MB以下に抑えること

でした。Twitter LiteにはPWAの技術が使われています。Google ChromeでTwitter Liteを使う場合、プッシュ通知を利用でき、オフラインで使うこともできます。Twitter Liteをデバイスのホーム画面に追加すれば、1タップでTwitterを起動できます。

参考：Twitter Japan「Twitter Liteのご紹介」

【事例④】日経電子版(https://r.nikkei.com/)

日本経済新聞は、通常のアプリのほかに、2017年からPWAも導入しています。

これにより、

• 表示速度を示すスコアが2倍になる
• アプリを操作可能になるまでの時間が14秒短縮される
• 読み込み速度が75％改善される

など、速度面での大幅な改善が見られました。

このようにしてユーザービリティを上げた結果、

• オーガニック流入が2.3倍になる
• 会員登録数が58％増加する

などの結果がもたらされました。

参考：Google PWA導入事例「日本経済新聞社」

【事例⑤】The Weather Channel(Weather.com)

The Weather ChannelはWebサイトWeather.comを通じて世界中の人々に天気予報の情報を提供しています。アプリも提供していますが、全体の半分程度はアプリ外からの利用だったため、モバイルWebサイトをPWAを使って最適化しました。

これにより、サイトの読み込み速度が80％改善し、接続環境がよくなかったりスマートフォンが最新でなかったりする場合でもサイトを利用しやすくなりました。また、50万人のユーザーがプッシュ通知を取り入れました。

参考：Google PWA導入事例「The Weather Channel」

【事例⑥】Alibaba(https://japanese.alibaba.com/)

Alibabaは世界最大のB2Bプラットフォームです。Alibabaは、モバイルWebサイトをアプリに誘導するための入口と考えてきましたが、多くのユーザーはWebサイトを使い続けました。そこで、サイトをPWA仕様に更新し、サイト利用者のモバイル体験を改善。PWAへの仕様変更により、以下のような結果がもたらされました。

• ブラウザ利用者のコンバージョンが76％増加
• アクティブ利用者数がiOSでは14％、Android利用者では30％増加

参考：Google PWA導入事例「Alibaba」

【事例⑦】Wego(https://www.wegotravel.jp/)

旅行会社のWegoはPWAと、Googleなどによるモバイルサイト高速表示プロジェクトであるAMP(Accelerated Mobile Pages)を使ってユーザーのWeb体験を改善しました。スムーズにページを表示できるようになり、読み込み速度が12秒から1秒に短縮されました。その結果直帰率が20％下がりました。

AMPとPWAが提供するさまざまなテクノロジーを取り入れることで、アプリと同じように使うことができるWebサイトの構築に成功しています。

参考：Google PWA導入事例「Wego」

【事例⑧】Pinterest(https://www.pinterest.jp/)

Pinterestの世界戦略の中で、モバイルサイトの改善に注力することになりました。これまでのWebサイトでは、非認証ユーザーの1％しかサインインしたりアプリをインストールしたりしていませんでした。PWAを採用してからは、サイトを使えるようになるまでの時間が23秒から5.6秒に改善されたことなどにより、

• 滞在時間が40％増加
• ユーザーからの利益が44％増加
• コアエンゲージメントが60％増加

などの効果が見られます。

参考：Medium「Pinterest PWAのパフォーマンス改善事例」

【事例⑨】The Washington Post(https://www.washingtonpost.com/)

The Washington Postのデータトラフィックの55％はモバイルデバイスによるものです。同紙は1日に1,000件の記事を発行しています。

2015年、同紙はAMP技術を使ってモバイルサイトをPWA化する出版社のグループに加入しました。ページ読み込み時間が400ミリ秒となり、以前のWebサイトに比べてパフォーマンスが88％改善されました。また、モバイル検索でThe Washington Postに来たユーザーの1週間以内に再訪率は51％から63％に改善されました。

参考：Google PWA導入事例「The Washington Post」

PWAとネイティブアプリを両方検討しよう

PWAはWebサイトの手軽さと、ネイティブアプリの高機能性の良いところを取ったWebサイトだと言えるでしょう。

しかし、多くの企業がPWAサイトとネイティブアプリの両方を運営していることからわかるように、今のところPWAはネイティブアプリに取って代わるものではありません。

やはり、ネイティブアプリは必要です。

ネイティブアプリの開発の際におすすめなのが、スマートフォンアプリの開発実績が豊富な、弊社Yappliです。

Yappliは、アプリの開発・運用・分析をクラウドからワンストップで提供するプラットフォームです。

プログラミングは不要。幅広いデザインの高品質なネイティブアプリを短期間で開発可能です。

また、管理画面はブログ感覚で誰もが簡単に更新作業を行うことができます。そのため、専門的な知識は一切必要なく、非エンジニアでも運用可能です。

さらに、申請時のストアサポートや、リリース後のダウンロード施策など、アプリで成果を出すための運用支援もサポート。

リリースから運用まで安心して任せることができるYappli。まずはお気軽に資料請求を！