【入門編】SEOに効く!?UX向上につながるPWA(Progressive Web Apps)とは

Web技術は日進月歩です。html5が、css3が。そんな話は、表面的な話です。GASや、sassなど、いろいろと、ノンプログラマーでも、サクッと扱えるプログラムフレームワークが登場してきています。

JavaScriptライブラリやフレームワークなども、いろいろなwebサイトでサンプルが掲載されていますし。

今回ご紹介するPWAも、そんな新しいweb技術の1つです。

PWAは、アプリのように、webサイトをスマホで扱える技術で、2019年以降、どんどん利用が増えていくことでしょう。SEO対策としては、比較的導入が楽で、かつ、検索エンジンでの順位に直接的に影響のあるAMPが先に浸透していますが、検索エンジン対策としても、PWAは有効です。PWAは、UXの向上にもつながるので、webマーケッター必見の技術ですね。

PWAとは

PWAは、Progressive Web Apps(プログレッシブウェブアプリ)の省略語です。頭文字をとって、PWAと言われます。

PWAは、スマホサイトをスマートフォンアプリのように表現できたり、似たような機能として使えるweb技術です。

PWAはプログラム言語ではなく、レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトなので、Googleが要求する構造化コーディングがベースになります。

また、PWAには、キャッシュ化されたり、プッシュ通知ができる機能があるので、そこも強みとなっています。

具体的に、PWAの機能について解説していきます!

PWAの主な機能6つ

PWAの特徴的な機能をまとめると、以下の6つだと思われます。

  1. コンテンツが検索エンジンにインデックスされる
  2. オフラインでも読める(キャッシュコンテンツになる)
  3. スマホのホーム画面にアイコンがおける
  4. ユーザーはwebサイトから設置可能(apple storeなどの経由不要)
  5. 表示が速い
  6. プッシュ通知が利用できる(Android+Chromeのみ)

この中の機能をいくつか先に、ざっくり説明をしていきます。

コンテンツが検索エンジンにインデックスされるのは、PWAで作るwebサイトは、あくまでwebサイトだからです。

スマホ用アプリは、Googleなどの検索エンジンにインデックスされるわけです。

オフラインでも読めるのは、PWAの中に入っているService Workerという仕組みを利用するからです。

これによって、webサイトの表示速度が速くなるんですよね。当然ですが、ユーザーは遷移しやすいので、サクサクとwebページのリンクができるわけです。
セッション数増加につながります。

また、キャッシュ化できるので、オフラインでもwebサイトを見れるようになります。gmailなどが、オフラインでもコンテンツ(メール)を読めたりしますが、同じような感じです。コンテンツマーケティングのお役立ち記事や、ブログなどのwebサイトであれば、このキャッシュ化は大きな武器になりますね。オフラインでも読めるのは、PVやセッションにおいてもプラス効果ですよね。

ここが、PWAがユーザー体験の向上につながるというところなのです。webの重さやインターネット環境の重さ、そういったものから、ユーザーを解放してくれるのです!!

スマホのホーム画面にアイコンがおける(ブックマークではない)

PWAは、スマホのホーム画面にアイコンを設置できるようになります。当然、スマホアプリのように、アイコンをタップするだけで、対象のWebサイトへアクセスできるようになるのです。

Service Workerの機能によるプッシュ通知

PWAでwebサイトを作れば、普通のWebサイトでは出来ないプッシュ通知が可能なんです。情報が更新されたら、そのwebサイトに興味のあるユーザーに一気に告知ができるわけなんです。すごくいい機能なんですよね!

このプッシュ通知は、1つ弱点があります。基本、Android OS+Chromeなんですよね。使える環境が。Googleの世界のPWAだから、仕方ないと言えば、仕方ないですが。

ただ、iPhoneのiOSでも、iOS11.3からService Workerへのサポート開始しています。プッシュ通知は、まだまだですが、これは朗報ですね!

ちなみに、PCでもedgeのPWA対応は開始されています。マイクロソフトも、PWAの力を認めてきているということですね。

PWAの事例

Googleのケーススタディのページにいっぱいのっています、PWAによる成果。

▼GoogleのPWAの事例

https://developers.google.com/web/showcase/2018/nikkei

日経新聞のサイトでPWAを導入したら、こんな効果が。

58%のコンバージョン増

75%の読み込み速度改善

1日あたりのアクティブユーザーが49%増

すごいですね。PWA!!

ちなみに、インスタグラムのサイトや、スーモのwebサイトにもPWAは実装されています。

PWAの作り方、導入方法

PWAの導入方法は、Googleのサイトにのっています!

Google
はじめてのプログレッシブウェブアプリ(PWA)
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja

また、このサイトでは、ネイティブアプリとの比較表や、アンドロイドOSとiOSとの機能比較表が掲載されていて、何ができるかを理解しやすいです!

PWA 入門 iOS SafariでPWAを体験するまで 2019年7月更新
https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20

まとめ:iOSでプッシュ通知ができるようになれば・・・PWAの対応望みますapple

iPhone11の発売もされました。正直、iPhoneProを作るのもありがたいのですが、その前に、PWAの対応を始めてほしいです、iOSさんに。

私は、ネイティブアプリの文化があまり好きではないので、webの文化がより繁栄してくれることを願っています。

ネイティブアプリは、審査制の世界です。webは、言論の自由、表現の自由。webの世界のこの表現の広さが、PWAによって広がることは目に見えていますし、apple storeの権益にも影響を与えることも一目瞭然です。

PWAのプッシュ通知機能が、次のwebサイトリニューアルの動きへの扉になるのではないかと思っています。