いつも#コンパスマートのご利用、ありがとうございます。

本日、#コンパスマートの使い勝手の向上を目的として、サイトのUI（ユーザーインターフェイス）の変更と、PayPay決済の導入を行いました。

そのうち、主要な変更内容をご紹介します。

 

◆ UIの変更

大きな変更点は下記の通りです。

• ページ下部に追従するメニューの追加（SPサイトのみ）
• ギャラリーページの追加
• 商品検索ページの追加＆ジャンル分けの見直し

それぞれ解説いたします。


ページ下部に追従するメニューの追加（SPサイトのみ）

背景の黒いページ全てに、ページ下部に固定されたメニューを追加し、下記の項目をひとまとめにしました。
トップページへ戻る / 商品一覧ページ / 買い物かご / 商品検索ページ / その他メニュー



また、カートアイコンには、買い物かごに入っているアイテム数が表示されるようになっています。

これに伴い、ページ最上部左右にあったその他メニュー・買い物かごアイコンは削除しました。


ギャラリーページの追加

通常の商品一覧ページは、画像が大きくページ遷移が必要なため一覧性が高くありません。多くの商品をまとめて閲覧できる、小さいサイズの写真を敷き詰めたギャラリーページを用意しました。

トップページでは最新の12枚の画像を表示しており、その下部にある『もっと見る』ボタンから遷移可能です。


└トップページでの表示


└ギャラリーページ

主に#コンパスマート公式Twitterで投稿されているイメージカットを使用して更新・追加していきます。


商品検索ページの追加＆ジャンル分けの見直し

商品の種類が増えてきたため、検索性を改善すべく、商品のジャンル分けを見直したうえで商品検索専用のページを設置しました。

新設したページ下部追従メニューの『探す』ボタンから遷移できます。



商品検索ページでは、キーワード検索 / カテゴリ検索 / ヒーロー検索 / シリーズ検索が行えます。

それぞれを組み合わせての検索はできませんのでご注意ください。
例：キーワード『Tシャツ』＋カテゴリ『アパレル』など

またPCサイトではシステム都合により、キーワード入力欄がヘッダ右上の虫眼鏡アイコンから行う形となっております。

なおこの変更に伴い、トップページに設置してあったジャンルバナーは削除いたしました。



その他、
SP商品ページ内のメインイメージ下部へのサムネイル追加（システムの都合上、不本意ながらタップ不可）、お問い合わせボタンのページ下部への追加など、細かな変更を行いました。


◆ PayPay決済導入



#コンパスマートでのお支払いに、PayPayがご利用いただけるようになりました。ご注文確定直前にPayPayアプリから支払いを行えます。

ご注文手続きの途中、『お支払い方法の選択』画面にてPayPayをお選びください。

スマートフォンから#コンパスマートをご利用の場合は自動的にPayPayアプリが立ち上がります。PCサイトをご覧の場合は、画面に表示されるQRコードをPayPayアプリでスキャンすることでお支払いが可能です。

決済が無事完了した場合は、#コンパスマート サポート窓口より『ご注文ありがとうございました。』という件名のご注文内容確認メールが送信されます。

PayPayのご利用方法は、PayPay公式サイトの案内もご参照ください。