魅力的なモバイル体験のために活用したいPWAとは？
コンテンツを開発、配信するためのテクノロジーは、日々進化を遂げています。どれほど優れたチームであったとしても、競合他社に遅れを取らないようにするために、最新のテクノロジーを追い続けるのに苦労しているかもしれません。
こうした新しいテクノロジーのひとつに、モバイル体験を実現する、プログレッシブwebアプリ（PWA）があります。PWAとはどのようなもので、モバイル体験にとってどうメリットがあるのでしょうか。こうした点をすばやく把握できるよう、この記事ではPWAについて詳しく解説します。
目次
- PWAとは？
- ネイティブアプリとPWAの違い
- PWAの利点
- PWAの特長
- PWA開発の手順
- PWAによるストアフロントの実現
PWAとは？
PWAは、プログレッシブwebアプリアプリケーション の略で、英語のprogressive web applicationの略語です。PWAはモバイルチャネルの実装方法のひとつで、webチャネルのための複合的なアプローチです。PWAを利用すると、バックエンド開発者やフロントエンド開発者の作業が容易になり、利用者はより優れた体験を得ることができます。PWAは、従来は別々に開発されていた要素を単一のエコシステムへと統合することで、実現されています。
具体的には、ネイティブアプリの強力な機能と、使いやすいwebサイトの普遍的なアクセシビリティを融合したアーキテクチャです。これにより、一般的なwebサイトよりも詳細かつ包括的な体験を利用者に提供することができます。
PWAは、ネイティブアプリと同様に、プッシュ通知で利用者に最新情報を提供でき、オフラインアクセスにより常時使用することができます。webサイトではそれができません。しかも、通知は、従来のwebサイトに対するPWAの多くの利点のひとつに過ぎません。さらに、PWAでは、webサイトの多くの利点を、使い慣れたネイティブアプリのような操作環境で実現することができます。
PWAがオンラインストアにもたらす利便性は大きく、PWAを利用することでモバイル利用者のコンバージョン率を36%向上させることができます。PWAが、ネイティブアプリの利便性と使いやすさにwebサイトのパワーと柔軟性を組み合わせたものであることを考えれば、この結果は驚くことではありません。
PWAの顕著な成功例としては、 Twitterがあります。Twitterの利用者は、自分の好みや状況に応じて、ブラウザーでもアプリでも、サービスにアクセスすることができるようになっています。
モバイルには、関連するコンテンツやエンゲージメントが通知され、利用者はアプリに再アクセスして続けることができます。一方、デスクトップでは、使いやすいダッシュボードで多彩な機能を利用できます。
モバイルデバイスは、企業と顧客との接点として、相手がどこにいてもつながることのできる、という特性があります。そのため企業はモバイルを、顧客が何かをしたいと思ったその瞬間に、時間や場所を問わず利用できるサービスのための顧客接点として用いると効果的です。そのひとつとして、PWAを企業のストアフロントとして利用する、モバイルコマースが挙げられます。PWAなどを活用したモバイルコマースについては、次のガイドが参考になります。
ネイティブアプリとPWAの違い
ネイティブアプリは、AndroidやiPhoneのようなプラットフォーム専用に作られた、独自のプログラミング言語を使用して開発されたものです。大手マーケットプレイスは、AndroidのGoogle PlayストアとiOSのAppleのApp Storeです。
従来のアプリ開発では、マーケットプレイスにアプリを追加すればするほど、維持するコードベースも増えます。PWAは、アプリの多くの利点とwebサイトの強力な能力を集約し、両方を容易に利用することができます。
以下は、ネイティブアプリとPWAの主な違いです。
開発コスト
ネイティブアプリでは、開発者は単一のプログラミング言語で作成する必要があり、自分の好みではない言語や環境に機能を移し替えなければならないかもしれません。これに対してPWAでは、異なるプログラムに対して単一のコードベースを利用します。この統合された知識ベースにより、PWAでは、開発者の時間とトレーニングのコストを削減することができます。
発見性
検索エンジンは新規顧客にリーチし、コンバージョンするための優れた方法のひとつですが、ネイティブアプリは検索エンジンにはインデックスされません。ネイティブアプリでは、アプリストア最適化を活用することができますが、従来の検索エンジン最適化の強力なリーチ能力とは比較になりません。PWAは基本的にwebサイトであるため、web検索で見つけることができ、従来の方法でインデックスされているため、より発見されやすいものになっています。
安全性
ネイティブアプリは、より制限の多いインフラストラクチャのおかげで、高度な安全性とセキュリティ能力を維持しています。PWAでは、SSL証明書を使用して、このセキュリティ機能を再現し、利用者の安全を確保する必要があります。
インストールとダウンロード
PWAは、webサイトのように訪問したり、ブックマークしたり、アプリのように携帯電話のホーム画面に追加したりできます。ネイティブアプリはダウンロードとインストールが必要ですが、PWAはインストールする必要がありません。PWAでは、そのステップをひとつ省くことで、20%多くの顧客を維持することができます。
PWAの利点
さまざまなメリットのあるPWAですが、従来のネイティブアプリと比較したときのPWAの利点は、次の8つとなります。
- 一般的なwebサイトのテクノロジーを利用して構築することができる
- 開発／保守コストが低い
- インターネットに接続されていなくてもオフラインで動作する
- アプリストアを介さずに独自に更新することができる
- アプリストアごとに承認、更新する必要がない
- アプリストアよりもはるかに大きな顧客基盤を持つ検索エンジンにインデックスされ、発見される可能性がある
- webサイトとアプリでコードが兼用されるため、管理するコードベースが少なくて済む
- より高いエンゲージメントを獲得することができる
PWAの特長
PWAには、従来のwebアプリやネイティブアプリとは異なる、重要な特長があります。
発見性
PWAは、従来のアプリストアのような閉じたエコシステムに悩まされることはありません。PWAは、検索エンジンにより、従来のwebサイトと同様にインデックスされ発見されるため、検索エンジンを利用するwebブラウザーを、利用者の意図に関係なくPWAに誘導することができます。
つまり、利用者は、特定のアプリを検索する必要がなく、検索エンジンの結果ページから、より多くの利用者が適切に誘導され、より多くのオーディエンスからコンバージョンを得ることができるのです。
応答性
PWAは、高い応答性を期待できます。webサイトは、一般的に、ほぼ同等の仕様を持ち、類似のブラウザーがインストールされた少数のデバイスグループで閲覧されることを想定しています。一方でPWAは、さまざまなモバイルデバイスでアクセスされます。
これらのモバイルデバイスは、パワーもサイズも容量もさまざまです。PWAは、ネイティブアプリと同様に、どのような画面サイズでも閲覧でき、どのようなデバイスでも高速に読み込めるような工夫が必要とされます。
リンク可能性
自己完結しているネイティブアプリとは異なり、PWAは、webサイトと同様にリンク可能でなければなりません。これにより、利用者は、ほかの利用者を特定のページに誘導することができます。情報共有による紹介の利便性により、従来のネイティブアプリよりも多くのトラフィックをPWAに誘導することができます。
インストール可能性
PWAは、他のアプリと同様に、モバイルデバイスのホームページにインストールすることも可能です。このリンクにより、利用者は容易にサイトを読み込むことができます。
その結果、利用者は、その利便性から、競合サイトではなく自社サイトにアクセスするようになります。利用者はホーム画面をタップして、必要な情報を手に入れることができます。
ネットワーク非依存性
PWAは、ネイティブアプリのようにオフラインで使用することができます。一部のデータはローカルに保存され、利用者は基本情報や以前に読み込んだページにアクセスすることができます。これにより使用者は、電波状況や場所に関係なく、自社webサイトにアクセスできることを認識し、信頼感が高まります。
安全性
ネイティブアプリは閉ざされた環境で動作するため、PWAも同じように動作することが期待されます。ネイティブアプリとwebサイトの両方の利点をシステムで実現できるように、PWAを構築する際にはSSLなどの追加のセキュリティ機能が必須となります。
クロスプラットフォーム
PWAは、ストアからインストールする必要があるアプリではなく、webサイトのように動作するため、どのブラウザーでも読み込むことができます。そのため、PWAの開発者は、アプリケーションにアクセスする利用者やデバイスを制限できないため、より広範なインストールベースからのさまざまな問題に対処する準備をしなければなりません。
できるだけ多くの利用者に使ってもらえるよう、パフォーマンスやビジュアルデザインをさまざまな仕様に対応させる必要があります。
外観
ネイティブアプリでは、マーケットプレイスや開発者間でビジュアルスタイルに一貫性を保つように調整を続けています。PWAでは、同じ体験を提供すると同時に、より多様なサイズのデバイスとスクリーンに対応する必要があります。
PWA開発の手順
PWA開発を始める場合、ゼロから始めるにせよ、別のアプリやwebサイトのインフラを変換するにせよ、どのツールが必要で、どこから始めればよいかを判断するのは難しい場合もあります。PWAの構築に取り組む開発者は、次の4つのツールを必要とします。
1.安全な接続
ネットワーク通信では、より安全な新しい接続形態（https）が標準的な方法となっています。消費者や企業のデータを保護するために、開発プロセスでは暗号化とセキュリティの強化が欠かせません。
2.サービス作業者
PWAでは、アプリケーションを作成する開発者に加えて、リリース後のPWAの維持や、反復的な変更には、専任チームが必要になります。これには開発者が関わることもあれば、開発者が新しいプロジェクトに移動した場合は新しくチームを発足することもあります。
3.マニフェストファイル
ほかのアプリケーションやwebサイトと同様に、PWAには基本情報を追跡するためのマニフェストファイルが必要です。このメタ情報は、バージョン番号、ライセンス、最終更新日など、アプリの変更点を追跡するのに役立ちます。
4.アプリケーションファイル
ネイティブアプリより小さいとはいえ、PWAにはアプリケーションファイルが必要です。このファイルをインストールすることにより、webまたはデバイスドライブからwebサイトの残りの部分をダウンロードするとき、読み込みが速くなり、より高速で効率的な印象を利用者に与えます。
PWAを採用すると、バックエンド開発者、フロントエンド開発者、利用者、それぞれにとってより優れた体験を実現することができます。
PWAによるストアフロントの実現
webサイトとネイティブアプリの両方の利点を低コストで享受するために、多くの企業がPWAを導入しているため、その普及が急速に広がっています。アドビは、市場におけるPWAの急速な普及と重要性を認識しています。そのためアドビでは、まず、企業のコマースストアフロントを提供するデジタルコマース製品「Adobe Commerce」において、ブラウザーベースだけでなく、PWAにも対応しています。またCMS（コンテンツ管理システム）製品の「Adobe Experience Manager」は、ヘッドレスCMSとして利用できるため、コンテンツを部品化し、PWAから利用できる仕組みを提供しています。
Adobe CommerceのPWA対応は、PWA Studioという機能によって提供しています。PWA Studioは、企業のストアフロントをPWAとして実装するための機能です。PWA Studioは、PWAの経験が少ない企業でも利用できるよう設計されており、社内開発で発生する費用の数分の一で高品質のPWAを迅速に構築することができます。
また、PWA Studioはヘッドレスコマースの開発にも対応しています。PWA Studioでは、APIを使用して、フロントエンドとバックエンドを分離して開発します。アーキテクチャを分離することで、一方の問題が他方に影響を及ぼしたり、全体の開発サイクルを遅延させたりすることなく作業を進めることができます。フロントエンド開発者は、バックエンドを介さずにリアルタイムで外観や操作性を変更できるため、サイトの更新を迅速かつスムーズにおこなうことができます。
このプラットフォームは最新の標準を採用しており、さまざまなツールや統合環境がリリースされているため、大規模なPWA Studioコミュニティから派生した追加メソッドを利用して開発を続けることが容易です。
コマースストアフロントとしてPWAを活用することの具体的なメリットや要件については、以下のガイドが参考になります。
そして、PWAのコンテンツ配信元として役立つヘッドレスCMSについては、以下のガイドが参考になります。