PWAとは?メリットとデメリットは?WordPressで使えるのは「THE THOR」だけ?

PWAとは

  • スマホ向けのブログにはPWAが大事って聞くけど、そもそもPWAって何?
  • PWAを搭載してるWordPressのテーマってあるの?

すもベビ

その疑問にすもベビが答えます。

 

スマホサイトを改善する技術として注目されるのが「PWA(progressive web apps)」です。

数年前から企業サイトでは積極的に導入されていますが、最近は個人ブロガーの間でもPWAの重要性が認識されるようになってきました。

 

でも、「聞いたことくらいはあるけど…」という人もまだまだ多いもの。

また、WordPressのテーマを決めるのに「PWA」の有無を検討しない人も少なくありません。

 

そこでこの記事では、PWAとはどのような技術なのか、PWAの技術をWordPressブログで利用する方法について解説します。

 

PWAとは

PWAとは

PWAとは、スマホサイト(モバイルサイト)でアプリと同じような使い方を実現する技術です。

英語表記の「Progressive Web Apps」の頭文字を並べてPWAと呼ばれます。

一言で言えば、「ユーザーがあなたのブログをアプリのように利用できるようにする」技術です。

 

これだけでは「どういうこと?」って思いますよね。

そこで、PWAの技術でできることを具体的に書いていきます。

 

PWAで実現できる主な内容は5つです。

  • プッシュ通知
  • オフライン閲覧
  • 表示速度の高速化
  • アイコンのホーム画面への追加
  • アプリのような使い勝手の良さ

 

プッシュ通知

プッシュ通知というのは、各種お知らせをアプリが自動的に表示してくれる機能です。

例えば、スマホのロック画面に新着メッセージやニュース速報・天気予報などを表示されますよね。

あれがプッシュ通知です。

 

PWAを使えば、ブラウザを閉じているユーザーにも記事の公開・更新などがユーザーにプッシュ通知されます。

 

何がすごいか。

 

通常、ユーザーがブログを見るときは次の手順を踏みます。

  1. ブラウザ(SafariやGoogleChromeなど)を開く
  2. 検索エンジンで検索する
  3. 記事を開く

 

でも、プッシュ通知がユーザーに届くことで、プッシュ通知からダイレクトにブログを見てもらえます。

あなたのブログがユーザーの目に触れる機会が格段に上がるということです。

 

すもベビ

プッシュ通知を送るには、ブログを開いたときに表示されるポップアップメッセージからユーザーに通知をOKしてもらわなければなりません。

「【サイトURL】が通知を送信しようとしています」という表示に対して、ユーザーが「許可」または「ブロック」を選びます。

このとき「許可」を選んでもらえれば、ユーザーに通知が届くようになります。

 

オフライン閲覧

PWAはWebブラウザのキャッシュを使う機能です。

一度読み込んだデータを再度読み込む必要がなくなり、オフラインでもキャッシュデータを使ってブログを閲覧できます。

 

表示速度の高速化

PWAにはプリキャッシュ機能があります。

プリキャッシュ機能というのは、用いられる頻度の高い情報や関連する情報のデータをあらかじめ蓄えておく機能です。

 

どうなるか。

 

ユーザーが記事を読んでいる間に続きのデータを読み込んでくれるので、表示速度が高速化します。

記事がスムースに表示されるとユーザーはストレスなく記事を読めますし、Googleの検索エンジンにも評価されやすくなります。

 

サイトの読み込みが遅い?サイトスピードの調べ方と表示速度の上げ方を解説

 

アイコンのホーム画面への追加

ブログのアイコンをスマホのホーム画面に追加できます。

スマホのホーム画面から直にブログへアクセスしてもらえるので、ブログを見てもらえる確率がグッと高くなります。

 

すもベビ

ホーム画面にアイコンを追加してもらうには、ブラウザのメニューから追加してもらうか、ブログを開いたときに表示されるポップアップメッセージで「許可」をタップしてもらう必要があります。

 

アイコンとして表示されるのはブログのファビコン(ブラウザのタブに表示される小さい画像)です。

【ファビコン】

ファビコン

 

未設定の場合は早めに設定しておきましょう。

ファビコンの設定については下の記事で詳しく解説しています。

WordPressブログのファビコンの作り方と表示させる設定方法を画像付きで解説

 

アプリのような使い勝手の良さ

PWAを搭載したブログでは、見た目や使い心地についてアプリと同じようなユーザー体験ができるようになります。

例えば、アプリと同じフルスクリーンモードになりアドレスバーも消えるので、ブラウザよりもユーザーのブログへの没入感を高められます。

 

PWAのメリットとデメリット

PWAのメリットとデメリット

PWAのメリットとデメリットは次のとおりです。

メリット デメリット
・ユーザビリティーの向上

・検索順位の向上

・アクセスアップ

・一部のブラウザでは使えない

・キャッシュが残る

 

PWAのメリット

PWA最大のメリットは、表示速度の向上によるユーザビリティーの向上と、それに伴う検索順位の向上です。

ユーザーがストレスなくブログにアクセスできるようになると、検索エンジンからも評価されて検索順位が上がります。

 

また、プッシュ通知やホーム画面へのアイコン追加によってブログ閲覧のハードルが下がり、アクセスアップにつながります。

オフラインでブログを閲覧できるというのも、PWAの大きなメリットです。

 

PWAのデメリット

PWAは新しい技術なので、一部のブラウザでは利用できないことがあります。

また、ブラウザのキャッシュが残るので、更新情報がすぐ反映されないこともデメリットと言えます。

 

PWAをWordPressで利用する方法

PWAをWordPressで利用する方法

PWAをWordPressブログに利用する方法は大きく2つあります。

  • プラグインを使う
  • テーマを変更する

 

プラグインでWordPressにPWAを搭載する

WordPressにPWAを搭載するプラグインは複数ありますが、代表的なのが次の2つです。

  • 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テーマは複数ありますが、デザイン性や機能性を兼ね備えているテーマは現時点では上の3つくらいです。

特にTHE THORは、機能の多さとデザイン性の高さが評判のテーマで、ブロガーでも利用者が急増しています。

 

すもベビ

PWAの搭載などに魅力を感じてTHE THORを購入し、今はサブブログで使い勝手を試しています。

想像以上にブログのスピードが向上してPWAも快適なので、今後はすもブロもTHE THORに切り替える可能性があります。

 

PWAとは何かのまとめ

PWAは、あなたのブログをまるでアプリのように変えてくれる技術です。

主な特徴は5つ。

  • プッシュ通知
  • オフライン閲覧
  • 表示速度の高速化
  • アイコンのホーム画面への追加
  • アプリのような使い勝手の良さ

 

ユーザビリティーと検索順位の向上、アクセスアップにつながる重要な技術として、今後は導入するサイトやブログがますます増える見込みです。

WordPressテーマでもPWAを実装するものが複数ありますしプラグインでも導入できるので、早めに検討してみてください。