これが本当のPWA!モバイルブラウザやネイティブアプリとの違い。

これが本当のPWA!モバイルブラウザやネイティブアプリとの違い。 Web

2015年にGoogleからリリースされ、徐々に注目を集めるようになってきた「PWA

PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの

また、既存のネイティブアプリやモバイルブラウザとどのような違いがあるのでしょうか。

そんな疑問をこの記事で解決していきます。

また、PWAは読み込み速度や表示の高速化といったサイト強化だけでなく、モバイルサイトにも関わらず、ネイティブアプリのようなUXを実現する技術ですので、今後アプリの制作を検討している方は、ぜひ参考にしていただきたいと思います。

スポンサーリンク

・PWAとは?モバイルブラウザやネイティブアプリとの違いを解説

①そもそもPWAとは?

PWAとは、Progressive Web Appsの略称で、モバイル向けWebサイトをネイティブアプリのように使える仕組みです。

ネイティブアプリとは、iOSアプリやAndroidアプリのことです。(後程説明します)

簡単に言うと「アプリのような機能を持つWebサイト」です。

Googleが推奨する「レスポンシブデザイン」「https化」など、Webサイトの要素を備え、また「プッシュ通知機能」「オフライン機能」「ホーム画面へアイコンの追加」などアプリの要素も併せ持つWebサイトのことをPWAと言います。

例えば、大手不動産仲介の業者であるSUUMO(スーモ)はPWAを提供しています。

不動産検索アプリのように使えて、プッシュ通知も可能なため、アプリのような機能を持つWebサイトと言えます。

その他にもアプリのようなUIだけではなく、カメラの起動や位置情報の取得など、モバイルサイトとは思えないような機能を実装できることがPWAの魅力だと思います。

②PWAの特徴と機能

PWAの最大の特徴として、Googleから定められた3つのコンセプトがあります。

信頼性 – ネットワークの状態が不確実な場合でも、瞬時にロードし、ダウンアソールを表示しないでください。

高速 – 滑らかなアニメーションでユーザーの操作にすばやく反応します。

魅力的 – 没入型ユーザーエクスペリエンスを備えた、デバイス上の自然なアプリのように感じます。

Google

このようなコンセプトの基、PWAは実装されていきます。

ページ表示速度が速い

プリキャッシュ機能を使うことで、表示されるスピードが速くなります。

ページを見ている間に次のページのデータの読み込みを行うため、実際には2ページ目以降の表示スピードが上がります。

またPWAの場合、データ通信量が抑えられて読み込みが高速化されるため、ユーザーにとって負担が少なく、より快適にコンテンツを利用してもらうことができます。

※プリキャッシュ機能とは、作成したデータ、あるいはインターネットからダウンロードしてきたデータを手もとに保存しておくことで、次回再利用が必要となったとき迅速に呼び出すことが可能な機能。

オフラインで利用できる

インターネットにつながっていなくても、オフラインキャッシュデータを利用して、あらかじめページ情報を読み込んでくれるため、サイトを閲覧することができます。

オフラインの間のデータは、オンラインになったら送信することもできます。

プッシュ通知機能が利用可能

Webサイトでありながらプッシュ通知を送信することができます。特にECサイトにおいて、カゴ落ち(買い物カゴに商品が選択されている状態)でありながら購入には至っていないという場合に、プッシュ通知を送信して購入を促すことで売り上げが数が増えたという事例があります。

また、ブラウザを閉じている状態でも、プッシュ通知を送ることができるため、定期的にユーザーと接触が可能です。

インストールする必要がない

インストール不要のためユーザーの手間が省かれ、CV(コンバージョン)に到達しやすくなります。

例えば、「インストールのためにApp Storeでアプリを検索して、パスワードを入力して、アプリを起動して、会員登録して…」という手間を面倒に感じて途中でやめてしまったという経験はありませんか?

インストール無しでアプリと同様の機能を提供できれば、このような離脱を防ぐことができます。

ホーム画面にアイコン表示可能

アプリのアイコンのように、ホーム画面にアイコンを追加することができます。

アプリと同様、ホーム画面から簡単にアクセスしてもらうことができ、流入数増加につながります。

③モバイルブラウザ、ネイティブアプリとの違い

モバイルブラウザとの違い

モバイルブラウザとは、携帯電話やスマートフォンなどのモバイル端末で利用することを想定して設計されたWebブラウザのことです。

PWAはネイティブアプリとモバイルブラウザの良いとこどりと言われていますが、どのように違うのでしょうか?

PWAはモバイルブラウザと違い、ネットワークの品質に依存することがないので、高速なUXを保証できます。

また、バックグラウンドでアップデートをするため、ユーザーに再読み込みしてもらう必要もありません。

そして、従来のモバイルブラウザが主に静的な情報を扱っていたのに比べ、PWAは動的な機能を提供できます。

例えば、PWAはユーザーが没入しやすいフルスクリーンでUX体験を向上させながら、出前の注文や会員プログラムの参加、ビジネスでの連絡をスムーズに促すことができます。(動的機能)

モバイルブラウザではそういった一度に大容量を使用することが出来ません。

また、PWAはネイティブアプリのようにWeb経由でプッシュ通知を配信し、ユーザーをアプリに呼び戻すこともできるのです。

ネイティブアプリとの違い

ネイティブアプリとはアプリ自体をスマートフォンやタブレットにインストールし、端末上のみで作動するアプリのことです。

PWAとネイティブアプリの違いとして一番に挙げられるのは「アプリストア」有無です。

PWAにはアプリストアのような「仲介者」が存在しないため、iOSやAndroidのルールやガイドラインに縛られることなく開発が進められます。

審査に通す必要もないので、準備ができたらすぐにでもアプリをリリース出来ます。

