#25「誰でも分かるPWA」

PWAというワードは聞いたことあるけど、詳しいところはよく分からない...うちのサイトには関係ないかな...と思っている方も多いのではないでしょうか。今回はそんな方々に向けてPWAとは何か、どういうコンテンツに適しているのかなどをご紹介します！

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

橋本
こんにちは！ ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
今回はPWA、Progressive Web Appsをテーマにとりあげて、加藤さんと話していこうと思います！よろしくお願いします！
加藤
はい！よろしくお願いします！いきなり宣伝なんですけども、最近ミツエーリンクスのサイトにあるミツエーテックラジオのページをPWA化したので、いつもミツエーリンクスのサイトから聞いてます！という方がもしいればぜひインストールしてみてください！
橋本
はい、よろしくお願いいたします！
加藤
まずPWAってなんなの？ってところから話していこうと思います。PWAというのはさっき橋本くんも言った通りProgressive Web Appsの略ですね。MDNにあるPWAのページにはPWAとは1つの「デザインパターン」である、と書いてあって私としてはその考え方がしっくりきてます。
橋本
なるほど。具体的にはどのへんにしっくりきている感じですか？
加藤
えーっといわゆる「PWA」として、インストール可能にする条件っていうのがあるんですけど橋本君はそれはご存知ですか？
橋本
はい。Webサイト自体がHTTPSで配信されていることと、アプリの名前やアイコンの情報を記述したWeb App Manifestを読み込んでいることと、あとは1つ以上のService Workerが登録されていることですよね。
加藤
そうですね。その最低限の3つの要件を満たすことを、Webアプリを構築する際の1つの定番パターンとみなして、PWAという名前を付けたって言うイメージですね。ただPWAという名前は仕様などで公式に定められているものではなくて、Googleが最初に提唱し始めた用語をそのまま使っているってだけで、正式名称というわけではないですね。
橋本
そうなんですね。Googleが提唱し始めたというところですが、そのモチベーションはどういうところにあったんでしょうか。
加藤
ざっくり言うと、ネイティブアプリとWebサイトのいいとこどりをしたいっていうところなんじゃないかなと思います。ネイティブアプリにはネイティブアプリの、WebにはWebの特有の良さというのがあって、PWAは両方の良さを部分的に備えた構築手法だと理解しています。
橋本
なるほど。とはいっても、ネイティブアプリを置き換えるものではないんですよね？それぞれの良さを理解したうえで、適切な形でコンテンツを提供することが大事だと思っているのですけど、ネイティブアプリとPWAの差別化というところは個人的に気になっているポイントです。
加藤
たしかにそこは気になりますよね。もちろん深堀りしていくといろいろな違いがあるんですけども、今回は運用の違いと、機能的な違い、ユーザー体験の違いの3つを取り上げてみようと思います。
橋本
はい。運用の違いというのは、アップデートするたびに各プラットフォームの審査があるかとかそういったことですか？
加藤
そうですね。ネイティブアプリの場合は、基本的にはApp StoreやGoogle Play上でアプリを公開することになりますが、その前にApp StoreであればAppleの、Google PlayであればGoogleの審査に通ることが、アプリを公開するために必須のフローになります。その点PWAは実体としてはWebサイトなので、Webサーバに最新のソースを適用すれば、ユーザーがアプリをアップデートしなくても常に最新版のアプリを使うことができます。
橋本
なるほど。審査が必要という時点でユーザーからしたらある程度の信頼できるアプリが公開されているという安心感はありますよね。ただ開発者の視点に立つとOS側のバージョンアップに都度追従する必要があったり、Webサイトと比べると更新のコストが大きいうえにOSによる制約が多いイメージがあります。
加藤
そうですね。ただ、それはある意味Webサイトの場合も同じで、ネイティブアプリはOSの上で動くものなんですけど、WebサイトはOSの上で動くブラウザの上で動くものなので、その分OSにより近い機能はブラウザの制約によって使えないことがあって、それがさっき言った機能的な違いの一つです。
橋本
たとえばどんな機能がありますか？
加藤
少しずつWebブラウザでも使えるようになってきてはいるんですけども、BluetoothとかNFCなどを使って他のデバイスと接続するような機能とかが分かりやすい例ですかね。
橋本
なるほど…そういえばWeb プッシュ通知もSafariではまだ使えませんよね。
加藤
そうなんですよね。iOSでプッシュ通知ができないことでPWAをあきらめてネイティブアプリとして作る、というプロジェクトはこれまでもけっこうありましたね。まぁ、そういったPWAでは機能的に実現できない部分というのはやっぱりいくつかあります。
ただ逆にWebサイトのいい点をそのまま活用できるというのは大きなメリットだなと思っていて、たとえばWebサイトは一意なURLを持っているので、SNSでコンテンツを共有したいときはURLをコピーして送信すれば済みますよね。
橋本
はい。やっぱりそのあたりはWebのほうが圧倒的に気軽ですよね…。最後のユーザー体験の違いというのはどういうことですか？
加藤
今話したシェアの仕方っていうのも一つのユーザー体験ではあるんですけど、もう少し俯瞰してみたところで、ネイティブアプリの場合ってアプリのストアから使いたいアプリをインストールして使うので、たとえば以前使っていて使い心地がよかったのを覚えているとか、ある程度知っているアプリがやっぱりインストールされやすいと思うんですよ。
橋本
まぁそうですね。自分の場合はたとえば、考えや情報をまとめたい！とかってニーズが出てきたときにメモアプリを探したりとか、ニーズ起点のケースが多いですね。そういう場合もあまりネットでアプリを探したりはせずに、App Storeで検索してアプリの概要を見てからインストールして、あまりしっくりこなかったら別のアプリを探したりっていう感じです。
加藤
私もそんな感じですね。つまり、当然のことなんですけどネイティブアプリを使うにはまずアプリをインストールする必要があります。
ただ、逆にPWAはあくまでWebサイトなので、インストールする前にアプリを使うことができますよね。で、使いやすかった！これは今後も使いたい！と思ったらインストールするって感じで「使う」の延長線上に「インストール」があるってこともあるんですよね。
橋本
あーなるほど。たしかにインストールしてから使うのではなくて、Webで少し試してからインストールする、というのはユーザーが求めているものと、アプリが提供している価値のギャップを小さくすることができそうですね。
加藤
そうなんです。あとはもちろんWebサイトなので、スマホでPWAとしてインストールしていたアプリを、PCやタブレットではブラウザでそのまま使うといったように、場面やデバイスに応じて使い分けるといった選択もできます。
橋本
ここまでの話をまとめてみるとPWAはWebアプリを構築する1つの作り方で、ネイティブアプリとWebサイトの良いとこ取りしたものという感じですかね。
加藤
はい！
橋本
さっきの話で、Webサイトとして「使う」の延長線上に「インストール」があるという話をしたんですけど、逆にインストールしなくても、ブラウザ上である程度使えてしまうので、インストールの必要性というのが感じられないかも？とちょっと感じたんですけど、インストールすることで得られる利点ってどういうことがありますか？
加藤
インストールされたアプリはスマートフォンのホーム画面にアイコンを置くことができるので、ブラウザのブックマークよりも気軽にアプリを使うことができるっていうのは割と定番だと思うんですけど、さらに言うと、インストールされたPWAはブラウザ以外の他のネイティブアプリと同じように扱われるようになるので、たとえばWindowsのアプリケーション検索の機能だったり、macOSのSpotlightによるアプリケーションの検索にヒットするようになります。
橋本
よりアプリっぽく使えるようになるんですね。あとはPWAといえばオフライン体験を提供できるようになるというのはよく耳にします。
加藤
そうですね。まぁオフライン対応については、正確に言えばPWAとしてインストールせずにブラウザのまま使っても得られる利点ですね。
橋本
そうなんですね。自分はほとんどオフラインになるタイミングがないんですけど、やっぱり対応しておいたほうがいいものなんでしょうか。
加藤
そうですね。いろいろなシチュエーションを考えてみると、案外オフラインになるタイミングって実は少なくないんですよね。たとえば、コロナ禍によって今はあまり旅行に行ったりすることがないと思うんですけど、船に乗って旅行するときとか、山に登るときとか、基地局が近くにないような時は電波がキャッチできなくてオフラインになるってことは考えられますね。
あとは国や地域によっては、インターネット普及率が低かったり、通信料が比較的高額だったりするので、そういうことを踏まえるとオフライン対応する意義というのはあると思います。
橋本
なるほど…。やっぱり突き詰めていくと、オフライン対応を提供することも一歩進んだユーザー体験を提供するってことにつながるわけですね。
加藤
そうだと思います。すこし話がずれてしまうかもしれないんですけど、オフライン対応の実態はファイルをキャッシュすることなので、オフラインでも動くコンテンツはもちろんオンラインでも高速に動きます。なのでオフラインになることがないから、オフラインサポートしなくてもいいというよりは、パフォーマンス向上施策の一環として捉えてみるといいのかなと思います。
橋本
ここまで話した話って、インストールの機能と、オフラインの機能の2つのみだったんですけど、それだけでもかなり効果的なんじゃないかなと感じがしてきました。ただ、冒頭で話したように、PWAはデザインパターンなので、おそらく向いているコンテンツと向いていないコンテンツというのがあるんですよね。
加藤
おっしゃる通りですね。PWAにしたからといって最大限の効果を得られるかと言えばそうではない気がします。
橋本
たとえばPWAに向いているコンテンツっていうのはどういうものですか？？
加藤
やっぱりPWAはProgressive Web Appsなので、情報コンテンツというよりはユーザーインタラクションが多いアプリケーションに向いていると思います。有名どころだと、スターバックスはスマホから注文できるモバイルオーダー用のWebアプリをPWAとして提供していて、最近よく使ってます。
橋本
あー、Webアプリから注文ができるっていうことですか？
加藤
そうですね。スターバックスに行ってコーヒーを買う時って、通常は列に並んで注文すると思うんですけど、モバイルオーダー用のPWAがあれば列に並ばずに注文して商品を受け取ることができます。
橋本
なるほど。店舗に行ってネイティブアプリではなくてWebアプリを開くというのは、これまでのWeb体験とはまた違った形というか、リアルタイムな状況に最適化されている感じがして面白いですね。でも逆にそこまで最適化されていると店舗以外では使えないんじゃないかなと思ってしまうんですけどそこはどうなんでしょうか。
加藤
そこはもちろんうまく作られていて、PWAを立ち上げると「近くの店舗を探す」という機能が出てくるんですよ。なので「店舗に行ってPWAを開いて使う」というシーンと、「PWAを立ち上げて店舗を探す」という両方のシーンがカバーされていますね。
橋本
なるほど。よくできていますね。逆に向いていないコンテンツというのはありますか？
加藤
向いていない、と言ってもPWAにしてはいけないってことではもちろんないんですけど、コーポレートサイトなどのいわゆる情報サイトとかは、1つのWebサイトに目的や用途が複数あることが多いので、何のためのアプリなのか、というのが伝わりにくいような気はしてますね。
橋本
なるほど！ありがとうございます！
ここまでPWAについて話してきましたが、日本でPWAをもっと普及させるにはどうすればいいと思いますか？
加藤
あくまで個人の意見という域を越えない話になってしまうんですけど、PWAの構成要素である「インストール機能」や「オフラインサポート」はやっぱりプラスアルファな技術であって、結局マストではないんですよね。多くのプロジェクトではPWAとして作るのがゴールではなくて、まずはWebサイトを公開するのがゴールですよね。
橋本
そうですね。
加藤
だから当社が掲げている「運用ファースト」という考え方はPWAの導入の鍵かなと思っていて、Webサイトを公開したことをゴールにせず、継続的に良くしていくことを考えながら、そのうちの策の一つとしてPWAを検討するのがいいのかなと思ってます。
あとは、今日話したようにPWAっていうのはいくつかの機能の集合体でしかないので、いきなりインストール機能も、オフライン対応も、プッシュ通知も入れましょう！というよりは、まずはキャッシュから取り組んでみましょう！といったように、少しずつ機能を取り入れていくことができればもっと普及するんじゃないかなと思います。
橋本
なるほど…！では今度はその辺りの機能について具体的に聞かせてください！
加藤
はい！
橋本
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、 Google Podcast、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。 また「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどお待ちしております。
それでは今日はこの辺で！ありがとうございましたー！
加藤
ありがとうございました！