プログレッシブウェブアプリ:次のモバイル体験?

公開: 2017-08-15

まだ聞いたことがないかもしれませんが、プログレッシブWebアプリ(PWA)はモバイル環境を変えようとしています。 2015年にGoogleによって導入されましたが、PWAは今年人気を博しています。 それで、それが大流行する前に、プログレッシブWebアプリとは正確には何ですか?


PWAとは何ですか?

what-is-a-pwa

最も単純な意味では、PWAはWebを介して配信されるモバイルアプリです。 このテクノロジーにより、PWAはブラウザーでアプリのようなエクスペリエンスを提供できます。 アプリスタイルのナビゲーションとジェスチャーを提供するアプリシェルを使用しているため、ネイティブアプリのように感じられます。 プログレッシブアプリはウェブ上に構築されているため、特定のデバイスに関連付けられていません。 PWAは、デスクトップ、モバイル、タブレット、または次に来るものを含むすべてのデバイスでシームレスかつ同一に表示されます。

ios-android

さらに、サービスワーカーは、ネットワークの品質に関係なく、プログレッシブWebアプリを即座にロードできるようにします。 つまり、このWebアプリは、オフラインで接続性の低い領域で動作するように設計されています。 事前キャッシュの助けを借りて、それは最新の状態に保たれ、起動時に最新のコンテンツをユーザーに提供します。 アプリと同様に、ユーザーはPWAをホーム画面に保存していつでもアクセスできます。 アプリストアからダウンロードする手間をかけずに、インストール可能にします。

PWAとネイティブモバイルアプリ

ネイティブvs-pwa

ネイティブモバイルアプリは最高品質のユーザーエクスペリエンスを提供しますが、ユーザーと開発者の両方に摩擦が伴います。 PWAとネイティブアプリの最大の違いの1つは、「アプリストア仲介者」の存在です。 プログレッシブウェブアプリの場合、この仲介者は完全に排除されます。 アプリ開発者にとって、アプリストアがないということは、iOSとAndroidのルールとガイドラインによる制限がなくなったことを意味します。 開発者は承認プロセスを経る必要がないため、準備ができたらすぐにアプリを使用できます。 また、改訂されたアプリのバージョンはすべての人が即座に自動的に利用できるようになるため、アプリを手動で更新する必要もありません。

エンドユーザーの観点からは、アプリストアからダウンロードしなくてもPWAにアクセスできます。 代わりに、PWAはリンク可能です。つまり、誰でもURLから直接アプリを起動できます。 ソーシャルメディア、メール、テキストメッセージ、オンライン広告で共有したり、QRコードにリンクしたりすると、ユーザーはすぐにアプリに没頭します。

この摩擦をすべて取り除くことで、ユーザーがアプリにアクセスしやすくなります。 次の図が示すように、ネイティブアプリのダウンロードプロセスのすべてのステップで、ユーザーの20%が失われます。 消費者は、アプリストアでアプリを見つけてダウンロードするのを待つのは面倒で、アプリの使用を開始する前にすべてのストレージスペースを使い果たすのではないかと心配しています。 PWAは、実行する必要のあるステップの量を大幅に削減するため(基本的にはワンステップのプロセスになります)、実際にアプリを使用する可能性がはるかに高くなります。 実際、モバイルアプリの4倍の数のウェブサイトを使用しているため、ウェブベースのアプリを使用する潜在的なユーザーベースははるかに大きくなります。

pwa-flow

アプリ開発者にとってのもう1つの大きな違いは、アプリをiOSまたはAndroidに適合させる必要がないことです。 PWAがWebテクノロジーを使用しているという事実は、ほとんどのブラウザーでクロスプラットフォームで動作し、オペレーティングシステムを方程式から外すことを意味します。 1つのプログレッシブWebアプリを作成すると、すべてのデバイスで同じように表示され、実行されます。 ユーザーは、アプリを起動するために選択したどのデバイスでも、まとまりのあるエクスペリエンスを体験できます。

最後に、PWAは非常に発見可能です。 つまり、検索エンジンで簡単に識別できるため、他のWebコンテンツと同じように検索結果に表示されます。 PWAは従来のSEOで処理されるため、アプリ名だけでなく、アプリ内のコンテンツに対してもインデックスが作成されます。 特にアプリとしてではなく、誰かの「質問」に「答える」ことができるコンテンツとして扱われます。

