PWA(Progressive Web Apps)とは?閲覧数アップに繋がる機能をブログ初心者にわかりやすく解説

PWAって聞いたことありますか?

わたしの使っているWordPressテーマTHE THOR(ザ・トール)に「PWA機能搭載」とありました。「これってなんのことだろう」と思ったのがことの発端。大々的に書いてあるのできっと有益な機能なんでしょうが、具体的にどういうものなのかをブログ初心者の方にもわかりやすく解説していきます。

こんな人におすすめ

  • PWAという機能について知りたい
  • PWA対応のWordPressテーマを購入して、PWAという機能を使ってみたい
  • PWA機能非対応のテーマでもPWAの機能を搭載してみたい

本サイトのWordPressテーマTHE THOR(ザ・トール)に、PWAと並んで掲載されている「AMP」という機能についても解説しておりますので、気になる方は以下の記事を参考ください。

PWAとは?

PWAとは、Progressive Web Appsの略語で、直訳は「革新的なウェブアプリ」という意味です。モバイル向けのWebサイトを、アプリのように使えるようになる機能のことを表しており、アプリとウェブのいいとこどり機能です。

「え?どゆこと?」

って思いましたか?わたしもそう思いました。具体的にどんな機能がつくのかを見た方が早いので説明を続けますね。

  • プッシュ通知ができるようになる
  • 読者のモバイルホーム画面にサイトを表示するアプリのようなアイコンを追加できる
  • アプリ形式の表示なのでサイトのURLが表示されなく、画面がすっきり
  • プリキャッシュ機能で表示速度が上がるので、読者のストレスが減る
  • キャッシュを利用すればオフラインでも閲覧可能
  • データ量が少ないので、アプリよりも表示速度が早い

自分のサイトを、まるでアプリのようにホーム画面に追加することができるようになり、さらにプッシュ通知がモバイル画面上に表示されます。

「え、そしたら読者の人がPWA機能使ってくれないと意味ないやん…」

その通りなんです。そこら辺はサイトコンテンツの質を上げて「また読みたいな」と思ってもらって、読者の方にPWAを使ってもらうしかないんです…。しかし、どうやらGoogleが推奨している機能なので、PWA対応にしておいて損はないでしょう。

また読んでもらえるような魅力がサイトにないと、使われなさそうな機能ですがそんなことはなく、読んでもらえるような環境づくりとしては大切です。

UX(ユーザーエクスペリエンス)向上に大いに役立つので、ないよりあった方が断然いいです。

ブログを書く側としては、コンテンツの質を高めることによって購読してもらうよう書き続け、それにより読者にPWAの機能を使ってもらえることで、読者はサクサクとサイトを見ることができるということです。

PWAには「プリキャッシュ機能」というものがあります。これは、読者がサイトのページを開いた時、次に表示するページのデータを読み込んでくれるという機能です。

あらかじめ読み込みをしてくれているので、次のページの表示速度が早く、サクサク読み進めることができるようになり、サイトの滞在時間や回遊時間も増えるというわけです。

そうなると離脱率も減るのでGoogleからの評価もよくなり、SEO効果もあるということですね。めっちゃいいじゃんPWA!

PWA機能の使い方(読者目線iOS版)

ブログ運営者としてはPWA機能を使って欲しい側ですが、読者側として使い方も知っておいた方がいいと思うのでお伝えしておきます。

「読者目線iOS版」と表記しましたが、Android版でも大枠の仕組みは同じで参考になるかと思います、安心して読み進めてください。

  1. PWAでアプリアイコンにしたいサイトにいく
  2. 共有ボタンを押す
  3. 「ホーム画面に追加」を押す
  4. タイトルを入力する
  5. 完成!
画面下に出てくる真ん中のボタンです。
SNSの共有ボタンの下の方にスクロールすると「ホーム画面に追加」
名前は自分で変えられますが、サイト運営者側が設定することもできます。
こんな感じ。アイコン設定していないと、サイトロゴが表示されるみたいです。

PWAの導入方法

PWAの意味や仕組みについてわかったところで、この機能の導入方法について説明します。

WordPressプラグインを使う

お馴染みのプラグインです、プラグインって本当になんでもあるので助かります。

PWA for WordPress

WordPressからの公式プラグインです。プラグインをインストールしたら設定をする必要があります。日本語対応になっているので、設定内容を確認しておきましょう。

PWA対応のWordPressテーマにする

調べましたが、かなり少ないですね。AMP対応は結構あったんですが、PWA対応はものすごく少ない!

Google推奨のPWA対応ですが、シンプルでとりわけ難しい技術ではないらしいんですが、先進的な機能なのでWordPressテーマ作成の方々もまだ対応しきれていないということなんでしょうか…。

とりあえずPWA対応しているWordPressテーマを紹介します。

WordPress無料テーマ「Cocoon(コクーン)」

© 2018 Cocoon.

人気の無料テーマです、PWA対応しています。わたしも以前はこのテーマを使っていました。マユの丸いロゴがかわいらしい、シンプルなサイトデザイン、SEO対策ができた内部構造で、とても使いやすいです。もちろんレスポンシブ対応もしており、Googleアドセンスの設定も楽です。ブログ始めたてで最初は無料のテーマ、と考えている方にはおすすめです。

Cocoonの公式サイトはこちら

WordPress有料テーマ「THE THOR(ザ・トール)」

本サイトで使っているテーマ、PWA対応しています。自由なデザイン性、サイト表示高速化やSEO対策に適した内部構造、その他たくさんの機能を備えた有料テーマです。

価格は税込16,280円と有料テーマの中では割高な方。価格がお高いだけあって、必要な機能は全てこの中にあると言っても過言ではないくらいの充実度です。

先行投資だと思って有料テーマ購入を検討されている方は、これを買ったら間違いはないかと思います。

表示速度抜群!WordPress有料テーマTHE THOR(ザ・トール)
4

サイトの表示速度が早くSEO対策になる!
9種類の着せ替え機能があり、デザインの幅広さが特徴のザ・トール。

ブログの個性を出したい、本格的にブログ運営をしたい方におすすめのWordPress有料テーマです。

※プラグインなしで自作PWA対応する方法
一応自作する方法もあります。ファイルを作ったりコード入力したりとすればできます。が、ブログ初心者でプログラミングとかコードとか、その辺が得意ではない人はやめておきましょう。わたしも調べてみましたが、あまり得意ではないので理解するのに物凄い時間がかかりました。ブログを書き始めて間もない方は、記事数を増やすことを優先した方が良いと思うので、プラグインか対応するWordPressテーマにしておきましょう。

まとめ

  • PWA対応はUX(ユーザーエクスペリエンス)向上にも一役買っており導入すべき、閲覧数向上にも効果
  • Google推奨の機能なので、ないよりあった方が良い
  • PWA対応にするならプラグインかWordPressテーマで導入する

PWAはなかなか聞かないワードでしたが、一番目を引いたのは「Google推奨である」ということ。Google先生が言っているならやるっきゃないでしょう!と思ったので、ぜひこれを機にあなたもPWA対応してみてはいかがでしょうか。

以下 参考サイト

https://digital-marketing.jp/seo/what-is-progressive-web-apps/

https://www.seohacks.net/basic/terms/pwa/

https://www.sbbit.jp/article/cont1/35949

PWA(progressive web appsとは?Googleが推奨する閲覧数UPの機能
最新情報をチェックしよう!