パンタグラフ オリジナル資料

PWAで「できること」を公開中 What is "PWA"?

資料ダウンロードはこちら

×パンタグラフ独自の「PWA」資料を配布中 資料ダウンロードはこちら

注目のサイト改善施策PWAとは?企業の最新活用事例5選

制作/開発 2026.07.02

注目のサイト改善施策PWAとは?企業の最新活用事例5選

検索エンジンに好かれるサイトになるためには、サイトの力(内容だけでなく表示速度の速さなどの技術的な側面)も非常に重要なポイントになります。

そこで今回は、モバイルサイトの改善施策として引き続き注目されるPWA(プログレッシブウェブアプリ)について、2026年時点の最新情報と国内外の活用事例とともにご紹介します。

読み込み速度や表示の高速化といったサイト強化だけでなく、モバイルサイトにも関わらず、ネイティブアプリのようなUXを実現する技術ですので、ぜひ参考にしていただきたいと思います。

PWAとは?

そもそも、PWAとは、どのようなものなのでしょうか。

PWAとは、Progressive Web Apps(プログレッシブウェブアプリ)の略で、モバイルのWebサイト上で、ネイティブアプリのようなUXを提供するためのものを指します。

もともとGoogleが主導となって推進してきた技術で、現在は世界中の企業が採用しています。

PWA対応ブラウザ

2026年現在、PWAはChrome・Firefox・Edge・Opera・Safari(iOS/macOS含む)など、すべての主要ブラウザで対応済みです。

かつてSafariはPWAへの対応が限定的でしたが、2018年にService Worker対応、2023年にiOS 16.4でWebプッシュ通知にも対応しました。これによりiPhoneユーザーへのプッシュ通知配信が可能となり、PWAの活用範囲がさらに広がっています。

ブラウザ

PWA対応状況

Chrome

フル対応。Androidホーム画面追加・プッシュ通知・オフライン対応すべて利用可

Safari(iOS 16.4以降)

WebプッシュおよびホームScreen追加に対応。iOS 16.4以前はプッシュ通知非対応

Firefox

Service Worker・オフライン対応済み。プッシュ通知も対応

Edge

Chromiumベースでフル対応。Windowsホーム画面アイコン追加も可能

Samsung Internet

Android端末での対応が充実

Yahooや各大手ブラウザベンダーもPWAを推進する姿勢をとっており、今後もさらなる機能拡張が期待できます。

パンタグラフ独自の「PWAとは何か・何ができるか」をまとめた資料を無料で配布しています。導入検討の第一歩としてぜひご活用ください。

PWA資料のダウンロードはこちら

PWAで実装可能な機能

PWAはWebページとWebアプリのいいとこどりをしたような技術です。具体的にはどのようなことができるのか、PWA導入により期待されるメリットとともに紹介します。

①表示スピードの改善/高速化

プリキャッシュの機能を使い、ページを見ている間に次のページのデータの読み込みを行うため、2ページ目以降の表示スピードが上がります。Core Web Vitalsの改善にも直結し、SEO面でのメリットも期待できます。

②オフラインでも閲覧可能

インターネットにつながっていなくても、オフラインキャッシュデータを利用してサイトを閲覧することができます。あらかじめページ情報を読み込んでおくこの仕組みは、PWAの大きなメリットのひとつです。

③プッシュ通知

ブラウザを閉じている状態でもプッシュ通知を送ることができるため、定期的にユーザーと接触できるようになります。

2023年以降はiOS(Safari)でもWebプッシュ通知が利用可能になり、AndroidとiOSの両方にプッシュ通知を配信できるようになっています。

④アプリのようなUI/UX

さまざまなAPIを連携させることにより、アプリのような使用感を提供できます。フルスクリーンモード(上部にURLの表示がない状態)になりますので、見た目はアプリと同様、リッチなUI/UXを実現できます。

⑤ホーム画面アイコン

アプリ同様、ホーム画面(スクリーン)アイコンとして追加できます。ユーザー側のホーム画面からワンタッチでサイトへアクセスできるようになるため、来訪頻度が高まる可能性があります。

⑥その他・新機能

アプリと言っても、Web側の設定のためユーザー側のインストールは不要です。さらに、アップデートも自在です。

近年は以下のような新しいAPIも普及しており、PWAでできることの幅がさらに広がっています。

  • Badging API:アプリアイコンにバッジ(数字)を表示できる
  • Web Share Target:他アプリからPWAへのコンテンツ共有を受け取れる
  • File System Access API:デバイスのファイルシステムへのアクセスが可能
  • Window Controls Overlay:タイトルバー領域までアプリUIを拡張できる

ホーム画面アイコン追加とプッシュ通知のUIパターンについては以下の記事で詳しく解説しています。

▶PWAのメリットを最大限活かす!ホーム画面アイコン追加とプッシュ通知のUIパターンを徹底解説!

▶PWA導入サイトのホーム画面アイコン追加とプッシュ通知のUIパターン 事例30選

 

技術的な側面から見るPWA

国内サイト・サービスでのPWA対応は年々広がっています。開発にあたっては、ネイティブアプリの開発知識は不要で、WebサイトやWebサービスを開発する際の技術を使って作成することができます。

