PWAとは、Webサイトをアプリのように使えるようにする技術のこと。Android、iOSなどの環境に左右されずに使用することができるクロスプラットフォーム技術として注目を集めています。
開発におけるメリットが豊富かつ、ユーザーの利便性が高いことから、近年さまざまなサービスに導入されています。
目次
PWAとは？
PWAとは、Progressive Web Apps（プログレッシブウェブアプリ）の略称。2015年に開催されたChrome Dev Summitで提唱され、現在もGoogleによって導入を推奨されています。
まず初めに、PWAの基礎知識やネイティブアプリとの違い、さまざまなサービスがPWAを取り入れている理由から解説します。
PWAの基礎知識
PWAの特徴は、WebサイトのコンテンツをアプリのようにPC・スマートフォンにインストールできる技術のこと。
Android・iOS双方のプラットフォーム上で、同じ仕様のアプリケーションを動かせるクロスプラットフォーム技術です。
素早いWebページの読み込みや操作が可能になることから、Googleが導入を推奨しています。
PWAは、アプリストアを介さずにWebサイトから直接インストールすることが可能。インストール後にスマートフォンのホーム画面にアイコンを表示したり、プッシュ通知を送ることもできます。
ネイティブアプリとの違い
ネイティブアプリとは、iOS/Androidそれぞれの環境に合わせて作られた専用アプリのこと。つまり、私たちが普段Apple StoreやGoogle Playなどのアプリストアからダウンロードして使っているアプリはすべてネイティブアプリです。
PWAはWebサイトであり、ネイティブアプリではありません。しかし、Webサイトから直接インストールし、ホーム画面にアイコンを表示できるため、アプリと似たような使い方をすることができます。
PWAが注目される理由
ネイティブアプリをリリースするには、AndroidやiOSといったそれぞれの環境に合わせた専用アプリを開発する必要があります。また、ストア申請やアップデートを実施するごとに運用コストがかかります。
PWAであれば、OSに合わせた専用アプリを開発する必要がなく、ストア申請やアップデートの手間も省けるため、開発・運用コストを抑えることができます。
また、表示速度が素早く、オーガニック検索から流入できるなど、ユーザーにとってもメリットが豊富。ユーザーの利便性を向上させることができるため、さまざまなサービスに取り入れられています。
PWAを導入するメリット
PWAを導入するメリットを詳しく紹介します。
Android / iOSどちらでも使える
あらゆるデバイスで使用できるネイティブアプリをリリースするためには、Android、iOSのそれぞれに対応した専用アプリの開発が必須になります。
しかし、PWAであればデバイスやOSに左右されないため、1つのプロダクトを開発するだけで、すべてのデバイスに対応することが可能に。結果として、開発期間や費用などのコスト削減につながります。
ストア申請が不要
ネイティブアプリをリリースしたり、バージョンアップデートを実施する場合、アプリストアへの申請と審査が必要になります。
しかし、ストアを介さずWebサイトから直接インストールできるPWAであれば、ストア申請の手間がかかりません。
加えて、AppleやGoogleのガイドラインを遵守する必要がなく、自由度の高いアプリ開発が可能になります。
検索からリーチできる
検索エンジンからサイトに流入できることも、WebサイトであるPWAならではのメリット。
ネイティブアプリは一度アンインストールされてしまえば使われなくなってしまいますが、PWAは検索で流入してきたユーザーに対して何度もリーチすることが可能です。
表示速度が速い
PWAはキャッシュ機能により、ページ読み込み速度が速いのも特徴です。読み込み速度の速さはユーザーの利便性を高め、SEOの観点からも評価されやすくなります。
また、あらかじめページを読み込んでおくことでオフラインでも閲覧することが可能です。
ホーム画面にアイコンを表示できる
PWAもネイティブアプリのようにスマートフォンのホーム画面にアイコンを表示させることができます。
ブラウザのブックマークよりもユーザーの目につきやすく、Webサイトへの再訪を促しやすくなります。
プッシュ通知を送ることができる
PWAはプッシュ通知を送ることができます。（2021/11/10現在ではAndroid＋Chrome環境でのみ対応）
プッシュ通知を使えばユーザーに直接的に新たなコンテンツを訴求することができ、Webサイトへの再訪を促すことができます。
Googleのチェックリスト：PWAの条件とは？
モバイルサイトをPWAにするためのチェックリストがGoogleから公開されています。
このチェックリストには、PWAを作成するうえで最低限遵守すべき項目をまとめた「コアチェックリスト」と、さらに質の高いPWAを目指すための「より最適なPWAのためのチェックリスト」の２種類があるため、それぞれについて詳しく紹介します。
PWAのコアチェックリスト
コアチェックリストには、PWAを作成するうえで守らなければならない最低限の5つの要素がまとめられています。
・ページ読み込み速度
ユーザビリティや離脱率に大きな影響を与えるとして、Googleはページ読み込み速度を重要視しています。
・あらゆるブラウザに対応
ユーザーがPWAをインストールする際、まずはデバイスにDLされている任意のブラウザを使用してPWAのWebページにアクセスします。そのため、あらゆるブラウザで動作する必要があります。
・あらゆる画面サイズに対応
ユーザーがPCやスマートフォン、タブレットなどの任意のデバイスでPWAを使用できるように、あらゆる画面サイズに対応する必要があります。
・カスタムオフラインページを提供
オフライン状況下でも過去に読み込んだコンテンツを表示し、アプリを使用できるようにする必要があります。
・インストール可能
PWAはWebページをアプリのように利用するためのものであり、インストールしてデバイスのホーム画面にアイコンを表示させられるようにする必要があります。
より最適なPWAのためのチェックリスト
PWA作成の必要最低限の要素をまとめたコアチェックリストに加えて、Googleはより質の高いPWA作成のためのチェックリストも公開しています。
・オフラインで動作する
オンラインと同じようにオフラインで動作する
・アクセシビリティ
WCAG2.0アクセシビリティ要件を満たしている
・検索可能
オーガニック検索でサイトにリーチできるようにする
・入力方法
マウス、キーボード、スタイラス、タッチで同様に入力できるようにする
・許可要求のコンテキストを提供
APIを使用の許可を要求する際はコンテキストを提供する
・コードベースを正常に保つ
アプリケーションを最新の状態に保ち、コードベースを正常に保つ
日本・海外のPWA導入事例10選
PWAは国内外のさまざまなサービスに取り入れられています。ここでは、代表的な事例を厳選して紹介します。
Twitterも、2017年4月よりデフォルトのモバイルサイトに「Twitter Lite PWA」を導入しています。
同社は80％以上のユーザーがモバイルを利用している状況から、モバイルのWeb体験を向上することを課題に感じ、インスタントロード、ユーザーエンゲージメントの向上、データ消費量の削減を目的としてTwitterLiteを開発。
これにより、ユーザーにより質の高いUXを提供できるようになりました。
・送信されるツイートが75％増加
・バウンス率が20％減少
出典：Google PWAケーススタディ「Twittter Lite」
SUUMO
国内の主力不動産サイト「SUUMO」もPWAを導入。
同社は、サイトを訪れるユーザーの大半がスマホからアクセスしている状況を鑑み、モバイルサイトの利便性向上を急務としていました。
当初はネイティブアプリのダウンロードを推進していましたが、ユーザーにアプリをダウンロードさせ再エンゲージさせることは困難で費用がかさみ、対応策としてモバイルアプリと同様の高速で魅力的なUXを提供できるPWAを開発しました。
・ Webプッシュ通知のオープン率が31％に
ユニメイト
ユニメイトは、レンタルユニフォーム事業を展開する企業。ヒューマンエラーの起こりやすいサイズ申告のフローをAIによる画像認識を活用した自動採寸PWAを採用することで解決しました。
ストアからのダウンロードが不要なマルチデバイス対応のPWAでの開発を実施し、ストア申請やバージョン対応にかかる時間・労力の削減を実現。開発・運用コストを抑えることに成功しました。
★詳しくはこちら
アジア航測
アジア航測社は、航空測量をベースとして事業を展開する空間情報コンサルタント企業。同社は測量した水中の地形データを活用して海底地形マップが見られる釣り人向けのメディアサービス「釣りドコ」にPWAを取り入れました。
リリース後のコンテンツマーケティング戦略においてもオーガニック検索での流入を見込むことを念頭にPWA開発を実施。これにより、OSごとの開発やストア対応が不要となり、開発費用や運用にかかるリソースを削減できました。
★詳しくはこちら
日本経済新聞
4億5000万以上の月間UU数を誇る日本経済新聞のWebサイトも、より良いUXを実現するためにPWAを導入しました。
同社は、スマートフォン利用者の増加に伴うモバイルサイトのニーズの高まりを受け、読み込み速度やモバイル向けに最適化されていないページが複数のエリアに存在しているなどの課題を解決する必要性を感じていました。
対応策としてPWAを開発し、大幅なパフォーマンスの改善とともにビジネス面でも大きな影響が生み出されています。
・アプリの立ち上げが14秒短縮
・読み込み速度が75％改善
・オーガニック流入が2.3倍に
・コンバージョン（会員登録）数が58％増
・1日あたりのアクティブユーザー数が 49%増
・セッションあたりPV数が2倍に
出典：Google PWAケーススタディ「日本経済新聞」
Alibaba
世界最大のオンラインBtoB取引プラットフォーム「Alibaba.com」もPWAを導入。
当初、Alibabaはモバイルサイトをユーザーがアプリへ移行するためのプラットフォームとみなしていましたが、多くのユーザーがブラウザ内にとどまる傾向を受け、PWAを取り入れました。
・iOSでの月間アクティブユーザー数が14％増加（Androidだけだと30％）
・ホーム画面に追加によりインタラクション率が4倍に
出典：Google PWAケーススタディ「Alibaba」
ランコム
高級化粧品ブランドのランコムは、デスクトップサイトと比較した際のモバイルサイトのコンバージョン率の低さを課題に感じ、モバイルサイトのUX改善のためPWAを導入。
・プッシュ通知を介して回収されたカートのコンバージョン率が8％増加
出典：Google PWAケーススタディ「ランコム」
MakeMyTrip
MakeMyTripは月間800万ユニークユーザーのWebサイトを持つインドを代表する旅行会社。
同サービスのユーザーは大半がネイティブアプリを使用しており、予約の半数以上がネイティブアプリ経由となっています。
しかし、同社は10億人を超えるインドの旅行市場で新規顧客を獲得するにはモバイルWebサイトのUX向上が必須と考え、PWA開発に着手。
・ページの読み込み時間が38％向上
・買い物客のセッションが160％増
出典：Google PWAケーススタディ「MakeMyTrip」
George.com
George.comは英国を代表する衣料品ブランド。
モバイルショッピング体験に対するユーザーの期待が向上していたため、PWAを導入することでモバイル体験の向上に取り組みました。
・1回の訪問あたりのページビューが20％増加
・ホーム画面からの訪問のサイト滞在時間が28％増加
出典：Google PWAケーススタディ「George.com」
Weather Channel
Weather Channelは、1980年代から世界中の人々に利用されている天気予報プラットフォーム。
タイムリーで正確な情報を提供することが求められる天気予報という分野において、ネイティブアプリを通じてユーザーに重要な情報をプッシュしてきました。
しかし、これではモバイルトラフィックの50％のユーザーにしか情報を発信できておらず、モバイルWebサイトのユーザーに向けた情報発信や利便性の向上が課題になっていました。
対応策としてPWAを導入することで、モバイルサイトのUX体験の向上に成功。
出典：Google PWAケーススタディ「Weather Channel」
まとめ：PWAで開発・運用コストを抑えつつUX向上を実現
PWAの導入は、開発・運用コストの削減にとどまらず、ユーザビリティの向上にも大きく寄与します。
新規アプリ開発を考えている場合はもちろん、ネイティブアプリよりもWebサイトの方がユーザーニーズが高いサービスや、ネイティブアプリユーザー以外のユーザーをターゲットとした施策を打ちたい場合もPWAの導入を積極的に検討してみてはいかがでしょうか？
PWA開発をご検討中の経営者様・企画担当者様へ
モンスターラボには、豊富なPWA開発の実績があります。2200件を超えるサービス、プロダクト開発のノウハウを活かし、UXデザイナーと開発経験豊富なエンジニアが1つのチームとなり、デザインから開発までワンストップで対応いたします。
モンスターラボが提供するサポートの詳しい概要は、下記のボタンから資料をダウンロードしてください。
DX支援サービス紹介資料ダウンロード
直近のイベント
記事の作成者・監修者
関連記事
