【PWA対応サイトまとめ】ウェブサイトをアプリっぽく使ってみよう

【PWA対応サイトまとめ】ウェブサイトをアプリっぽく使ってみよう

ウェブサイトをアプリ風に使えるPWA

PWA(プログレッシブウェブアプリ)を知ってますか?

大雑把に書くと、アプリとしてインストールできるウェブサイトのことです。

デスクトップ(ホーム画面)にアイコンが配置されるのでアプリのように呼び出せる他、読み込み時間が短縮、プッシュ通知が受け取れる(環境による)などのメリットがあります。

たとえば、YouTube Music https://music.youtube.com/
YouTubeの音楽ストリーミングサービスですね。

普通にアクセスするとこんな感じの表示がされます。

普通にアクセスしたYouTube Music

これをPWAとしてインストールすると、以下のような表示に切り替わります。

Youtube Musicのスクショ

わかりますか?

タブの表示などブラウザ固有のUIがなくなり、普通のアプリのような表示になってるのがわかりますよね。

できることは一緒なのですが、画面として独立してるので再生したまま最小化するような時に便利です。

インストールはChromeやEdge、iOSのSafariなどから行えます。
残念ながら、なんでも登録できるわけではなくPWAに対応したサイトのみが登録可能です。

というわけで、今回はPWAのインストール方法や対応サイトを紹介します

  • ウェブサイトをインストールし、アプリ風に使えるのがPWAです
  • アプリと同じようにデスクトップ/ホームにアイコンが表示されるようになります
  • PWA対応してるサイトだけがインストールできます

パソコンでの使い方

インストール方法

Macでの例です。Windowsもほぼ一緒です。

対応しているサイトに、EdgeやChromeでアクセスすると、アドレスバーの端にインストール(+)のアイコンが表示されます。

インストールできるサイトの証

インストールボタンを押すだけです。

インストール確認
インストールしたアプリを起動したい時は、他のアプリと同じようにメニューから呼び出します。

インストールしたPWAアプリ

とっても簡単です。

アンインストール方法

アイコンを削除しただけではPWAの削除は行われません。
起動中のウィンドウ右上のメニューアイコンからアンインストールします。

アンインストール

メニューにある『「xxxxx」をアンインストール』を選択するだけです。

こちらも簡単ですねー。

スマホでの使い方(Androidでの例)

インストール方法

こちらも対応サイトにアクセスし、メニューから「ホーム画面に追加」を選ぶだけです。

Chromeメニュー

あとは、表示される案内にしたがって操作するだけです。

一部のサイトでは下画面のようにインストールを促す表示がされる場合もあるようです。

インストールしたアプリはストアからインストールしたアプリ同様、ホーム画面のアイコンから起動が可能です。

アイコン表示

以下は起動したアプリの画面です。

Chromeのメニューが表示されなくなりすっきりした印象となります。
スプラッシュ(タイトル画面)も表示されるので一見すると普通のアプリとの差はわからないと思います。

アンインストール方法

ストアからインストールしたアプリと同様の操作でアンインストールが可能です。

続いて、対応サイトの紹介です。
まとめサイトもあるのですが、個人的にはあまり使い勝手が良くなかったので独自に調査し、まとめてみました。

今回はパソコンからアクセスして探しています。
パソコンかスマートフォンかで対応状況変わると思いますので参考程度に見てもらえたらと思います。

GoogleのPWA対応サービス

最初はGoogleのサービスから。

さすがPWAを推進しているだけあって、Googleの提供サービスでもいくつかPWA対応しているものがあります。

ただ、Gmailは対応してないみたいです。対応してても良さそうなのですが。残念。

Google Maps

パソコンでインストールした場合はタブレット表示時のUIになるみたいです。
普通にブラウザで見るより画面がすっきりします。

https://www.google.co.jp/maps/

Google Photo

画像用のオンラインストレージです。
ウェブ版がアプリ風になるだけなので同期などは行えません。

https://photos.google.com/

Google Drive

スプレッドシートなどを開こうとすると結局ブラウザが表示されるため、メリットはそこまでないように思います。

https://www.google.com/intl/ja_jp/drive/

YouTube Music

YouTubeによる音楽のストリーミングサービス。
Google関連のサービスの中では一番PWAとしてインストールする価値が高いように感じました。

https://music.youtube.com/

Microsoftのサービス

Microsoftのサービスで2サービス対応サイトを見つけました。
どちらもなかなか便利な印象です。

Office

Excel、Word、PowerPointなどが1ウィンドウ内で動作します。

ウェブ用の簡易版なので、パソコンのアプリ版に比べると見劣りしますかね。
OneDrive、OneNoteは非対応のため、アイコンをクリックするとブラウザで該当ページが開かれます。

https://www.office.com/

Outlook

メールサービス。
ログインしてる状態でインストールを行うだけなので、メールアプリに設定するより圧倒的に簡単に扱えるのはGood。Gmailも対応しやがれ

1通ごとに別ウィンドウで表示することもできますが、表示はややもっさり気味です。

https://outlook.live.com

その他おすすめPWA対応サイト

いくつかPWA対応してるのを確認したサイトを紹介です。

一部は紹介サイトで見つけた情報で自分で試していないものもあります。

Twitter

説明は不要ですね。
もともと洗練されたUIなのでインストールするとアプリにしか見えません。

https://twitter.com/

メルカリ

ご存知フリマアプリです。
ちなみに、同系のサービスのラクマやpaypayフリマは非対応の模様です。

https://www.mercari.com/jp/

Spotify

音楽のストリーミングサービス。

対応してる、らしいです。自分は使っていません。

https://www.spotify.com/jp/

Pinterest

写真共有ウェブサイトです。

Pinterestはおすすめしてくる

なんと、Pinterestに関しては「Chrome版Pinterestアプリをご利用ください」とダウンロードボタンが表示される親切設計です。

https://www.pinterest.jp/

Rettyグルメニュース

そこまでメリットがあるかわからなかったけど、よく使う人には便利かも。

https://retty.news/

Yahoo!(スマホのみ)

Yahoo!は古臭いUIのようでこういうところがんばってます。

https://m.yahoo.co.jp/

Instagram(スマホのみ)

エミュレーション機能でパソコンにもインストールできるけど、投稿はできないので微妙です。

https://www.instagram.com/

Qiita

プログラマ向けの技術共有サイト。

https://qiita.com/

他のPWA対応サイトを探したい方へ「Favorite PWA」

PWAのまとめサイトです。
他のPWA対応サイトもチェックした場合にみてみてはどうでしょうか。

ここでは紹介してない、便利ツールやゲームなどのPWAサイトも紹介されています。

https://favorite-pwa.com/

まだまだ発展途中

2020年9月現在、PWAサイトはまだまだ少ないようですが、インストールの敷居が利用者・開発者ともに本格的なアプリよりも低いので今後広がっていきそうな仕組みです。楽しみですね。

オススメのPWAサイトがあれば連絡いただけると嬉しいです。