さまざまなAPIが公開されているため、それらを組み込むことで簡易的なページ対応は可能になります。ただし、Service Workerを用いるためhttpsのサイトでのみ対応となりますので、ご注意ください。実現したい内容によっては、高度な開発技術が必要になる場合もあります。

主なAPI例

公開されているAPIの例は以下の通りです。

API

概要

Web Push Notifications

プッシュ通知を行える(iOS 16.4以降のSafariでも対応)

Payment Request API

簡単な決済フローを実現する

Web Share API

ソーシャルへの拡散を容易にする

Credential Management API

パスワードなしでのログインを実現

Image Capture API

スマホのカメラのズームをコントロールできる

Badging API

ホーム画面アイコンにバッジ(未読数など)を表示できる

File System Access API

デバイスのファイルを読み書きできる

Web Share Target API

他アプリからPWAへのコンテンツ共有受け取りを実現

 

PWAを取り入れたサイトの事例

実際のPWA導入事例を見ていきましょう。海外ではECサイトをはじめ、既に多くの企業が導入し、結果を出しています。国内でも導入が広がっています。

PWA導入事例①SUUMO

物件情報などのように膨大なデータの中から検索条件を設定して絞り込むサービスの場合、ユーザーが検索してから結果を表示させるまでの時間が勝負です。PWAの導入により、その時間を大幅に短縮でき効果を出しています。

主な機能

  • プッシュ通知
  • オフラインサポート
  • ホーム画面アイコン

pwa-suumo

導入効果

  • 読み込み時間75%減
  • プッシュ通知の開封率が31%に
    (出典:https://developers.google.com/web/showcase/2016/suumo)

PWA導入事例②Wego

旅行検索サービス「Wego」では、使いやすさの改善が直接ビジネス指標の向上につながっています。物件情報・旅行関連・美容予約系のサービスでも応用できます。

主な機能

  • Credential Management APIによるかんたんログイン
  • アプリライクな操作感
  • ホーム画面アイコン
  • Payment Request APIによるかんたん決済

pwa-wego

導入効果

  • 12秒かかっていた読み込み速度が1秒未満に
  • オーガニックユーザー12%増
  • 平均セッション継続時間35%増
    (出典:https://developers.google.com/web/showcase/2017/wego)

PWA導入事例③X(旧Twitter)

現在はTwitter Liteは独立したサービスとしては終了し、通常のX(旧Twitter)のウェブ版(twitter.com)にPWA技術が統合されています。SNSではアプリとPWAを組み合わせて、通信環境が悪い地域でもアクセスしやすい体験を提供する事例が多くあります。

主な機能

  • ホーム画面アイコン
  • プッシュ通知
  • オートログイン

pwa-eracipe

導入効果(Twitter Lite時代のデータ)

  • 訪問別ページビューが65%増加
  • ツイートが75%増加
  • 離脱率20%減
    (出典:https://developers.google.com/web/showcase/2017/twitter)

PWA導入事例④Pinterest

ユーザーの興味・関心に応じた情報がカスタマイズ表示されるため、サイト滞在率が高まります。プッシュ通知との組み合わせで、ユーザーを継続的に呼び戻す効果が期待できます。

主な機能

  • プッシュ通知
  • オートログイン(表示情報の自動カスタマイズ)

pwa-pinterest

導入効果

  • エンゲージメントが60%向上
  • PWA経由のセルフサインアップが44%増加
  • 広告収入が44%増加
    (出典:https://developers.google.com/web/showcase/2017/pinterest)

PWA導入事例⑤楽天市場(ECサイト)

国内最大規模のECモールを展開する楽天では、モバイルサイトのPWA対応を進めており、ホーム画面アイコン追加やオフライン対応を通じてモバイルユーザーの利便性向上に取り組んでいます。

ECサイトにおいては、ページ表示速度の改善がカート追加率や購入完了率の向上に直結するため、PWAの恩恵が特に大きい領域といえます。

 

AMP廃止後の表示速度改善、PWAの役割は?

かつてはPWAとAMPを組み合わせることでSEO効果を高める戦略がありましたが、2021年6月にGoogleがAMPの検索優遇措置を終了したため、現在ではAMPを新たに導入するメリットは薄れています。

一方、PWAはAMPのような表示制限を受けずに高速化・オフライン対応・プッシュ通知を実現できるため、表示速度とUX改善を両立する手段として引き続き有効な選択肢です。

Core Web Vitalsの改善を通じてSEOへの良い影響も期待できます。表示速度改善を検討している場合は、AMPではなくPWAまたはサイト全体の最適化を検討することをおすすめします。

AMPについて詳しくは以下の記事で詳しく紹介しています。

▶AMPとは?モバイルサイトに導入すれば表示が早くなる!

 

まとめ

PWAは2018年の普及初期から現在まで進化を続け、2026年現在ではiOS Safariを含む全主要ブラウザで利用できる成熟した技術となっています。表示速度の改善、プッシュ通知、オフライン対応、ホーム画面アイコンといった基本機能に加え、Badging APIやFile System Access APIなど新しい機能も続々と追加されています。

事例を見ながら、自社サービスと照らし合わせて、導入すべき機能を検討してみてはいかがでしょうか。

パンタグラフでは、PWAの導入支援を行っています。PWAに関するお悩み・ご相談はお気軽にお問い合わせください。

お問い合わせはこちら

  • facebook share
  • Twitter share
  • Hatena share
  • Pocket share
  • Line share

pagetop