モダンWebに欠かせない、PWAのメリットを解説

ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。

独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。

はじめに

こんにちは。Wakka Inc.でWebディレクターをしている安藤です。

これまでVue.jsの基本的な解説や、ヘッドレスCMSについてもブログでお伝えしてきました。

今回はこうしたモダンWebのひとつともされているPWAについての解説です。

PWAとは

Progressive Web Apps(PWA)は、従来のWebサイトやWebアプリケーションをまるでスマホアプリのように利用できるようにする技術のことを指します。

ネイティブアプリ(モバイルアプリやスマホアプリとよばれるもの)は本来それぞれのOSごとに存在するプラットフォームからダウンロードするものでした。iOSであればApp Store、AndroidだとGoogle Playといったプラットフォームです。

PWAはこういったアプリの技術ではなく、一般的なWebサイトと同様の技術で構築されています。Webサイトではありながら、APIを使ってプッシュ通知などを可能にしているものです。

PWAを実装することによってスマートフォンの画面にアイコンを追加したり、プッシュ通知ができるようになり、ネイティブアプリ化せずともユーザーの体験をリッチにしたり利便性を向上することが可能になります。

PWAの特徴

大きな特徴としては以下のようなものがあります。

・SPAなどを利用した高速動作が可能

・プッシュ通知機能を実装可能

・ホーム画面にアイコン登録が可能(インストール)

・キャッシュ利用が可能

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

前述の通り、PWAはネイティブアプリとは違うものです。そのため従来のようにApp Storeなどのアプリストアを通すための構築手法は取られずAppleやGoogleのレギュレーションに縛られることなく自由に構築ができます。

技術的にはWebサイトと同様のものであるためURLからアプリを起動できますし、キャッシュが発生するため読み込み速度が早いことも特徴のひとつです。

また、PWAはSPA(シングルページアプリケーション)で開発する場合がほとんどです。こうしたモダンWeb開発では当然ながらサイトの表示スピードが非常に早く、様々なjs技術に対応できるので利用しているベンダーに確認してみるのも良いかと思います。

当社のモダンWebについての解説もコチラからご確認いただけます。

PWAのメリット

PWAを実装するメリットは様々ありますが、ここではそのなかの一般的に知られている内容をピックアップしていきます。

検索エンジンからの流入

PWAはネイティブアプリと違い、Web上に公開されているサイトという扱いになるので、検索エンジンにインデックスされることになります。

そのため、バイネームでの検索にはもちろんですが関連ワードでの検索にヒットする可能性があります。

つまり、ネイティブアプリに比べるとSEO的に優位であるといえるでしょう。

開発コストの削減

ネイティブアプリと比べると、フロントエンド開発だけで完結するPWAはコスト的に優位といえます。

さらにApp Store やGoogle Playといったプラットフォームの仕様変更やハードのバージョンアップに左右され辛いという特徴をもつことや、そもそも両OSに対応させる考慮が不要になるため初期開発だけでなく保守運用においてもコスト削減を見込むことができます。

URLからのアプリ起動

前述していることではありますが、URLから起動が可能ということはネイティブアプリに比べるとインストールまでの複数ステップと比べるとそれ自体を省略することができます。
ECのカゴ落ち同様にアプリストアでのインストール率はこの複数ステップごとに離脱率が非常に大きく、これを省略できることはサービス提供側にとって大きなメリットになります。

また、URLからの起動ということで他者への伝達手法についてもURLでのシェアが可能です。SNSや広告でもワンステップでの導入訴求が可能になります。

PWAのデメリット

次にPWA開発でのデメリットです。多くのメリットがあると思われているPWA開発ですが、やはりデメリットも存在します。開発を頼んでからそのデメリットに気付いてしまったりしないようご注意ください。

ブラウザ依存が発生する

OSごとに開発するネイティブアプリと比べるとPWAはWebサイトと同様の技術で構築されるため、ブラウザでの表示や動作に若干の違いが生じます。それぞれの環境で実装可能な機能に制限が出る可能性があるため、事前によくチェックをしてください。

iOSでのプッシュ通知ができない(2023年iOS16で解消予定)

