「自社のWebサイトへのユーザー再訪率を上げたい。」
「より魅力的な仕様にWebサイトを改良したいけど、コストはおさえたい。」
Webサイトの改善のために新しい技術を探すとき「PWA」という単語を目にしたことがあるのではないでしょうか。
素晴らしいWebサービスも、使い勝手が原因で認知度が広まらず、ユーザーが離れてしまうことはよくあります。
この記事では、日々進化するWeb技術の中から生まれた「PWA」の基礎知識と導入メリットを、実装例も交えて紹介します。
最後まで読んでいただき、「より多くのユーザー」に「継続的」に使っていただける最高のWebサービスを作るためのヒントをつかんでください。
PWAとは？基本構成
PWAとは”Progressive Web Apps”の略称。
「WebサイトをスマートフォンやPC上で、ネイティブアプリのように動作させる仕組み」のことを指します。
最大の特徴は、デスクトップ上にアイコンを置けること。
ユーザーは設置したアイコンから、ワンタッチでWebサイトへアクセスできるようになります。
また、オンラインかオフラインかを自動認識して表示をコントロールするため、通信環境に依存せず高速表示できることも特徴です。
PWAとは？実装によりできること
PWAとは「Webサイト」と「アプリ」のメリットを合体させた技術。
ここからは、PWAの主な機能と、実装によりできることをご紹介します。
インストール不要ながらアプリのように使用可能
PWAはアプリではありません。
そのため、アプリのようにダウンロードやインストールする必要がありません。
PWAはAPIを複数連携させることで、アプリのようにホーム画面にアイコンを追加したり、プッシュ通知も設定可能で、動作も普通のアプリと同じようにフルスクリーンモードで使用することができます。
ユーザーにとって、使用感はアプリとほんど変わらない状態ということになります。
インストール不要なのにネイティブアプリのような使用感が得られるとても便利な機能です。
アプリ化によりエンゲージメント獲得率が上がる
アイコンを設置できるのはネイティブアプリの特権ですが、PWAとはWebサイトのアイコン化により同等のメリットを享受できる技術です。
ポイントはアプリストアからのダウンロードが不要で、Webサイトから直接インストールできる点。
ユーザーはアイコンからすぐに目的のWebサイトにアクセスでき、ブラウザのブックマークを経由する手間を省けます。
Webサイトへのアクセスが容易になれば、ユーザーの再訪率やシェア率は自然とアップ。
Web検索時にも表示されやすくなるため、エンゲージメント獲得率の向上に繋がります。
プッシュ通知が可能
プッシュ通知を送信できることで、ユーザーの行動に働きかけ接触回数を増やすことができるのも大きな特徴の一つです。
ブラウザを閉じている状態でも普通のアプリのようにプッシュ通知を送ることができるため、アプリで得られるメリットをそのまま利用することが可能となります。
プッシュ通知はユーザーからの承諾により設定が可能となります。
サイト利用中に「（サイトURL）が、通知を送信しようとしています」というポップアップが表示されるため、そこでブロック・許可のどちらかのボタンで設定されます。
プッシュ通知はユーザーへのアクションを促す貴重な機会を作ることができます。
アプリ作成・更新コストを大きく削減できる
ネイティブアプリの場合は公開前にアプリストアによる審査がありますが、PWAの場合にはありません。
このため開発の自由度が高く、公開までの時間を短縮できます。
また、PWAとはデバイスを問わずに展開できるのも魅力の一つ。
デバイスごとにアプリを再開発しなくても良いので、コストを削減できるのがメリットです。
表示スピードの高速化でユーザー満足度が上がる
PWAとは、ページの高速表示が可能で、オフライン環境でも閲覧ができる技術です。
PWAサイトではページの読み込み時間が短縮されるので、次ページの素早い表示が可能。
そのため、ユーザーの興味をそらさず、Webサイトへの滞在時間を増やせます。
オフライン環境でも閲覧可能
PWAはあらかじめページの情報を読み込むことができます。
そのため、キャッシュデータを使用してオフライン環境でも問題なくサイトの閲覧が可能となります。
ネット環境を問わないため、ユーザーが制限されることなくいつでも好きなときに利用できるようになり、ユーザー離れを回避することに繋がります。
その他のメリット
PWAとはこれまで紹介したこと以外にも、以下のような機能を備えています。
- アプリ化するときの通信量と、デバイスに占める容量が小さい
- 一度キャッシュしたページは、次回から高速表示が可能
PWAは、表示速度が速くデバイスの負担も少ないです。
通信環境にも左右されずに楽しめるので、ユーザーにとって魅力的。
シェアされる確率も上がります。
ブラウザとアプリの違いとは？
PWAを導入すると、モバイルブラウザとアプリの両方の良い点を取り入れ快適に、使用できるようになります。
ではモバイルブラウザとアプリを比較するとどのような違いがあるのでしょうか。
それぞれの特徴の違いを見ていきましょう。
PWAとモバイルブラウザは何が違う？
PWAはモバイルブラウザより優れた使用感を実現します。
では、モバイルブラウザと比べて違う点を見ていきましょう。
読み込み速度が早くなる
PWAを導入すると、読み込み速度が早くなりるのが大きな特徴です。
予めページの読み込みをするため、キャッシュデータにより高速表示が可能となり、オフラインでも使用可能となります。
ネット環境に左右されることなくユーザーが快適に使えるようになるため、回線不良や速度低下による離脱を避け、満足度を上げることができます。
アプリのような使用感
PWAを導入すると、アプリのようにホーム画面にアイコンが表示できたり、フルスクリーン画面での仕様が実現します。
また、プッシュ通知の送信も可能になることで、まるでアプリを仕様している感覚で使うことができます。
ユーザーの集中力を上げるような画面デザインや、スムーズな決済システム、満足度を更に上げる問い合わせシステムなども自由に構築することが可能になります。
ユーザーの行動に働きかける
ホーム画面のアイコンからダイレクトにログインできることで、ユーザーとの距離をグッと縮めることが可能となります。
プッシュ通知送信でユーザーに働きかけることで接触頻度も上げることができ、ユーザーが行動に移すチャンスを見逃しません。
PWAとアプリは何が違う？
次に、アプリとの違いを見ていきます。
まるでアプリのようなインターフェイスですが、アプリと違う点も抑えておきましょう。
ダウンロード・インストールの必要がない
アプリとの最大の違いは、「ダウンロードしインストールする」という行動が不要となります。
ダウンロードにはアプリストアに移動する手間、ダウンロードに時間がかかること、ある程度の容量スペースが必要なことなどから、少なからずインストールまで距離があります。
インストール自体も慣れない人にとっては敷居が高い場合もありますね。
PWAの導入は、アプリのような仕様なのにダウンロードもインストールも必要ないことで、更に多くの人に使ってもらうチャンスが広がります。
開発の自由度が上がる
アプリの場合、アプリストアを経由することになるため、アプリストアのガイドラインに準じた開発・販売が必要になり、審査を通過する必要もあります。
しかし、アプリストアを利用しないPWA導入は自由な開発が可能です。
また、iPhoneアプリ・Androidアプリの両方を開発するような必要もないため、プラットフォームに関係なく1つのPWAの構築に集中でき、デバイスを問わず多くのユーザーにも利用可能なものを作り上げることができます。
PWA導入のメリットとは？
PWAを導入することにより、サイトに対して良い影響を与えメリットも増えます。
ではどのようなメリットがあるか見ていきましょう。
サイト運営側のメリット
ではまず、PWAを導入するこのによるサイト運営側にとってのメリットをご紹介します。
ユーザーの行動を促す
アプリのようにホーム画面にアイコンが表示でき、プッシュ通知も可能なので、ユーザーに直接働きかけ行動を促すチャンスが広がります。
下記のような点から、快適な使用感を提供することで離脱防止にもなります。
- ホーム画面にアイコン追加
- プッシュ通知が可能
- 速度が早く快適な動き
- ネット環境を問わず使用可能
- アプリより情報のシェアがしやすいので拡散につながる
デバイスを問わず適用できる
PWAはどんなデバイスでも適用できるクロスプラットフォーム開発ができます。
デバイスごとや、OSごとの開発をする必要がないため、メンテナンスやトラブルに早急に対応ができます。
アプリストアを経由しない
アプリではないため、アプリストア経由で公開する必要がありません。
アプリストアを経由する場合は、ガイドラインに沿った内容にする必要があり、公開するにも審査が必要になります。
しかしPWAはアプリではないため、自由な開発ができ、公開までの手間や時間も短縮できます。
検索流入も見込める
PWAはブラウザベースなので、検索結果に上がってきます。
検索上位に行くにはさまざまなSEO対策が必要ですが、その中でも重要とされているサイトスピードに関して、PWAは表示速度も早いため有利になります。
コンテンツの充実などSEO対策をしていくことで、検索流入からもユーザーが広がる可能性がとても高く注目したいところです。
ユーザー側のメリット
PWA導入は、ユーザー側にとってもメリットは増えます。
では順に見ていきましょう。
ユーザーとの距離が近く、すぐに目的の情報にたとどりつける
- ホーム画面にアイコンを表示できるので立ち上げるまで手間と時間の短縮
- プッシュ通知の設定をすることで、大事な情報の見逃しが防止できる
PWAは、この2点があることで、ユーザーがするに目的の情報にたどりつくことができます。
快適な使用感
- あらかじめ読み込むので、表示速度が早くストレスがない
- どんなデバイスでも使用可能
- オフラインでも使用可能
主に上記3つのポイントがあります。
ネット環境やデバイスに左右されず使用できるので、ユーザーにとっては『使いやすい』サイトとなり、ストレスなく使ってもらえます。
PWA導入の注意点とは？
PWA導入には、注意点もいくつかあります。
開発には、デメリットも把握しておく必要がありますね。
SSL化が必須
ブラウザベースでの開発になるため、インターネット上でのデータ通信を暗号化し、セキュリティーを高める必要があります。
SSL化されたウェブサイトは、URLが「https」から始まるようになりブラウザのアドレスバーに鍵マークが入りますが、もしSSL化をしない場合は『安全ではありません』や『保護されていない通信』という表示がでるため信用を失うことになってしまいます。
SEO対策が必要
PWAでは検索上位に表示されることで新規ユーザーの獲得にも繋がります。
ただし、検索上位になるにはSEO対策が必要です。
SEO対策は、検索エンジンのアルゴリズムの変更により左右される部分が大きいため、その都度対策が必要になり専門の人員も必要になってくるでしょう。
既存のアプリがある場合は両方のメンテが必要
もし既にアプリがある場合、引き続き管理しメンテナンスしていく必要があるため、両方を管理していく必要があります。
アプリとPWAでは全く違う開発になるため、人員もそれぞれに必要なのでコストがかさむ可能性も高いです。
もしアプリはなく、最初からPWAの開発に取り組む場合は、1点に集中でき、管理も1つのみなのでコストパフォーマンス的にはとても良いです。
PWAとは？実装成功事例
PWAとは具体的にどのようなWebサービスに活用されているのでしょうか？
実際にPWAを導入した「スケコン」による成功事例をご紹介します。
スケジュール管理サービス「スケコン」によるPWA実装例
「スケコン」とは、Googleカレンダーと連携して、AIが予定の管理や複数人との日程調整を最短10秒で行ってくれる、最先端のスケジュール管理ツールです。
日々のスケジュール管理を紙ベースで行うのはもちろん大変ですが、Web上でも毎回ブラウザから開くのは手間がかかりますよね。
そこで「スケコン」が導入したのがPWAです。
Webサイトを「アイコン化」する方法は、驚くほど簡単。
「スケコン」のWebサイトを開いて表示されるポップアップから「インストールする」をタップするだけ。
5秒とかからずデスクトップ上にアイコン設置が完了します。
PWAとは「アプリ化により、既存のWebサイトの使い勝手をアップさせる仕組み」と言えるでしょう。
多忙なモバイルユーザーに指示される「スケコン」のPWA
「スケコン」は、PWAを導入することにより、多忙な「モバイルユーザー」から支持されています。
サイトへのアクセスが高速化する上に、スケジュール調整もAIが行ってくれます。そのため、モバイルユーザーとスケコンの相性は抜群。
「アクセスの高速化」と「AI技術」との相乗効果により、モバイルユーザーからの支持が増しています。
PWAを活用してスマホをもっと便利に使おう
PWAとはどのような仕組みなのか、「スケコン」の実装成功例も取り上げて紹介してきました。
Webサービスの提供者とユーザーの双方に多くのメリットがあり、海外ではPWAサイトはかなり普及しています。
一方、日本での普及率はまだまだ高くはありません。
だからこそ、他社より早く導入することで、ユーザーへアピールするチャンスをつかむことができます。
ぜひ「スケコン」での成功例も参考にしながら、PWAの導入にトライしてみてください。
