「PWA」とは、「Progressive Web Apps」の略で、Webサイトのコンテンツをネイティブアプリのようにスマートフォンで扱える技術です。

今回は「PWA」を導入したWebサイトに焦点を当て、その概要やネイティブアプリとの違い、メリット、必要なノウハウ、導入事例などをご紹介します。気になるポイントを一挙確認してしまいましょう。

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

ネイティブアプリとは、iOSやAndroidなどOS環境に適応して制作された専用アプリです。

例えば、私たちが普段Apple StoreやGoogle Playなどのアプリストアからダウンロードして使用しているアプリは全てネイティブアプリです。

「PWA」はあくまでWebコンテンツであり、ネイティブアプリではありません。

しかし、ユーザーに自社のWebサイトからコンテンツやアプリを直接インストールしてもらうとホーム画面にアイコンとして追加できるため、実質ネイティブアプリと似たような使い方が可能です。

PWAについて詳しくはこちら

「PWA」をWebサイトに導入するメリット

ここでは、PWAを導入するメリットについて、企業とユーザーそれぞれの視点から解説します。

ユーザーから見たメリット

ユーザーから見たメリットは主に以下の2点です。

企業から見たメリット

企業から見たメリットは主に以下の4点です。

「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」の導入について最適解をコンサルいたします！

「SEO」に関する無料相談はこちら

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が公開するケーススタディーによると、以下のような成果が達成されたそうです。

【成果】

(参考：https://developers.google.com/web/showcase/2017/twitter)

事例2:日経電子版

日経電子版のようなニュース系アプリでは、ページの表示速度がUX向上やページ評価に直結します。
そこで日経電子版は、UX向上を目的とした「PWA」を導入しました。

実際にGoogleが公開するケーススタディーによると、以下のような成果が達成されたそうです。

【成果】

(参考：https://developers.google.com/web/showcase/2018/nikkei)

事例3:George.com

イギリスの大手衣料品・ライフスタイル用品ブランド「George」は、モバイルサイトでのショッピング体験を魅力的にするため、ページデザインやページスピード、機能性に重点を置いた「PWA」を導入しました。

実際にGoogleが公開するケーススタディーによると、以下のような成果が達成されたそうです。

【成果】

(参考：https://developers.google.com/web/showcase/2018/asda-george)

事例4:suumo

大手物件検索サイト「Suumo」もPWAを導入しています。

大手物件検索サイトでは、ビッグデータから検索条件を絞り込むため、情報の表示速度はUXの満足度に直結します。

実際にGoogleが公開するケーススタディーによると、以下のような成果が達成されたそうです。

【成果】

(参考：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」を活用したページの高速表示、ホーム画面アイコン追加ボタンの表示、オフライン機能などを提供しました。

結果、以下のような成果が得られました。

【成果】

(参考：https://www.youtube.com/watch?v=xF6mjl-wOqU&t=976s)

「PWA」を導入し、Webサイトの利便性や高速化を図ろう！

このページでは、「PWA」に焦点を当て、その概要やネイティブアプリとの違い、メリット、必要なノウハウ、導入事例などについて解説しました。

「PWA」はWebサイトの手軽さとネイティブアプリの高機能性の両方を兼ね備えたWebコンテンツです。

またスマートフォンやタブレットなどのモバイルデバイスの普及で情報の取得が多様化した昨今において、「PWA」は今後増加する可能性が高いです。

各企業の成功事例を参考に、この機会に「PWA」の導入・改善を検討してみてはいかがでしょうか。

「PWA」や「SEO」でお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数！SEOを検討する際にはぜひ一度ご相談ください。