netNews｜web広告、新サービスの解説

通常ページへ

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

最新webニュース

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サイトに興味のあるユーザーに一気に告知ができるわけなんです。すごくいい機能なんですよね！

このプッシュ通知は、１つ弱点があります。基本、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を導入したら、こんな効果が。

  • ５８％のコンバージョン増
  • ７５％の読み込み速度改善
  • 1日あたりのアクティブユーザーが４９％増

すごいですね。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/