2022年5月現在、ネイティブアプリでは可能なプッシュ通知ですがiOS端末ではPWA開発でのプッシュ通知に対応していません。
日本国内ではまだiOSが非常にシェアが高いため、導入においてこのiOSでのプッシュ通知が問題になることが多いです。

これに対し、Appleでは2023年リリースのiOS16/Safari16で対応可能となりました。

出典：https://www.apple.com/ios/ios-16-preview/features/

ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。

独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。

PWAの導入事例

ネイティブアプリを提供しているサービスからも多くのPWAがリリースされています。
ネイティブアプリ・PWAにはそれぞれのメリット・デメリットがあるのは前述の通りですが、どういったサービスがPWA展開をしているのか是非チェックしてみてください。

Spotify

サブスクリプションの音楽サービスでおなじみのSpotifyもPWAを提供しています。

SpotifyのPWAはネイティブアプリ同様に音楽プレーヤーのUIをそのまま同じように提供しており、PC、SPブラウザでもアプリと同様のUXを体験できます。PWA Spotifyはネイティブアプリよりも大幅に高速で動作します。

PWAの展開後、無料版から有料版へのコンバージョンは大幅にアップし、平均リスニング時間も同様に大幅に増加したようです。PWAでの開発としては大きな成功事例として知られています。

Twitter

TwitterもPWAをリリースしています。PWA版Twitterの名称はTwitter Liteです。

TwitterのWebサイトには、従来何百万人のユーザーにリーチができていますが、Web上から再度エンゲージメントさせるのは非常に困難な作業でした。

PWAではSPホーム画面に追加するプロンプトを実装ができ、これまでのWebからのエンゲージメント獲得効率を大幅に改善することができています。

出典：https://web.dev/twitter/

ECサイト

海外事例として多いのが各種EコマースサービスのPWA実装です。BtoC商材が中心となるECサイトでは、Webよりもモバイル経由のアクセス比率が多く、表示速度の問題やUI/UXによってコンバージョン率が大きく変動します。ECのPWA実装により高速化・UXの最適化が果たされ結果的にCVRが劇的に増加する事例は多くPWA実装による恩恵を最も受けるサービスとして注目されています。

ECサービス例としては、中国のAlibaba、インド最大手ECのFlipcart、シンガポールに本社を置くアジア最大級のEC、Lazadaなどです。

PWAの動向、将来性

2015年から徐々に浸透してきたPWAですが今後の動向としてはどういった予測になっているのでしょうか。これから実装される方やご検討中の方に向けてこのあたりを少し解説してみたいと思います。

PWAの大きな特徴としてはWebベースということを申し上げましたが、この特徴を活かしてブラウザが利用できるPCやSP以外の端末でPWAを活用する事例が増えてきました。

APIを使った機能開発も行われることから、ヘッドレスCMSのようにこうした他端末への展開も今後は増えてくるものと考えられます。
モダンWebの広がりとともにPWAもWeb系開発における開発手法のひとつとして選択されることが多くなっていくのではないでしょうか。

また、PWA実装において大きな障壁となっていたiOSでのプッシュ通知仕様ですが、iOS15.4でPush APIの項目追加されたことが知られています。(設定は無効状態) 

さらに、2023年iOS16で対応される予定になりました。そのため今後iOSにおいてもWebベースからのPush通知に対応されるとみられており、iOSユーザーの多い日本国内においては普及の追い風になるのではないでしょうか。

さいごに

PWAについて解説してきました。PWA自体は開発会社や制作会社のなかではかなり一般的な技術として知られるようになってきましたが、まだまだ一般のユーザーには知られていない技術ではないでしょうか。

これは日本国内にはまだiOSユーザーが多く、プッシュ通知での恩恵やインストールのしやすさ・わかりやすさが浸透していないためだと思われます。

2023年のiOSでの通知開始やモダンWebの一般浸透などがすすむ近年はこの風向きが一気に変わってくると思います。

ぜひみなさんも先駆けてPWA実装についてご検討いただき各サービスのグロースを推進してみてください。

当社Wakka Inc.では、モダンWebでのフロントエンド開発、伴走型サービスグロース支援などを提供しています。この機会にぜひチェックしてください。

ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。

独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。