モバイルサイト改善を考える上で、今最も注目されている技術の一つが「PWA」です。「名前は聞いたことがあるけれど、詳しくは知らない…。」という方も多いのではと思います。
PWAとは、簡単に言うと「モバイル端末でウェブサイトを表示するときに、まるでネイティブアプリのような動作を可能にする仕組み」のことです。サイトへの流入を増やす施策としては、SEO対策やコンテンツマーケティングなどが考えられますが、PWAを導入することで、サイトそのものの改善（表示速度などの技術的な改善）に繋がり、より一層の効果が見込めます。
今回は、PWAについての基本的な仕組みやメリット、導入事例をご紹介します。
- 1 PWAとは？
- 2 PWAで実装できる機能
- 3 通常のモバイルブラウザやアプリとどう違うの？
- 4 PWA導入のメリット
- 5 WAを導入する際の注意点
- 6 導入事例
- 7 サイト内検索に関するよくある質問
- 8 おわりに
PWAとは？
PWAとは「Progressive Web Apps」を略した言葉で、モバイルサイト上でネイティブアプリのようなユーザー体験を提供する技術です。ウェブとアプリの両方の良さを兼ね備えています。
インストールの必要はないのに、ホーム画面へのアイコン追加やプッシュ通知も可能で、ユーザーとの接触機会を増やすことができます。それだけでなく、読み込み速度や表示の高速化、オフラインでの閲覧可など、さまざまなメリットが得られます。
まだまだ導入しているサイトは少ないですが、だからこそ、早めに取り入れることで他社と差別化することができます。ウェブサイト改善の一つの手段として、導入を検討してみてはいかがでしょうか。
PWAで実装できる機能
PWAは、アプリとウェブの良い点を兼ね備えた技術ということはお分かりいただけたと思います。では、具体的にどのような機能が使えるのか、まとめてご紹介します。
プッシュ通知
普通のアプリと同じように、プッシュ通知を送ることができます。ブラウザを閉じている状態のユーザーにもプッシュ通知を送ることができるので、ウェブサイトと比較すると格段に接触回数を増やすことに繋がります。
プッシュ通知を送るためには、サイト閲覧時に表示されるメッセージから、ユーザーの許諾を得る必要があります。画面にポップアップされる形で、「http://~~~（サイトのURL）が、通知を送信しようとしています」と表示され、ユーザーが「ブロック」または「許可」を選択します。
アイコンのホーム画面への追加
スマートフォンのホーム画面に、アイコンを追加することができます。ネイティブアプリと同様に、ホーム画面から直接アクセスできるので、ユーザーにとっては非常に便利な機能です。ワンタップでアクセスできるので、再訪問の増加が予想されます。
ホーム画面に追加するには、サイト閲覧時に表示されるポップアップから許可するか、ブラウザメニューからユーザーが自分で追加を行う必要があります。
インストール不要で、ネイティブアプリのような使用感
PWAは、アプリではないので、ユーザーはストアでダウンロードやインストールする手間はかかりません。にもかかわらず、アプリのような見た目・使用感を実現することができます。
先述のホーム画面へのアイコン追加やプッシュ通知の送信もそうですが、フルスクリーンモードでの表示になるので、見た目もアプリに近くなります。APIを複数連携させることで、より立地なユーザーインターフェースを実現することができます。
表示スピードの高速化
ページの表示速度を改善することができます。PWAにはプリキャッシュの機能があるので、ユーザーがページを読んでいる間に、次のページのデータを読み込めるからです。
ページがサクサク表示されることで、ユーザーはストレスなく閲覧できますし、検索エンジンからも好かれやすいサイトにすることができます。
オフラインでの閲覧可能
あらかじめページ情報を読み込んでくれるので、オフラインキャッシュデータを用いて、オフライン環境でもサイトの閲覧ができるようになります。
通常のモバイルブラウザやアプリとどう違うの？
PWAはモバイルブラウザ、ネイティブアプリの両方の良さを取り入れた技術です。では、通常のブラウザやアプリとはどのように違うのでしょうか。それぞれと比較して特徴を理解していきましょう。
モバイルブラウザとの違い
読み込み速度
最大の近いは、読み込み速度です。先述の通り、PWAはプリキャッシュができるので、ページを見ている間に次のページを読み込んでくれます。ネットワークの品質に関係なく、すばやく表示してくれるので、ユーザーはストレスなくサイト閲覧ができます。また、バックグラウンドでアップデートするので、再読み込みをする必要もありません。ページの読み込みに時間がかかると、ユーザーの離脱が増えたり、検索エンジンの評価が下がったりとデメリットが大きいです。それを防げるのは、大きいポイントです。
アプリのようなインターフェイス
従来のモバイルブラウザと比べて、ユーザーインターフェースの自由度が上がります。フルスクリーンモード表示ができ、アプリのような見た目になるので、ユーザーの没入感を高められます。登録や注文、決済、問い合わせなどへの導線もスムーズに構築することができます。
ユーザーとの接触機会増加
ユーザーの許可があれば、アプリのようにホーム画面へのアイコン追加やプッシュ通知も可能なので、接触頻度を高めることに繋がります。
アプリとの違い
インストールが必要ない
最大の違いは、アプリストアを経由してダウンロードやインストールをする手間がないということです。ユーザーにとっても、アプリストアから探す手間がなくなります。アプリ導入までの手順を短縮できるので、ユーザー離脱を防ぐことにも繋がります。
開発の自由度
アプリストアを通す必要がないということは、AppleやGoogleのガイドラインに縛られる必要がないということです。審査を通す必要がないので、開発の自由度も高まりますし、準備ができればすぐに公開することができます。
また、開発者の観点からすると、プラットフォームごとにアプリを開発する必要がないという点も魅力的です。1つのPWAを構築するだけで、デバイス問わずに一貫した内容を表示することができます。
PWA導入のメリット
ここまで、PWAで実現できることなどについて解説してきましたが、次は「PWA導入のメリット」という観点から情報をまとめます。以下のようなメリットが多く得られる技術であるということを念頭に、導入を検討してみてください。
サイト運営者にとってのメリット
ユーザーとの接触機会が増える
PWAを導入すると、ホーム画面へのアイコン追加やプッシュ通知が可能になります。いずれも、ユーザーの承認合ってこそですが、そこまでの流れを上手に構築できれば、ユーザーを囲い込むことができ、接触機会を増やすことができます。
また、ページの読み込み速度が早く、オフラインでも閲覧することができるので、ユーザーにとっては非常に使いやすいサイトになります。特にモバイルサイトの場合、少しでも読み込みが遅くなると離脱される可能性が高くなるので、それを防げるのは大きなメリットです。アプリと違うので、他のユーザーへの共有も簡単。魅力的なコンテンツとなれば、多くのシェアが見込まれます。
接触機会を増やせ、ユーザーにとって使いやすい環境が整うということは、それだけコンバージョンにつながる可能性が高くなります。
1つ開発すれば、複数のデバイスに適用できる
技術的な観点からも、PWAは大きなメリットがあります。
PWAはウェブサイトの技術を基本にしたクロスプラットフォーム（異なるプラットフォームでも、同じ仕様のものを動かせる技術）なので、デバイスごとに開発し直す必要がありません。
アプリ審査不要なので、スムーズに公開できる
アプリとは違うので、公開前にアプリストアで審査を受ける必要がありません。ガイドラインに沿って内容を調整する手間もありませんし、完成したものをすぐに公開できます。
リリースまでのスピード感は、通常のWebサイトと同じようにスムーズです。
SEO対策につながる
先述の通り、PWAを導入することでサイトの表示速度が早まります。特にモバイルサイトにおいて、読み込み速度が速いことは検索エンジンから評価を受けるために重要な指標です。そのため、表示速度を改善することで、検索順位アップに繋がるかもしれません。
また、アプリにアップしたコンテンツと違い、PWAを導入したサイトに公開されたコンテンツは、検索結果に表示されるので、ユーザーに見つけてもらいやすくなります。コンテンツSEOも同時に行えるので、SEO対策の幅が広がります。
ユーザーにとってのメリット
PWAは、サイト運営者だけでなく、ユーザーにとってもメリットがある技術です。
すぐに目的のサイトにアクセスできる
ホーム画面にアイコンを追加することで、お気に入りのサイトにすぐにアクセスできます。ブラウザを開き、ブックマークからアクセスする…という手間を減らし、ホーム画面からワンタップで目的のサイトを見ることができるようになります。
閲覧時のストレスがない
バックグラウンドでページを読み込んでくれるので、次のページの表示速度が早いのがPWAを導入したサイトの特徴です。読み込みで待機するというストレスなくサイトを閲覧できます。
また、オフライン環境でも継続してサイト閲覧ができます。非常に便利にサイトを見ることができるので、ユーザーにも好印象を持たれるはずです。
WAを導入する際の注意点
メリットばかりに思えるPWAですが、もちろんデメリットもあります。そのことも理解して、導入をするかを決定してください。
既存のアプリがある場合、管理の手間が増える
現在アプリをリリースしていない場合は、PWA導入を進めることでアプリリリースと同様の結果が得られるかもしれません。
しかし、すでにネイティブアプリを展開している場合、そちらも引き続き管理する必要があるので、運用の手間が2倍かかることになります。
SSL化が必要になる
PWAは、httpsを前提にした技術です。HTTPで構築されているウェブサイトであれば、全体をhttpsにする必要があるので、導入の手間が予想以上にかかるかもしれません。
導入事例
最後に、PWAの導入事例をご紹介します。Twitterとsuumoという誰もが知っている大手サイトの事例です。いかに概要を記しますので、ぜひ実際に自分のスマートフォンからアクセスして、使い勝手を体感してみてください。
代表的なSNSの一つ、TwitterもPWAに対応しています。ブラウザから開き、メニューから「ホーム画面に追加」をクリックすることで、ホーム画面にアイコンを表示することができます。まるでアプリのように使えるので、ユーザーとしては非常に便利です。
Googleが公開しているケーススタディーによると、PWAの導入により、下記の成果が得られています。
- 1セッションあたりのページビューが65%増加
- アプリユーザーと比較し、ツイート数が75%増加
- アプリユーザーと比較し、離脱率が20％減少
FacebookもPWA対応をするなど、SNSでもPWA導入を進めるサービスがたくさんあります。通信環境があまり良くない地域では、アプリダウンロードよりもPWAサイトへのアクセスのほうが利便性が良いというメリットがあり、より多くのユーザーに利用してもらうためには、必要な技術と言えるのかもしれません。
Suumo
大手物件検索サイトもPWAに対応しています。全画面表示で、かなりアプリに近い見た目・使用感を体感できるサイトです。
膨大なデータの中から検索条件を設定して絞り込みをするため、いかに情報を早く表示できるかどうかは、ユーザーエクスペリエンスに大きく影響します。PWAを導入したことで、大幅に読み込み速度が短縮され、実際に大きな成果が出ています。
Googleのケーススタディーによると、下記の成果が報告されています。
- 読み込み時間が75％減少
- プッシュ通知の開封率は31％
サイト内検索に関するよくある質問
PWAはどのブラウザにも対応してるの？
PWAはブラウザによって一部機能が対応していない場合もあります。例えばiOSには「プッシュ通知」と「バナー通知」の機能は備わっていません。
PWAを導入するメリットは何ですか？
PWAは読み込み速度がはやく、アプリのダウンロードがユーザー側に必要もないので、デバイス問わず一貫した内容を表示することができます。そのためモバイルブラウザよりもより見やすく、アプリよりも多くのユーザーに見てもらうことに期待ができます。
PC上のウェブサイトでもPWA導入は可能ですか？
モバイルサイト上での施策として注目されてきましたが、最近ではPCブラウザでも利用するケースが増えてきています。
PWAを導入する際はアプリをリリースしない方がいいですか？
TwitterやInstagramのようにPWAサイトとアプリの両方を運営しているケースもあります。
PWAはアプリの代わりとしてではなく、ユーザーに最適な利用環境を提供する運用として導入することをおすすめします。
PWAを導入したいけどやり方が分からない場合はどうすればいいですか？
PWAを導入している企業はまだ少ないですが、スマホユーザーが急増している昨今ではモバイルサイト上における施策はとても重要視されています。PWA導入について分からない場合はWeb制作会社へ相談してみましょう。
おわりに
ウェブからのコンバージョンを増やすためには、SEO対策を進めるのと同時に、ユーザーのストレス無い閲覧環境を整えることが大切です。PWAは、その療法を進められる技術です。
比較的新しい技術なので、まだ導入している企業は限られています。だからこそ、早めに導入することで、他社に差をつけることができます。数多くのメリットが得られる施策なので、ウェブサイトの運用の一環として導入を検討されてはいかがでしょうか。
IT業界の現場の真実 