「PWA」とは、「Progressive Web Apps」の略で、Webサイトのコンテンツをネイティブアプリのようにスマートフォンで扱える技術です。
今回は「PWA」を導入したWebサイトに焦点を当て、その概要やネイティブアプリとの違い、メリット、必要なノウハウ、導入事例などをご紹介します。気になるポイントを一挙確認してしまいましょう。
「PWA」とネイティブアプリの違い
ネイティブアプリとは、iOSやAndroidなどOS環境に適応して制作された専用アプリです。
例えば、私たちが普段Apple StoreやGoogle Playなどのアプリストアからダウンロードして使用しているアプリは全てネイティブアプリです。
| PWA | ネイティブアプリ |
|---|---|
| Webサイトのコンテンツをネイティブアプリのようにスマートフォンで扱える技術 | OS環境に適応して制作された専用アプリ |
「PWA」はあくまでWebコンテンツであり、ネイティブアプリではありません。
しかし、ユーザーに自社のWebサイトからコンテンツやアプリを直接インストールしてもらうとホーム画面にアイコンとして追加できるため、実質ネイティブアプリと似たような使い方が可能です。
「PWA」をWebサイトに導入するメリット
ここでは、PWAを導入するメリットについて、企業とユーザーそれぞれの視点から解説します。
ユーザーから見たメリット
ユーザーから見たメリットは主に以下の2点です。
・ホーム画面にインストールしてネイティブアプリのように利用できる
・Webサイトを高速表示できるため、閲覧時のストレスが少ない
企業から見たメリット
企業から見たメリットは主に以下の4点です。
・PWAサイトを1つ作ればすべてのデバイスで利用できる(デバイスごとの専用アプリは開発不要)
・専用アプリよりも多くのユーザーに利用してもらえる
・PWAサイトはページの読み込みが速く、オフラインでも使えるため、ユーザーの直帰率が下がる
・プッシュ通知でユーザーとのタッチポイントが増やせる→CV数に繋がりやすい
「PWA」をインストールする方法(ユーザー目線)
ここでは、「Mac・Google Chrome」と「iPhone・Safari」を経由した「PWA」のインストール方法について解説します。
なおWindowsでもほぼ同じ方法でインストールすることができます。
ぜひ試してみてください。
今回は一例として、Twitterの「PWA」をインストールしてみましょう。
まず始めにChromeにアクセスすると、アドレスバーの端にインストールアイコン(?)が表示されます。
インストールアイコンをクリックすることで「PWA」をインストールすることができます。
インストール完了後、PCのアプリ一覧を確認すると、確かにアプリとしてインストールされていることがわかります。
また、iphoneから「PWA」をインストールする方法も簡単です。
「PWA」に対応したWebサイトにアクセスし、その状態で「追加・共有・保存」マークをタップ。その後、「ホーム画面を追加」をタップするだけです。
「PWA」の導入時に必要なノウハウ(企業者目線)
「PWA」の導入には、初めにレスポンシブ対応のWebサイトを制作する必要があります。
その後、Web App ManifestとService Workerの設定が必要です。
なお、導入についての詳しいノウハウは、ぜひ弊社にお問い合わせください。
「PWA」の導入について最適解をコンサルいたします！
Web App Manifest
Web App Manifestとは、「PWA」の一部であり、アプリストアを通さずに端末のホーム画面にインストールできるものです。
単純なホーム画面リンクやブックマークを持つ通常のウェブアプリとは異なり、 「PWA」は事前にダウンロードしてオフラインでも動作するだけでなく、通常のWeb APIを使用することもできます。
Web App Manifestは、Webアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せるために必要な情報をJSONテキストファイル(データ交換フォーマット)で提供します。
詳細はWeb App Manifestの公式サイトを確認しましょう。
Service Worker
Service Workerとは、Webページ上に記述されたスクリプトをWebブラウザに組み込み、ページを離れた後も実行できるようにする仕組みです。
基本的にWebアプリケーションやブラウザ、ネットワークの間に介在するプロキシサーバーのように振る舞います。
これは、よりよいオフライン体験を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にあるアセットを更新したりします。
また、プッシュ通知やバックグラウンド同期のAPI群へのアクセスもできるようになります。
詳細はService Workerの公式サイトを確認しましょう。
「PWA」導入・成功事例5選
ここでは、「PWA」の導入に成功した事例について5選紹介します。
「PWA」に対応したWebサイトについて知りたい方はぜひ参考にしてみてください。
事例1:Twitter
Twitterでは、「Twitter Lite」という「PWA」がリリースされています。
Twitter Liteの実装で、デバイスの内容量を制限されることなく、Twitterを操作できるようになりました。
実際にGoogleが公開するケーススタディーによると、以下のような成果が達成されたそうです。
【成果】
・PVが約65％増加
・離脱率が20％減少
・1セッションあたりのページビューが65%増加
・アプリユーザーと比較し、ツイート数が75%増加
・アプリユーザーと比較し、離脱率が20％減少
(参考：https://developers.google.com/web/showcase/2017/twitter)
事例2:日経電子版
日経電子版のようなニュース系アプリでは、ページの表示速度がUX向上やページ評価に直結します。
そこで日経電子版は、UX向上を目的とした「PWA」を導入しました。
実際にGoogleが公開するケーススタディーによると、以下のような成果が達成されたそうです。
【成果】
・読み込み速度が前指標と比較して約2倍になる
・58% のコンバージョン増(会員登録)
・49% の1日当りアクティブユーザー数増
・操作できるようになる時間（Time-To-Interactive）が約14秒短縮される
・自然検索流入が約2.3倍になる
・1セッション当りのPVが約2倍になる
(参考：https://developers.google.com/web/showcase/2018/nikkei)
事例3:George.com
イギリスの大手衣料品・ライフスタイル用品ブランド「George」は、モバイルサイトでのショッピング体験を魅力的にするため、ページデザインやページスピード、機能性に重点を置いた「PWA」を導入しました。
実際にGoogleが公開するケーススタディーによると、以下のような成果が達成されたそうです。
【成果】
・ページの平均読み込みが3.8倍に高速化
・直帰率の半減
・CV率が31%上昇
・ユーザーの1回の訪問当たりのPV数が20%増加
・ホーム画面アイコンからの訪問ユーザーの平均サイト滞在時間が28%増加
(参考：https://developers.google.com/web/showcase/2018/asda-george)
事例4:suumo
大手物件検索サイト「Suumo」もPWAを導入しています。
大手物件検索サイトでは、ビッグデータから検索条件を絞り込むため、情報の表示速度はUXの満足度に直結します。
実際にGoogleが公開するケーススタディーによると、以下のような成果が達成されたそうです。
【成果】
・ページの読み込み時間が75％減少
・プッシュ通知の開封率が31％を達成
・コンバージョンが18%増加
(参考：https://developers.google.com/web/showcase/2016/suumo)
(参考：https://www.i3design.jp/in-pocket/2490#事例2リクルート社の「SUUMO」)
事例5:楽天レシピ
楽天レシピでは、AMPと「PWA」を組み合わせて実装しました。
AMPをランディングページとしてコンテンツを高速表示しつつ、裏側で「PWA」に必要なService Workerをインストールし、次ページからは「PWA」を活用したページの高速表示、ホーム画面アイコン追加ボタンの表示、オフライン機能などを提供しました。
結果、以下のような成果が得られました。
【成果】
・ホーム画面アイコンを追加したユーザーの訪問数が1.7倍、PVが3.1倍に増加
・1ヶ月後にプッシュ通知を受け取ったユーザーの訪問数が5.3倍に増加
・プッシュ通知経由のユーザーはソーシャルメディア経由のユーザーよりも直帰率が75%削減
(参考：https://www.youtube.com/watch?v=xF6mjl-wOqU&t=976s)
「PWA」を導入し、Webサイトの利便性や高速化を図ろう！
このページでは、「PWA」に焦点を当て、その概要やネイティブアプリとの違い、メリット、必要なノウハウ、導入事例などについて解説しました。
「PWA」はWebサイトの手軽さとネイティブアプリの高機能性の両方を兼ね備えたWebコンテンツです。
またスマートフォンやタブレットなどのモバイルデバイスの普及で情報の取得が多様化した昨今において、「PWA」は今後増加する可能性が高いです。
各企業の成功事例を参考に、この機会に「PWA」の導入・改善を検討してみてはいかがでしょうか。
「PWA」や「SEO」でお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数！SEOを検討する際にはぜひ一度ご相談ください。