CONTENTS

プログレッシブウェブアプリとは?導入時のメリット・デメリットや具体例を解説


昨今注目を集めているPWAことProgressive Web Apps(プログレッシブウェブアプリ)。Android、iOSなどの環境に左右されずにWebサイトをアプリのように閲覧することができるクロスプラットフォーム技術のことです。Googleが2015年にリリースして以来、日本でも採用する企業が増えてきています。こちらの記事では、このPWA(プログレッシブウェブアプリ)とはどのようなものか、また導入成功事例を具体的に解説していきます。

 

『クロスプラットフォームとは何か』についてはこちら。

 

PWA(プログレッシブウェブアプリ)とは?

PWA(プログレッシブウェブアプリ)とは、Webサイトのコンテンツをネイティブアプリのように、PCやスマートフォンにインストールできる技術を指します。また、Android・iOS双方のプラットフォーム上で、同じ仕様のアプリケーションを動かせるクロスプラットフォーム技術で、HTMLやCSS、Javascriptを使うことで動作します。

ネイティブアプリは、App StoreやGoogle Playストアなどのアプリストアからインストールするアプリを指し、インストールした上で、iOSやAndroidなどの各環境下で使用することができます。その一方、PWAはアプリストアを介さずに、直接Webサイトからインストールすることができ、インストールした後はホーム画面上に他のアプリ同様に配置することができます。

主なPWAの特徴は、以下に掲げる3点が挙げられます。

  • 信頼性
  • 高速性
  • アプリと同等の動作

信頼性

ネットワークの状況に影響されず起動することができます。これは、PWAにキャッシュ機能が存在するからです。それ故、ネット回線に接続しておらずとも、Webサイトのデータがキャッシュに残っていれば、Webサイトを閲覧することができます。

 

高速性

ユーザーが求める動作がスムーズに行えるという点がこの高速性に繋がります。スクロールなどの動作がスムーズで途切れ途切れにならずに叶うなどということが例として挙げられます。

 

アプリと同等の動作

以下に掲げる4点がアプリと同等の動作ができるとされる基準となり、これらもクリアしています。アプリストアよりインストールするということ以外は、アプリストアからインストールするネイティブアプリと同じ特徴を有していると言えるでしょう。

  • オフライン環境でも使用可能
  • プッシュ通知の機能
  • 端末の画面全体に表示可能
  • ホーム画面にアイコンを表示

 

GeNEE_システム開発バナー

 

PWAが注目され始めた背景

注目され始めた背景は主に2点考えられます。

1つ目は、コスト面が抑えられるという点です。ネイティブアプリは開発する際に、iOSとAndroid各々の環境に合わせたアプリを開発する必要があり、また開発後もアップデートするなどコストがかかるというデメリットがあります。その一方で、PWAは個別に開発する必要もなく、アプリストアへの登録も必要ないため手間やコストを抑えることができます。こういった理由から、自社のWebサイトにPWAを取り入れる企業が増えてきました。

もう1点は、PWAを活用できる環境が整ってきたという点です。2018年まではiOSではPWAは利用できませんでした。しかし、2018年にAppleがiOSのブラウザであるSafariに「Service Worker」と呼ばれる機能を搭載したことをきっかけに、iOSでもPWAが使用できるようになりました。このようにPWAを活用する環境が整えば、iOSユーザーの多い日本でも普及して行くと考えられるでしょう。

 

PWA導入のメリット

今回は特に導入する企業側のメリットを解説していきます。

まずは、PWAの特徴にも挙げた「高速性」と「アプリと同等の動作」で使用できることにより、ユーザーのモバイル体験の質を上げることができると言えるでしょう。これらと共に、以下に挙げる点が主なメリットと考えられます。

  • PWAを導入したサイトを1つ作成すれば、あらゆるデバイスで動作が可能
  • ネイティブアプリよりも多くのユーザーに触れてもらえる可能性が高い
  • ユーザーの直帰率を抑えることができる

 

PWAを導入したサイトを1つ作成すれば、あらゆるデバイスで動作が可能

ネイティブアプリは各環境下に合わせて開発する必要があり、iOSとAndroid両環境に対応させる場合は、コーディングのコストが2倍になるというデメリットがあります。しかし、PWAの場合、1度サイトを作成することができると、iOSとAndroid両方のデバイスで使うことができます。コストも時間も削減できるのでとても大きいメリットと言えるでしょう。

 

ネイティブアプリよりも多くのユーザーに触れてもらえる可能性が高い

PWAを導入したサイトは、アプリストアからインストールする必要がなく、ブラウザで見ているWebサイトのページをホーム画面に登録することができます。少し前の記事にはなりますが、App Ape Lab.の「アプリ市場トレンドレポート2018」によると、日本人が保有しているアプリは平均で80個、活用しているのは25個であるということを考えると、インストールしてもらうまでが非常に高いハードルと言えます。このことをクリアできるだけでも、大きなメリットであると考えられます。

 

