・PWAってなに？
・PWAを開発するメリット、デメリットを知りたい
・PWAを開発したい
このような方は、本記事を参考にしてください。
PWAの開発について以下の内容を解説しています。
- PWAとは？
- ネイティブアプリとの違い
- 開発するメリット・デメリット
- 導入事例
- 開発方法や使用される開発環境
- 将来性
是非、最後までご覧になってください。
\アプリ開発はお任せください/
PWA（プログレッシブウェブアプリ）とは？
PWAとは、最新のWeb技術で開発されたネイティブアプリと同様に操作できるWebアプリのことです。
Webサイトをスマホ表示できるレスポンシブデザインと似ていますが、PWAはアプリのため、端末内にインストールをして使用できる特徴を持ちます。
また、オフラインか低接続性の状況でも動作するように設計されており、インターネットに接続されていない、または接続性が悪い場所でも使用することもできます。
2016年からユーザーエクスペリエンス・Webアプリケーションの応答性と信頼性の向上を目的として、Googleが推奨しているアプリの形態でもあることから注目を集めています。
PWA・ネイティブアプリ・ハイブリッドアプリの違い
PWA以外に、スマートフォン内にインストールして使用できるアプリとして「ネイティブアプリ」と「ハイブリッドアプリ」があります。
PWAと似た機能を持ちますが、違いを理解しておきましょう。
ネイティブアプリとの違い
| 種類 | PWA | ネイティブアプリ |
|---|---|---|
| 概要 | ・Webサイトでありながらアプリの様に扱える ・ストアを経由せずにインストールできる |
・ストア経由でインストールする |
| メリット | ・URLを知って入ればアプリを起動できる ・読み込みが早い ・端末の機能を一部使用できる ・ストアの審査がないため、開発の自由度が高い ・オフラインでも使用可能 |
・端末の機能をフルに活かせる ・ストアを活用して集客できる ・動作が早い ・オフラインでも使用可能 ・端末のホーム画面に表示される |
| デメリット | ・ストア経由での集客が出来ない ・開発費用が高い ・対応していないブラウザがある ・現時点ではあまり主流ではない |
・OS毎に開発環境が変わる ・アプリのリリース、アップデートの際に審査が必要 |
ネイティブアプリとは、iOSやAndroidなどの特定のプラットフォーム向けに開発されるアプリのことです。
PWAはアプリストアを経由せずに、アプリインストールすることができますが、ネイティブアプリはアプリストアを経由してインストールする必要があります。
PWAと比較して、より端末の機能をフルに活用することができるため、高機能なアプリの開発に最適です。
しかし、iOS版とAndoroid版を別々に開発する必要があるため、開発費用が高額になるデメリットがあります。
ネイティブアプリについて詳しく知りたい方は、以下の記事をご覧になってください。
▶ネイティブアプリとは？Webアプリと何が違うの？開発言語や将来性も解説！
ハイブリッドアプリとの違い
| 種類 | PWA | ハイブリッドアプリ |
|---|---|---|
| 概要 | Webサイトでありながらアプリの様に扱える | ネイティブとWebの特性を併せ持つ |
| メリット | ・URLを知って入ればアプリを起動できる ・読み込みが早い ・端末の機能を一部使用できる ・ストアの審査がないため、開発の自由度が高い ・オフラインでも使用可能 |
・どのOSでも動作ができる ・デバイスの機能を利用できる |
| デメリット | ・ストア経由での集客が出来ない ・開発費用が高い ・対応していないブラウザがある ・現時点ではあまり主流ではない |
・動作が端末とネット環境に依存する ・一部機能に制限がある ・Web開発に関する知識が必要 |
ハイブリッドアプリとは、HTML・CSS、JavaScriptなどの、Web言語を使用して開発されるiOSアプリやAndoroidアプリのことです。
端末上のネイティブ環境で動作しますが、コンテンツはWebの仕組みを読み込むため「ハイブリッド」と呼ばれています。
全てのOSに対応しているため、iOSアプリとAndoroidアプリを別々に開発する必要がなく、開発費用を抑えつつネイティブアプリの様なアプリを開発したい方におすすめです。
しかし、ネイティブアプリ・PWAと比較して、最も動作速度が遅いデメリットがあります。
ハイブリッドアプリについて詳しく知りたい方は、以下の記事をご覧になってください。
▶ハイブリッドアプリとは？開発言語やメリット・デメリットを解説！
PWA開発の6つのメリット
PWA開発のメリットを見ていきましょう。
1.端末の機能を使用できる
PWAはネイティブアプリの様に、端末の機能を一部使用できます。
例として、以下の機能が挙げられます。
- プッシュ通知
- カメラ
- マイク入力
- オーディオ出力
- GPS
- 生体認証
- Bluetooth
- 音声認識
ネイティブアプリと比較すると、一部制限はありますが、プッシュ通知などの基本機能は使用可能です。
実際に操作していただければわかりますが、ネイティブアプリに劣らない操作感で使用することができます。
2.マルチデバイスに対応している
PWAは、HTML・CSS、JavaScriptといったWeb言語を使用して開発を行います。
そのため、利用するWebブラウザが対応していれば、PCやタブレットからもアクセスすることができます。
PWAを開発することで、あらゆるデバイスに対応できますので「コスパが良い」アプリの形態だと言えます。
3.開発費用を抑えられる
PWAはマルチデバイスに対応しているため、1つのアプリを開発してしまえば、その他の開発は必要ありません。
そのため、ネイティブアプリなどと比較して、大きく開発費用を抑えることができます。
ストアへの登録・審査も不要なため、ハイブリッドアプリと比較しても、操作性・パフォーマンスともに優れていると言えます。
4.インストールが簡単
PWAはアプリストアを経由せずに、端末にアプリをインストールすることができます。
ネイティブアプリの場合、アプリストアを経由してインストールする必要があるため、利用までのハードルが非常に高いですが、PWAは「ホーム画面に追加」をクリックするだけで、簡単にインストールすることができます。
ユーザーの利便性向上は勿論ですが、その他にも、アプリのアップデートや修正を容易にできる・Webコンテンツのため容量が軽いなど、多くのメリットがあります。
5.動作速度が早い
PWAはキャッシュ機能により、バックグラウンドでページを読み込みます。
そのため、読み込みにかかる時間が少なく、ネイティブアプリなどと比較して、動作速度が早いというメリットがあります。
動作速度が早いことで、離脱率の低下・回遊数の増加・CVの増加が期待できます。
6.オフラインでも使用できる
PWAはオフラインまたは低接続環境で動作するように設計されています。
そのため、インターネットに接続されていない、あるいは接続性が悪い場所でも使用することができます。
PWA開発の2つのデメリット
次に、PWA開発のデメリットを見てきましょう。
1.新規顧客の獲得が難しい
PWAはネイティブアプリと違い、アプリストアに配信をすることができません。
アプリストアに配信をすれば、何もしなくても利用者が増えることもありますが、PWAではその恩恵を受けることができないため、何かしらの方法で集客を行う必要があります。
集客方法は多岐に渡りますが、PWAの場合は、特にコンテンツマーケティングと相性が良いです。
- コンテンツからユーザーが流入
- サイトを閲覧したユーザーがPWAをインストール
- ユーザーの利便性向上
といった流れが期待できます。
2.一部のブラウザで使用できない
一部の機能になりますが、ブラウザにより正常に動作しないケースがあります。
Chromeでは正常に動作するのに、Safariでは上手く動作しないといったことがありますので注意が必要です。
今後数年で徐々に改善されていくと考えられます。
\アプリ開発はお任せください/
PWAの開発事例を5つ紹介
次に、実際にPWAを開発して導入している事例を紹介します。
1.Rettyグルメニュース
画像：Retty
国内最大級のグルメサービス「Retty」は、ニュースメディアである「Rettyグルメニュース」にPWAを導入しています。
PWAを導入して、以下の効果を得ることができました。
- Webページの表示速度が高速に
- プッシュ通知の利用が可能に
アプリをインストールしたユーザーだけでなく、ブラウザで閲覧しているユーザーに対しても、新着記事のお知らせを通知することができるようになりました。
▶実名グルメサービスRetty、PWA対応により「Rettyグルメニュース」の表示速度を高速化
2.SUUMO
画像：SUUMO
大手物件サイト「Suumo」もPWAを導入しています。
PWAを導入することで、以下の効果を得ることができました。
- ページの読み込み速度が75%現象
- プッシュ通知の開封率が31％越え
- CVが18%増加
アプリを利用していないユーザーにも、物件の新着情報を通知することができるようになりました。
3.Twitter
画像：Twitter Lite
Twitterの軽量版サービスである「Twitter Lite」も、PWAを導入しています。
PWAを導入することで、以下の効果を得ることができました。
- プッシュ通知の利用が可能に
- オフラインで使用が可能に
- 読み込み速度が向上
再訪問ユーザーの獲得に課題があったTwitterですが、PWAを導入し、プッシュ通知などを活用することで、ユーザーの再訪問率増加に成功しました。
その他にも、データ消費量の削減を行い、表示速度遅延によるユーザーの直帰率を20%削減するなどの効果を得ることができました。
4.日経電子版
画像：日経電子版
日経電子版は、2017年からPWAを導入していることで知られています。
PWAを導入することで、以下の効果を得ることができました。
【パフォーマンスへの影響】
- 動作速度が2倍向上
- インタラクティブになるまでの時間が14秒短縮
- プリフェッチで読み込みが75%高速化
【ビジネスへの影響】
- オーガニックトラフィックが2.3倍増加
- コンバージョンが58%増加
- 1日のアクティブユーザー数が49%増加
- セッションあたりの2倍のページビュー
PWA導入以前は、全てのコンテンツの表示に20秒、読み込みに3秒以上の時間がかかっており、ユーザーが離脱する大きな原因でしたが、PWAの導入で改善に成功しました。
▶日経はマルチページ PWA で新しいレベルの品質とパフォーマンスを実現（英語）
5.Alibaba
画像：Alibaba
世界最大のB2Bプラットフォームである「Alibaba」もPWAを導入しています。
- ブラウザ利用者のコンバージョンが76%増加
- アクティブ利用者数がiOSでは14%、Andoroid利用者では30%増加
PWA導入前は、ネイティブアプリからの集客に力を入れていましたが、利用者の多くがWebサイトを使用していたため、CVに繋がりませんでした。
PWAを導入し、ユーザーファーストを徹底的に追及した結果、CVが76%も増加しました。
\アプリ開発はお任せください/
PWAの開発方法と開発に必要な環境
「既存のWebサイト / WebアプリをPWA化する」方法と「PWAを実装したWebサイト / Webアプリを開発する」の2つの方法に主に分けられます。
どちらの開発方法でも、専門的な知識が必要なため、基本的に開発会社への依頼をおすすめしています。
また、PWAの開発は基本的に、以下の3つの開発環境が必要になります。
- JavaScriptフレームワーク・ライブラリ
- ユーザーインターフェースライブラリ
- バックエンド環境
それぞれ解説します。
1.JavaScriptフレームワーク・ライブラリ
画像：React
PWAの開発は、SPA（シングルページアプリケーション）を採用するケースが多いです。
シングルページアプリケーションは、単一のWebページで構成され、サーバーとの通信をJavaScriptで実行するタイプのWebサイト/アプリのことです。
一般的にSPAの開発は、JavaScriptフレームワーク・ライブラリを活用してフロントエンドを開発されます。
SPAに対応するJavaScriptフレームワーク・ライブラリとしては「React」「Vue.js」「React」が挙げられます。
特に、大規模なアプリを開発する場合は「React」がおすすめです。
2.ユーザーインターフェースライブラリ
画像：Framework 7
PWAの開発では、ユーザーインターフェースライブラリが多く利用されます。
UIライブラリは、利用するJavaScriptフレームワークに合わせて選択する必要がありますが、先程紹介した「React」を使用するのであれば「Framework7」がおすすめです。
Framework7は、オープンソースであり、無料で利用することができます。
3.バックエンド環境
画像：firebase
PWAの開発でも、通常のWebサイト/アプリの開発と同様に、バックエンド環境が必要です。
PHPやRubyで構築したバックエンド環境があるのであれば「REST API」を設置することで、フロントエンド側から呼び出しが可能ですが、より簡単にバックエンド環境を構築したい場合は「Firebase」などの、mBaaSの活用をおすすめします。
開発費用・工数を抑えたい方は「ノーコード」がおすすめ
「ノーコード」とは、プログラミング不要でアプリやWebサイトの開発ができる技術のことです。
2年ほど前から、非エンジニアでも開発ができる技術として国内で注目を集めています。
開発を外注をする場合でも、平均して30~50%の開発費用の削減に成功している事例が多く、費用を抑えつつ外注をしたい方に非常におすすめな開発方法です。
フルスクラッチの開発と比較して、開発の自由度は多少落ちますが、基本的なアプリであれば充分開発が可能です。
PWAの開発を検討している方は、まずは「ノーコードで実現可能か」を開発会社に相談してみてはいかがでしょうか。
また、PWAの開発によく利用されるノーコードツールの例として「Glide」が挙げられます。
自作を検討している方は、そちらの利用も検討してみてください。
\アプリ開発はお任せください/
PWAは流行らない？将来性は？
最後にPWAの将来性を見ていきましょう。
以下の画像は、MLSDevの調査したネイティブアプリの使用率の調査結果になります（アメリカのデータ）
ハイブリッドアプリやPWAが注目されているといっても、ネイティブアプリの利用率が75%を占めており、圧倒的にネイティブアプリの利用率が高いことが分かります。
将来的にPWAの導入は進んでいくと考えられますが、今後数年はネイティブアプリの開発が主流でしょう。
先程紹介した事例の多くでも、開発目的はネイティブアプリからの移行ではなく、ページ速度改善などによるユーザーの利便性を向上でした。
PWAとネイティブアプリの、どちらかが良いというわけではなく、サービス内容や事業規模で最適なアプリの形態は異なります。
自社サービスに最適なアプリの形態を選択しましょう。
【ツクル事業部】PWAの開発はお任せください
NoCode DBを運営する「ツクル事業部」は、フルスクラッチ開発からノーコード/ローコード開発まで対応した開発サービスを提供しています。
在籍するノーコードエンジニアは国内TOPレベルの技術力を誇り、複雑な要件にも対応可能です。
「こんなPWAを作りたい」といった内容で構いません。まずはお気軽にご相談ください。
PWA（プログレッシブウェブアプリ）まとめ
以上、PWAについて解説しました。
近年、ネイティブアプリの開発が主流ですが、将来的にPWAの導入も進んでいくと考えられます。
導入事例の多くで、動作速度の改善などにより、ユーザーの利便性向上の効果を得られていました。
また、PWAはマルチデバイスに対応しているため、ネイティブアプリと比較して大きく開発費用を抑えることができます。
ネイティブアプリを開発する予算はないけど、アプリやWebサイトで自社サービスの認知を広めたいといった方は、この機会にPWAの開発を検討してみてはいかがでしょうか。
NoCode DBを運営する「ツクル事業部」は、フルスクラッチ開発からノーコード/ローコード開発まで対応した開発サービスを提供しています。
PWAの開発を検討している方は、お気軽にご相談ください。
