開閉ボタン
ユーザーメニュー
ユーザーメニューコンテンツ
ログイン

  • 会員限定
  • 2019/04/15

どのように「PWA対応」すればいいのか? 効果を最大化するポイント

WebサイトやWebアプリをネイティブアプリのようにインストールできる技術「PWA(Progressive Web Apps)」。Webサイトとネイティブアプリの両方の利点を兼ね、「オフラインでも利用可能」「プッシュ通知を利用可能」などが特徴として挙げられ、新しいWebサイトのスタイルとして注目されています。本記事では、既存のWebサイトをPWAに対応するにあたって、実施すべき点や注意点について解説します。

アイレット株式会社 カスタマー支援事業部 開発セクションリーダー 小谷松丈樹

アイレット株式会社 カスタマー支援事業部 開発セクションリーダー 小谷松丈樹

2017年8月にユーザーエクスペリエンス(UX)の向上を目的として自社のオウンドメディア(cloudpack.media)をPWA対応。顧客支援のためのPWAに着目し、導入支援を行っている。アイレットは2019年1月にPWAを適切に実装できる企業として「PWAディベロップメント エージェンシーディレクトリ」に掲載。

photo
PWAをどのように仕事に生かすか
(Photo/Getty Images)

「PWA対応」の際に実施すべきこと

 はじめに、PWAについての基礎知識やメリット、用語についてはすでに公開されている「PWA(Progressive Web Apps)はどうスゴイのか?基本知識と12のメリットを解説」の記事をご確認ください。

 この記事は、PWA対応する際に実施すべきことを解説します。

 いきなりですが、実は既存のWebサイトを「PWA対応」するために実施すべきことは、そんなに多くはありません。

●PWA対応手順
  1. WebサイトのHTTPS化
  2. 起動画面に表示するアイコン作成・設置
  3. WebアプリManifest(manifest.json)の作成・設置
  4. Service Workerの作成・設置

 常にWebサイトの機能拡張などを実施していれば、サイトによっては2~4番のみでPWA対応が完了するサイトもあるのではないでしょうか。弊社のオウンドメディアも2~4番のみ実施して、容易にPWAに対応することができました。

 実施すべき内容の詳細については、グーグルがPWA対応する開発者のために、Progressive Web App Checklistを公開しています。PWAへの対応を検討する際に、ぜひご確認ください。既存のWebサイトで対応すべき項目が網羅されているので、イメージしやすくなるかもしれません。

画像
Progressive Web App Checklist
(出典:Google)

PWA対応前の注意点

関連記事
 PWAへの対応を検討する際に最も重要なのが、「PWA対応することによって実現したいこと」の明確化です。実現したい目的がネイティブアプリでしか実現できない可能性もあります。すぐに実装に飛びつかず、必ず目的を明確にしておきましょう。

 たとえばユーザーに対してプッシュ通知を行いたい場合は、ネイティブアプリという選択肢だけではなく、PWAのWebプッシュ通知でも要件を満たせるかもしれません。プッシュ件数の上限などはありますが、無料でWebプッシュ通知配信をするSaaSもいくつか用意されているため、ネイティブアプリを作らなくていいケースもあります。

 そしてPWAに対応することが決まったら、既存のWebサイトがレスポンシブデザインに対応をしているか確認をしてください。

既存のWebサイトをレスポンシブデザイン化せよ

 レスポンシブデザインとは、ユーザーのデバイスに依存せず、画面サイズに最適な状態でコンテンツを表示するデザインのことです。PCやスマートフォン、タブレットなどの異なる画面サイズでもアクセスするWebサイトの同じURLで同じHTMLを表示します。

 最近ではデスクトップPWAも少しずつ普及しはじめていますが、PWAはWebサイトをネイティブアプリと同じ要領で起動および操作が可能となるため、さまざまな画面サイズに柔軟に対応できなければいけません。

 またスマートフォンなどのモバイルデバイスでのWeb検索が多くなり、グーグルもMFI(モバイル・ファースト・インデックス)の導入などモバイルでのUX向上を進めています。

 PWAへの対応だけでなく、AMP(Accelerated Mobile Pages)など自社サイトのモバイルへの対応が適切にできているのか、このタイミングで確認してみるのもいいかもしれません。

【次ページ】PWA導入で成果を出すために

お勧め記事

Web開発 ジャンルのトピックス

Web開発 ジャンルのIT導入支援情報

PR

ビジネス+IT 会員登録で、会員限定コンテンツやメルマガを購読可能、スペシャルセミナーにもご招待!