15PWAとは?事例・メリット・実装手順を解説!サイト改善|更新:2018.04.19|公開:2018.04.19こんにちは。アクセス解析の人工知能「AIアナリスト」運営チームの堀です。Apps)について解説します。Webサイトをモバイル対応にしてモバイルユーザビリティを高めているという方は多くいらっしゃるかと思います。モバイル用のアプリとは異なり、あくまでもWebサイトであるため、プッシュ通知を届けたりホームボタンを設置したりといったアプリのような機能はありません。そのような機能をWebサイトでも実現できるのが「PWA」です。この記事ではPWAについて、いつ使われるのか、どんなメリットがあるのか、どうやって実装するのかなどを詳しく解説します。PWAによって快適なユーザー体験を実現しましょう。目次PWAとはPWAにするメリットページの読み込みが速いオフラインでも動くアプリではないためインストールがいらないプッシュ通知を送信することができるアプリではないためアップデートやリリースの審査がいらないGPS機能を使えるホームスクリーンにアイコンを追加できるPWAを実装する手順httpsを有効化するウェブアプリマニフェストを作成するServiceWorkerを設定するPWAを実装してより快適なWebサイトにしようPWAとはPWAとは、Googleによる、モバイルユーザーの体験(UX)向上を目的とするプロジェクト・技術のことです。プログレッシブウェブアプリの略称です。Webサイトとアプリの両方の利点を取り入れ、まるでアプリのように扱うことのできるWebサイトが実現します。Lite」を提供しています。TwitterをWebサイトで閲覧する際に、まるでアプリのようなデザイン・使い方で閲覧することができるという、PWAの一例です。アプリの画面はこのようになっています。Liteの画面はこちらです。アプリとWebサイトでほとんど違いがみられません。Liteはデータ通信量も抑えられ、サクサクと動きます。Liteのアイコンが表示されています。このように、Webサイトでありながらアプリのような操作ができるのがPWAの大きな特徴です。Developersのcasestudyで見ることができます。PWAにするメリットWebサイトをPWAにすると、ユーザーと企業の双方にメリットがあります。ページの読み込みが速いPWAの場合、データ通信量が抑えられて読み込みが高速化されます。そのためユーザーにとって負担が少なく、より快適にコンテンツを利用してもらうことができます。オフラインでも動く通信が一時的に途絶えても、継続してWebサイトを閲覧することができます。ページ遷移を伴う操作も可能です。アプリではないためインストールがいらないインストール不要のためユーザーの手間が省かれ、CVに到達しやすくなります。「インストールのためにAppStoreでアプリを検索してパスワードを入力してアプリを起動して会員登録して...」という手間を面倒に感じて途中でやめてしまったという経験はありませんか?インストール無しでアプリと同様の機能を提供できれば、このような離脱を防ぐことができます。プッシュ通知を送信することができるWebサイトでありながらプッシュ通知を送信することができます。Developersより)。アプリではないためアップデートやリリースの審査がいらないアプリをリリースする際に必須となるAppStoreの審査を受ける必要がなく、手間を省くことができます。GPS機能を使えるGPS機能を利用できるため、ユーザーの位置情報に応じてコンテンツを提供することができます。ホームスクリーンにアイコンを追加できるアプリのアイコンのように、ホーム画面にアイコンを追加することができます。アプリと同様、ホーム画面から簡単にアクセスしてもらうことができ、流入数増加につながります。このように、モバイルユーザーにとっては、通信量を減らしながらアプリの使い心地を体感できる、使いやすいWebサイトになります。企業にとっては、モバイルユーザーの使い勝手を良くすることでWebサイトへの流入数・CV数を増加させることができます。PWAはGoogleが推進するプロジェクトであるため、今後SEOの面でもPWAであることが重要となってくる可能性があります。PWAを実装する手順PWAのWebサイトを構築する手順は次の3ステップです。1)httpsを有効化するPWAのWebサイトを実装するには、Webサイトをhttps化しておく必要があります。Workerという技術は接続へのハイジャックや改ざんができてしまうため、Webサイトがhttps化されている状態でなければ使用することができないからです。Webサイトをhttps化することは以前からGoogleも推奨しており、ユーザーの信頼を得られるため、SEOの面でも効果があります。https化していないという方はこれを機に対応しておきましょう。2)ウェブアプリマニフェストを作成するウェブアプリマニフェストを作成することで、普通のアプリのようにホーム画面からアイコンをタップするだけで起動できるようになります。起動時の画面をアプリのようなデザインにすることも可能になります。ウェブアプリマニフェストではアプリの画像や説明文、起動時の画面を設定する必要があります。ServiceWorkerを設定するServiceWorkerを設定することで、オフラインでの操作、定期的なバックグラウンドの同期、プッシュ通知の送信などが可能となります。WorkerはブラウザがWebページとは別にバックグラウンドで実行するスクリプトです。Webページを閉じた状態でも、ブラウザ上でスクリプトを実行することができます。ここでは具体的な実装方法は割愛しますので、より詳細な手順を知りたいという方は脱ネイティブ!Googleが推進する「PWA」にたった数時間で対応する方法をご覧ください。PWAを実装してより快適なWebサイトにしようPWAについて紹介してきました。PWAはユーザーにとっても企業にとってもメリットのある技術です。工数はかかりますが、開発担当と相談してぜひ実装してみてはいかがでしょうか。アプリではないため、Webサイトのアクセス解析をそのまま利用できることも利点です。PWAにしたことでどれほど成果があがったかをGoogleアナリティクスなどアクセス解析ツールで確かめ、サイト改善に役立てましょう。その際、Googleアナリティクスとともにおすすめなのが弊社ツールAIアナリストです。AIアナリストはGoogleアナリティクスのデータと連携してサイト改善案を自動で出してくれるツールです。無料で登録できるのでぜひ試してみてはいかがでしょうか。インターン生で、マーケティングチームに所属しています。INC.ページトップへ閉じる{{ctrl.invalidFormatErrorMessage(form)}}パスワードとパスワード(確認)が異なっています。入力したメールアドレスは既に登録されています。