ウェブトラフィックの半分以上がモバイル機器からのものである現在、オンラインビジネスがモバイル機器でのユーザー体験をより良いものにする方法を模索しているのは当然のことです。
ユーザーの要求に応えるためには、オンラインビジネスは、オンラインでの購入を迅速、簡単、便利にするアクセス可能なインターフェイスを提供する必要があり、そうでなければ取り残されてしまう危険性があります。
そこで、(Progressive Web Apps)プログレッシブウェブアプリの出番です。
ここでは、PWAとは何か、PWAはどのように機能するのか、そして2021年に使用されるであろう最高のPWAの例をいくつか紹介します。
目次
1. Progressive Web Appsとは？
プログレッシブウェブアプリケーション（PWA）は、最新のテクノロジーを利用して、ウェブアプリとモバイルアプリの長所を組み合わせたもので、実際のネイティブアプリに匹敵する操作性と機能性を備えています。
最近の進歩により、ほとんどのウェブサイトをプログレッシブウェブアプリに変えることができるようになりました。つまり、開発に時間がかかる実際のアプリに比べて、PWAはかなり短期間で構築することができます。
さらに、PWAは、プッシュ通知やオフライン機能など、ネイティブアプリのすべての機能を提供します。PWAは、遅いネットワークや接続性の欠如など、さまざまな問題を解決することができます。
2. PWAとネイティブウェブアプリの違いは何ですか？
AppleのApp StoreやGoogleのPlay Storeからダウンロードするようなネイティブアプリは、多くの場合、そのプラットフォームに特化したプログラミング言語で作られています。
iOSアプリであればSwift、AndroidアプリであればJavaとなります。そのような特定のプラットフォーム向けのアプリを作る場合、その言語を知っておく必要があります。
作ったアプリは、App StoreやPlay Storeで、それぞれのプラットフォームの基準に合っているかどうかを審査してもらう必要があります。このプロセスには数ヶ月かかることもあります。
プログレッシブウェブアプリは、このような長いプロセスを回避することができます。なぜなら、PWAは、新しいウェブ機能を備えたウェブサイトの延長にすぎないからです。
PWAはブラウザ上で動作し、ホーム画面に保存されるとネイティブアプリのように機能します。PWAの性能が高ければ、ユーザーはウェブアプリを使っているのか、ネイティブアプリを使っているのか分からなくなるでしょう。
もちろん、注意すべき点もあります。ブラウザはこのための技術をいち早く採用しましたが、いくつかの制限があります。
iOSでは、必要な技術がSafariで不安定に動作することがあります。Apple社はまだすべてをサポートしているわけではないので、どこでも同じ体験を実現するのは難しい課題です。
3. PWAの特徴
- レスポンシブ
どんな形にもフィットする能力 - 接続性の独立性
サービスの低下や接続性の欠如があっても、オフラインで動作する能力。 - アプリのようなインターフェース
アプリのようなインタラクションとナビゲーションを採用しています。 - バックグラウンドアップデート
セルフアップデートにより、PWAは常に最新の状態に保たれます。 - 発見可能
検索エンジンはPWAを見つけることができます。
4. レスポンシブWebサイトとネイティブアプリとPWAの比較
2021年にデジタルで優れたパフォーマンスを発揮し、優れたユーザーエクスペリエンスを提供するためには、プラットフォームが考慮すべきいくつかの要素があります。
モバイルフレンドリー、SEO最適化、オフラインモードなどは、2021年にプラットフォームが考慮すべき要素のほんの一部です。
ここでは、レスポンシブWebサイト、ネイティブアプリ、PWAをそれぞれ比較した表をご紹介します。
Source: coredna
5. 2021年に使うプログレッシブWebアプリのベスト
1. ツイッター
2017年4月にTwitter社が初めて導入した「Twitter Lite」は、最新のWebサイトとネイティブアプリの両方の輝かしい機能を備えたプログレッシブWebアプリです。
Twitter Liteでは、ネイティブアプリを経由した以前の状態よりも80％近く多くのツイートが記録され、バウンス率も20％減少したとのことです。
2. ピンタレスト
Pinterestは、クリエイティブなアイデアを探しているほとんどの人が利用しているウェブサイトです。
その人気にもかかわらず、Pinterestはモバイルユーザーのうち、サインアップ、ログイン、アプリのインストールに結びついたのはわずか1％であることがわかりました。これは、モバイルでのパフォーマンスの低さが原因でした。
PWA技術を導入すると、素晴らしい結果が得られました。モバイルウェブでの滞在時間は40％増加し、ユーザー生成広告収入は44％急増し、コアエンゲージメントは60％向上しました。
3. Lancôme
高級化粧品ブランドのLancômeは、トラフィックと売上を増加させるアプリのようなソリューションを必要としていました。2016年には15％しかなかったコンバージョン率を上げたいと考えていたのです。
2021年、LancômeのPWAは、お客様がインターネットの接続状態が悪くても商品を検索できるようにし、ユーザーを惹きつけるプッシュ通知を導入しました。
PWAを導入した後、Lancômeはコンバージョン数が17%増加し、iOSのモバイルセッションが53%増加しました。
PWAはLancômeにとって大きな成功であり、化粧品大手のLancômeがモバイルウェブで大きな進歩を遂げることに貢献している。
4. Uber
Uberは、ネットワークの速度や場所に関係なく、すべてのユーザーが迅速に乗車を要請できるようにすれば、自社のビジネスの可能性に気付きました。
これを実現するために、Uber は低速ネットワークで動作する PWA を作成しました。
Uber PWAは、すべての最新ブラウザで利用可能なアプリのようなエクスペリエンスを実現することを目的としており、特にローエンドデバイスのユーザーに役立つものとなっています。
これも理にかなっています。慣れない場所でインターネットに接続できずに困ったことがある人は多いはずです。
Uberは、PWAの軽量化を実現しました。中心となるライドリクエストアプリケーションの容量は50kbで、低速のネットワークでも素早くアプリを読み込むことができます。
これは、Uberの戦略的な動きであり、顧客のユーザーエクスペリエンスを向上させるものであることは間違いありません。
5. Starbucks
スターバックスのPWAは、2015年にモバイルアプリをローンチした後に開発されました。しかし、このアプリは、ネットワーク接続が遅く、パッチワークのような地方の市場には適していませんでした。
スターバックスは、オフラインでもメニューを閲覧したり、車に商品を追加したりしてもらいたいと考えていました。そのためには、PWAの開発が唯一の論理的な方法でした。
PWA自体は非常にユーザーフレンドリーで反応が良く、スターバックスは強力なインターネット接続を持たない顧客を引き付けることができました。
6. Spotify
ストリーミングの巨人もPWA運用になりました。
PWAへの移行は、当初、AppleのApp Store手数料30％をめぐってSpotifyとAppleの間で意見の相違があったことから検討されました。Spotifyは、今こそ自社アプリのPWA版の開発を始めるべきだと考えました。
PWA版は、独自のUIでかなり高速化されています。唯一の欠点は、SpotifyのPWAはオフラインでは利用できないことです。
7. Trivago
TrivagoはPWA技術を用いて、旅行者がホテルの価格を比較したり、レビューを読んだり、選択したホテルを予約したりするのに便利な研究所のインターフェースを提供しています。
また、ホテルオーナーの検索マーケティングの労力を最小限に抑えることにも貢献している。
PWA導入後、Trivagoのホテル検索エンジンは、ネイティブアプリよりもはるかに高いコンバージョン率を記録しました。また、ホテル予約のCTRも97%と飛躍的に向上しました。
8. Forbes
Forbesは、モバイル体験のリブランディングを図るためにPWAを導入しました。現在のモバイルサイトよりも高速なソリューションを必要としていました。
現在、ForbesのPWAはユーザーにとって魅力的で、よりパーソナライズされたものになっています。デザインは新しいフォーマットで、Snapchatのストーリーズのフォーマットに似ています。
PWAを開始して以来、Forbesはユーザーあたりのセッション数が43%増加し、スクロール深度が3倍になったことを記録しています。
9. Tinder
Tinderは、自社のモバイル体験が競合他社に比べて大きく遅れていることを知り、改善を求めていました。
Tinderは、顧客にスピードと利便性の向上を提示するためにPWAを開発し、より速く、よりスムーズに、より受容的な体験を提供できるようにした。
JavaScriptの使用により、直帰率は10.15%減少し、クリック率は11.3%増加しました。
10. Financial Times
PWAを活用したもう1つのニュースの巨人! Financial Timesは、顧客により良い体験を提供する目的でPWA技術を採用しました。
このPWAはオフライン機能に焦点を当てており、記事の高速な読み込みと切り替えを可能にしています（オフラインモードであっても、最初に読み込まれ、ローカルに保存されます）。
Financial TimesのPWAは、モバイルでわずか1～2秒でアクセスできます。
6. プログレッシブウェブアプリに投資すべきか？
多くのユーザーが、時間のかかるインストールをせずに、ネイティブアプリの機能性を求めている中、PWAは歓迎すべき代替手段を提供しています。
デジタルエージェンシーとして、PWAの導入を決定したクライアントは、新規ユーザーを獲得するためにSEOのポジションを上げたい、高度なアプリの機能性を求めていない/必要としていない、または独自のネイティブアプリを開発したくないと考えていることに気づきました。
PWAの開発は、正しく計画されていなければリソースを無駄にしてしまいます。しかし、信頼できるパートナーがいれば、プログレッシブウェブアプリの開発は成功します。
