【入門編】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さんに。safariさんに。

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

ネイティブアプリは、審査制の世界です。webは、言論の自由、表現の自由。

webの世界のこの表現の広さが、PWAによって広がることは目に見えていますし、

apple storeの権益にも影響を与えることも一目瞭然です。

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

 

3分でわかる!Instagram(インスタグラム) EC機能(Shop Now)の設定方法

おすすめ SEO対策 関連記事

検索インテントとは 検索意図 を 考慮し SEO コンテンツ 制作 調査方法は?
https://saras-wati.net/seo/search-intent/

【SEO】ドメインパワーとは 調べ方 目安 ドメインパワー アップ 方法 を 網羅!
https://saras-wati.net/seo/about-domain-power/

【AI】SEO 自動分析 ツール SEARCH WRITE サーチライト で コンテンツマーケティング強化
https://saras-wati.net/seo/about-search-write-seo/

Chrome キーワードサーファー キーワード調査 選定ツール が SEO対策 に 便利
https://saras-wati.net/seo/chrome-keyword-surfer/

共起語とは|調べ方 SEO対策 ライティング 方法 使い方 かんたん 解説
https://saras-wati.net/seo/co-occurrence-words-seo/

Google 低品質コンテンツ 基準 探し方 ページ削除 の SEO 対策
https://saras-wati.net/seo/google-low-quality-content/

moz seo 対策 ツール 使い方 を 簡単解説!ドメインオーソリティ を 知ろう
https://saras-wati.net/seo/moz-seo-tools-howto/