また、ユーザーはアプリストアから探し出す手間もなく、URLからアプリが起動できるため素早く利用を開始でき、ソーシャルメディアやメール、テキストメッセージ、オンライン広告、QRコードなど共有する手段も豊富です。

ネイティブアプリはDLするフローにおいて、1ステップごとに20%のユーザーが脱落していくと言われています。

何故なら、インストールするまでに時間が掛かってしまうことがあるからです。

PWAはインストールする必要がないため、離脱を防いでアプリの利用率を高めることができます。

・PWAの実装方法

①実装するには?

PWAを実現する上で中心となる機能を提供するのが、Service Workerです。

Service Workerとは簡単に言うと、「バックグラウンドで動作する“プログラミング可能な”ネットワークプロキシ」です。

※プロキシとはインターネットへのアクセスを仲介し代行する役割のこと

httpsを有効化する

PWAのWebサイトを実装するには、Webサイトをhttps化しておく必要があります。

なぜなら、PWAの核となるService Workerはハイジャックや改ざんができてしまうため、Webサイトがhttps化されている状態でなければ使用することができません。

また、Webサイトをhttps化することは以前からGoogleも推奨しており、ユーザーの信頼を得られることから、SEOの面でも効果があると言われています。

まだhttps化していないという方はこれを機に対応しておくと良いと思います。

httpとhttpsの違い
http=暗号化されていない通信方式(安全でない通信)
通信が丸見えなので、フォームに入力した内容などが抜き取られるなどのリスクがあります。
パスワードやクレジットカード情報などが流出することで、
知らず知らずのうちに、閲覧者へ不利益を招く恐れがあります。
https=暗号化された通信方式(安全な通信)
通信が暗号化されている(見えない)ため、情報流出といったリスクが低くなります。
また、公式HPとしての正当性・信頼性が増します(なりすまし対策)。

ウェブアプリマニフェストを作成する

ウェブアプリマニフェストを作成することで、普通のアプリのようにホーム画面からアイコンをタップするだけで起動できるようになります。

起動時の画面をアプリのようなデザインにすることも可能になります。

ウェブアプリマニフェストではアプリの画像や説明文、起動時の画面を設定できます。

PWAにはウェブアプリマニフェストが必須となります。

Service Workerの使用

Service Workerを使用することで、オフラインでの操作、定期的なバックグラウンドの同期、プッシュ通知の送信などが可能となります。

Service WorkerはブラウザがWebページとは別にバックグラウンドで実行するスクリプトです。

つまり、Webページを閉じた状態でも、ブラウザ上でスクリプトを実行することができます。

※スクリプトとは簡易的なプログラムのこと。

これらを作成するにあたってはHTMLやCSS、Java scriptなどのプログラミング知識が必要になります。

②プログラミングを学習するには?

PWAを開発するにはプログラミング知識が必要になります。

アプリを開発する知識や実装するプログラミング言語と、たくさんの知識が必要になりますが、今回のPWAはGoogleから推奨されているので、TechAcademy [テックアカデミー] Google Apps Scriptコース をおすすめします。

Google Apps Scriptコースは、最短4週間のオンライン学習と、現役エンジニアによるメンターサービスによって、Gmailやスプレッドシートなどの作業を自動化するプログラムの習得ができます。

短期間で着実にスキルを身に付けられるよう、ビデオチャットを用いたマンツーマンメンタリングや、質問し放題の毎日のチャットサポートなどによって、挫折のない学習をサポートしてくれます。

また、社会人の方など勉強する時間がないという方にもスキマ時間で勉強が出来るのでオススメです。

オンラインブートキャンプ 無料体験 もあるので、興味のある方は一度お試しください。

・まとめ

PWAを導入して驚異の結果が出た企業を一つ紹介します。

化粧品ブランド「Lancôme」

化粧品ブランドの「Lancôme」は、トラフィックとリエンゲージメントを促進させるためにPWAを立ち上げ、ユーザーにネイティブアプリのようなUXを提供しています。

同社は2016年、モバイルブラウザがデスクトップブラウザのトラフィックを上回りましたが、予想に反して高いコンバージョン率は見込めませんでした。

デスクトップブラウザでは商品がカートに入ったら38%が注文まで進むのに、モバイルブラウザはたった15%。

これら結果から、ユーザーがスマートフォンで商品を購入するフローがボトルネックになっていることがわかりました。

「Lancôme」は最初、解決策としてネイティブアプリを検討していたそうです。

しかし、モバイルブラウザ経由の購入者はいちいちネイティブアプリを立ち上げたりしないため、アプリは定期的に購入するユーザーにしか効果がないと気づき、手を止めます。

彼らが目指していたのは、全てのデバイスで優れたUXを構築すること。

Googleによると、「同社はネイティブアプリのように読み込みが速く優れたUXの提供を必要としているが、同時にユーザーが見つけしやすく、どのデバイスからもアクセスできるものでなくてはならないという課題も抱えていた」と言っています。

そこで、これらの課題を解決するために「Lancôme」はPWAを採用しました。

その結果は、驚異的なものでした。

・ページの読み込み時間が84%減少
・コンバージョン率が17%増加
・iOSでのセッションが53%増加
・プッシュ通知の開封率が18%に改善
・プッシュ通知からアクセスしたユーザーの8%が商品を購入


このように、PWAがうまく活用できれば、大きな成果を得られるかもしれません。

PWAがネイティブアプリに代わることはないと思いますが、優れたUXを実現したいビジネスにとって、最適なものになると思います。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Web
スポンサーリンク
シェアする
CreaveGraffitiをフォローする
Creavegraffiti | Webマーケティング情報

コメント

タイトルとURLをコピーしました