Pinto!

企業のマーケティングを支援する「ピント!」

話題のPWA(プログレッシブウェブアプリ)とは|AMPよりも更に高速?

Writerライター

中澤 悠生

株式会社PLAN-B Web戦略事業部

2014年中途採用でPLAN-Bに入社。コンサルタントとして、SEOを中心とした施策・分析を担当。Web制作の経験を活かした"制作側の目線にたった施策"を得意とする。

目次
    1. PWAとは
    2. PWAのメリット
      1. 読み込みが高速
      2. UIをネイティブアプリのように設計可能
      3. プッシュ通知の使用
      4. アプリのインストールの必要がない
      5. ログインしていないユーザーの情報を蓄積できる
    3. PWAのデメリット
      1. 対応していないブラウザがある
      2. ネイティブアプリも運用している場合、管理コストが2倍に
      3. ネイティブアプリと比較して、ユーザーに接触する機会が少なくなる可能性がある
      4. 通常のモバイルサイトと比較してコストがかかる
    4. Webサイトやアプリとの違いについて
    5. 導入方法
    6. AMPとの違い
    7. まとめ

Webサイトにおいてページ表示速度は年々重要度が増してきており、近年ではAMPページなど高速でWebページの読み込みが出来る技術が生まれてきています。今回ご紹介するPWA(プログレッシブウェブアプリ)でサイトを構築すれば、ネイティブアプリのように高速なWebサイトを作成する事が出来ます。


PWAとは

PWA(プログレッシブウェブアプリ)とは、アプリのように高速でページ表示ができるWebサイトの事です。通常のWebページとネイティブアプリ(※)それぞれの良い部分を合わせもっており、導入したサイトではコンバージョンの改善やリテンション等に大きな効果があると言われています。

※ネイティブアプリとは

JavaやObject-Cなどを用いて開発されているアプリで、App Storeなどのアプリストアからインストールして使用するアプリです。chromeやfirefoxなどのブラウザ上で使用するWebアプリと比較して、「動作が早い」「カメラなどのスマホ自体の機能との連携が可能」「インターネット接続無しで利用できる使用も可能」などの特徴があります。

実際にPWAを体験するには、スマホのSafari以外のブラウザからサンプルサイトを見て頂くのが分かりやすいかと思います。

URLを開いた後、メニューから「ホーム画面に追加」をし、ホーム画面から「I/O 2016」のアイコンをタップします。すると通常のブラウザで開いている時とは違うUIでサイトが開かれるのが確認出来るかと思います。

【Google I/O 2016】https://events.google.com/io2016/ ※safariには未対応

I/O 2016


PWAのメリット

PWA5つのメリット

読み込みが高速

キャッシュを取得することにより、オフラインの状態であっても高速で読み込めます。また同様の理由により、サイト内でのページ遷移する事も可能です。


UIをネイティブアプリのように設計可能

ブラウザ上のメニューバーを消したり、ホーム画面のアイコン設定などが出来るので、アプリのようなUI設計が可能です。


プッシュ通知の使用

ネイティブアプリのようにプッシュ通知を表示する事が出来ます。


アプリのインストールの必要がない

アプリストアからのインストールの必要がなく気軽に利用する事が出来ます。また、ページの更新を行う際にも、アプリの場合はストアの審査が必要ですがPWAであれば自由に更新出来ます。


ログインしていないユーザーの情報を蓄積できる

通常のWebサイトではログインしているユーザーに対しての情報を集めますが、PWAはログインしていないユーザーの情報も集める事ができます。


PWAのデメリット

PWA5つのデメリット

対応していないブラウザがある

2017年7月時点では、iPhoneの標準ブラウザであるsafariには対応していません。iPhoneは日本国内で広く普及しているので、safariに対応していないのは大きなデメリットの1つといえます。


ネイティブアプリも運用している場合、管理コストが2倍に

既にネイティブアプリを運用している場合は、単純に管理コストが2倍になってしまう可能性があります。


