PWAとは?
03 November 2021 / Published in Ecommerce
モバイルアプリは、各企業にとって不可欠なツールとなっており、シームレスな体験と大きな成果をもたらすモバイルアプリが求められています。 数年前から、新しいタイプのアプリであるプログレッシブウェブアプリ(PWA)の支持が高まっています。PWAは、ネイティブアプリの機能と、サイトのアクセシビリティをミックスしたものです。PWAが将来的にネイティブアプリに取って代わるのではないかと多くの人が考えています。 PWAとネイティブアプリはどう違うのか?それぞれのメリット・デメリットは何か?あなたはどちらを選ぶべきでしょうか?この記事を読み進めて、その答えを見つけてください。 1. PWAとは? PWA(Progressive Web App)は、互換性のあるブラウザがあればどのようなデバイスでもスムーズに機能することができるため、最近では一般的な市場でもよく見かけるようになりました。 PWAはウェブサイトであることに変わりはありません。PWAはウェブサイトでありながら、最新のウェブ技術によってアプリのように見えるだけです。ユーザーは、他のサイトと同じように、URLを使ってブラウザ上でProgressive Web Appにアクセスしますが、PWAにアクセスした直後は、ダウンロードやインストールをせずに、ブラウザ上で「アプリ」を使用しているような体験ができます。 その上、PWAウェブサイトはGooglebotにインデックスされることができるので、Googleのガイドラインやエクセレントプラクティスに従って最適化することで、より良いランキングを得ることができます。これは、モバイルアプリの場合には当てはまりません。さらに、ウェブアプリはウェブ上でリンク、共有、配布することができるので、他のプラットフォームやソーシャルメディアで発見される可能性も高まります。 特長 プラットフォームに依存しない: PWAはWebブラウザからアクセスされるため、アプリストアにアプリを登録する必要がありません。PWAは、iOSやAndroidなど、どのような種類のデバイスでも動作します。 開発費が安い:PWAは、様々なデバイスで動作させるために一度だけ進化させる必要があるため、企業にとっては時間と費用を大幅に削減することができます。 オフラインモード:サーバーワーカーのおかげで、PWAはインターネットに接続されていなくても動作します。ユーザーが初めてPWAサイトにアクセスした後は、インターネットに接続しなくても、再びPWAサイトに戻ってきてシームレスに操作することができます。 アプリのようなパフォーマンス:携帯電話からウェブサイトにアクセスすると、信頼性の低いパフォーマンスのために、お客様はしばしば悩まされます。しかし、PWAは、ネイティブアプリのように高速でシームレスな体験を提供します。 ダウンロードもインストールも必要ありません:これは、PWAの最も重要な長所の一つです。ユーザーはホーム画面に固定するだけで、あとはアイコンをタップするだけでアクセスすることができます。 エンゲージメント:PWAでは、ユーザーに役立つデータを含むプッシュ通知を送信して、ユーザーを励ますことができます。また、PWAのUX/UIは、ネイティブアプリを使用しているような感覚を与えます。 共有性:PWAのユニークなURLを、プラットフォームやソーシャルメディアを通じて他のユーザーと共有することができます。 メモリの使いやすさ:PWAは、デバイス上で少量のデータしか使用しません。ユーザーはPWAをインストールする必要がないので、メモリ容量を大幅に節約できます。 最新のデータ。サービスワーカーによる更新プロセスにより、PWAウェブサイトは自動的かつ継続的にコンテンツが更新されます。 弱点 サポートの不足:PWAはまだ新しい技術なので、すべてのブラウザがこの種のソフトウェアをサポートしているわけではありません。 ハードウェアへのアクセスが限られている:PWAは、ハードウェアとソフトウェアの機能へのアクセスがほとんど制限されています。 2. ネイティブアプリとは? ネイティブ・アプリとは、OSや特定のデバイス・プラットフォームに固有のソフトウェア・アプリケーションのことです。基本的には、最高のパフォーマンスと互換性の結果を得るために、アプリが1つのOS/プラットフォームに合わせて作られていることを意味します。 強さ パフォーマンス:このアプリはデバイスのネイティブ言語で構築されているため、高速で最適化されたパフォーマンスを提供します。また、メモリ使用量や消費電力も開発プロセスで考慮されています。 パーソナライズ:ネイティブアプリでは、お客様の体験をパーソナライズするためのデータを蓄積することができます。例えば、アプリはユーザーにいくつかの質問(名前)をした後、オンボーディングプロセス、アプリ内、プッシュ通知などでユーザーに名前を呼びかけることができます。さらに、アプリは過去の購入履歴に応じて提案を生成することができます。それによって、ユーザーはブランドとのつながりをより強く感じることができます。 データ保護:これらのアプリは、デバイスの機能とリソースを効果的に活用します。 ルック&フィール。ネイティブアプリは、美しいレイアウト、エフェクト、アニメーション、シームレスなスクロール、便利なジェスチャーコントローラーなど、最も優れたUX/UI体験を提供します。 ハードウェアアクセシビリティ:ネイティブアプリケーションは、ハードウェアとの連携が容易です。連絡先、カメラ、GPS、メディアなど、デバイスに組み込まれた機能に素早くアクセスできます。 3. PWAとネイティブアプリの比較:詳細な比較 3.1. ダウンロードとインストール 平均的なモバイルユーザーは、月に1回もアプリをインストールしません。これは、インストールプロセスの最後まで行ってアプリを使用するには、特定のレベルのコミットメントが必要なためです。 まず、ストアでアプリを探し、インストールすることを確認する必要があります。そして、ダウンロードとインストールが完了するのを待つのです。最後に、アプリ固有の許可を受け入れた後、アプリを1〜2回使用してから削除します。ユーザーがアプリを削除する際には、最終的な決定であることが多いので、もう使わないかもしれません。 一方、PWAでは、App Storeの関与やインストールが不要です。ユーザーはブラウザから、いくつかのタブを使ってアプリをブックマークし、ホーム画面に入れることができます。PWAは、ホーム画面やアプリディレクトリに表示され、通知を送信し、システム設定に統合されます。 さらに、PWAはアプリのように多くのスペースを必要としません。URLのみで、ユーザーはアプリにアクセスし、友人と共有することができます。また、起動時に常に最新バージョンが表示されるため、アプリを更新する必要もありません。 3.2. 開発コスト プログレッシブウェブアプリの構築は、ネイティブアプリの構築よりもリーズナブルです。ネイティブアプリの場合は、言語を学び、各プラットフォーム用のバージョンを作成する必要があります。つまり、Android用とiOS用の少なくとも2種類のバージョンと、両方のバージョンを実行してアップデートするためのリソースが必要になります。アプリの目的や複雑さを踏まえれば、これには多大な時間と労力が必要です。 一方で、PWAの方が確立と更新が早いです。共通の2つのプラットフォームだけでなく、複数のプラットフォーム用に1つのコードベースを入手できます。アプリをゼロから構築するのではなく、Google Lighthouseなどのツールのサポートを受けて、現在のサイトを構成することができます。レスポンシブデザインでは、アプリのバージョンを1つだけ用意するだけで、どのデバイスでも同じように表示されます。 3.3. 配信 ネイティブアプリでは、プラットフォームごとに異なるバージョンを作成するだけでなく、複数のアプリストアに登録する必要があります。AndroidのPlay StoreやAppleのApp Storeが代表的ですが、AmazonのAppstoreやWindows Storeなどもあります。それぞれのストアでは、特定の条件をクリアしないとローンチできません。時には、開発者アカウントの登録にいくらかの費用がかかることもあります。 一方、PWAでは、煩わしいApp Storeの要件を避けることができます。ユーザーに必要なのは、WebブラウザとURLだけです。PWAの機能の多くは、Chrome、Firefox、Edge、Safariなどの主要なブラウザでサポートされています。そのため、アプリが短時間で多くのユーザーにアプローチするのに便利です。承認を待たずにアップデートを簡単に実装できるので、あなたにとってもユーザーにとってもはるかに快適な環境になります。 しかし、ウェブストアはひどいものばかりではありません。要件を満たすことで、質の低いアプリがリリースされるのを防ぐことができます。アプリを発売することで信頼性が高まり、ユーザーはURLリンクではなくアプリにアクセスすることで自信を持てるようになります。さらに、ウェブストアはあなたのビジネスを効果的にサポートしてくれます。App Storeで紹介されることで、迅速なブランディングと売上増加をもたらすことができるのです。 3.4. パフォーマンス PWAは、レスポンシブWebサイトやモバイルWebサイトと比較して、読み込みが非常に速くなっています。PWAの中心となるのはサービスワーカーです。サービスワーカーとは、Webページから分離してバックグラウンドで実行されるスクリプトです。サービスワーカーを使えば、オフラインのリクエストへの対応、特定のリソースのプリフェッチやキャッシュ、リモートサーバーとの情報の同期などが可能になります。つまり、ホーム画面にアプリを入れた後、すぐにロードして、オフラインやネットワーク環境が悪いときにもアクセスできるようになります。 さらに、PWAはブラウザから動作するため、ネイティブアプリよりも遅延が発生し、バッテリー使用量も多くなります。ネイティブアプリは、基盤となるOSと接続することができます。デバイスのハードウェアに入り込み、より多くの計算を実行して、お客様により良い体験を提供することができます。ネイティブコードはより高速で、ネイティブアプリはより堅牢です。 3.5. 発見性 ネイティブアプリのページは、検索エンジンにインデックスされ、ランク付けされることはありません。ユーザーがアプリを検索できるのは、アプリストアまたはアプリストアのサイト経由のみです。アプリの発見性に影響を与える要因は多岐にわたりますが、App Store Optimization(ASO)を利用することで、より簡単にアプリを見つけてもらうことができます。 ASOとは、ストアの検索結果での順位を上げるためのプロセスと理解されています。ASOには、キーワードの調査、適切なタイトルとメタディスクリプションの作成、美しいスクリーンショットの撮影、関連性のあるカテゴリー分けの活用、サードパーティへのダウンロードやフィードバックの依頼などが含まれます。とはいえ、これらはすべて、アプリを市場に投入するために、より多くの時間と費用を必要とします。 ネイティブアプリとは異なり、PWAは他のサイトのように動作するため、検索エンジンにインデックスされます。PWAは、レスポンシブWebページに比べてパフォーマンスとエンゲージメントが向上しています。そのため、検索結果で上位に表示される可能性が高くなります。 PWAがSEOに適していることを確認したい場合は、以下の手順に従ってください。 あなたのサイトと同様のSEO構造を採用する 重複コンテンツを防ぐために、異なるURLにrel=canonicalを使用する。 Googlebotはこの記号の後のものをインデックスしないので、「#」を含むURLに注意してください。 Googlebotがあなたのウェブサイトを正確にクロールしているかどうかは、Google Search Consoleなどのツールで知ることができます。 3.6. 機能 PWAの技術は徐々にネイティブアプリに追いついてきていますが、ネイティブアプリに比べてPWAが提供する機能には限界があります: プッシュ通知:プッシュ通知があると、ユーザーがウェブサイトに興味を持ち、再訪してくれる可能性が高まります。ネイティブアプリでは、機能をゼロから作ることも、サードパーティの統合機能を利用することもできます。PWAでもサービスワーカーを利用してプッシュ通知を行うことができます。ただし、サービスワーカーAPIのサポートは、プラットフォームによって異なります。 モバイル決済:PWAの場合、NFCチップやその他のデジタル決済ハードウェアとのインタラクションは、様々なプラットフォームに対応しています。 Geofencing(ジオフェンシング):Geofencingは、開発者が現実世界に仮想の境界を構築することを可能にします。ユーザーがこの境界に入ると、アプリは電話によるアクションを起こすことができます。プッシュ通知と組み合わせることで、ジオフェンシングはユーザーへのアプローチとエンゲージメントのための素晴らしいオプションとなります。この機能は現在、ネイティブアプリにのみ搭載されています。 他のアプリとの連携:ネイティブアプリは、他のアプリを呼び出して、ログイン、通話、カレンダーへのイベント登録、チェックアウトなどを行うことができます。 その他の機能:PWAは、環境光検出、近接センサー、スマートロックなどのいくつかの機能のために、電話機のデバイスにアクセスすることは不可能です。 3.7. セキュリティ PWAは、HTTPSで動作する必要があるため、通常のレスポンシブWebアプリよりも安全です。 これらのセキュリティプロトコルは、お客様とサーバー間のやり取りが妨害されないようにします。安全な環境では、お客様は個人情報やクレジットカードの詳細を、盗み見される心配なく送信することができます。 一方、ネイティブアプリの場合は、複数のセキュリティ対策を組み込むことができます。アプリにログインが必要な場合は、多要素認証を実行できます。また、より安全な通信のために証明書のピン留めを採用することもできます。さらに、アプリは起動する前にApp Storeのセキュリティ要件を満たす必要があるため、ユーザーはURLよりもアプリを信用する傾向があります。 4. どのオプションを選ぶべきか? PWAにもネイティブアプリにも、それぞれ長所と短所があります。どちらかを選択する際には、それぞれのオプションがどのような点で優れているか、また、あなたのアプリのビジョンにどのように適合するかを考える必要があります。 以下の場合はPWAを選択してください: 使い始めたばかりで、ユーザーのためのシンプルなアプリが必要な場合。PWAはダウンロードが不要で、プッシュ通知を介してユーザーと対話することができます。 時間と予算が限られている場合。PWAは、構築と公開に必要な費用と時間が少なくて済みます。 ブランド認知度とSEOを向上させたい場合。PWAはどのサイトにも似ているので、多くのユーザーにアプローチできます。 以下の場合は、ネイティブアプリを選択してください: ブランドの信頼性を高めたい場合。アプリストアでアプリを公開することで信頼性を高め、ネイティブアプリにはより多くのセキュリティオプションがあります。 スマートフォンの先進的な機能を活用したい。ジオフェンシングやセンサー/検知機能がUX上重要な場合や、製品に高い演算能力が必要な場合。 5. まとめ PWAとネイティブアプリの両方には多くのメリットがありますが、細部まで熟考し、ビジネスの目標やリソースに応じて適切なコースを選択することが不可欠です。先に述べたように、PWAとネイティブアプリは、スタートアップ企業、急成長中の企業、企業など、どのようなビジネスタイプや規模であっても同様に重要です。 状況によっては、迅速で費用対効果の高いソリューションが必要になることもあり、PWAを採用するのが理想的です。一方で、PWAでは必要なパフォーマンスが得られなかったり、デバイスの機能をすべてカバーできなかったりする場合もあります。そのような場合には、ネイティブアプリの構築を検討したほうがよいでしょう。あるいは、両方を導入することで、カスタマーエクスペリエンスを向上させ、より多くのユーザーにリーチすることができます。   ►►►サービスについてMagento, Sitecore, Shopify Plus,
pwa vs native apps
20 April 2021 / Published in Ecommerce
今や、Eコマース分野でもモバイルの時代となっています。2017年、モバイルによるEコマースの売上は、Eコマース全体の34,5%を占めました。そして、eMarketerは、2021年末には54%に達するだろうと予測しています。そして、現代の顧客の要求を満たすために、Eコマース企業家は、迅速で簡単、かつシームレスなモバイルショッピング体験を提供しなければなりません。そこで、モバイルアプリやプログレッシブウェブアプリ(PWA)の出番となるわけです。 しかし、Eコマースのパフォーマンスを最適化するには、プログレッシブWebアプリとネイティブアプリのどちらが良いのでしょうか?十分な情報を得た上で決断を下すためには、まず各アプローチの長所と短所を知る必要があります。そこで、PWAとネイティブアプリの違いや、それぞれのメリットについてご紹介します。 1. ネイティブアプリ ネイティブアプリとは、特定のプラットフォーム用に作成されたアプリで、OSのメモリを使用してGoogle PlayやApp Storeなどのアプリストアからダウンロードされます。したがって、アプリは1つのOSに最適化されており、カメラ、マイク、連絡先、ファイルなど、ほとんどのデバイスの機能に対して、高速かつ適切に動作します。 a. ネイティブアプリの魅力とは なぜEコマースにネイティブアプリの構築を検討すべきなのか?モバイルネイティブアプリを作成するという決断には、いくつかの利点があります。以下では、最も重要な利点をいくつか紹介します。 機能性 ネイティブアプリは、設計されたOSに特有のさまざまな機能を利用できます。ネイティブアプリを開発すると、ホストのプラットフォームが提供するさまざまなツールやAPIにアクセスすることができます。ネイティブアプリの開発では、安定性、セキュリティ、および優れたパフォーマンスを確保しながら、複雑なアプリケーションを作成することができます。 スピードとパフォーマンス ネイティブアプリは、クロスプラットフォームアプリよりも優れたパフォーマンスを発揮する傾向があります。その理由は?それは、アプリ自体とホストのオペレーティングシステムがシームレスに統合されているからです。 App Storeでの上位表示 ユーザーエクスペリエンスの高いアプリは、アプリストアで上位に表示されます。これは、認知度の向上、ダウンロード数の増加、そして利益の増加につながります。ネイティブアプリは、その高いパフォーマンスと使いやすさから、クロスプラットフォームのアプリよりもアプリストアで上位に表示されることが多い。 ネイティブアプリは、クロスプラットフォームアプリよりもアプリストアの上位に位置することが多い ユーザーインターフェース ネイティブアプリケーションは、特定のオペレーティングシステムに合わせて作られているため、優れたユーザーエクスペリエンスを提供します。つまり、そのシステム特有の機能を利用することができるのです。また、アプリのビジュアルも特定のOSに合わせて作られているため、見た目の美しさも高品質です。 b. ネイティブアプリの注意点とは ネイティブアプリは、クロスプラットフォームやウェブアプリよりも優れたパフォーマンスを発揮することが重要です。この専門性は、ネイティブアプリの最大の強みであると同時に、最大の弱点であるコストの基礎でもあります。 追加リソース 複数のプラットフォーム向けにアプリケーションを作成する場合、開発チームは通常、サポートするプラットフォームごとに1人または複数のモバイル・ソフトウェア・エンジニアで構成されます。もちろん、これは開発チームの規模とコストの増加につながります。また、開発チームには、均質なスキルではなく、さまざまなスキルを持ったエンジニアが必要です。これは、サポートやコラボレーションに関して、チームを分断する可能性があります。 開発サイクルが遅い ネイティブアプリケーションは、目的のプラットフォームごとに個別のアプリケーションを作成しなければならないため、開発サイクルが遅くなります。極端な例としては、モバイル開発エンジニアが1人しかいない場合、各アプリケーションは基本的に連続して作成されることになります。 2. プログレッシブ・ウェブアプリ(PWA) Gartner社のレポート「Progressive Web Apps Will Impact Your Mobile App Strategy」によると、PWAは2020年末までに全世界のネイティブアプリの50%を置き換えると言われています。その可能性を裏付けるように、Googleは最近、Chromebook用のProgressive Web AppsをGoogle Playで公開し、PWAの統合基準を引き上げました。では、PWAにはどのような機能があるのでしょうか。PWAは本当にネイティブアプリを置き換える優れた選択肢なのでしょうか? a. PWAの魅力とは PWAが徐々に成長して自分の限界を超えると、より多くの能力を持つようになります。これは、PWAの完全な可能性がまだ発見されていないことを示しています。ここでは、PWAが提供する最も注目すべき利点について言及します。 オールインワン PWAでは、あなたのシステムは今、一つのサイズに収まります。PWAはウェブサイトのように機能し、ページへのリンクをコピーすることでPWAを共有することができます。また、プログレッシブウェブアプリは、スマートフォン、タブレット、デスクトップパソコンなど、あらゆるデバイスに対応しています。 読み込み時間が短い 多くのユーザーは、Webサイトの読み込み速度が遅いという問題に遭遇しています。しかし、PWAではそのようなことはありません。また、PWAはURLを介して直接コンテンツにアクセスするため、ユーザーは毎回ページを更新する必要がありません。 オフライン対応 PWAは、インターネットに接続されていなくても動作します。ユーザーが最後にアプリを使用したときにキャッシュされたデータを活用します。 SEOへの配慮 迅速なダウンロードは、Googleのモバイル検索エンジンでのウェブサイトの位置に大きな役割を果たします。PWAは、ネイティブアプリケーションとよく似た動作をするにもかかわらず、Googleや他の検索エンジンにインデックスされます。これはSEOにとって絶対的なプラス要素です。 PWAは他のアプリよりも安い PWAのような最新の技術は、ネイティブのモバイルアプリよりも開発や統合にかかる費用が少なくて済みます。特定の技術を必要とせず、純粋なjavascript、HTML、CSSだけで開発できます。 b. PWAについてよく考えるべきこと どんな豆にも黒点がありますが、PWAも例外ではありません。PWAでユーザーに満足のいく体験をしてもらうためには、これらのデメリットを知り、システムへのダメージの可能性をあらゆる面からコントロールし、最小限に抑えるための準備をすることが重要です。 App Storeのトラフィックを逃す PWAを開発しても、AppleやAndroidのアプリストアでは企業としての露出はありません。アプリが見つかるのは、有名なアプリプラットフォームの1つに表示されているからであることが多いです。そのため、この「踏み台」を使ってより多くの人にアピールできないのは、かなりのデメリットと言えます。 スケーラビリティに限界 PWAの収益モデルや広告機会を開発するのは、まだ難しいことです。現時点では、ネイティブアプリに比べて、購読できる選択肢が少ないです。 一部のサービス機能にアクセスできない ネイティブアプリとは異なり、機能が少ないWebアプリケーションですが、iOSはAppleデバイス上でPWAのすべての機能をサポートしていません。そのため、多くのユーザーにとってPWAの可能性が限られてしまうのは残念なことです。UX(ユーザーエクスペリエンス)が製品自体のマーケティングと同じくらい必要な世界では、ユーザーエクスペリエンスの欠如は本当の損失です。 3. eコマースビジネスに何を選ぶべきか eコマースビジネスは、細分化された顧客にサービスを提供するために、あらゆる規模と形態で展開されています。そのため、それぞれの目標を達成するためには、適切なテクノロジー・アプローチが必要となります。設立したばかりのEコマース企業や、まだ高いパフォーマンスを目指していない企業にとっては、PWAをモバイルテクノロジーの基盤として選択することをお勧めします。PWAは経済的であり、よりSEOに適しているため、新規顧客をアプリに引き付けることができます。 しかし、特に数百万人のユーザーと製品を抱える大企業にとっては、スケーラビリティとパフォーマンスが求められます。完全な機能を備えた真の顧客中心のアプリを開発するには莫大なコストがかかり、開発プロセスにも時間がかかるかもしれませんが、ネイティブアプリを適応させることは不可欠です。ネイティブアプリは、よりパーソナライズされた体験を促進し、ターゲットを絞ったマーケティングパフォーマンスを提供する必要がありますが、PWAでは今のところ限界があります。 もうひとつの選択肢は、レスポンシブサイトと並行してEコマースのPWAを追加することでチャネルミックスを拡張し、その結果を測定してネイティブアプリがまだ必要かどうかを判断することです(両方を行うことも可能です)。   ►►►サービスについてMagento, Sitecore, Shopify Plus, BigCommerce, Amazon Marketplace