おすすめDXコンサルティング会社一覧 » アプリ開発によるDX促進について » アプリの開発技術 » Webとアプリ、それぞれのメリットを活かせるPWA開発

Webとアプリ、それぞれのメリットを活かせるPWA開発

PWA開発とは

PWAとは「Progressive Web Apps」の略であり、WebページやWebアプリをスマートフォン向けアプリのように利用できる技術のことをいいます。アプリをインストールしなくてもスマートフォンのホーム画面にWebサイトのアイコンを表示でき、プッシュ通知やキャッシュ機能も利用できる技術です。

PWA開発のポイント

Webとアプリのいいとこどり

PWAはWebページのメリットやネイティブアプリのメリットをそれぞれ取り込み活かすことが可能です。具体的なメリットは後述しますが、それぞれの利便性をうまく取り込むことで、ユーザー側の使いやすさと認知の高めやすさを両立しています。

スマホの普及に合わせて拡大

近年ではスマートフォンが非常に普及しており、今や1人1台は持っているような時代になっています。そのためスマートフォンユーザーにメリットの多いPWAも徐々に注目されてきています。

より利便性が高まる技術

PWAが普及するとアプリのインストールやオンライン環境など、従来必ず必要であったプロセスを省くことが可能になります。そのため開発側としても広めやすく、ユーザー側も使いやすいというWin-Winな環境を構築できます。

PWA開発でできること

プッシュ通知

プッシュ通知はいわゆる「お知らせ機能」であり、アプリケーションの更新情報などを自動で通知してくれる機能のことをいいます。例えばSNSへの新着メッセージやメールの受信など、アプリ内での更新された情報がスマートフォンの画面に通知されます。プッシュ通知はアプリを起動していない状態であっても機能するものですので、Webブラウザを運用するよりもユーザーとの接触回数を増やすことが可能になります。

端末へのアイコン設置

スマートフォンのホーム画面にアイコンを設置することが可能な点もPWAの大きな特徴です。ネイティブアプリのような形でアイコンになり、ユーザーはそのアイコンをタップすることで起動が可能になります。アイコン化が可能だと、検索エンジンなどの外的要因による影響を受けずにユーザーがサービスを利用できるため、Webページへのアクセスやコンバージョン拡大などにも期待できます。

ブラウザのような利便性

ネイティブアプリのような機能に加え、一部ではブラウザの利便性も取り込まれています。具体的にはWebで表示されたデータを一時的に端末へ保存する「キャッシュ」の利用であったり、URLを利用したアクセスが可能な点などがあります。これらの利点により、表示速度のアップやページの拡散性なども担保することが可能です。

PWA開発のデメリット

開発のデメリット

開発や運用に関するデメリットとしては、開発コストがかかる点があります。ネイティブアプリに比べると安価に開発できますが、Webページのみの展開と比較すると若干コストが高くなってしまいます。また、普及率がそれほど高くない状況であるため開発事例が少なく、導入に二の足を踏むプロジェクトもあるでしょう。また、ネイティブアプリと異なる点でもありますが、GooglePlayやAppStoreなどのユーザーがアプリを検索するプラットフォームからのユーザー獲得ができません。ネイティブアプリとPWAの両刀運用も考えられますが、コストがより多くかかってしまいます。

ユーザーのデメリット

ユーザー側でのデメリットとしては、更新やアップデートに弱い点があります。キャッシュ機能を活用して利便性を高めるPWAですが、Webページの更新などがあるとキャッシュデータの一部が使えなくなり動作が遅くなる恐れがあります。また、iOSでは一部の機能が非対応となっていることもあり、PWAのメリットが享受できない可能性がある点もデメリットといえるでしょう。

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

