ワードプレス

PWAとは?ネイティブアプリとの違いやメリットをわかりやすく解説

ジャス㌧

この記事では、PWAとはいったいどんなものなのかについて解説しているとん

このブログでは、今まで様々な最新のサイト構築技術について紹介してきました。

例えばAMPを覚えていますか?

AMPはスマホでの表示をより高速にするための最新技術で、今後のウェブサイト作りに活用されていく仕組みになります。

覚えていないという方はこちらの記事をチェックしましょう。

そして、以前からブログ内で重要視しているhttps化も、昔はなかった新しい技術の一つになります。

https化は、暗号化を使ってサイトのセキュリティを高めるための施策で、この対策は今やほぼ必須と言っても良い状況です。

Googleの検索評価にも関わってくる対応ですので、こちらは必ず行っておきましょう。

このような最新のウェブサイトの技術は今後もどんどん出てきます。

この2つ以外にも最近話題になり始めているのが、PWAという仕組みになります。

今回はこのPWAについて解説していきます。

PWAとは?

ジャス㌧

PWAって何だぷう?

PWAとはProgressive Web Appsの略でウェブサイトをスマホで表示した時に、アプリのような挙動で表示する技術になります。

感覚的にわかると思いますが、ウェブサイトをスマホで閲覧する時の操作感と、アプリの操作感は何となく違うということがわかると思います。

簡単にいうとPWAとは、ウェブサイトをそのままアプリにしてしまおうという技術です。

これによってサイトの表示が高速化されるなど、様々なメリットがあるのです。

一見AMPと大差ないと思われがちですが、PWAもかなりのメリットがあり今後広がることになりそうですので、念の為覚えておきましょう。

PWAの特徴

続いて、PWAに対応したサイトにはどのような特徴があるのかについても解説したいと思います。

主に以下の3つのような特徴があります。

  • 信頼性
  • 高速性
  • アプリのような動作

信頼性

PWAは事前にスマホにデータを格納することでネットワークの環境が悪くても動作することが可能になります。

最悪オフラインでも更新前のサイトであれば表示できますので、その点サイト表示の信頼性は上がるでしょう。

高速性

何よりPWAの最大の特徴は高速性でしょう。

前述の仕組みによって、サイトを高速で表示することが可能になりますので、ユーザーにとってはそれだけでもメリットになります。

アプリのような動作

続いての特徴として、アプリのような動作があります。

スマホではブラウザよりもアプリを操作することの方が多いと思います。

ですので、使い慣れたアプリの感覚でサイトを表示できますので、その点も便利になるでしょう。

PWAの仕組み

次にPWAの仕組みについて解説したいと思います。

ここに高速表示の秘密が隠されているのです。

まずは、通常のサイトを表示する仕組みについて軽く解説しますとこうなります。

通常サイト表示のしくみ
  1. ユーザーがサイトに訪問する
  2. サーバーからページのデータを取り寄せる
  3. ブラウザが読み取りページとして表示する

基本的には、アクセスするたびに以上の動作が行われ、ページを読み込んでいます。

対して、PWAを実装したらどのように表示されるのかというと

PWA実装サイト表示のしくみ
  1. スマホに元々格納されたデータを取り寄せる
  2. スマホにページを表示する
  3. 更新されたデータだけネット上から取り寄せて表示

このように、アプリとしてサイトをダウンロードしておくことでほとんどのデータをすぐに呼び出せるのです。

そしてサイトは常に更新がされるため、その時だけネット接続が必要になります。

更新されたデータだけを効率よく取り寄せて表示しますので、素早くサイトの表示が可能ということになります。

この技術がいま現在、注目されているのです。

ジャス㌧

ふむふむ、毎回イチから取り寄せるんじゃなくて変更されたとこだけ取り寄せるから、速く表示されるんだトン

ネイティブアプリ(スマホアプリ)との違いは?

ネイティブアプリとは、AppleやGoogleのアプリストアからインストールするアプリのこと

では、普段スマホで利用しているスマホアプリとの違いは何なのでしょうか?

ここで重要なのは、「PWAはあくまでウェブサイトである」という点になります。

ユーザーはWebサイトに訪れる感覚でサイトを表示でき、なおかつ操作性はアプリという体験が可能です。

