今回は「PWA」とは何なのか？どのような事が出来て、メリットとデメリットは何なのか？そして導入事例と共に導入していった方が良いサービス体系などについて紹介していきます。
PWAとは？
PWAとは「Progressive Web Apps」の略称です。
2015年にGoogleがリリースしたWEBサイトをネイティブアプリのような見た目で表示可能とする開発技術です。PWAを導入する事でWEBサイトをアプリの様にインストール可能となり、ホーム画面からプッシュ通知が届くようになったり、オフライン接続が可能となります。
PWAを導入している有名なサイトと言えばTwitterやSUUMOが有名です。
PWA導入のメリット
PWAのメリットは以下の様なものがあります。
- プッシュ通知
- アイコンをホーム画面に追加
- ページ表示速度の向上
- オフライン対応
- 端末ストレージの負担が抑えられる
- アプリでは無いのでストアの審査不要
- UI/UXの向上
- SEOの効果が強い
プッシュ通知
プッシュ通知が届く様になります。これによりユーザーは最新情報に素早く気づく事が出来るので通常のWEBサイトよりもユーザーとの接触頻度が上がります。
プッシュ通知を送るためには、ユーザーからの許諾を得る必要があります。画面にポップアップされる形で、「http://ewsample.com（サイトのURL）が、通知を送信しようとしています」と表示され、ユーザーが「ブロック」または「許可」を選択します。
アイコンをホーム画面に追加
スマートフォンのホーム画面に簡単にアイコンを追加することができます。アプリの様にそのアイコンをタップする事でホーム画面から直接アクセスできるので、ユーザーにとっては非常に便利な機能です。ワンタップですぐWEBサイトアクセス出来るので再訪問の増加が期待されます。
スマートフォンからホーム画面に追加するには下記の「ホーム画面に追加」のボタンを押すだけです。PWA対応のサイトだとホーム画面にアイコンが表示されます。それを表示させるとURLバーなど無駄なUIが無くなりアプリの様にフルスクリーンでの表示になります。
https://forbesjapan.com
ページ表示速度の向上
ページの表示速度を大幅に改善することができます。PWAにはプリキャッシュの機能があるので、ユーザーがページを読んでいる間に、次のページのデータを読み込む事が出来ます。
ページがサクサク表示されることで、ユーザーの満足度は上がり回遊されやすくなります。またその結果検索エンジンからも好かれやすいサイトとなりSEOの面でも強くなっていきます。
オフライン接続
PWAは、あらかじめページ情報を読み込んでくれているので、オフラインキャッシュデータを用いて、オフライン環境でもサイトの閲覧ができるようになります。
端末ストレージ節約
アプリの様にフルインストールでは無いので、アプリよりも容量が低く、ユーザーの端末ストレージの負担を抑えられます。
審査不要
PWAは、アプリではないので、ユーザーはApple ストアやGoogleのストアでダウンロードやインストールする事はありません。それなのにアプリのような見た目と使用感を実現することができます。
先述のホーム画面へのアイコン追加、プッシュ通知の送信、フルスクリーンモードでの表示などとアプリの特徴とほとんど同じながらもストアからのダウンロードは必要ありません。
そのためそれらストアでの審査は一切不要です。
UI/UX向上
PWAは、先述の通りアプリの様なインターフェイスと表示スピードの改善などの見た目と体験を大幅に向上されます。
SEOの効果
UI/UXが向上される事で、ユーザーとの接触頻度の高いWEBサイトとなり、さらに回遊率が上がります。リピート率が高く、回遊率の高いサイトはユーザーの満足度の高いサイトなのです。これは検索エンジンもデータを参照して認めます。
また、PWAはあくまでWEBサイトなのでユーザーがアプリとWEBサイトに分散する事がありません。
そのため評価が上がり検索順位が上がりやすくなります。
PWA導入のデメリット（注意点）
PWAを導入する注意点は以下の様なものがあります。
- SSLが必要
- アプリ運用もするなら運用の負担が大きい
- 通常サイトより制作費が大きい
- ブラウザによって動作環境に注意が必要
SSLが必須
PWAを導入するには、「https://ewsample.com」の「s」が付いていなくてはいけません。「s」が付いてないサイトはまずはSSL化する必要があります。
運用の負担
アプリも運用する場合は、運用の負担が2倍になります。アプリが適している業種とPWAが適している業種とがあるので、自身の事業（サイト）はどちらが適しているかよく考えて、どちらか一方でいいかと思われます。
制作費
通常のWEB制作費より1.5倍程の費用がかかってきます。PWAを導入する事でどの様な効果が期待できるのか明確にし、その効果に対しての費用対効果から導入を検討していきましょう。
動作環境
Chromeでは安定した動作が可能だが、Safariだと一部動作しない場合がありました。Safariでは最近PWAをサポートし始めたのでこの先に期待です。
PWA導入サイト
Twitter Lite
Twitter LiteにはPWAの技術が使われています。Google ChromeでTwitter Liteを使う場合、プッシュ通知を利用でき、オフラインで使うこともできます。
日経電子版
日本経済新聞は、通常のアプリのほかに、2017年からPWAも導入しています。
SUUMO
不動産・住宅サイト「SUUMO（スーモ）」のスマートフォン用Webサイトに、Webブラウザの最新技術「Service Worker」を利用したプッシュ通知機能を実装・公開しました。
Retty
日本最大級の実名グルメサービスの「Retty（レッティ）」は、ニュースメディア「Rettyグルメニュース」にPWAを導入しました。
The Weather Channel
The Weather Channelは全体の半分程度はアプリ外からの利用だったため、モバイルWebサイトをPWAを使って最適化しました。
Alibaba
Alibabaは、モバイルWebサイトをアプリに誘導するための入口と考えてきましたが、多くのユーザーはWebサイトを使い続けました。そのためPWAでのモバイルWebサイトを更新。
Wego
旅行会社のWegoはPWAと、Googleなどによるモバイルサイト高速表示プロジェクトであるAMP(Accelerated Mobile Pages)を使ってユーザーのWeb体験を改善しました。
Pinterestの世界戦略の中で、モバイルサイトの改善に注力することになりました。
PWAに適したサイト
PWAに適したサイトは主にこの2点です。
- 法人ブログ・メディアサイト
- 情報サイト
これらのサイトはアプリにする必要性が低いが、ユーザーの大半がリピーターであるのことが望ましいサービスです。
さらにこれらのサイトは情報量の多さからページ読み込み速度が下がり、ごちゃごちゃしたUIになりがちです。
その辺をまとめて解決してくれるのが「PWA」です。
以上が「PWAとは？WEBサイトなのにアプリの様とはどういう事？」でした。
最近、大手企業でWEBサイトのアプリ化が急激に増え始めており、ユーザーの意識がアプリへと移動し始めています。
それに伴い今後、中小企業でもアプリ化の動きが出てくると予想されます。その時本当にアプリ化が必要な事なのか？今回紹介したPWAの導入で代用可能なのではないか？と選択肢の一つになってくると思います。
