当サイト、オリジナルWordPressプラグイン「OJapp PWA Marketing」を使用しています。
各記事は専用アイコンでホーム画面に追加できます。ぜひお試しください。
PWA（Progressive Web Apps）のメリットを調べると、よくこんな説明が出てきます。
- アプリストアを使わずに提供できる
- オフライン対応ができる
- Push通知を送れる
- 表示を高速化できる
- ユーザーの再訪を増やせる
- Webサイトをアプリのように使える
もちろん、どれもPWAのメリットです。
しかし、これらの多くはPWAを導入するWebサイト側から見たメリットです。
では、実際にホーム画面へ追加するユーザー側から見るとどうでしょうか。
ユーザーはなぜ、そのWebサイトやWebページを自分のホーム画面に置くのでしょうか。
ここを考えてみると、
PWAに対応することと、ユーザーがPWAを使いたくなることは別です。
Manifestを用意して、ホーム画面へ追加できるようになった。
技術的には、それでPWAは完成しているかもしれません。
しかしユーザーからすると、
「これをホーム画面に置いておくと、何が嬉しいの？」
という話はそこから始まります。
この記事では、PWAそのもののメリットではなく、PWAを使うユーザー側のメリットをどう作るかという視点から考えてみます。
- 1 ホーム画面に追加できるだけでは、追加する理由にならない
- 2 一番分かりやすいメリットは「次にすぐ開ける」
- 3 でも、追加したページと違う場所が開いたら？
- 4 サイトを保存したのか、ページを保存したのか
- 5 アイコンにもユーザー側のメリットを作れる
- 6 ユーザー自身にアイコンを選んでもらう方法もある
- 7 「置いた後」にメリットを作る
- 8 ホーム画面から開いた人だけに「おもてなし」をする
- 9 Push通知を使わなくても、再訪時に情報を届けられる
- 10 Web用の要素を消して「アプリとして使いやすくする」
- 11 PWAのユーザーメリットは「作る」ことができる
- 12 「どう追加してもらうか」より「なぜ残してもらえるか」
ホーム画面に追加できるだけでは、追加する理由にならない
PWAを導入すると、WebサイトやWebページをスマートフォンのホーム画面へ追加できます。
ブラウザからではなく、ホーム画面のアイコンから起動できる。
これはPWAの大きな特徴です。
ただし、
「ホーム画面に追加できます」
という機能そのものが、ユーザーにとってメリットになるとは限りません。
スマートフォンのホーム画面は、ユーザー自身の場所です。
普段使うアプリ。
よく見るサービス。
仕事で使うツール。
好きなゲーム。
毎日見る情報。
そういったものが並んでいます。
そこへWebサイトのアイコンを追加してもらうのであれば、
ホーム画面に残しておきたい理由
が必要です。
一番分かりやすいメリットは「次にすぐ開ける」
PWAで最もシンプルに作れるユーザーメリットは、
次回からワンタップで開けること
です。
例えば、ブラウザで便利なWebツールを見つけたとします。
通常なら次に使う時、
- ブラウザを開く
- 検索する
- サイトを探す
- ツールのページへ移動する
という操作が必要になるかもしれません。
ホーム画面に置いてあれば、
アイコンをタップするだけです。
これはWebツールだけではありません。
例えば、
- よく見るレシピ
- お気に入りの商品
- 店舗のメニュー
- イベントのタイムテーブル
- 予約ページ
- 会員ページ
- よく読む記事
- 計算ツール
- ジェネレーター
- 施設案内
なども同じです。
毎日使う必要はありません。
「次に必要になった時、探し直さなくていい」
これだけでも、ホーム画面に置く意味は作れます。
でも、追加したページと違う場所が開いたら？
ここでPWAの設計によっては、ユーザーの期待と実際の動作がズレることがあります。
例えばユーザーが、
example.com/tools/image-compressor/という画像圧縮ツールを使っていたとします。
便利だったので、そのページからホーム画面へ追加しました。
ユーザーの感覚としては、
「この画像圧縮ツールをホーム画面に置いた」
に近いでしょう。
ところが、そのサイトのWeb App Manifestが、
{
"start_url": "/"
}となっていた場合、ホーム画面のアイコンから起動すると、
example.com/へ戻る設計になっていることがあります。
PWAとしては、おかしな動作ではありません。
サイト全体を1つのアプリとして設計しているのであれば、トップページを起動地点にするのは自然です。
しかしユーザーはWeb App Manifestの設定を知りません。
PWA、ブックマーク、ホーム画面ショートカットの技術的な違いを理解しているとも限りません。
ユーザーからすると、
「さっきのページをホーム画面に追加した」
という感覚だったのに、
「なんでトップページが開くの？」
となる可能性があります。
サイトを保存したのか、ページを保存したのか
ここはPWAを設計する側が考える必要があります。
サイト全体を1つのサービスとして使ってもらいたいのであれば、
"start_url": "/"で問題ありません。
サイト全体を1つのアプリとして考える設計です。
私はこれを、
1S1A（One Site. One App.）
と呼んでいます。
一方、
「この商品をまた見たい」
「このツールをまた使いたい」
「このページを何度も開きたい」
という用途なら、ユーザーが追加したページへ直接戻れる方が自然です。
例えば、
"start_url": "."のように、現在のページを基準に設計する方法があります。
こちらは、
1P1A（One Page. One App.）
という考え方です。
1S1Aと1P1Aは、どちらが優れているというものではありません。
重要なのは、
ユーザーが何をホーム画面に置いたと思っているのか
です。
サイトをアプリとして提供するなら1S1A。
ページをアプリとして提供するなら1P1A。
PWAをユーザー側から考えると、start_urlも単なる技術設定ではなく、ホーム画面から起動した時の体験設計になります。
アイコンにもユーザー側のメリットを作れる
PWAのアイコンというと、多くの場合はサイトロゴやサービスロゴが使われます。
もちろん、それが普通です。
ただ、ホーム画面をユーザー側から考えると、別の使い方もできます。
ホーム画面に置きたくなるアイコンを作る
という考え方です。
例えば、OJapp PWA MarketingというWordPressプラグインでは、記事や商品などのページごとにホーム画面用アイコンを持たせることができます。
サイト全体で同じサイトアイコンを使うのではなく、
- 記事ごと
- 商品ごと
- コンテンツごと
に違うアイコンを使えます。
ここでアイコンを単なる識別用画像ではなく、
ホーム画面に置く小さなデザイン
として考えてみます。
例えば、
- 壁紙に馴染むアイコン
- 季節限定デザイン
- 商品シリーズごとのアイコン
- キャラクター違い
- コレクションしたくなるデザイン
- 記事のテーマに合わせたデザイン
などです。
そうすると、
「便利だから置く」
だけではなく、
「このアイコンをホーム画面に置きたい」
という理由も作れます。
これは機能的なメリットというより、ユーザーへの小さなエンターテインメントです。
ユーザー自身にアイコンを選んでもらう方法もある
さらに、アイコンをサイト側が決める必要もありません。
例えばOJapp Makerでは、ユーザー自身がWebページとアイコンを組み合わせてホーム画面へ追加できます。
この場合の価値は、
自分のホーム画面を自分好みにできること
です。
同じWebページでも、
「どんなアイコンでホーム画面に置くか」
をユーザー自身が選べる。
これは一般的なPWAの、
サイト側がアプリアイコンを決める
という考え方とは少し違います。
ホーム画面はユーザー自身の空間なので、そこに置くものをカスタマイズできること自体がメリットになります。
PWAのアイコンは、単なるロゴである必要はありません。
ホーム画面UXの一部
として考えることもできます。
「置いた後」にメリットを作る
ここまでは、
ホーム画面へ追加する時のメリット
でした。
しかし、もう一つ考えられるのが、
ホーム画面に置いておくことで得られるメリット
です。
例えば、
「ホーム画面から開いた時だけ限定情報を表示する」
という使い方です。
PWAでは、現在のページが通常のブラウザ表示なのか、ホーム画面からstandaloneモードで起動されているのかを判定できます。
例えばCSSなら、
@media (display-mode: standalone) {
/* ホーム画面から起動した時の表示 */
}JavaScriptでも判定できます。
つまり、
ホーム画面から開いたユーザーだけに違う体験を提供する
ことができます。
ホーム画面から開いた人だけに「おもてなし」をする
OJapp PROでは、この仕組みをHome Screen Offerとして使っています。
ホーム画面からPWAとして起動した時だけ、
- 限定メッセージ
- キャンペーン画像
- クーポン
- 新着情報
- 新しい記事への案内
- 商品ページへの案内
- イベント情報
- 予約ページへのリンク
などを表示できます。
通常のWeb訪問者には表示しません。
ホーム画面から戻ってきたユーザーだけです。
これは、
「ホーム画面に追加してください」
というお願いだけで終わらせず、
「ホーム画面に置いておくと、次に開いた時にちょっと良いことがある」
というユーザーメリットを作る方法です。
Push通知を使わなくても、再訪時に情報を届けられる
PWAというとPush通知が注目されることがあります。
もちろんPush通知は便利です。
しかし、ユーザー側から見ると、
通知を受け取りたいかどうか
は別の問題です。
すべてのWebサイトから通知を受け取りたい人は多くないでしょう。
そこで、
通知を送るのではなく、ユーザーが自分から戻ってきた時に情報を見せる
という方法もあります。
ホーム画面にアイコンは置いてある。
通知は来ない。
必要な時に自分で開く。
そして開いた時だけ、新しい情報や特典がある。
このくらいの距離感を好むユーザーもいるはずです。
PWAのメリットは、必ずしもPush通知を送れることだけではありません。
通知しなくてもホーム画面に入口を残せること
も大きな特徴です。
Web用の要素を消して「アプリとして使いやすくする」
ユーザー側のメリットを考えるなら、表示そのものを変えることもできます。
通常のWebサイトでは、
- 大きなサイトヘッダー
- Web用ナビゲーション
- 「ホーム画面に追加してください」という案内
- ブラウザ閲覧者向けの説明
などが必要かもしれません。
しかしホーム画面から起動した後は、それらが不要になる場合があります。
その場合、
@media (display-mode: standalone) {
.web-only {
display: none;
}
}のようにして、Web用の要素だけを非表示にできます。
同じWebページでも、
ブラウザで見る時はWebサイト
ホーム画面から開いた時はスッキリしたアプリ画面
という見せ分けができます。
別のアプリを作る必要はありません。
同じページを、起動方法に合わせて少し整えるだけです。
これもユーザー側から見れば立派なPWAのメリットです。
PWAのユーザーメリットは「作る」ことができる
ここまでの話を整理すると、PWAのユーザー側のメリットは1つではありません。
1. 便利
よく使うページへホーム画面からワンタップで戻れる。
2. 迷わない
追加したページを、そのまま起動できるように設計する。
3. 自分好みにできる
好きなアイコンでWebページをホーム画面に置く。
4. 楽しい
ページごとに違うアイコンや限定デザインをホーム画面へ置ける。
5. 置いておく価値が続く
ホーム画面から起動した時だけ、新着情報や限定案内などを受け取れる。
6. アプリとして使いやすい
standalone起動時には不要なWeb要素を消して、画面をシンプルにできる。
こう考えると、
PWAそのものがユーザーメリットなのではありません。
PWAが持っている、
- ホーム画面
- アイコン
- 起動URL
- standalone
- Manifest
といった仕組みを使って、
ユーザーが使いたくなる理由を設計できる
ことがPWAの面白いところです。
「どう追加してもらうか」より「なぜ残してもらえるか」
PWAを導入すると、
「どうやってホーム画面に追加してもらうか」
を考えたくなります。
インストールボタンを置く。
追加方法を説明する。
ポップアップを表示する。
もちろん、それも必要な場合があります。
でも、その前に考えたいことがあります。
なぜユーザーは、そのページを自分のホーム画面に残したいのでしょうか。
便利だから。
また使うから。
探し直したくないから。
アイコンが好きだから。
ホーム画面から開くと少し得するから。
アプリとして使いやすいから。
理由は何でも構いません。
大切なのは、
ホーム画面に追加できることではなく、ホーム画面に残しておく理由を作ること。
PWAに対応することと、ユーザーがPWAを使いたくなることは別です。
技術的にインストール可能になったところをゴールにせず、
追加する理由、置いた時の見た目、起動する場所、そして起動した後の体験まで考える。
それが、ユーザー側から考えるPWA設計です。
WPプラグイン[OJapp PWA Marketing]リリース！
