【5分で理解】PWAとは？ネイティブアプリとの違いや導入するメリットを事例を用いてご紹介します

「PWAって一体何？」
「PWAの導入を検討しているが、正直ネイティブアプリやWebアプリとの違いがよくわからない…」

などの疑問を抱えている、マーケティング担当者になりたてのそこのあなた！PWAとは「ホームページをまるでネイティブアプリのように使用できる仕組み」のこと。Google社が提案するWebアプリの一種です。本記事では、

• PWAの概要
• メリット/デメリット
• 導入事例

について、画像を使って分かりやすく解説していきます。記事の後半には、PWAが簡単に作れるツールも紹介しているので、参考にしていただければ幸いです。

PWAとは？

PWA（Progressive Web Apps）とは「Webサイト上で、ネイティブアプリのような使用感を提供するソフトウェア」のことです。補足をすると“Webアプリ”にGoogle社が規定する要素を含めたものを「PWA」と言います。

PWAはネットワークを経由しているので、表示内容はブラウザで見た時のホームページと同じです。
しかし、プッシュ通知やホーム画面にアイコンを設定することができるので、配信者側からすると、アプリに近い感覚で活用することができます。

PWAの実装で可能なこと

ここからは、PWAを実装すると、具体的にどのようなことができるようになるのか解説していきます。

①ダウンロードなしでホーム画面に設置できる

ユーザーはダウンロードしなくても、ネイティブアプリのようにホーム画面にアイコンを追加することが可能。アイコンをタップするだけでアクセス可能なので、配信者側からすると再訪問を促しやすい利点があります。

ネイティブアプリ同様、サイトをフルスクリーンモードで表示することができるので、ユーザーに対して没入感を与えることができる点も魅力的です。

ホーム画面に設置する方法

Androidの場合

引用：Google Chromeヘルプ

iPhoneの場合

出典：SUUMO

対象サイトを開き、赤枠内のアイコンをタップ。表示される項目の中から「ホーム画面に追加」を選ぶと、ホーム画面に設置できます。

②プッシュ通知が設定できる

ユーザーに許可を得た場合、アプリのように「プッシュ通知」で最新情報などのお知らせを行うことができます。プッシュ通知時に動的なコンテンツを入れることも可能です。プッシュ通知ができることで、ブラウザよりもユーザーとの接触回数を増やすことができます。

ただし、iOSではプッシュ通知が実装されていないので注意してください。

③表示スピードを速めることができる

PWAを実装することで、ブラウザに比べてページの表示スピードを速め、ネイティブアプリのような速さを可能にしました。

日本経済新聞社が提供している「日経電子版」もPWAを実装しており、その中の特定ページでは、ネイティブアプリよりも表示スピードが速いという結果が出ているとのこと。（参考：エンジニアHub）

改善を重ねることで、更なるスピードを追い求めることができるようなので、今後多くのPWAがネイティブアプリの表示スピードを上回る可能性もあります。

④オフラインでも使用できる

先述の通り、PWAにはページをあらかじめ読み込む「プリキャッシュ機能」があります。Web上のキャッシュデータを既に保存しているので、オフライン時にもサイトを閲覧することが可能です。

ただし、PWAを利用するには初回にホーム画面に設置する必要がありますので、新規ユーザーは当然のことながらオンラインの状態でなければなりません。

PWAのメリット

続いては、PWAを実装することで発生するメリットを解説していきます。

メリット①：アプリより提供範囲が広がる

PWAの場合は、インターネットを経由しているため、1つのサイトでiOS・Android関係なくすべてのスマホユーザーに提供することができます。

アプリは各ストアからダウンロードをしなければいけないので、時間がかかったりと、ユーザーにとって手間がかかりますよね。一方PWAの場合は、ブラウザから直接利用が可能（ホームボタンに追加するだけ）なので、ユーザーのハードルが低くインストールを促しやすいというメリットもあります。

一方アプリの場合、各ストアによる審査があり、この審査に落ちると配信ができません。審査基準はiOS、Googleともに厳しく設定されていて、初回の配信時に限らずアプリを配信している限り永遠に行われます。

苦労して配信したアプリでも、iOS用アプリはiOS内でのみ・Android用アプリはAndroid内でしか使用できず、すべてのスマホユーザーに届けることはできません。

コーディングに関しても、IOSアプリを制作する場合は「Swift」という専用のプログラミング言語を使わなければならず、Androidとは開発環境も大きく異なります。両OSに対応するアプリをそれぞれ作ることもできますが、その分コーディングのコストが2倍になるということを覚えておきましょう。

メリット②：ユーザーの直帰率が低下する

ページの表示スピードを速くしたり、オフラインでも使用可能にしたことで、ユーザーの通信環境に関する問題を解消させ、直帰率を下げることができます。

直帰率とは、アクセスしたページからどこにもリンクすることなく、ユーザーがサイトを離れてしまう割合のことです。

