Shopアプリとは？
ShopアプリとはShopifyが開発しているShopify専用のモール型モバイルアプリのことです
ここで言うShopアプリとWEBページの違いですが、Shopアプリは読んで字の如くアプリケーションをデバイスにインストールして使用するのに対し、WEBページではGoogle ChromeやSafariなどのWEBブラウザで閲覧できるサイトページのことを意味しています
今回はそのShopアプリとWEBページとの違いをまとめていきます
WEBページは作り込んだけれどもアプリで見ると表示が違ったり、意図した内容が出てこないなどのトラブルを避けるためにも事前に違いを考慮しスムーズなお買い物体験を実現するための参考にしてください
Shopアプリでの考慮点と対策
ストアのTOPページの作り込み
WEBページでどんなにサイトを作り込んでもアプリの前では無力です
せっかく作った素敵なサイトもShopアプリの設定をしないままでは以下のような感じで無機質なページとなってしまいます
Shopチャネルのストアのカスタマイズはできていますか？
Shopifyに「Shop channel」というチャネルが存在します
こちらをインストールしShopチャネルの設定を行います
Shopチャネルのカスタマイズを押すとShopアプリの表示内容をある程度調整することができます
真ん中にアプリでの見た目が表示されますので、調整したいエリアをクリックしてみましょう
すると、そのエリアの設定を行えるようになります
①ロゴ設定：アプリのデフォルトではストア名がテキスト表示されています
よりブランド力を高めたい場合はロゴ画像を設定するようにします（背景設定をする場合は透過pngのほうが良いですね）
②色設定：ヘッダーに表示される背景、ボタン、アクセントに使用されます
ややこしいのですが、背景に③のメディア画像を使用する場合には先にこちらの設定をしておかなければいけません
③メディア設定：背景にカバー画像を表示したい場合にはこちらを設定しましょう
画像の明るさによってはロゴと喧嘩をするので適宜オーバーレイ強度で調整をしてください
上記の画像にはありませんが、「スローガン」というテキストを入れ込むこともできますので適宜設定をし、お店独自のオリジナリティを高めたアプリTOPへ置き換えて魅力的なサイトづくりをしましょう
ストア情報の見直し
ストア情報とはWEBページではページ下部（フッター）に並ぶことの多い個人情報保護方針（プライバシーポリシー）のページや返金ポリシー、配送ポリシー、特定商取引法に基づく表記といったポリシー関連のことを指します
Shopチャネルでは下図で表示内容を確認することができます
アプリでは下図の箇所から確認することができます
Shopチャネル上では日本語として表示されているものも実際のShopアプリでは英語で表示されていますのでこちらにも注意が必要です
ポリシー関連のページ作成は”/pages”？それとも”/policies”？
これらポリシー（法務）関連のページは本来Shopifyが設定 > ポリシーのページとして場所を準備してくれています
こちらにそれぞれの内容を入れることでShopアプリへの導線や購入時の決済画面に自動でリンクされるような仕組みになっています
ですので、WEBページでポリシー設定ではない方法で表示を行っている場合、例えば/pagesでページを作成していたり、フッターに直にテキストを入れるなどでポリシーの表示をしている場合はShopアプリでは正しく情報が表示されない場合があるので注意が必要です
/pagesと/policiesの二刀流で運用をする・・・ということも可能ですが、運用を重ねるにしたがい、差分や工数の負担も考えられるため設定 > ポリシーのページで表現を進めるのが今後もスムーズに運用できるかもしれません
同意アプリなどアプリの適用はShopアプリ内では適用されない
Shopアプリでは、2023年9月現在定期購買の商品を販売することはできません
また、その他アプリやテーマの特定のセクション表示はされません
下記適用されない例です
- チェックボックスなどで同意した上でカートに入れる・購入するなどをする
- 特定のブロック表示、Liquidでの表示
- eギフトの利用
これらは一部の例ですが、Shopアプリの表示では
- 販売元
- 商品名（タイトル）
- 商品価格
- バリエーションピッカー
- 数量セレクター
- 購入ボタン
- 商品説明
- WEBページへのリンク
- 返品ポリシー
の順で並び、それ以外のセクション・ブロックはShopアプリには適用されないようです
例えば商品スペックや原材料、アレルギー情報などを商品説明ではない箇所に表示している場合はShopアプリ上では表示されないので注意が必要です
Shop独自の口コミアプリが適用される
ShopアプリもしくはShop Payで購入した場合、お客様は購入履歴から商品のレビューを行うことができます
口コミを投稿した商品ページには下図のように口コミ内容が掲載されます
お店側の管理としてはShopチャネル内で確認することができます
レビューへの返信も可能のようです
その他、レビューに対するガイドラインは下記を確認ください
Shop商品レビューに関するマーチャントガイドライン
Product Review Policies
ボットやストアのポリシー違反など不適切と思われる内容は直接Shopへ問い合わせが必要なようです
ダークモードへの考慮
Shopアプリにはダークモードの設定があり、背景が黒い場合があります
WEBページでhtml/CSSを利用しデザインを変えている場合、Shopアプリの表示でも見た目に問題がないか確認することをおすすめします
色味によっては読めない（読みづらい）場合もあるためその点を考慮したデザインがおすすめです
Shopアプリの適用方法
テーマのアップデートに伴い、各ストアには「Shopでフォロー」というShopアプリへ誘導するためのエリアが増えてますますShopアプリの認知度が高まったように思います
WEBサイトで上記のように「Shopでフォロー」というボタンが表示されるようになりました
このボタンを押すとShopアプリのログインに使用するメールアドレスを入力する画面が表示されます
こちらにメールアドレスとログインパスワードを入力すると、Shopアプリのストアをフォローすることができます
せっかくフォローしてもShopアプリから購入できる商品が見つからないストアもよく見られます（とても残念です）
Shopアプリの有効化とともに、Shopで売りたい商品は商品詳細ページの公開ステータス下にある「公開する」エリアの横に3点リーダ（…）がありますのでそこかた「販売チャネルを管理」を選択しましょう
すると下図のようになります
販売チャネルの「Shop」のチェックを入れて保存をすることでShopアプリで販売ができるようになります
まとめ
WEBページとアプリは統一されることは可能性として低いと私は想定しています（間違っていたらすみません、改善される可能性はゼロではありません！）
ですが、Shopアプリで購入を許可している以上WEBと同じ情報もしくは差異を考慮したサイトづくりが重要になってくると思います
トラブルを減らし、お客様に正しい情報が行き渡るようにサイト制作後にはWEBだけでなくアプリの見た目の確認も忘れないように心がけたいところです