PWA対応サイト5選！アプリ開発よりも導入コストの低いPWAとは？

「ユーザーの利便性を考えてスマホのネイティブアプリを作成したけれど、開発にかける予算がない......」とお悩みの企業も多いでしょう。ユーザーにアプリを提供することは企業との接触機会を増やし、愛着度を高める施策になります。

しかし、アプリ開発には技術が高くなればなるほど、莫大な予算がかかります。そんな時に、スマホのネイティブアプリのような操作性を実現できる「PWA」にたどり着いた方も多いのではないでしょうか。

そこでこの記事では、

• PWAとは？
• PWA対応サイト5選
• PWAの導入するメリット

について紹介します。

PWAとは

PWAとは、「Progressive Web Apps」の略称で、Webサイトにネイティブアプリのような機能性を持たせる技術のことです。PWAを導入することにより、ユーザーはアプリをダウンロードせずに機能性の高いWebサイトを実現できます。

現在はAndroidのみに対応しており、Appleの提供する「iOS」は対応していません。ただ、今後は実装されることが予想されるので、WebサイトのPWA導入は必須と言えるでしょう。

とは言っても「PWAを導入すればどんなことができるの？」と疑問を抱いている方のために、PWAでできることを紹介します。

プッシュ通知が可能

PWAを導入することで、アプリと同じようにプッシュ通知を送ることが可能です。本来アプリをダウンロードしなければ、ホーム画面に通知を送ることができません。しかし、PWAを導入すれば、Webサイトを開いていなくても通知が来るように設定できます。

アプリのような使用感

PWAを導入すれば、Webサイトでアプリのような使用感を得られます。また、アプリのような視認性も実現可能です。「アプリのダウンロードがめんどくさい」というユーザー層に効果的です。

表示スピードの向上

PWAにはプリキャッシュ機能があります。これは、ユーザーがWebサイトのページを読み込んでいる間に、次のページをあらかじめ読み込んで置いてくれる機能です。

スマートフォンでWebサイトにアクセスするユーザーは、ページの読み込みに3秒以上かかってしまう場合、ページを離脱しやすくなってしまいます。PWAを導入することで表示速度問題を解決できるのです。

オフラインで操作可能

PWAは前述した通り、ページをあらかじめ読み込んでくれるプリキャッシュ機能が付いています。そのため、オンラインのキャッシュデータを保存し、オフライン環境でもWebサイトを閲覧することができます。

ホーム画面に追加可能

PWAを導入することで、Webサイトをスマートフォンのホーム画面に追加することができます。アイコンをタップするだけでWebサイトにアクセスできるので、アプリと遜色ありません。

ユーザーとの接触機会を増やすことができるので、Webサイトを運営している企業はPWAの導入をオススメします。

PWA対応サイト5選

「PWAに対応しているサイトを見てみたい」という方のために、PWA対応サイト5選を紹介します。

Twitter

画像引用：Twitter

まず1つ目はTwitterです。Twitterはアプリ版とほとんど遜色なく利用できます。視認性も使用感も問題なく利用できます。ただ、SNSは常に情報が更新されているので、オフラインでの使用はできません。

Instagram

画像引用：Instagram

2つ目はInstagramです。こちらもアプリ版との遜色はありません。ただ、ストーリーや投稿といった様々な機能がありますが、少し使いにくいイメージです。こちらもTwitterと同じでオフラインでの使用はできません。

スカイスキャナー

画像引用：スカイスキャナー

3つ目はスカイスキャナーです。スカイスキャナーは複数のトラベルサイトから最安値で航空券を探すことができるサイトです。PWAを導入しており、ネイティブアプリを使っているような感覚で使用可能。アプリを使っていると錯覚してしまいそうなくらいで、ユーザービリティが非常に高いです。

Suumo

画像引用：【SUUMO】不動産売買・住宅購入・賃貸情報ならリクルートの不動産ポータルサイト

4つ目は大手住まい探しサイトのSuumoです。PWAを導入しており、スマホ全画面表示でネイティブアプリのように使用できます。ユーザーのアクセス意図が「膨大なデータの中から一部を抽出する」ことを目的としている場合は、素早く表示できるかが鍵になります。

特にPWAは表示速度を上げてくれるので、検索サイトの場合は対応必須です。

日本経済新聞

画像引用：日本経済新聞

最後は日本経済新聞です。PWAで話題に上がる日経電子版ですが、ニュース記事をオフラインで見ることができるなどの機能が備わっています。また、オフライン時に画像の質や操作性を失うことがなく、PWAを完璧に導入した事例といっても過言ではありません。

ユーザーに鮮度の高い情報を届けるだけでなく、操作性を損なわずにオフラインで記事を見せることは、ユーザービリティが高いと言えます。情報を多く扱うWebサイトを運営している企業はPWAの導入を考えましょう。

PWAを導入するメリット

PWAを導入することは、Webサイトに様々な恩恵をもたらします。前述した通り、たくさんの機能が備わっているので、ユーザーの利便性が良いWebサイトをつくことができます。

PWA導入はアプリを開発するよりも経済的

PWAの導入はアプリを開発するよりもコスト面で経済的です。PWAの導入は、規定のコードとファイルを作成するだけで導入できます。専門的な知識が必要になるために外注および費用がかかりますが、5万円~10万円で対応してもらえるでしょう。

一方でアプリの開発には機能を増やせば増やすほど費用は高くなり、平均で200万円以上はかかります。

予算をかけられるのならアプリを開発することに越したことはありません。低予算しか使えない場合はPWAの導入を考えましょう。

コンテンツの露出機会を増やす

PWAにはプッシュ通知機能やアイコンをホーム画面に追加することができるために、新規コンテンツの作成時など、自由に通知を送ることができます。

そのため、PWA導入はコンテンツの露出機会を増やすことができるのです。通常はプッシュ通知を送ることはできないために、一度アクセスしたユーザーを取り込むことができません。

PWAを使うことにより、コンテンツを見てもらう機会を作ることができます。そうなると、コンバージョン率の向上にもつながるのです。

PWA対応を確認するならアイコンをホーム画面に追加してみよう

PWAを導入した後は、アイコンをホーム画面に追加して確認してみましょう。その際には、iOS対応のiPhoneを使うのではなく、Androidのスマートフォンを使用してください。

ホーム画面にアイコンが追加できれば、WebサイトのPWA対応は完了です。

PWAを導入してみよう

PWAについて紹介しました。進化し続けているIT業界ですが、PWAはまだまだ浸透していません。スマートフォンの登場で情報の取得が多様化した今、PCに向けてではなく、スマートフォンに適したWebサイトを作ることが大切です。

「自社で運営しているWebサイトをPWA対応にしたい」「予算がかけられないけれど、ネイティブアプリのような操作性なるWebサイトを作りたい」という方は、参考にしてください。

PWAの他の記事を読む

Webマーケターこそ押さえたい！プッシュ通知まで使えると話題のプログレッシブWebアプリとは

プッシュ通知まで使えると話題のプログレッシブWebアプリについての基本知識をご紹介します。プログレッシブWebアプリという技術を使ってWebアプリケーションを実装すれば、ページが高速化するだけでなく、ネイティブアプリのようにオフラインでも利用できるWebサイトを構築することができます。