これをコンテキストに入れる、検索60%は現在、モバイルデバイスからものあり番号c o n t i n u e s t o g rowです 人々はモバイルデバイスを積極的に使用してコンテンツを検索しているので、それらの検索結果にPWAが表示されることを想像してみてください。 たとえば、誰かがその地域でサロンを探している場合、その人はGoogle検索バーを使用して問い合わせを開始します。 検索結果には、Yelpやサロンのウェブサイトなどのディレクトリが表示される可能性があります。 サロンビジネスを所有している場合、PWAはこれらの検索でランク付けされ、検索結果からアプリに直接顧客を誘導する可能性があります。 この最初のタッチは、顧客を変える機会です。 アプリのような体験により、顧客はモバイル用に構築されたUIからサロンの予約をスケジュールできます。 これは、Web検索から始まり、アプリで完了したタスクで終わるシームレスなプロセスです。

PWA対モバイルウェブサイト

PWAはネイティブアプリとモバイルウェブサイトのハイブリッドですが、レスポンシブウェブサイトとどのように異なりますか? 「昔ながらの」モバイルウェブサイトとは異なり、PWAは高速です。 ロードに3秒以上かかる場合、ユーザーの53%がサイトを放棄することに注意してくださいPWAは、ネットワークの状態に関係なく即座にロードされ、応答の速いインターフェイスを提供します。 これにより、モバイルWebサイトのようにネットワークへの依存がなくなり、ユーザーに即座に信頼できるエクスペリエンスが保証されます。 PWAもバックグラウンドで更新されるため、ユーザーは新しいコンテンツが読み込まれるのを待つ必要はありません。

さらに、従来のモバイルWebサイトは静的な情報に重点を置いていますが、PWAはユーザーに動的な機能を提供できます。 PWAは、没入型のフルスクリーンエクスペリエンスを提供し、顧客がモバイルフードを注文したり、ロイヤルティプログラムに参加したり、企業に連絡したりできるようにします。 また、ネイティブプッシュ通知と同様に、Webプッシュ通知を使用してユーザーを再エンゲージすることもできます。

誰がすでに成功を見ていますか?

ランコムpwa

トラフィックと再エンゲージメントの両方を促進するために、化粧品ブランドのランコムはプログレッシブWebアプリを立ち上げ、アプリのような高速なエクスペリエンスを顧客に提供しました。

ランコムは、2016年に初めてモバイルトラフィックがデスクトップトラフィックを上回ったことを確認しました。モバイルサイトの訪問者数が増加しているにもかかわらず、モバイルコンバージョン率はデスクトップのコンバージョン率と一致しませんでした。 デスクトップのショッピングカートの38%が注文につながったのに対し、モバイルウェブのコンバージョン率はわずか15%でした。 これらの数字は、顧客がモバイルデバイスを介して購入しようとしたときに重大な障害を経験していることを明らかにしました。

当初、ランコムはeコマースアプリをソリューションと見なしていました。 ただし、アプリは定期的にアクセスする顧客にのみ意味があることを理解していました。 モバイルの買い物客は、毎日はもちろん、毎週eコマースアプリに戻ることはないため、ランコムアプリをダウンロードする価値はわかりません。 同社は、すべてのデバイスで適切なユーザーエクスペリエンスを構築したいと考えていました。 Googleよると、「同社は、ネイティブアプリで実現できるのと同様の、高速読み込みで魅力的なe-mobileエクスペリエンスを必要としていましたが、モバイルWebを介して誰もが見つけてアクセスできるものも必要でした」。 プログレッシブウェブアプリに入ります。

結果は驚異的です:

  • ページがインタラクティブになるまでの時間が84%短縮されます
  • コンバージョンが17%増加
  • iOSでのモバイルセッションが53%増加
  • プッシュ通知の18%のオープン率
  • プッシュ通知をタップした消費者の8%が購入

とにかく、PWAは大きな成功を収めており、美容の巨人がモバイル革命に大きく前進するのに役立っています。

未来はどのように見えますか?

ネイティブモバイルアプリが絶滅することは決してありませんが、PWAは、魅力的で簡単に採用できるモバイルエクスペリエンスを顧客に構築しようとしている企業に理想的なソリューションを提供できます。 PWAは、Webのすべての共有可能性とネイティブアプリのすべての機能を備え、両方の長所を提供します。 Bizness Appsは2011年からウェブアプリに取り組んでおり、この新しいテクノロジーに興奮しています。 最終的に、ネイティブ機能をWebアプリに実装できるようになります。 私たちは、モバイルアプリとモバイルウェブサイトが1つになるアプリの未来の一部になります。