スマホで閲覧する場合、Webページよりもアプリの方が操作しやすいので、いいとこどりをしているという認識でOKです。

対してスマホアプリは、アプリストアから対象のアプリを探してダウンロードするものなので、ユーザーの反応を取るまでのステップが大きくなります。

そもそも、ちょっとした調べごとはアプリストアでなく検索エンジンで行うことが多いので、アプリとは少しニーズが異なりますね。

なので、アプリとしてリリースすることが相応しくないジャンルの情報は、PWAで発信を行った方が相性がいいと言えるでしょう。

Googleの方針

今後Googleは、ワードプレスとの連携を強めることがわかっています。

https://medinathoughts.com/2018/01/29/wordpress-google/

実は全世界の3割のサイトがワードプレスで構築されているようです。

つまりワードプレスは全体のトラフィックの3分の1も引っ張っているということになります。

なのでGoogle自らワードプレスに協力を申し出て、よりワードプレスの高速化やシステムの改善を行っていくようです。

なので、PWAの流れも今後くるのではないでしょうか?

PWAのメリット

ジャス㌧

PWAにはどんなメリットがあるんだぷう?

続いては、PWAを実装することによって、どれくらいのメリットがあるのかについて解説したいと思います。

かなりメリットが多いので、今後の検討材料にしてみてください。

実装によるメリットは以下の6点が考えられます。

  • ユーザーストレスが少なくなる
  • オフラインでも操作できる
  • プッシュ通知の配信が可能
  • インストール不要
  • ストアの審査がない
  • GPSの位置取得ができる

ユーザーストレスが少なくなる

まずPWAを導入するメリットは、ユーザーのストレスが大幅に軽減できる点にあります。

先ほど紹介した通り、特殊な仕組みによってサイトの表示時間が大幅に下がり、ユーザーの利便性が上がります。

また、スマホアプリのような操作感で利用できるので、その点もユーザーの利便性を上げることにつながるでしょう。

今後のGoogleSEOではユーザー体験が重要視されますので、その点も非常に重要になってきますね。

オフラインでも操作できる

PWAの特殊なところは、オフラインでもページの操作ができるという点です。

すでにページの内容がスマホに取り込まれているので、オフラインの環境でも既存のページ内容を閲覧することが可能になります。

今の時代オフラインの環境なんてほとんどないと思いますが、それでもネット環境が遅い場合もありますので、通信環境に左右されないというのはかなり重要なメリットだと思います。

プッシュ通知の配信が可能

そして、PWAの機能として一番活用できるのではないかと思うのが、プッシュ通知の存在です。

プッシュ通知はアプリを使ったことがある方であれば一度は受け取ったことがあると思いますが、スマホに通知がきて内容を見れる仕組みになります。

この通知が来ると、多くのユーザーは通知の内容を確認します。

ブログの場合は、最新記事の更新のタイミングに合わせてプッシュ通知を送ることによって、すぐに記事を読んでもらうことが可能になります。

ユーザーのリピート化に貢献できる機能になりますので、ビジネス面で非常にメリットになるでしょう。

この点についてもアプリの良いところをとっている機能になりますね。

ジャス㌧

通知を受け取れるのはユーザーにとっても便利だプゥ♪

インストール不要

さらに、PWAはあくまでウェブサイトですので、スマホにインストールする必要がありません。

アプリのインストールがあると、それだけで多くのユーザーが離れてしまいます。

ユーザーは面倒くさがりやなので、少しでも面倒な手続きがあるとなかなか行動してくれないのです。

その点を考えると、インストールを行わなくてもアプリのような動作ができるのは、非常にメリットが大きいでしょう。

ストアの審査がない

そしてアプリではないという理由で、アプリストアの審査を通す必要がないというメリットになります。

通常、アプリをユーザーに提供するためにはアプリストアを経由する必要があります。

そこには審査があって、素人が作ったアプリですとなかなか審査に通らないという事情もあります。

また、ストアにアクセスしてインストールするのも面倒ですので、その分ユーザーの手間になりますね。

なので、なるべくストアを通さずに提供できるのが理想です。

その点を実現できるのがPWAですので、このメリットも大きいでしょう。

GPSの位置取得ができる

最後に、PWAを利用することによって、GPSの位置取得をできるようになります。

この機能は滅多に使わないと思いますが、広告のセグメントわけができる可能性があります。

