モバイルの顧客をコンバージョンに導くのに苦労していますか? それとも、顧客がウェブサイトをアプリのように使用できるようにしたいと考えていますか? e コマース PWA は、Web とモバイルの間のギャップを埋め、売上を伸ばし、CX を劇的に改善するために必要なソリューションとなる可能性があります。
最新の PWA を使用すると、電子商取引企業は、従来の Web デザインの最も有利な属性とプラットフォーム固有のアプリケーションに固有の属性を融合することにより、最新の開発手法を使用できるようになります。
内容：
e コマース PWA: 立ち上げる価値があるのはなぜですか?
優れた e コマース PWA を構築するにはどうすればよいでしょうか?
e コマース向け PWA: 潜在的な危険と落とし穴
PWA機能
eコマースプラットフォームベースのPWAソリューション
eコマースPWAの成功事例
EコマースPWAの開発コスト
e コマース PWA: 立ち上げる価値があるのはなぜですか?
Web ブラウザーを介して実行されるコンピューティング タスクが増えるにつれて、オンライン アプリとデスクトップ プログラムの間の境界線が明確ではなくなります。 そして、PWA はこの境界線をさらに曖昧にすることを目指しています。
基本的に、PWA は、スタンドアロンのデスクトップ プログラムとして機能するように構築できる特定の種類の Web アプリです。
PWA を起動しても、スケーラビリティや検索機能などの優れた機能がすべてデフォルトで自動的に提供されるわけではないため、開発チームがこれを適切に実行していることを確認する必要があります。 PWA を開始する準備ができている場合は、以下で説明する基準を満たす必要があります。
では、開発者が実装するために PWA の何がそんなに苦労しなければならないのでしょうか?
優れた e コマース PWA を構築するにはどうすればよいでしょうか?
速度
速度と品質の両方を特徴とする優れたオンライン パフォーマンスは、平凡なパフォーマンスよりも効果的にユーザー エンゲージメントを魅了し、維持します。 ユーザー エンゲージメントを促進するには速度が重要な役割を果たすため、ユーザー中心の指標を優先することが最も重要です。 なぜ気にするのでしょうか？ 当然のことながら、ページの読み込み時間が遅いと、直帰率が 123% 増加します。
どのブラウザでも動作します
PWA はすべての Web ブラウザーで機能する必要があります。 これにより、アクセシビリティが確保され、UX が向上します。 このように、開発プロセスは通常、基本機能の HTML から始まり、次に UX の CSS と JavaScript が続きます。 HTML フォームは、検証と AJAX 送信のための JavaScript を使用した POST リクエストを使用してデータを送信できます。
任意の画面サイズ
PWA はさまざまなビューポート サイズに適応できるため、顧客は、使用されている特定のデバイスに関係なく、さまざまなデバイス間でコンテンツをシームレスに利用できます。 この重要性は、顧客が異なる寸法のデバイス間で同じアプリケーションを利用できるという事実にあります。 コンテンツは、ビューポートのサイズに関係なく一貫性を保つ必要がありますが、その配置には変更が必要な場合があります。
インストール可能
PWA がデバイスにインストールされると、別のウィンドウで開き、デバイスのタスク マネージャーにポップアップ表示されるため、インストールされている他のアプリケーションと同等の動作を示します。 企業のアプリケーション自体をダウンロードすると、何気なく閲覧する場合と比較して、再度アクセスする可能性が高まることが観察されています。 これには、コンバージョン率、平均セッション継続時間、リピート訪問の増加が含まれます。
.jpg)
オフラインで利用可能
PWA は、インターネット接続なしで機能するように設計する必要があります。 顧客は、旅行日程表、搭乗券、メディア ファイル、ソーシャル メディアの投稿、ニュース記事などのさまざまなコンテンツにアクセスできる必要があります。 オフライン認証はセキュリティにとって重要ですが、コンテンツのアクセシビリティと変更可能性はオフライン環境での使いやすさにとって不可欠です。 NoSQL データベースである IndexedDB は、ブラウザベースの方法でデータを保存および同期でき、非同期操作をサポートします。 Service Worker はメディア要素をキャッシュに保存できるため、インターネットがオフの場合でも取得できます。
検索可能
Web サイトへの訪問者の大多数 (50% を超える) がオーガニック検索からのものであるため、PWA の見つけやすさは劇的に向上します。 コンテンツの正規 URL の確立と、検索エンジンによる Web サイトのインデックス作成は、Web サイトの発見可能性を高めるために重要です。
任意の入力
PWA は、マウスやスタイラスなどのさまざまな入力方法をサポートし、画面サイズを無視してユーザーがスムーズに移行できるようにする必要があります。 たとえば、大きなビューポートではタッチ機能をサポートする必要がありますが、小さなビューポートではキーボードとマウスの入力を優先する必要があります。 プログレッシブ Web アプリケーションは、さまざまな入力方法に対応し、プルして更新などの入力固有の機能を使用してユーザー インタラクションを強化する必要があります。
e コマース向け PWA: 潜在的な危険と落とし穴
e コマース PWA の開始を決定する際の懸念事項は何ですか? どのような欠点があり、どうすればそれを回避できるでしょうか?
認識と信頼
PWA に関連する認識と信頼は、PWA が劣ったアプリケーションであるか、そもそもアプリケーションとして認識されていないという一般的な概念によって損なわれ続けています。 ユーザーは、Google Play や App Store などのデジタル プラットフォームでアプリケーションを探すことに慣れており、Web サイトからアプリケーションを直接インストールするという概念に慣れていない可能性があります。 消費者はダウンロードしたアプリケーションのセキュリティを確認するためにアプリ ストアに依存することに慣れているため、信頼は重要な考慮事項です。
インストール
iOS に PWA をインストールするプロセスでは、ユーザーは共有パネルにアクセスし、「ホーム画面に追加」オプションを選択する必要があります。 この手順は、ネイティブ iOS アプリケーションのインストールよりも複雑です。 Safari に インストール前プロンプト イベントを変更するか、プロンプトの言語を「アプリをインストールします」に変更します。
マニフェストの変更
アイコン、名前、スプラッシュ画面などの PWA マニフェストの重要な要素は、PWA のインストール後はすぐに変更できません。 Chrome のデスクトップ バージョンでは最近の進歩があり、アプリケーション名の変更が可能になりましたが、マニフェスト属性の変更の柔軟性が強化されることで、PWA の競争力が強化されます。
スコープ管理
PWA でのスコープ管理は、直感に反する性質のため、課題が発生する場合があります。 末尾のスラッシュの問題はスコープの定義の不一致につながる可能性があり、間違いが発生する可能性があります。 さらに、iOS のコンテキストでは、外部アプリケーションから PWA の範囲内のハイパーリンクにアクセスしようとすると、デフォルトの動作では、指定された PWA の代わりに Safari ブラウザが起動されます。
デバイスへのアクセス
現在の問題は、範囲が制限されていることから生じる固有のセキュリティ上の利点にもかかわらず、連絡先、カレンダー、SMS/MMS、アラームなどのネイティブ サービスへのアクセスを PWA に許可すべきかどうかという問題に関係しています。 PWA でこれらの機能にアクセスできるようにすると、セキュリティ対策が損なわれ、PWA とネイティブ アプリケーションの区別が曖昧になる可能性があります。
iOS のプッシュ通知
iOS 上のプッシュ通知は、最近まで PWA からアクセスできませんでした。 その結果、開発者は iOS ユーザーに重要な情報を伝える手段としてプッシュ通知に依存できなくなりました。 Apple は最近、2023 年から iOS デバイスでプッシュ通知のサポートを提供する意向を発表しました。しかし、多くの消費者は、Web サイトによるプッシュ通知の悪用の結果、プッシュ通知プロンプトに不満を表明しています。 そのため、Web ブラウザには、これらのプロンプトを自動的にブロックするメカニズムが組み込まれています。
PWA機能
PWA は、ネイティブ アプリよりもはるかに軽量であるにもかかわらず、モバイル ネイティブのようなユーザー エクスペリエンスを提供します。たとえば、BookMyShow PWA のサイズは、Android アプリの 54 分の 180、iOS アプリの XNUMX 分の XNUMX です。 これらのアプリは、レスポンシブ Web デザインとプログレッシブ エンハンスメントを利用して、そのビジュアル スタイルと機能をユーザーのデバイスと Web ブラウザの機能に適応させます。
ネイティブ アプリと同様に、PWA は Web ブラウザ経由でインストールされ、モバイルのホーム画面に表示されます。 プッシュ通知、コンテンツの自動更新、アプリのようなナビゲーションとインタラクションはすべて PWA で利用できます。
e コマースの場合、これは、PWA により、さまざまなデバイスやブラウザーにわたってシームレスなデジタル ショッピング エクスペリエンスを作成できるようになり、個別の開発や配布の制限を受けることなく、ネイティブ モバイル アプリの使いやすさとパフォーマンスを提供できることを意味します。
PWA を使用すると、e コマース企業は、あらゆるデバイスの顧客にとって真のアプリのように感じられる、より魅力的なオンライン ストアを構築できるようになります。
PWA の基礎となるもの
- サービスワーカー PWA の展開にはテクノロジーが不可欠です。 プッシュ通知、キャッシュ、オフライン機能を備えた UI は、モバイル アプリのようなものです。
- このアプリケーションには、XNUMXµmおよびXNUMXµm波長で最大XNUMXWの平均出力を提供する Webアプリマニフェスト は、アプリの名前、アイコン、配色を指定する JSON ファイルです。 この機能を使用すると、ユーザーは PWA をブックマークできます。
- プライバシーと安全上の理由から、HTTPS は必須です。
- 必要な HTML、CSS、JavaScript はアプリのシェルに含まれています。 アプリのフレームワークとユーザー インターフェイスはここで設定されます。
- 言うまでもなく、レスポンシブ Web サイトは、さまざまな表示サイズに対応できる汎用性があるため、PWA の完璧な基盤となる可能性があります。
PWA: ネイティブ モバイル アプリとの違い
Google Play と App Store は、それぞれのプラットフォーム用に特別に開発されたネイティブ アプリへのアクセスを提供します。 これらのアプリケーションは、デバイスの機能や API にアクセスするための仲介ソフトウェアを必要としません。
これが、ネイティブ アプリケーションがよりスムーズに実行され、オペレーティング システムとの対話性が向上する理由です。
PWA は、プラットフォームに依存せず、複数のプラットフォームや Web ブラウザーで動作し、自動的にアップデートを取得できる機能が高く評価されています。
e コマース PWA: レスポンシブ Web サイトとの違い
PWA とレスポンシブ Web サイトの主な目的はユーザー エクスペリエンスを向上させることですが、PWA は UI やプッシュ通知などのネイティブ モバイル アプリの機能を模倣します。 また、レスポンシブ Web サイトは、追加のソフトウェアを必要とせずに、複数のデバイス間でシームレスな表示エクスペリエンスを提供することを目的としています。
PWA vs ネイティブ アプリ vs レスポンシブ Web サイト
| 特徴 | PWA | ネイティブアプリ | レスポンシブWebサイト |
|---|---|---|---|
| インストール | 直接インストール可能 | ダウンロードとインストールが必要です | Webブラウザ経由でアクセス |
| プラットフォームの依存性 | ブラウザ上で動作 | プラットフォーム固有 (iOS、Android) | プラットフォームに依存しない |
| – | + | – | |
| プッシュ通知 | + | + | – |
| オフライン機能 | +/限定 | 限定的 | – |
| ユーザー補助 | URL経由 | デバイスにインストール済み | URL経由 |
| 操作方法 | ネイティブアプリと同等 | 特定のプラットフォームのエクスペリエンスに合わせて最適化 | 応答デザイン |
| 更新版 | 自動的に | 自動/手動 | 手動で |
| 性能 | ブラウザのパフォーマンスに依存 | 特定のプラットフォームのパフォーマンスに合わせて最適化 | ブラウザのパフォーマンスに依存 |
| 開発費 | 比較的低い | より高い開発コスト | 比較的低い |
| 販売 | URL経由で共有可能 | アプリストアを通じて配布 | URL経由で共有可能 |
| デバイス機能との統合 | 限定的 | + | 限定的 |
e コマース PWA をゼロから開発しますか? それとも従来の PWA から変換しますか?
現在 e コマース Web サイトまたはネイティブ アプリをお持ちで、e コマース PWA の立ち上げを検討している場合、最初から始めるのが良いのか、それともレガシー アセットを変換するのが良いのか疑問に思われるかもしれません。
一般的に、レスポンシブ Web サイトを変換するのが最も簡単なアプローチです。 コードはすでに Web ベースであり、さまざまな画面サイズに合わせて最適化されています。 ネイティブ アプリを変換するには、Web 上で動作するように既存のコードを更新する必要があります。 e コマース PWA を最初から開発すると、最高のエクスペリエンスが提供されますが、多くの作業が必要になります。
レスポンシブ Web サイトからの変換
長所: 既存の Web コンテンツ/デザインを再利用し、Web 標準に精通している
短所: PWA 機能用に最適化されていないため、実装するには追加の作業が必要になる場合があります
ネイティブアプリからの変換
長所: アプリのロジック、フロントエンドを再利用
短所: PWA 標準に準拠するために更新が必要、Web をサポートするために追加の作業が必要
PWAをゼロから開発する
長所: 最初から PWA 標準に合わせて完全にカスタマイズされています
短所: より多くの時間とコストがかかる
PWA: 他のハイブリッド フレームワークとの違い
PWA は、他のハイブリッド フレームワークと比較して、よりシームレスなユーザー エクスペリエンスを提供する傾向があります。 たとえば、PWA ではオフライン機能が可能で、Web ブラウザ経由でアクセスできますが、一部のハイブリッド アプリはダウンロードしてインストールする必要があります。
PWA vs イオニック
Ionic は、ハイブリッド モバイル アプリを構築するためのフレームワークです。 PWA は互換性のあるブラウザーを備えた任意のデバイスで実行できますが、Ionic はデバイスの機能にアクセスできる、よりネイティブに近いエクスペリエンスを提供します。
PWA vs フラッター
基本的に、Flutter はネイティブ モバイル アプリを構築するためのフレームワークです。 Flutter は Dart プログラミング言語を使用します。 また、PWA はコンテンツ中心のアプリに適していますが、Flutter は複雑で視覚的に豊富なアプリケーションに適しています。
PWA とリアクト ネイティブの比較
React Native は、React を使用してモバイル アプリを構築するためのオープンソース フレームワークです。 React は、PWA のフロントエンドの開発にも使用でき、応答性の高いインタラクティブなユーザー インターフェイスを提供します。
| 特徴 | フラッター | ネイティブに反応する | PWA |
|---|---|---|---|
| デバイスアクセス | YES | YES | 部分的に |
| 言語スタック | ダート | タイプスクリプト | Javascriptを |
| 性能 | 高速/高速 | 高/中 | 中程度/良い |
| オフラインモード | 「鑑定対象外」 | いいえ | YES |
| 速度 | とても早い | 尊大 | 穏健派 |
| コードの複雑さ | ハイ | M | ロー |
| コードの移植性 | グッド | 素晴らしい | グッド |
| 操作方法 | 素晴らしい | グッド | グッド |
| 開発費 | 高価な | 穏健派 | 穏健派 |
| アプリの例 | Google 広告、アリババ | Facebook、Instagram | Twitter Lite、Pinterest、Flipkart |
eコマースプラットフォームベースのPWAソリューション
マジェント PWA スタジオ
PWA は、この目的のために作成されたツールとライブラリのスイートである Magento PWA Studio を利用して構築できます。 このプラットフォームは、React、Redux、GraphQL などの最先端のツールを活用して、応答性の高い強力なオンライン ストアを構築します。
Salesforce Commerce クラウド PWA キット
Salesforce Commerce Cloud プラットフォーム上で e コマース PWA を構築することを検討している場合、Commerce Cloud PWA キットには、開始するために必要なものがすべて含まれています。 応答性が高く魅力的なショッピング エクスペリエンスを提供するという目標を達成するために、このソリューションは React や Vue.js などの JavaScript フレームワークを利用します。
Salesforce Commerce Cloud ストアフロント リファレンス アーキテクチャ (SFRA)
Commerce Cloud の Storefront Reference Architecture (SFRA) は、PWA を作成するためのもう XNUMX つの役立つフレームワークです。 Commerce Cloud の PWA を構築する場合、SFRA フレームワークは強固な基盤を提供できます。 適応性の向上と豊富なパーソナライゼーション オプションは、それが提供する多くの利点のうちの XNUMX つにすぎません。
SAP コマース スパルタカス
SAP Commerce Cloud では、堅牢な SAP Commerce Spartacus フレームワークを利用して PWA を開発できます。 アプリケーションのフロントエンドは Angular 上に構築されており、目立った問題なく SAP Commerce Cloud のバックエンド サービスと通信します。
Vueストアフロント
Vue Storefront は、スケーラブルで信頼性の高いオンライン ストアを構築するために作られた高度なオープンソース フレームワークです。 Vue.js フレームワークは、ユーザーのニーズに適応し、流動的で応答性の高いエクスペリエンスを提供できる PWA を迅速に作成するために使用されます。 プッシュ通知と、切断中に Web を閲覧できる機能は XNUMX つの注目すべき機能です。
| ソリューション | フロントエンドベース | ヘッドレスアーキテクチャ | 使用されるテクノロジー |
|---|---|---|---|
| マジェント PWA スタジオ | 反応する | + | React、Redux、GraphQL、webpack、Jest、Node.js、Service Worker |
| コマース クラウド PWA キット | 反応する | + | Javascript、webpack、React、Vue.js、GraphQL、Service Workers、REST API |
| コマースクラウドSFRA | JavaScriptを | + | Javascript、SSR、React、Angular、Vue.js、SASS、API |
| SAP Commerce Cloud スパルタカス | 角度の | + | Angular、Node.js、yarn、TypeScript、RxJS、SASS、Jasmine、Service Workers、Storefront API |
| Vueストアフロント | Vue.js | + | Vue.js、Node.js、ElasticSearch、Webpack、GraphQL |
さらに検討すべき e コマース PWA ツール
- ScandiPWA: Magento 2 プラットフォーム用に特別に設計されたオープンソース PWA ソリューション。
- Gatsby: React で PWA を作成するために使用できる静的サイト ジェネレーター。
- GoPWA: スケーラブルでパフォーマンスの高い PWA を構築するための PWA 開発フレームワーク。
eコマースPWAの成功事例
e コマース分野の最大手企業を含む多くの企業は、PWA がかなり効果的であることをすでに認識しています。
27 つの最も重要な指標であるコンバージョン率 (複数の例でコンバージョン率が 80% から 3% 以上に増加したことが示されました) とエンゲージメント率 (例としては、サイト滞在時間が XNUMX 倍増加、ページビュー数が増加、閲覧される製品数が増加しました) は、安定して顕著な改善を示しています。
| 会社概要 | より高いコンバージョン率 | エンゲージメント |
|---|---|---|
| AliExpressの | + 104％ | + 74％ |
| フリップカート | + 70％ | 3x |
| ランコム | + 17％ | + 53％ |
| MakeMyTrip | 3x | + 160％ |
| BookMyShow | + 80％ | – |
| ガルバリーノ | + 27％ | +13% (訪問者) +35% (視聴数) |
| ペットラブ | 2.8x | 2.8x |
| ジョージ | + 31％ | + 20％ |
| デベンハム | + 20％ | 2xへ4x |
| ルート化されたオブジェクト | + 162％ | – |
| ブッチャー・オブ・ブルー | + 169％ | + 154％ |
| カポラル | +15% (デスクトップ) +8% (モバイル) | + 40％ |
ただし、PWA の利点はこれで終わりではありません。
- パフォーマンスの向上 – 読み込み時間が大幅に短縮され、データ使用量が減少し、バウンスが減少したと多くの人が報告しています。
- トラフィック/新規顧客の増加 – 一部の企業では 2 日あたりのユーザー数が 50 倍になり、新規顧客の XNUMX% が PWA からでした。
- 収益の増加 – 訪問あたりの収益が増加したケース、トラフィックからの収益が 79% 増加。
- コストの削減 – 顧客獲得コストが低くなり、アプリのサイズがネイティブよりもはるかに小さくなります。
- オフライン アクセス – インターネット接続なしでショッピングを継続できるようになります。
- プッシュ通知 – プッシュ通知により、再エンゲージメント、クリック率、カートの回収が増加します。
- プラットフォーム間でのアクセス – Web テクノロジーを介したあらゆるデバイスでの統合エクスペリエンス。
- ネイティブのような機能 – 通常、ネイティブ アプリでのみハードウェア/OS 機能を活用します。
EコマースPWAの開発コスト
e コマース PWA の開発には、e コマース Web サイトの開発と同等の開発および保守費用がかかります。 ただし、PWA はネイティブ アプリケーションよりもさまざまなデバイスで実行でき、ハードウェアへのアクセスやアプリ ストアへの配置に追加料金はかかりません。
| eコマースウェブサイト | EコマースAndroidアプリ | eコマースiOSアプリ | eコマースPWA | |
|---|---|---|---|---|
| 開発費 | $ 10,000 - $ 30,000 | $ 15,000 - $ 50,000 | $ 20,000 - $ 80,000 | $ 10,000 - $ 30,000 |
| 維持費 | $ 500 – $ 2,000 /月 | $ 1,000 – $ 3,000 /月 | $ 1,500 – $ 5,000 /月 | $ 500 – $ 2,000 /月 |
| アップデート/新機能 | 低価格 | 中程度のコスト | 高いコスト | 低価格 |
| プラットフォームサポート | ウェブ限定 | Androidのみ | iOSのみ | Web、Android、iOS |
| App Storeの手数料 | 無し | 30% (最初の 1 万ドル)、15% | 30% (サブスクリプションの初年度)、15% | 無し |
ソースから グリンテック
免責事項: 上記の情報は、Chovm.com とは独立して grinteq.com によって提供されます。 Chovm.com は、販売者および製品の品質と信頼性についていかなる表明も保証も行いません。