参照:App Ape Lab.の「アプリ市場トレンドレポート2018

ユーザーの直帰率を抑えることができる

PWAのサイトのページは読み込みが速く、更にはキャッシュが残っていればオフラインでも使用することができるため、ユーザーにとっては活用しやすいWebサイトとして評価されます。それ故、直帰率を抑えることができると言えるでしょう。

 

PWA導入のデメリット

OS毎の開発を必要とはしない一方で、ブラウザには依存するというのは避けられません。確かにSafariでの活用もできるようにはなりましたが、現状Chromeとの間では動きに差があるなど、まだまだネイティブアプリと全く同じような機能で活用するのは難しい状況です。
また、インストールしなくて良いというメリットがある反面、ダウンロード数やアンインストールの数が把握できないため、利用者数を把握するための方法は検討する必要があります。

良い点が多いPWAですが、このように課題も多々見受けられるのが現状です。しかし、これらの課題を解決することで更にネイティブアプリよりも活用しやすくなる可能性も秘めていると言えるでしょう。

 

 

GeNEE_システム開発バナー

 

 

PWA導入事例

このようにたくさんのメリットや課題点も見受けられるPWAですが、実際に導入している企業はどのようなところがあるのでしょうか。具体的に3つの事例を見ていきましょう。

  • Twiter
  • SUUMO
  • The Weather Channel

 

Twitter

Twitterは2017年に「データ利用料を最小限にして読み込み速度を上げること」「デバイス上の容量を1MB以下に抑えること」を主な目的として、Twitter Liteを開発しました。このTwitter LiteにPWAの技術が活用されています。Twitter LiteをChromeで使用する場合、デバイスのホーム画面に追加ができ、オフラインで使うことも可能となっています。

 

参照:Twitter Japan「Twitter Liteのご紹介

 

SUUMO

国内の不動産主力サイトである「SUUMO」もPWAを2015年に導入しました。
サイトユーザーの大半がモバイルからのアクセスしていたため、ネイティブアプリのダウンロードを推進していました。しかし、アプリへの再エンゲージをユーザーに求めるにはコストがかかり、費用対効果が良くなかったことから、モバイルアプリと同様の高速で魅力的なUXを提供できるPWA技術を用いてを開発しました。
PWAを導入したことにより、「ロード時間が75%短縮」「プッシュ通知の開封率が31%になった」など、効果を得ています。

参照:Androidスマートフォン用Webサイト へ「Service Worker」 を利用したプッシュ通知機能を実装

 

The Weather Channel

世界中で利用されている天気予報サイトの「The Weather Channel」です。このサイトはネイティブアプリも開発はしましたが、アクセスするユーザーの殆どがWebサイトからのアクセスだったため、Webサイトをより利用しやすくするために、PWAの技術を導入しました。それによって、「サイトの表示速度を80%向上」「50万人のユーザーがプッシュ通知を導入」など、大きな効果が得られています。PWAが通信技術や、端末の性能に依存しないことで、より多くの人が利用しやすくなったと言えるでしょう。

 

まとめ

ここまで見てきたように、PWAを導入することで、ユーザーはネイティブアプリのような感覚でWebサイトを閲覧することができます。そして、ユーザー目線で見ても、企業側の目線で見ても、導入することで大きな効果が得られることは、ご理解いただけたと思います。

確かに、デメリットに挙げた内容のように課題点はまだまだ見受けられます。しかし、その課題点をカバー出来る方法を模索しつつ活用することで、現状のままでいるよりも前に進むことができます。自社サイトをより多くの方に触れていただくためにも、この機会に一度ご検討されてはいかがでしょうか。

—————————————————————————————————————

システム開発、アプリ開発、新規事業立ち上げ、DX化の推進でお困りではありませんか?

日本全国には開発会社が無数にありますが、Webサービスやアプリサービスのスケール(規模拡大)を実現するビジネス推進力やシステムの堅牢性、可用性を意識した設計力・技術力を合わせ持つ会社は、全国で見ても多くはなく、弊社は数少ないその一つ。お客様のご要望通りに開発することを良しとせず、お客様のビジネス全体にとって最適な解を模索し、ご提案ができるビジネス×テック(技術力)×デザインの三位一体型のシステム開発/アプリ開発会社です。ITやDX全般に関して、何かお困りのことがございましたら下記の「GeNEEへのお問合せ」フォームからお気軽にご連絡いただけたらと思います。

GeNEEの会社概要

GeNEEの特徴

GeNEEの提供サービス一覧

GeNEEの開発実績

GeNEEからお知らせ

GeNEE発信コンテンツ

GeNEEへのお問合せ

GeNEE社に関する資料をダウンロード

—————————————————————————————————————

 

 

  • コンテンツ
  • プログレッシブウェブアプリとは?導入時のメリット・デメリットや具体例を解説
↑