ある調査では、サイトの読み込み時間が1秒多くなるごとに10％ずつユーザーを失ったという結果が出ているとのこと。それほど、読み込み速度と直帰率は深く関係しています。（参考：Google Web Fundamentals）

直帰率とは？離脱率との違いと確認の仕方、改善方法まで徹底解説

メリット③：SEOに間接的な影響を与える

SEOのランキング要素にPWAは含まれていないので、SEOに直接的な効果を与えるわけではありません。ただし「ページの読み込み速度が速くなる・オフラインでも閲覧ができる」などユーザビリティの向上が見込めるメリットがあります。

そのためGoogleのサイト評価を受けやすく、間接的にではありますが、SEOの効果があると言えるのではないでしょうか。

【入門編】SEOとは？初心者でもわかりやすく基礎知識を解説！

PWAのデメリット

続いて、PWAを実装するデメリットを解説していきます。

デメリット①：iOSでは対応していない部分が多い　

PWAは、Googleが規定するウェブアプリなので、Androidでは出来ることが日々増えてはいます。しかし、競合であるアップル社のiOS（ブラウザの場合はSafari）が対応していない部分が多いことが1番のデメリットです。

特にプッシュ通知が実装されていないことで、ユーザーへの積極的なアプローチができず、PWAを実装するメリットが薄れてしまいます。今後この問題が解決すれば、ネイティブアプリに近いどころか、それ以上の存在になるかもしれません。

デメリット②：気づかれにくい

アプリは、各ストアを通じて発見できますが、PWAは、サイトにアクセスしなければ発見されません。偶発的なインストールは少なく、サイト情報に興味を持っている人にしかインストールされないため、アプリストアからリーチをさせていこうと思っている場合には不向きです。

既に店舗などで顧客と接点を持ち「うちのサイト、PWA対応していてアプリよりも簡単にアクセスできるので、ぜひ利用してみてください」などと声をかける場合には向いています。

PWAの導入事例　3選

ここで実際にPWAを実装しているサイトを紹介しますので、参考にしてみてください。

他にも、住宅情報サイトのSUUMOや化粧品会社のランコム、グルメサイトのRettyなどPWAを実装している事例はありますが、現在iPhoneでも対応可能なPWAを実装している例として、以下の3つを挙げていきます。

①日経電子版

出典：日本経済新聞

日本経済新聞社は、紙媒体だけではなく「日経電子版」というデジタルバージョンにも力を入れており、日経電子版だけで80万以上の購読数があります。この電子版も、2018年にPWAを実装しました。

同社のPWAを開発・実装した社員は、ページの読み込み速度を追い求めた結果、PWAにたどり着いたと話しています。

PWAはメリットでも挙げた通り、ネイティブアプリ並み、もしくはそれ以上の速度でページを読み込むことが可能。そこに目を付けたということです。（参考：エンジニアHub）
実際にユーザーもページの読み込み速度の速さを感じていて、一時Twitter内で「日経電子版」がトレンド入りをし、その速さについて話題となりました。

フルスクリーンモードが設定されているので、一度に見える情報が多く、読みたい記事をすぐに探せるメリットがあります。

事例②：Forbes JAPAN

出典：Forbes JAPAN

世界的な経済誌Forbesは、日本版の「Forbes JAPAN」という雑誌も出版しています。その電子版が、PWAを実装しました。日本ではあまり紹介されていない世界中のビジネスニュースなどを発信しています。

PWAを実装することでUXが向上し、結果ユーザー数や閲覧時間が増えた成功例です。

事例③：Google Travel

出典：Googleフライト

Googleが運営する「Google Travel（Googleフライト）」もPWAに対応しています。見えている範囲が広がるのでプランが探しやすく、比較もしやすいです。

誰かと旅行に行く場合にスクリーンショットを撮って共有することがあると思いますが、その場合でも余計な情報を入れず、わかりやすく情報を伝えることができます。

宿泊サイトやグルメサイトなどの比較系サイトを運営している場合は、PWAを実装した方がユーザビリティが向上しやすいでしょう。

PWAを作れるツール紹介

ここまでの解説を読み「PWAを実装したいけれど、難しそう」と思う方がいらっしゃると思います。そこで最後に、PWAを手軽に開発できるツールを紹介します。

出典：Mobsted

Mobstedは既存のWebサイトをコーディング無しでPWAに変換してくれる便利なツールです。

現在PWAを実装している場合でも、保存システムの改善や外観を整えるなどの「インストール率を向上させるコース」もあるので、ぜひ参考にしてみてください。

将来的に、PWAはネイティブアプリの代わりになるかもしれない

PWAは、ネイティブアプリとブラウザのいいとこどりをしたシステムではありますが、現在iOSで使えない機能が多いなど課題点があり、まだアプリの代わりになる存在ではありません。

しかし今後、Apple社が全面的にPWAを認め、iOSでも完全にPWAが実装できるようになれば、世の中のアプリが不要になる時代がやってくる可能性もあります。それほど革命的な技術なので、今後のApple社の対応を見守りたいところです。