- スマホ向けのブログにはPWAが大事って聞くけど、そもそもPWAって何？
- PWAを搭載してるWordPressのテーマってあるの？
すもベビ
その疑問にすもベビが答えます。
スマホサイトを改善する技術として注目されるのが「PWA（progressive web apps）」です。
数年前から企業サイトでは積極的に導入されていますが、最近は個人ブロガーの間でもPWAの重要性が認識されるようになってきました。
でも、「聞いたことくらいはあるけど…」という人もまだまだ多いもの。
また、WordPressのテーマを決めるのに「PWA」の有無を検討しない人も少なくありません。
そこでこの記事では、PWAとはどのような技術なのか、PWAの技術をWordPressブログで利用する方法について解説します。
目次
PWAとは
PWAとは、スマホサイト（モバイルサイト）でアプリと同じような使い方を実現する技術です。
英語表記の「Progressive Web Apps」の頭文字を並べてPWAと呼ばれます。
一言で言えば、「ユーザーがあなたのブログをアプリのように利用できるようにする」技術です。
これだけでは「どういうこと？」って思いますよね。
そこで、PWAの技術でできることを具体的に書いていきます。
PWAで実現できる主な内容は５つです。
- プッシュ通知
- オフライン閲覧
- 表示速度の高速化
- アイコンのホーム画面への追加
- アプリのような使い勝手の良さ
プッシュ通知
プッシュ通知というのは、各種お知らせをアプリが自動的に表示してくれる機能です。
例えば、スマホのロック画面に新着メッセージやニュース速報・天気予報などを表示されますよね。
あれがプッシュ通知です。
PWAを使えば、ブラウザを閉じているユーザーにも記事の公開・更新などがユーザーにプッシュ通知されます。
何がすごいか。
通常、ユーザーがブログを見るときは次の手順を踏みます。
- ブラウザ（SafariやGoogleChromeなど）を開く
- 検索エンジンで検索する
- 記事を開く
でも、プッシュ通知がユーザーに届くことで、プッシュ通知からダイレクトにブログを見てもらえます。
あなたのブログがユーザーの目に触れる機会が格段に上がるということです。
すもベビ
プッシュ通知を送るには、ブログを開いたときに表示されるポップアップメッセージからユーザーに通知をOKしてもらわなければなりません。
「【サイトURL】が通知を送信しようとしています」という表示に対して、ユーザーが「許可」または「ブロック」を選びます。
このとき「許可」を選んでもらえれば、ユーザーに通知が届くようになります。
オフライン閲覧
PWAはWebブラウザのキャッシュを使う機能です。
一度読み込んだデータを再度読み込む必要がなくなり、オフラインでもキャッシュデータを使ってブログを閲覧できます。
表示速度の高速化
PWAにはプリキャッシュ機能があります。
プリキャッシュ機能というのは、用いられる頻度の高い情報や関連する情報のデータをあらかじめ蓄えておく機能です。
どうなるか。
ユーザーが記事を読んでいる間に続きのデータを読み込んでくれるので、表示速度が高速化します。
記事がスムースに表示されるとユーザーはストレスなく記事を読めますし、Googleの検索エンジンにも評価されやすくなります。
アイコンのホーム画面への追加
ブログのアイコンをスマホのホーム画面に追加できます。
スマホのホーム画面から直にブログへアクセスしてもらえるので、ブログを見てもらえる確率がグッと高くなります。
すもベビ
ホーム画面にアイコンを追加してもらうには、ブラウザのメニューから追加してもらうか、ブログを開いたときに表示されるポップアップメッセージで「許可」をタップしてもらう必要があります。
アイコンとして表示されるのはブログのファビコン（ブラウザのタブに表示される小さい画像）です。
【ファビコン】
未設定の場合は早めに設定しておきましょう。
ファビコンの設定については下の記事で詳しく解説しています。
アプリのような使い勝手の良さ
PWAを搭載したブログでは、見た目や使い心地についてアプリと同じようなユーザー体験ができるようになります。
例えば、アプリと同じフルスクリーンモードになりアドレスバーも消えるので、ブラウザよりもユーザーのブログへの没入感を高められます。
PWAのメリットとデメリット
PWAのメリットとデメリットは次のとおりです。
| メリット | デメリット |
| ・ユーザビリティーの向上
・検索順位の向上 ・アクセスアップ |
・一部のブラウザでは使えない
・キャッシュが残る |
PWAのメリット
PWA最大のメリットは、表示速度の向上によるユーザビリティーの向上と、それに伴う検索順位の向上です。
ユーザーがストレスなくブログにアクセスできるようになると、検索エンジンからも評価されて検索順位が上がります。
また、プッシュ通知やホーム画面へのアイコン追加によってブログ閲覧のハードルが下がり、アクセスアップにつながります。
オフラインでブログを閲覧できるというのも、PWAの大きなメリットです。
PWAのデメリット
PWAは新しい技術なので、一部のブラウザでは利用できないことがあります。
また、ブラウザのキャッシュが残るので、更新情報がすぐ反映されないこともデメリットと言えます。
PWAをWordPressで利用する方法
PWAをWordPressブログに利用する方法は大きく２つあります。
- プラグインを使う
- テーマを変更する
プラグインでWordPressにPWAを搭載する
WordPressにPWAを搭載するプラグインは複数ありますが、代表的なのが次の２つです。
- Super Progressive Web Apps
- PWA for WP＆AMP
いずれも「プラグイン名 使い方」で検索すれば設定方法を書いた記事が出てきます。
すもベビ
私がメインブログで使用しているのは「Super Progressive Web Apps」です。
ブロガーの使用者が多くネット上に情報がたくさん出回っているからです。
テーマを変更する
WordPressテーマにはデフォルトでPWAが実装されているものがあります。
PWAが実装されている主なテーマは次のとおりです。
- Cocoon
- Luxeritas
- THE THOR
CocoonとLuxeritasは無料テーマ、THE THOR（ザトール）は有料テーマです。
他にもPWA対応しているWordPressテーマは複数ありますが、デザイン性や機能性を兼ね備えているテーマは現時点では上の３つくらいです。
特にTHE THORは、機能の多さとデザイン性の高さが評判のテーマで、ブロガーでも利用者が急増しています。
すもベビ
PWAの搭載などに魅力を感じてTHE THORを購入し、今はサブブログで使い勝手を試しています。
想像以上にブログのスピードが向上してPWAも快適なので、今後はすもブロもTHE THORに切り替える可能性があります。
PWAとは何かのまとめ
PWAは、あなたのブログをまるでアプリのように変えてくれる技術です。
主な特徴は５つ。
- プッシュ通知
- オフライン閲覧
- 表示速度の高速化
- アイコンのホーム画面への追加
- アプリのような使い勝手の良さ
ユーザビリティーと検索順位の向上、アクセスアップにつながる重要な技術として、今後は導入するサイトやブログがますます増える見込みです。
WordPressテーマでもPWAを実装するものが複数ありますしプラグインでも導入できるので、早めに検討してみてください。
