ECサイトをPWAにすると聞くと、ショップ全体を1つのアプリにするイメージが強いかもしれません。
もちろん、それもPWAの使い方です。
でもECサイトには、もう1つ面白い使い方があります。
ショップではなく、商品そのものをホーム画面に置く。
気になっている商品、次に買いたい商品、定期的に購入する商品。その商品ページをホーム画面へ残せれば、次回は検索やSNS、ショップのトップページを経由せず、直接その商品へ戻れます。
ECサイトでは「ショップ」と「商品」で目的が違う
一般的なECサイトをPWA化する場合、サイト全体を1つのAppとして設計する方法があります。
ショップ
↓
ホーム画面にショップのアイコン
↓
タップ
↓
ショップトップAmazonや大規模なECサービスのように、ユーザーがショップ自体を目的として訪れるなら、この設計は自然です。
一方、小規模なショップやSNSから商品ページへ直接集客しているECでは、少し状況が違います。
ユーザーが欲しいのは「ショップ」ではなく、「その商品」である場合があるからです。
SNSで商品を見つける
↓
商品ページを見る
↓
今日は買わない
↓
後でもう一度見たいこの時に残したい入口は、ショップのトップではなく商品ページかもしれません。
商品ページをそのままホーム画面に置く
PWAは必ずしもサイト全体を1つのAppにする必要はありません。
商品ページごとにManifestを用意すれば、それぞれの商品を個別のホーム画面エントリとして設計できます。
例えば、
スニーカーA
↓
スニーカーAの画像をアイコンにする
↓
「Sneaker A」という名前でホーム画面へ
↓
タップするとスニーカーAの商品ページを開く別の商品なら、別のアイコンと名前を持たせます。
バッグB
↓
バッグBの画像
↓
「Bag B」
↓
バッグBの商品ページこの考え方が、私が1P1A（One Page. One App.）と呼んでいるPWA設計です。
Webでは商品ごとにURLが存在します。そのURL単位の構造を、そのままホーム画面にも持っていきます。
商品を探し直す必要がなくなる
ECサイトで一度見た商品へ戻る時、意外と手順があります。
ショップを開く
↓
カテゴリを開く
↓
商品を探す
↓
商品ページあるいは、
Googleで商品名を検索
↓
検索結果からショップを探す
↓
商品ページSNSで見つけた商品なら、元の投稿を探し直すこともあります。
商品ページ自体をホーム画面へ置けば、
ホーム画面
↓
商品アイコンをタップ
↓
商品ページまで短くできます。
PWAだから商品が売れる、という話ではありません。
一度見つけた商品へ戻るための距離を短くできる、という話です。
「お気に入り」と似ているけど場所が違う
ECサイトには、お気に入り機能やウィッシュリストがあります。
商品を後から見返すという目的だけなら、それでも十分です。
ただし、多くのお気に入り機能はショップの中にあります。
ショップを開く
↓
ログイン
↓
お気に入り
↓
商品を選ぶホーム画面に置く方法は、入口そのものをショップの外へ出します。
ホーム画面
↓
商品さらに、PWAとしてホーム画面へ追加すること自体には、そのECサイト独自のお気に入りアカウントを必須にする必要はありません。
もちろん、購入時のログインや会員機能が必要なショップなら、その部分は通常のWebサイトと同じです。
ホーム画面追加とECサイトのアカウント機能は、別の仕組みとして考えられます。
すぐ買わない商品ほど相性がいい
商品ページをホーム画面へ置く使い方は、特に購入まで時間がかかる商品と相性が良さそうです。
例えば、
- 価格が高く、少し考えてから購入する商品
- 他の商品と比較したい商品
- 発売日を待っている商品
- 在庫復活を後で確認したい商品
- 家族や友人と相談してから買う商品
- 定期的に買い直す消耗品
ECサイトを見たその瞬間に、すべてのユーザーが購入するわけではありません。
「気になるけど今日は買わない」という状態は普通にあります。
その商品との接点を、ブラウザを閉じた後にもユーザー自身が残せるのがホーム画面です。
リピート購入する商品にも使える
もう1つ分かりやすいのが、繰り返し購入する商品です。
例えば日用品や消耗品なら、
いつも買う商品
↓
ホーム画面に置く
↓
必要になったらタップ
↓
商品ページから購入という導線を作れます。
ショップ全体を探す必要がなく、購入したい商品から始められます。
WebのURLはもともと商品ページを直接指せるので、その特徴をホーム画面でも活かす形です。
商品画像をアイコンにすると意味が分かりやすい
商品ページ単位でPWAを作るなら、アイコンもサイト共通のロゴに固定する必要はありません。
商品Aなら商品Aの画像。
商品Bなら商品Bの画像。
商品Cなら商品Cの画像。
ホーム画面を見た時に、何の商品への入口なのか視覚的に分かります。
ショップロゴ
ショップロゴ
ショップロゴではなく、
👟 スニーカー
👜 バッグ
⌚ 時計のように、ページごとの意味をアイコンへ持たせる考え方です。
これが1P1Aで商品ページを扱う時の大きな違いです。
商品名もページごとに変えられる
Manifestを商品ページごとに生成するなら、ホーム画面名も商品に合わせられます。
{
"name": "Sneaker A",
"short_name": "Sneaker A",
"start_url": ".",
"display": "standalone"
}別の商品ページなら、別の名前を生成します。
ただし start_url: "." は、現在表示しているページを自動的に取得する特殊命令ではありません。
Manifest URLを基準に解決される相対URLなので、商品ページ単位の動的Manifestなど、それに合った構成で使う必要があります。
ショップ全体をPWAにする方法が悪いわけではない
ここは1P1Aと1S1Aの違いそのものです。
どちらが優れているという話ではありません。
| 設計 | ホーム画面に置くもの | 向いている使い方 |
|---|---|---|
| 1S1A | ショップ全体 | ショップを継続的に利用する |
| 1P1A | 個別の商品ページ | 特定の商品へ戻りたい |
ブランドやショップそのものに強い目的があるなら1S1A。
商品そのものに目的があるなら1P1A。
PWAの二極化：トップへ還る「1S1A」と、全ページをアプリ化する「1P1A」でも、この2つの設計思想を比較しています。
「ホーム画面に追加して」は商品ページでも理由が必要
商品ページを開いた瞬間に、何でもホーム画面へ追加してもらおうとするのは少し違います。
ユーザーがその商品に興味を持っていなければ、ホーム画面へ残す理由がありません。
例えば、
あとで購入を検討するなら
この商品をホーム画面に残せますあるいは、
いつも購入する商品なら
ホーム画面から直接開けますのように、追加した後のメリットまで伝える方が自然です。
PWAのインストールを目的にするのではなく、「この商品へまた戻りたい」というユーザーの目的を先に考えます。
ホーム画面に置かれただけで売上が増えるわけではない
ブログと同じく、ここは分けて考える必要があります。
商品ページをPWAにしただけで購入率が上がるとは断定できません。
ホーム画面に追加されても、商品自体に魅力がなければ購入にはつながりません。
価格、在庫、商品説明、写真、送料、決済体験など、ECとして重要な要素はそのまま重要です。
PWAができるのは、その商品への再訪経路を1つ増やすことです。
「また見たい」と思った人が、次に戻りやすくなる。
それ以上でも、それ以下でもありません。
Push通知とは違う再訪の作り方
ECの再訪施策というと、メールやPush通知、SNS広告などがあります。
これらはショップ側からユーザーへ働きかける方法です。
ホーム画面への追加は方向が逆です。
ショップから通知する
↓
ユーザーを呼び戻すではなく、
ユーザーが商品を残す
↓
欲しい時に自分で開くという使い方です。
私はこの考え方をホーム画面マーケティングとして整理しています。
毎日通知するのではなく、ユーザー自身が残した入口から戻ってくる。かなり静かな再訪導線です。
既存の商品ページをそのまま使えるのがWebの強み
この方法の面白いところは、商品専用のネイティブアプリを新しく作る必要がないことです。
すでに存在する商品ページを入口として使います。
既存の商品ページ
+
商品ごとのManifest
+
商品ごとのアイコン
↓
ホーム画面の商品入口購入処理、カート、商品説明、在庫表示などは、今あるECサイト側の仕組みをそのまま利用できます。
PWAはその前に、ホーム画面から商品へ戻る入口を追加します。
ECサイトのPWA化は「ショップアプリ」だけではない
ECサイトをPWAにするというと、Webショップ全体をネイティブアプリのように見せることが目的になりがちです。
でもWebには、最初から商品ごとにURLがあります。
その構造を活かせば、
ショップをAppにする
だけではなく
商品をAppの入口にするという設計もできます。
気になる商品。
比較している商品。
発売を待っている商品。
何度も購入する商品。
そうした「また戻りたい商品ページ」を、ユーザー自身のホーム画面へ残す。
ECとPWAの組み合わせでは、ショップ全体のアプリ化だけでなく、商品URLそのものを再訪の入口にする発想もかなり相性がいいと思っています。
