2023/08/28
日常で使われているアプリには、大きく4つの種類があることをご存知でしょうか？
「Webアプリ」や「ネイティブアプリ」、「ハイブリッドアプリ」は聞いたことがあると思います。
そんな中、昨今注目されているのが「PWA（Progressive Web Apps）」というアプリです。
PWAとは、一言でいうと「Webサイトをネイティブアプリのように扱える技術」のことです。
本記事では、PWAの基礎知識から他のアプリとの違い、注目されている理由や開発費用の相場を解説していきます。
目次
｜PWA（Progressive Web Apps）とは？
PWAとは、Progressive Web Apps（プログレッシブウェブアプリ）の略称で、「Webサイトをアプリのように使えるようにする技術」のことです。
2015年に開催されたChrome Dev Summitで提唱され、現在もGoogleによって導入を推奨されています。
はじめに、PWAの基礎知識と他のアプリとの違いを解説していきます。
｜PWAの基礎知識
PWAは、Webサイトがスマートフォン向けのアプリのような利便性を備えたフロントエンド技術です。
WebサイトのコンテンツをアプリのようにPC・スマートフォンにインストールでき、機能やデザインもネイティブアプリと近く、
Webサイトの手軽さとネイティブアプリの高機能を併せ持っています。
そして、iOS・Android双方のプラットフォームで、同じ仕様のアプリケーションを動かせることができ、OSに左右されないことが特徴です。
PWAは、アプリストアを介さずにWebサイトから直接インストールすることができます。
インストール後にスマートフォンのホーム画面にアイコンを表示したり、プッシュ通知を送ることも可能です。
また、素早いWebページの読み込みや操作が可能になることから、Googleが導入を推奨しています。
｜PWAと他のアプリとの違い
上述のとおり、PWAはOSによる制限がありません。
PWAと他のアプリを比較する上で、重要となるのが以下の2種類のアプリです。
◇ ネイティブアプリ
◇ ハイブリッドアプリ
以下では、それぞれのアプリとの違いをご紹介します。
◆ ネイティブアプリとの違い
まず、ネイティブアプリとは、iOS・Androidそれぞれの環境に合わせて作られた専用アプリのことです。
普段Apple StoreやGoogle Playなどのアプリストアからダウンロードして使っているアプリはほとんどネイティブアプリです。
ネイティブアプリを開発する場合、まず、どのOSで使用するのかを想定し、そしてOSごとに開発工程が異なります。
双方で使用するのであれば、2つのプロダクトを開発しなければなりません。
また、iOSならApp Store 、AndroidならGoogle Playにアプリの申請をして承認が得られたらリリースができます。
一方、PWAはWebサイトから直接インストールし、ホーム画面にアイコンを表示できるため、アプリと似たような使い方ができます。
そのため、OSごとの開発や各種OSの承認を得る必要がない点がネイティブアプリとの大きな違いです。
◆ ハイブリッドアプリとの違い
ハイブリッドアプリとは、Webアプリとネイティブアプリ両方の性質を併せ持ったアプリのことです。
どのOSでも動作が可能で、PWAと特徴が変わらないと思うかもしれませんが、ハイブリッドアプリはAppStoreやGoogle Playといった
アプリストア経由でインストールをします。
ハイブリッドアプリの場合は、Webの仕組みを使って端末上で表示されるのが特徴です。
ネイティブアプリ上にブラウザを設けるような仕組みで表示されます。
これに対し、PWAはネイティブアプリのように使えますが、あくまでWebアプリであるため、ブラウザ上で表示されます。
｜PWAが注目されている理由
なぜ今、PWAが注目されているのでしょうか？
PWAは従来のWebアプリよりも一歩先の技術で、Webサイトをあたかもネイティブアプリのような機能を兼ね備えたアプリを構築できます。
UX（ユーザー体験）が重視される中、オフラインでの動作が可能になる、表示速度が上がるといった点から、従来のWebアプリよりもユーザーにとって
使いやすい仕様が注目されている理由のひとつです。
UXを重視するのであれば、ネイティブアプリが向いていますが、iOSやAndroidといったそれぞれの環境に合わせた専用アプリを開発する必要があり、
ストア申請やアップデートを実施するごとに運用コストがかかります。
一方、PWAであれば、OSに合わせた専用アプリを開発する必要がなく、ストア申請やアップデートの手間も省けるため、開発・運用コストを
抑えることが可能です。
このように、UXの向上やコスト削減の2つの面から、PWAは注目されています。
｜PWAを導入するメリット
次は、PWAを導入するメリットを5つ挙げて詳しく説明します。
｜OSによって開発を変える必要がない
これまで説明してきたように、PWAはネイティブアプリのようにOSやデバイスに左右されません。
そのため、1つのプロダクトを開発するだけで、すべてのデバイスに対応することが可能になります。
結果として、開発期間の短縮や費用などのコスト削減につながります。
｜ストア申請が不要
ネイティブアプリの場合、リリースをしたり、バージョンアップデートをする際に、アプリストアへの申請と審査が必要になります。
申請が通らない場合、リリース延期や修正作業までもスケジュールに組み込まなければなりません。
しかし、Webサイトから直接インストールできるPWAであれば、ストア申請の手間がかかりません。
また、AppleやGoogleのガイドラインを遵守する必要がなく、自由度の高いアプリ開発が可能になります。
｜UX（ユーザー体験）の向上
PWAは、キャッシュ機能によりページ読み込み速度が速いのも特徴で、オフラインでもサイトを利用することができます。
0.1秒表示が遅れるごとに売上が1%減ると言われるほど、Webサイトにおいて快適なユーザー体験は重要な要素です。
データサイズやインターネット環境などの要因で、ユーザーの閲覧が阻害されず、ユーザーがより快適にサイトを利用できることで、
UXの向上が期待されています。
｜プッシュ通知が可能
PWAは、プッシュ通知を送ることができます。
プッシュ通知とは、ユーザーのスマートフォンに通知を発信する機能です。
プッシュ通知を行うことでユーザーに最新情報を共有でき、Webサイトへの訪問を促すことができます。
iOSでは、2023年3月27日に公開された iOS 16.4からiPhoneのSafariでもPush通知が利用できるようになりました。
｜開発・運用コストが抑えられる
PWAは、アプリ開発と比べてコストが抑えられることも魅力の一つです。
通常、アプリ開発を行う場合はiOSとAndroidそれぞれに対応したアプリを開発する必要があるため、工数分の費用がかかります。
双方のOSに対応したアプリを作ることで、ユーザー数の増加が見込めますが、その分費用はかかります。
しかし、PWAはiOS・Android用に開発する必要がなく、既存のWebサイトに変更を加えるだけで導入ができます。
自社でWebサイトの変更をする際は費用がかからず、外注した場合でも数十万円で対応できるため、コストを抑えてアプリ同様の機能を利用できます。
｜PWAのデメリット
メリットの多いPWAですが、場合によってはデメリットもあります。
｜ブラウザによって動作環境が異なる
ネイティブアプリとは違い、1つのプロダクトでさまざまなデバイスに対応できるPWAですが、使うブラウザによって動作環境が異なる場合があります。
たとえば、プッシュ通知の場合、Androidの方がPWAへの対応を強化しており、iOSでは対応が遅れているため、使える機能に制限がかかります。
このようにOSによってサポートの差があるので、全てのブラウザで同じように表示したいと考えている場合にはデメリットとなるでしょう。
｜通常のWebサイト制作と比べると割高
ネイティブアプリと比較すると開発費用は抑えられますが、通常のWebサイトのみを開発するよりもコストがかかります。
理由としては、基本的な設計はWebサイトと変わらないものの、プッシュ通知やアイコン化などWebサイトを、PWAとして機能させるための開発が
追加されるからです。
｜Googleのチェックリスト
WebサイトをPWAにするためのチェックリストがGoogleより公開されています。
このチェックリストには、PWAを作成する上で最低限遵守すべき項目がまとめられています。
以下は、最低限守らなければならない5つの要素です。
◆ ページの読み込み速度の維持
Googleはユーザーへのパフォーマンスを重視しています。
その中で、ページの読み込み速度がユーザビリティや離脱率に大きな影響を与えるとしています。
◆ どのブラウザにも対応
PWAをインストールする際、まずはデバイスにダウンロードされている任意のブラウザを使用してPWAのWebサイトにアクセスします。
そのため、あらゆるブラウザで動作する必要があります。
◆ あらゆる画面サイズに対応
PCやスマートフォン、タブレットなどデバイスにはさまざまなサイズがあります。
どのデバイスでもPWAを使用できるように、あらゆる画面サイズに対応していることが必須です。
◆ カスタムオフラインページを提供
オフラインでも過去に読み込んだコンテンツを表示し、アプリを使用できるようにする必要があります。
◆ インストール可能
PWAはWebページをアプリのように利用するため、インストールしてデバイスのホーム画面にアイコンを表示させられるようにする必要があります。
｜PWAの開発費用相場
PWAを開発する際、他のアプリとの費用相場を比較したものが以下となります。（あくまで目安としてご参考ください）
・Webアプリ：約100万円〜
・ネイティブアプリ：約300万円〜
・ハイブリッドアプリ：約200万円〜
・PWA：約10万円 〜
規模や機能数、開発期間によって開発費用は異なりますが、PWAは他のアプリと比較してコストが抑えられることがわかります。
もし、フリーランスに依頼した場合は、約5万円〜10万円ほどで開発が可能です。
アプリ開発会社に依頼した場合、上記の相場となりますが、企画から設計まですべて任せることができるので、社内にPWAに関しての担当部署や
専門知識のない企業はアプリ開発会社への依頼がおすすめです。
また、フリーランスの場合、「開発中やサービスのリリース後に連絡が取れなくなってしまった。そのため、開発や保守が中断してしまい困っている」
などの声もよく耳にします。
アプリ開発会社では、開発会社が責任を持って開発を請け負いますのでそのようなリスクはほぼありません。
｜PWA導入事例
PWAは国内外さまざまなサービスで導入されています。以下では代表的なPWAの導入事例をご紹介します。
多くの人が利用している「Twitter」でも、世界的にPWAへの対応を行っています。
同社は80％以上のユーザーがモバイルを利用している状況から、モバイルのWeb体験を向上することを課題に感じ、ユーザーエンゲージメントの向上や
データ消費量の削減などを目的として「Twitter Lite」を開発しました。
【PWAの成果】
・1セッションあたりのページビューが65％増加
・ツイートが75％増加
・離脱率が20％減少
※参考：Google PWAケーススタディ「Twittter Lite」
｜日本経済新聞
日本経済新聞のWebサイトも、より良いUXを実現するためにPWAを導入しています。
同社は、スマートフォン利用者の増加に伴うモバイルサイトのニーズの高まりを受け、読み込み速度やモバイル向けに最適化されていないページが
存在しているなどの課題を解決する目的でPWAの導入をしました。
【PWAの成果】
・表示速度が2倍
・アプリの立ち上げが14秒短縮
・読み込み速度が75％改善
・オーガニック流入が2.3倍増
・コンバージョン（会員登録）数が58％増
・1日あたりのアクティブユーザー数が 49%増
・セッションあたりPV数が2倍増
参考：Google PWAケーススタディ「日本経済新聞」
｜SUUMO
日本の大手物件検索サイトSUUMOもPWAに対応しています。
SUUMOのモバイルサイトは、多くのユーザーがオンラインで増え続ける住宅情報を常に把握するために、検索エンジンに依存しており、
大量のトラフィックが流入している状況でした。
そのため、モバイルアプリと同様の高速で魅力的なUXを提供できるPWAを開発しました。
【PWAの成果】
・ ロード時間が75％短縮
・ Webプッシュ通知のオープン率が31％向上
参考：Google PWAケーススタディ「SUUMO」
｜Alibaba
200以上の国と地域にサービスを提供する世界最大のオンラインBtoB取引プラットフォーム「Alibaba.com」もPWAを導入しています。
同社は当初、モバイルサイトはアプリ利用者ではないユーザーをアプリへ促すプラットフォームと考えていましたが、実際のところ多くのユーザーは
モバイルサイト内にとどまる傾向を受け、PWAを取り入れました。
【PWAの成果】
・ブラウザ間でコンバージョン率が76％増
・iOSでの月間アクティブユーザー数が14％増（Androidのみは30％）
・ホーム画面に追加によりインタラクション率が4倍
参考：Google PWAケーススタディ「Alibaba」
｜まとめ
〜 PWAはコストも抑えつつ、UXの向上も実現 〜
PWAの導入は、コストの削減だけでなく、前述の導入事例のようにUXの向上にもつながります。
新規でアプリ開発を考えている方や既存Webサイトのアプリ化を検討している方は、まずPWAの導入を積極的に検討してみてはいかがでしょうか？
VNEXTでは、通常のアプリ開発はもちろん、PWAの導入支援も行っております。
PWAについて、気になることがありましたら以下よりお気軽にお問い合わせください！
▶︎ お問い合わせ：https://vnext.co.jp/contact.html?view=contact
▶︎ VNEXTのアプリ開発についてもっと知る：https://vnext.co.jp/service-app.html