特定のデバイスやOSで実行が可能であるいわゆる「ネイティブアプリ」とPWA開発の違いは、プラットフォームに依存しない開発や外部に対して運用手数料を支払う必要がないため効率的に開発運用に取り組める点などがあります。また、ネイティブアプリであればインストールが必要になるとともに、アプリの種類によってはiOSとAndroidの両方に対応していないなど、OSによる制約がある場合もあります。このようにユーザー側に制約や条件がかかってしまうという点がネイティブアプリにはありますが、PWA開発であればそれらのデメリットを解消することが可能になります。「利用の手軽さ」という強みを得ることで、より多くのユーザーに普及させられる可能性が高まります。

PWA開発が注目を集める理由

PWAはここまで説明した通り、いわば「Webとアプリのハイブリッド」であるといえるでしょう。今後導入事例が増えるにつれ活用するコンテンツが増えることが予想されていますが、「よりユーザーが利用しやすい」という環境を作れる点が、PWAに注目が集まっている理由であるといえるでしょう。これからの時代はより利便性が求められ、競合となるコンテンツもどんどん便利になっていきます。このように、ユーザー側の快適性を高められる技術が求められる世の中になってきているのです。

PWA開発の開発事例

Rettyグルメニュース

日本最大級の実名グルメサービスのニュースメディア「Rettyグルメニュース」においてPWAが導入された事例では、モバイルのWebブラウザにおいてネイティブアプリのようなスピーディな動きを実現しています。記事を読む際のストレスを大幅に軽減することで、より多くの記事を快適に楽しんでもらえる環境の構築に成功しています。おすすめの記事は初めての閲覧であっても高速で表示できるなど、ユーザー側の利便性を大きく高めています。
参照元:https://prtimes.jp/main/html/rd/p/000000051.000004025.html

SUUMO

不動産・住宅サイト「SUUMO」では、スマートフォンWebサイトに「Service Worker」を利用したプッシュ通信機能を実装しています。従来、プッシュ通信にはアプリケーションのインストールが必要でしたが、この技術を導入することでWebブラウザ単体での通知を可能にしています。これによりアプリを入れていないユーザーでもより手軽に物件情報へとアクセスすることが可能になりました。SUUMOの本対応は、Service Workerにおけるプッシュ機能の商用利用は日本初とのことでした。
参照元:https://www.recruit.co.jp/newsroom/recruit-sumai/press/151216_serviceworker_push.pdf

日本経済新聞社

140年以上の歴史を持っている日本経済新聞、いわゆる「日経新聞」は、日本で最も権威があるメディアの一つです。紙媒体の新聞のほか、毎月非常に多くのユーザーがデジタルの媒体に訪れています。日経ではよりよいユーザーエクスペリエンスとWebにおけるビジネス加速のため、PWAを立ち上げパフォーマンスの改善を実現しました。結果としてオーガニック流入やコンバージョン率、1日あたりのアクティブユーザーなど数多くの指標が向上しています。
参照元:https://developers.google.com/web/showcase/2018/nikkei?hl=ja

Twitter

世界で多くのユーザーが利用するSNSであるTwitterでも、PWAが利用されています。Twitterはアプリでの利用が一般的ではありますが、中にはブラウザから利用しているユーザーもいるためユーザーがブラウザを閉じてもプッシュ通知が届くよう機能が実装されました。また、キャッシュ機能の活用によりスピーディな表示も実現し、ログインユーザーの平均読み込み時間も削減することができました。
参照元:https://developers.google.com/web/showcase/2017/twitter

Pinterest

Pinterestの新しいモバイル体験がProgressive Web Appで始まった事例です。JavaScriptバンドルを小さくしてモバイルハードウェアで高速にロードするようにしたり、Service Workerを使って不安定なネットワークでも動作するようにしたという事例になっており、さまざまなパフォーマンスの改善を実現しています。結果として古いモバイルサイトやPC版Webサイト、ネイティブアプリとの比較を行うと「5分以上滞在したユーザー数」「ユーザー経由の広告売上」「広告のCTR数」「コアエンゲージメント」などといった各種指標がアップしています。
参照元:https://takeshiamano.medium.com/pinterest-pwaのパフォーマンス改善事例-8e487d32ac20

【業界別】
アプリ開発による
DX取り組み事例

固定バナーpc