特に地域に応じたアフィリエイト案件を提供する場合、遠く離れた場所に住んでいるユーザーに広告を表示するのはロスになります。

ですので、ユーザーがいる場所によって広告配信を変更する機能などに応用できる点は非常に大きなメリットになるでしょう。

上級編になりますが、今後活用できる可能性は十分あります。

PWAをビジネスやブログに活用する

ジャス㌧

PWAをビジネスやブログに活用する方法を知りたいぷう

では、このPWAをビジネスやブログに活用するにはどうすれば良いのでしょうか?

こちらについては、正直そこまで焦る必要はありません。

なぜなら、AMPすらまだ必須の条件にはなっていないからです。

httpsについては、誰でも気軽にできる点と、導入するメリットが大きいので、ほぼ必須ですが、それ以外の技術についてはまだ普及段階です。

そして、もしPWAを実装する場合、ビジネスやブログに活用する方法はもちろんあります。

シンプルに実装するだけでユーザーの利便性が上がるという点に加え、先ほど紹介したプッシュ通知がカギになります。

プッシュ通知を送る方法はPWA以外にもあるとは言え、PWA導入と同時に手に入るこの機能はかなり大きな役目を果たします。

それが先ほども紹介した、最新記事の配信などへの活用です。

記事の更新をいち早く配信することによって、ユーザーのアクセスを集め、さらにインデックスの速度が早まるというメリットがあります。

プッシュ通知は他のSNSへの配信とは違い、スマホに直接届けますので、圧倒的に認知スピードが早いです。

また、最新記事の更新の他に、ステップメールの役割を果たすことも可能です。

アフィリエイト案件を成約させるために、教育的な記事を配信し、最終的にアフィリエイト案件を案内するというやり方です。

ユーザーをサイトに呼ぶための強力なきっかけになりますので、プッシュ通知は今後ぜひ活用していきたいですね。

ウェブサイトをPWA化する方法とは?

ジャス㌧

ウェブサイトをPWAに対応させるには、どうすればいいんだぷぅ?

では、実際にPWAにサイトを対応させるためには、どのようなことをすればいいのでしょうか?

正直に言うと、プログラミングの知識がない限り、ウェブサイトをPWA化するのは非常に難しいです。

普通のウェブサイトの場合、コーディングをいじることも必要になりますし、ワードプレスの場合もコードをいじる必要があります。

今の段階で現実的にPWA化する方法についていくつか紹介しますので、参考にしてください。

プラグインで対応を行う

PWAは、まだ正式なプラグインというのは出ていません。

ただ、情報によると、プラグインのJetpackでPWA対応の準備が行われているようです。

まだベータ版で裏コードとして実装されているそうですが、いずれ正式に採用されるでしょう。

ですので、その時に対応を行うのが良いと思います。

PWAはまだ一般的ではありませんので、個人で対応をするのは難しい状況なんですよね。

Jetpackについては以下の記事をご覧ください。

外注化して対応してもらう

続いては、シンプルに外注化して対応してもらうという方法になります。

このブログでは初心者の方の対象にしていますので、当然ながらほとんどの方はプログラミングが出来ないと思います。

なので、シンプルに外注化するのが一番楽です。

誰でも気軽に導入できるプラグインが出て来れば良いのですが、まだ環境が揃っていませんので、良いものが出てくるまで待ちましょう。

ジャス㌧

PWAは今後の展開に注目だブゥー!

ちなみに外注化におすすめのサイトはこちらの記事で紹介していますので、外注を検討なさる方は参考にしてみてください。

代替案としてアプリ作成ツールを利用する

最後に、正確にはPWAではないのですが、ワードプレスサイトをワンクリックでアプリ化できるツールも存在しています。

それが弊社が別事業として行っているスマホアプリ事業でリリースしている「だれでもアプリメーカー」というツールになります。

こちらはWebサイトと連動したアプリを作ることができるツールなのですが、これで代用するということも可能です。

PWAとは違う仕組みですが、オリジナルのアプリを作ることが可能になります。

アプリビジネスは競合も少なく、他のビジネスと比較しても収益を出しやすいので、新たな収入源を考えている方にはぜひおすすめしたいビジネスですね。

下記のバナーからLINE登録を行なうと案内が届きますので、ぜひ興味のある方はチェックしてみてください。