ネイティブアプリと比較して、ユーザーに接触する機会が少なくなる可能性がある

ネイティブアプリではApp StoreやGoogle Playなどのアプリストア上でユーザーに接触する事が出来ますが、PWAはWebサイトを訪れたユーザーのみ接触可能です。


通常のモバイルサイトと比較してコストがかかる

通常のモバイルサイトの制作と比較して制作コストが高くなります。また、PWAの普及率はまだまだ低いため、導入についての事例やドキュメントが少ないというデメリットも存在します。


Webサイトやアプリとの違いについて

冒頭でもお伝えしたとおり、Webサイトとネイティブアプリの良い部分を併せ持ったような特徴があります。

機能WebサイトPWAモバイルアプリ
オフライン×
アプリストア××
レスポンシブ対応
検索×
ローカル通知×
プッシュ通知×
ダウンロード××
素早いアップデート ×

導入方法

PWAを開発するには、PWAを開発するにはいくつかのブラウザAPIを利用して、Googleの「ProgressiveWebAppChecklist(Google Developers)に沿ってページを作成する必要があります。

ページ作成にはAppShellと呼ばれるPWA実装のために最小限必要なHTML・CSS・JavaScriptの構築、ページのSSL化など、チェックリスト項目は複数存在していますが、chromeの拡張機能「Lighthouse」を使用する事で、多くの項目の調査ができます。

詳細な開発方法については専門的な内容になるため今回の記事では割愛しますが、導入を検討されている方は「はじめてのプログレッシブWebアプリ(Google Developers)」にサンプルコードを含めた詳細な内容が掲載されているので、そちらを参照して下さい。

また、Googleが提供している「WebStarterKit(Google Developers)」を利用する事で、PWAの実装に必要なファイルのテンプレートを利用する事ができます。

補足:PWA実装のために必要APIについて

Service Workers

プッシュ通知やオフライン対応のために使用します。プッシュ通知やオフラインでの読み込みが出来るのは、PWAの軸とも言える「Service Worker」という技術が影響しています。

PWAの実装にはこのService Workerが必須となり、現在ではsafariなどの一部のブラウザでは対応していません。SafariはiPhoneの標準ブラウザですので、PWAがそこまで普及していない理由の1つと考えられます。

Geolocation API

位置情報の取得のために使用します。

Webストレージ(Local StorageやSessionStorageなど)

オフラインにデータを保存するためにします。

History API

ブラウザの履歴を操作するためにします。


AMPとの違い

GoogleにはAMP(Accelerated Mobile Page)というモバイルページを超高速で読み込むための技術が存在しています。PWAと同じくページを高速で読み込む事が出来るのが一番の特徴で、日本でも多くのサイトがAMPページを導入しています。

PWAとAMPの違いを説明すると、最も大きいポイントは「Googleの検索結果からのトラフィックか、そうでないか」という点になります。

AMPはGoogleの検索結果にインデックスされているため、自然検索からトラフィックが集まりますが、PWAにアクセスするには対象サイトのURLもしくはページへのリンクが必要です。

混合されがちなPWAとAMPですが、それぞれを同時に導入する事も可能となっていますので、サイトの高速化やユーザー体験の向上を目指すのであればAMPの実装を進めてみるのも良いでしょう。

AMPの実装には通常のHTMLではなく、AMP HTMLという専用の書式でマークアップを行う必要があります。

AMPとPWAの違い


まとめ

現状では、日本で大きなシェアを獲得しているiPhoneの標準ブラウザであるSafariに対応していない等のデメリットは存在していますが、

  • ストアの審査なしで更新できるアプリ
  • 高速化やプッシュ通知によるサイト内でのユーザー体験の向上
  • ホーム画面からのアクセスによる再訪問率の改善

など、多くのメリットが存在しています。Safariへの対応も含めて、今後の動向に期待が出来る技術です。サイトの高速化を目指すのであれば、AMPだけでなくPWAも検討してみると良いでしょう。

SEOコンサルティングの最新事例 サービスページはこちら

関連する記事を読む