ECでPWA(プログレッシブウェブアプリ)って使えるの？
Web技術の進化とともに昨今HTML5、CSS3、高機能なJSのライブラリなどの登場によってWebで表現可能な領域が日々拡張されています。先進的でモダンな技術が開発されている中、特に注目を集めているのがPWAやAMPといった技術ではないでしょうか。ただ、現場レベルでは用語を聞く機会が増えても実際にPWAやAMPがどういったものなのか、またどのように利用されるのかまでしっかりと普及していないようにも感じます。
EC業界においてもWeb技術のトレンドは非常に重要であることに変わりないのですが、やはりメイン事業が小売りや卸売であったりする為自社サービス開発に対してかなり予算のかけれる企業でない限りなかなかモダンなWeb技術のキャッチアップや導入が難しかったりすると思います（筆者自身の経験に基づく所感）。そこで今回はPWAに焦点を当ててEC業界におけるPWAの有用性や利用におけるメリットについて解説していきたいと思います。
PWAとAMPの違い
まず本記事の導入部分で出てきたPWAとAMPの定義から書いていきたいと思います。実際PWAとAMPはセットで聞くことが多いかもしれませんが機能的にこの二つは全くの別物です。PWAは「Progressive Web Apps」の略でネイティブアプリに近い機能をWeb上で再現することができる技術です。一方でAMPは「Accelerated Mobile Pages」の略でGoogleとTwitterが共同で開発したモバイル端末での表示を高速化する為の仕組みのことです。実際には以下のようにどちらか一方だけを使うというのではなくPWAとAMPを組み合わせた利用が主流になってくると考えられます。
- AMP pages with PWA features （PWA の機能を取り入れた AMP ページ）
- AMP as entry point into your PWA （PWA へのエントリ ポイントとしての AMP）
- AMP as data source for your PWA（PWA のデータソースとしての AMP）
＊詳しくは「AMP とプログレッシブ ウェブアプリを組み合わせる」を見てください。
PWAとは
PWAとAMPの違いについて理解が進んだところでPWAの概要についてもう少し深く踏み込んでみたいと思います。PWAとは最新の標準Web技術を用いてプッシュ通知、オフラインでの操作そしてホームスクリーンへの追加などネイティブアプリでしか実現できなかったことを可能にしたウェブアプリのことです。PWAの特徴やメリットをざっと挙げてみると以下のようになります。
- オフラインで動く
- 通常のWEBサイトと同じアクセスで利用できる
- OSに依存しない
- トップレベルでの画面表示（ブラウザのメニューバー非表示）
- インストール無しでアイコンをホーム画面に設置
- プッシュ通知ができる
PWAの最新情報について日本語リソースでより詳しく知りたい方は以下の動画がオススメです。
PWA活用事例
では実際にビジネスレベルでPWAを利用したサイトはあるのかというと以下のようなサイトで体験することができます。
上記からわかるように実は日系企業でも既にPWAを利用したサービスが出てきています。また、SUUMOさんの場合ではPWA化することで読み込み速度を75%減少することに成功するなどしてGoogleから効果的な事例の一つとして紹介されていたりします。他にもPWAサイトを触ってみたいと思われた場合はGoolgeの Case Studies や pwa.rocks というサイトでまとめられていたりするので活用してみてください。また、PWA化した後のコンバージョン率の変化などを知りたいという方は PWA Statsというサイトがオススメです。
EC業界でのPWA活用
ではこの辺りでPWAに関する内容をよりECに寄せてみていきましょう。EC業界でPWAを導入している事例は以下になります。
PWA導入後の各社効果があったようで、Flipkartではサイトでの滞在時間が3倍になったり、リエンゲージメント率が40%以上になるなどの効果が報告されています。またLancômeではコンバージョンの17%上昇やモバイル(iOS)でのセッション数が51%上昇するなどの効果が報告されています。
【Case Studiesでの報告】
https://developers.google.com/web/showcase/2016/flipkart
https://developers.google.com/web/showcase/2017/lancome
PWA導入の留意事項
以上のように日本ではまだまだ未開拓ではあるもののECサイトでもPWAの有用さは証明されつつあります。ここまでの流れを見るとなんだかPWAって最高でとりあえず導入した方が良いんじゃないか？という雰囲気も感じてしまいそうなのですが、一応メリットだけでなく留意しておくべき事項も述べておこうと思います。まず、第一に気になるPWAのブラウザサポートについてみていきましょう。
Can I use?
https://caniuse.com/#search=PWA
現状ブラウザ対応はChromeでサポートが充実しているが、その他では部分的なサポートまでだったりします。。。 Safariでは未だプッシュ通知が利用できないなど未対応の機能もあるがService Workerが提供されたりと徐々にインフラが整ってきている印象。(2019/03/31時点)
また、Webアプリとして利用することでネイティブアプリのように審査を通す必要がない反面、Google StoreやAppleのApp Storeに掲載させることができない為ネイティブアプリを利用するユーザーと同じ層にリーチすることが難しくなると考えられます。
最後に技術的な部分になるのですが、通常のWebサイト構築、Webアプリ開発よりはPWA化することで工数がかなりかかってしまう為、大規模開発では最も効果的である部分を切り出してPWA化させるといった対応が必要であると思われます。
簡単にPWA化対応できるECプラットフォーム
EC関係者であればフルスクラッチで構築するよりもECカートサービスを利用するケースも多いかと思います。そこでECカートサービスですぐにPWAに対応できるものを少しだけご紹介したいと思います。
カナダ発のECカートサービスShopifyではサードパーティー製のアプリ（プラグイン）をインストールすることでECストアをPWA化させることができるようです。
まとめ
ブラウザの対応状況などを鑑みるとPWA化対応を進める上で使いたい機能がiOSでは使えないなどの問題があるかもしれませんが、これまでに解説したようにPWA対応することで実際のコンバージョンに結びつくケースが多いように感じます。
また、筆者としてはオフライン対応できるPWAの機能が最も有用であると感じています。特に外出時のモバイルでの利用やネットのインフラ環境が未だ整っていない地域のユーザーがアクセスすることが多いケースにおいて効果的なのではないでしょうか？
PWAのProgressiveには進歩的といった意味がありますが各種主要ブラウザの対応に合わせて進歩的（段階的）に徐々に提供できるサービスの幅は広がっていくと思われます。EC事業に携わる私たちもまたプログレッシブに時代の変化に合わせて技術の幅を広げていく必要があります。今回の記事がその一助になれば幸いです。
ECサイトの立ち上げ、改修でお悩みの方
メーカーのEC立ち上げから大型ECサイトリプレイスまで御社の売り上げ規模、予算、業務フローにあわせたカートをご提案いたします。以下サイトよりお気軽にお問い合わせください。
