PWAとは、「Progressive Web Apps」の略で、Webサイトのコンテンツをネイティブアプリのようにスマートフォンで扱える技術です。 今回はPWAを導入したWebサイトに焦点を当て、その概要やネイティブアプリとの違い、メリット、必要なノウハウ、導入事例などをご紹介します。気になるポイントを一挙確認してしまいましょう。

PWA(Progressive Web Apps)とは？

PWAとは「Progressive Web Apps」を略した言葉で、モバイルサイト上でネイティブアプリのようなUXを提供する技術です。アプリのインストールが不要にもかかわらず、ホーム画面へアイコンを追加したり、プッシュ通知を設定できます。また、ページ表示や読み込み速度を高速化できたり、オフライン閲覧もできたりとPWAにはさまざまなメリットがあります。

PWAがSEOにもたらす効果

PWAは直接的にSEOに良い効果をもたらしてくれるわけではありません。UIの改善によるアクションの向上など、ユーザビリティの観点から間接的にSEOの効果を期待できます。例えばPWAを活用すると、以下のような効果が期待できます。

SEOとは？基礎知識と初心者がやるべき対策をわかりやすく解説

自社サイトの流入数を増やし、ビジネスを成長させるにはSEO対策(検索エンジン最適化)が欠かせません。このページでは初心者の方でもわかりやすいように、「SEO対策がそもそもどのようなものなのか？」を解説します。基本的な概念をどこよりもわかりやすくご紹介するので、SEO対策を検討されている方はぜひ参考にしてみてください。

PWAとアプリとの違い

PWAとブラウザとの違い

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

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

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

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

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

PWAの主な機能

ここでは、PWAの機能について3点解説します。

1.ユーザーの端末へインストール可能

PWAでは、ユーザーの端末へアプリやサイトを直接インストールでき、スマホやデスクトップのホーム画面にアイコンとして設置できます。

インストール後はネイティブアプリのように使用することができ、ユーザーはアイコンをタップするだけでアプリを起動可能。アイコン化することで、検索エンジンなどの外的要因に左右されず、ユーザーに直接サービスを提供できるため、Webページへのアクセスやコンバージョンの拡大が期待できます。

2.キャッシュ機能の利用

PWAでは、キャッシュ機能を設定できます。

キャッシュ機能とはWebで表示されたデータをデバイスに一時的に保存することで、キャッシュが完了しているページは表示速度が非常に速く、オフライン状態でも不備なく閲覧できます。このように表示速度が早くなるとUXの向上が期待でき、結果としてSEO的に評価される可能性につながります。

3.プッシュ通知機能によるユーザーアクション

PWAでは、プッシュ通知機能を設定できます。プッシュ通知機能とは、アプリやサイトのお知らせを自動通知してくれる機能です。例えば、SNSやメールなどのお知らせは、プッシュ通知としてスマホ画面に表示されます。

プッシュ通知はアプリが起動されていない状態でも機能するため、ブラウザで表示するよりユーザーとの接触回数を増やせます。

4.検索結果やURLから、通常のサイトと同じようにアクセスすることができる

PWAはもともとはWebサイトなので、通常のWebサイトと同じようにアクセスが可能です。例えばページをシェアするときはアプリとは違ってURLを送れば共有することができます。また、検索エンジンからPWA対応のサイトを見つけることもできます。

PWAと相性が良いサイトのタイプ

PWAは一般的に特定のサイトのタイプに対して特に相性が良いとされています。PWAと相性が良いサイトのタイプについて解説していきます。

表示速度が遅いサイト

PWAはWebサイトのキャッシュを保存することで、２回目以降の表示を高速化できます。Webサイトの表示速度はユーザーの離脱率に大きく関係しており、表示速度が5秒を超える場合は離脱率が38％にまで増えるとされています。通信性能の向上によりその傾向は顕著になっているので、表示速度が5秒以上かかっている場合はPWAの導入を検討することが推奨されます。

ニュース・読み物系のサイト

ニュースサイトや読み物系のサイトは、ユーザーの隙間時間に読まれることが多い傾向があります。そのため、ユーザーの利便性を向上させるために、早くサイトを表示する速度面の利便性が重要です。表示速度を向上させるためには、速度面で安定しているPWAの導入がおすすめです。

