PWA( Progressive Web App )は、 UI(ユーザーインターフェイス)を重要視する Google も推奨していますが、個人サイトにおける導入事例は非常に少ないです。
とはいえ、 Core Web Vitals(コアウェブバイタル)がランキング要素なので、サイトスピードの高速化施策として PWA は注目すべき機能です。
そこで今回は、数少ない個人サイトで PWA 対応させている僕が、 PWA にできることと最大のメリットについて徹底的に解説します。
PWA にできること5つ
PWA( Progressive Web App )にできることは5つがあります。
できること①
できること②
アイコンをホーム画面に追加できる
PWA はスマートフォンのホーム画面にアイコンを追加することができます。
PWA のアイコン
上の画像を見てわかるように、見た目もネイティブアプリと遜色ありません。
いちいちプラウザを開いて検索する手間が省けるので、ユーザーはアクセスが容易になります。
あなたが何かのジャンルに特化したサイトを運営していれば、ファンとなるユーザーがリピートしやすい。そうすることで、一定したアクセスが見込めるようになります。
外部サイト参照:MDN Web Docs『 PWA をインストール可能にするには』
ネイティブアプリのように使える
PWA のアイコンは見た目だけでなく、操作性もネイティブアプリに近いです。
アイコンを開くと、以下の画像のようにフルスクリーン表示に。
ネイティブアプリのような操作性にも関わらず、アプリのようにインストールする必要がりません。
1度プラウザからホーム画面に追加したら、以降はネイティブアプリのような感覚で利用できます。
このような使いやすさで、非常に高い UX(ユーザー体験)を実現できます。
オフラインでも閲覧できる
PWA は、強力なキャッシュ機能を用いていてページをローディングすることなく表示が可能です。
ユーザーがホーム画面の PWA アイコンをタップしたら、あらかじめキャッシュしておいたページ画面を読み込みます。そうすることで、なんとオフラインでもページを表示することが可能に!
電波が悪い場所でも閲覧ができるうえ、ローディングを待つストレスがないため非常に優れたユーザビリティを実現します。
オフラインでプッシュ通知が送れる
プッシュ通知は、 LINE を受信したときに表示されるポップアップのようなもの。
PWA の設定にもよりますが、新着通知やお知らせを送信することができます。
オフラインのユーザーにも通知が届くため、サイトへのアクセスが増加しやすい。そのため、リピート商品を扱うサイトであれば新たな CV(コンバージョン)を狙える可能性が。
サイト表示速度を高速化できる
PWA はサイト表示速度を高速化することができます。その仕組みは、あらかじめキャッシュしておいたページを表示するため、新たにページを読み込む必要がないから。
読み込み時間がなくページを閲覧できることは、ユーザーのストレスを減らすことができます。加えて、更新される情報がユーザーにとって有益であれば UI(ユーザーインターフェイス)を高まります。
さらにサイト表示速度は SEO におけるランキング要素。そのため、 サイト表示速度を改善して SEO 対策することで検索エンジンにおいて上位表示され、ユーザーの目に留まりやすくなるという効果が期待できます。
PWA の最大のメリットとは?
PWA( Progressive Web APP )の最大のメリットは「リピーターの獲得による CV(コンバージョン:成約)数のアップ」です。
先に説明した PWA にできること5つの効果によって、あなたのサイトのファンとなるリピーターを獲得し、サイトへのアクセス機会をふやすことができます。
もしもあなたが、リピートビジネス(購買 → 消費 → 購買 など)を行っているのであれば、ネイティブアプリのようにスマホ画面に追加されることは CV のチャンス!
ネイティブアプリとは異なり、あなたがサイトに SNS シェアボタンを設置していれば、すぐユーザーにシェアしてもらうことができます。
シェアしやすいことで UGC( User Generated Content:口コミやシェア)を得られる可能性も。 UGC は企業も注力しており、スマホ・ SNS 時代である現代のマーケティングにおいて非常に重要な要素となっています。
PWA によって UGC が増えることでサイトの信頼性が上がり、さらなるリピーターの獲得。 CV 数のアップに繋がっていく可能性があるわけです。
ブログ記事内のコメントにも UGC 効果があるので『 ブログのコメント欄に必要性や SEO 効果はある?ない? 』も参考にしてくださいね。
PWA を導入する2つの方法
個人サイトが PWA( Progressive Web APP )を導入する方法は、主に2つあります。
PWA を有効にするプラグインを使用する
WordPress なら PWA を導入するプラグインはいくつかあります。
- PWA
- Super Progressive Web App
- PWA for WP & AMP
どのプラグインを使用しても問題はありません。
ちなみに、僕が使用しているプラグインは『 PWA for WP & AMP 』です。
設定項目がそれほど多くなく直感的。さらにはプッシュ通知や『ホーム画面に追加する』バナー表示もワンクリックで設定することができるため、初心者でも扱いやすいです。
僕のように複数サイトを運営している人の場合、1つのサイトで設定に慣れてしまえば、他のサイトにも導入することは簡単です。
とはいえ、慣れない設定で「失敗するかもしれない」という方もいると思います。その場合は、サブドメインで WordPress サイトのテスト環境を作り、実験してから本導入する方が安全かもしれませんね。
>> WordPress プラグイン【 PWA for WP & AMP 】の設定方法はこちら
PWA 機能を有する WordPress テーマを使用する
PWA 機能を有しており、プラグインを使用することなく実装できる WordPress テーマがあります。
- 無料テーマ:Luxeritas(ルクセリタス)、Cocoon(コクーン)
- 有料テーマ:THE THOR(ザ・トール)、WING AFFINGER6(アフィンガー6)
どちらのテーマを使用しても問題ありません。
「お金をかけたくないから Luxeritas(ルクセリタス)や Cocoon(コクーン)にしよう!」でもOK。どちらも非常に軽量かつ高速のすばらしい WordPress テーマですからね。
ただし、有料テーマには有料たる理由があることも知っておきましょう。
無料で PWA にも対応していて高速。 SEO 評価も上がりやすいし、ユーザーにも優しい。そんな無料テーマが存在するのに、わざわざ有料とするのは『素人っぽくないデザインとカスタマイズ性を提供している』からです。
PWA のような高速化機能はもちろんですが、サイトのデザイン性はけっこう大切です。
ずぶの素人が作ったような安っぽいデザインと、プロが作ったような洗練されたデザインは、どちらがサイトとしての信頼性が高そうですか?後者ですよね(素人っぽさが逆に良いという人もいるかもしれませんが)。
僕も他サイトで使用している THE・THOR(ザ・トール)は、 PWA 機能以外にもデザイン性・カスタマイズ性に優れています。カスタマーサポートが充実している点でも安心感がありますね。
【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)
販売価格:16,280円(税込)
※当サイト限定『記事作成10の手順』特典付き
僕は4サイト運営しているうちの2サイトで THE THOR(ザ・トール)を使用しています。
PWA の設定もワンクリックで非常にかんたん。
高機能すぎて「初心者には使いづらいかも」という意見もあります。ただ、あくまで僕の個人的な感想ですがですが慣れたあとのメリットが非常に大きい。
PWA の導入だけでなく優れたデザイン性・カスタマイズ性は、ブログの収益化を加速させる助けになるでしょう。ぜひ、体験してみてください。
PWA にできることまとめ
PWA( Progressive Web App )にできることを最後にもう一度まとめます。
- アイコンをホーム画面に追加できる
- ネイティブアプリのように使える
- オフラインでも閲覧できる
- オフラインでプッシュ通知が送れる
- サイトスピードの高速化ができる
ブラウザのようなサイトでありながらアプリのような操作性をもつ PWA を導入することで、リピーターを増やして CV 数をアップする可能性があります。
SEO にもユーザーにも好まれるPWAを導入して、サイトの収益化を加速させていきましょう。
記事の内容についてご意見をお聞かせください