情報検索がメインのサイト

情報を検索する上でも、速度面のユーザビリティは非常に重要です。特にお店の検索や交通情報の検索などは、リアルタイムの情報が求められるため、サイトが表示されるスピードが使い勝手に大きく影響します。そのため、速度面で安定しているPWAの導入がおすすめです。

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

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

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

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

企業から見たメリット

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

PWAの注意点

PWAの導入はメリットが多くありますが、導入にはいくつかの注意点があります。PWAの導入における注意点について解説していきます。

一部OSでは機能が制限させるリスクがある

PWAはOSによって機能が制限されてしまう可能性があります。Androidでは早い段階からPWAにおける全ての機能が使えていましたが、iOS/ipadOSはプッシュ通知に対応したのが2023年からであり、それまでは使用できませんでした。このようにOSによって対応が異なってくる可能性があるので注意が必要です。

通常のWeb制作より開発費用が割高になる

PWAを導入するためにはホーム画面追加時のアイコンやPWA機能の開発が必要です。そのため、通常のWeb制作と比べると開発費用が割高になってしまいます。しかし、ネイティブアプリと比べると開発費用は抑えられるので、費用に関しては過度な心配は不要です。

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の公式サイトを確認しましょう。

PushAPI

APIとは、ソフトウェア同士で情報交換をする際に使われるインターフェースのことを指します。ブラウザのAPIとService Workerを組み合わせることで、通知をやり取りしたり、バックグラウンドでデータを更新したりすることなどが可能になります。

ユーザーインターフェース（UI）ライブラリ

PWAではネイティブアプリと変わらないようなUIを提供しています。UI対応は画面の小さいモバイル対応においてもはや必須のものとなっています。ユーザーにとって使いやすい設計を行うことで、離脱を防ぎ、ユーザーに使ってもらえるサービスにすることができます。

httpsサーバー

PWAの条件としてhttpsで提供されているサイトであることが必要です。httpsでサイトを提供するためにはSSL対応をしてセキュリティを強化することが必要です。サイトをhttps化するには、Firebase HostingやNetlifyといったサービスを使うことで簡単に対応可能になります。

SinglePageApplication

Single Page Applicationは最初に一つのページを読み出し、後は変更が必要な箇所のみデータを受け取る仕組みです。全体を読み込む方式よりも動作が軽くなるという点がメリットです。また、ネイティブアプリに近い表示や操作感が可能になるという利点もあります。

PWAを開発する方法

PWAの利点や注意点について解説してきました。では実際に開発する方法はどのようにするのでしょうか。ここからPWAを開発する方法について解説します。

外注して開発する

PWA開発はJavaScriptとHTMLで実装でき、比較的工数が軽く、アプリ開発よりも安価に行うことができます。また、専門業者に依頼する場合は運用費用として月額料金がかかる可能性がありますが、企画から一任することが可能です。一方で、フリーランスに外注する場合は、開発の方向性を決めた上で発注する必要があります。自社の状況を踏まえて、どこまでを委託するかを考える必要があります。

自社開発する

自社開発の場合はJavaScriptとHTMLでの実装が必要となります。その際に１からコードを書いて開発するやり方と、補助ツールを使った方法があります。PWA化で必ずやるべきことは、manifest.json ファイルの作成です。ファイルの作成は「マニフェストジェネレーター」を活用すれば必要事項を記入するだけで自動でコードを作成してくれるので簡便に行うことができます。

PWA開発における注意点

PWAの開発には外注と自社開発で行う方法とがあります。またPWA開発においてはいくつか注意点があるので、開発における注意点について解説します。

Webブラウザによっては動作しない可能性がある

まず、Webブラウザの機能によっては動作しない場合があります。Safariでさえ、２０２３年まではプッシュ通知を使用することができませんでした。今後対応はどんどん進んでいくことが予想されますが、それでも注意が必要であり、動向については把握しておく必要があります。

現状の主流はネイティブアプリ

実際にはPWAはまだまだ一般に普及していないのが現状です。そのため、現在のメインはあくまでネイティブアプリであることを理解しておくようにしてください。それでもあえてPWAを実装する場合は、そのメリットや注意点を理解して開発に着手することが必要です。

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を検討する際にはぜひ一度ご相談ください。