カート部分までレスポンシブなASPはまだ少ない

レスポンシブWebデザインに対応したECショップは普及しつつありますが、ショッピングカート部分がレスポンシブに対応しているサイトはまだまだ限られています。特にASPショッピングカートで標準機能としてご利用頂けるのはaishipRのみです。

多くのサイトでショッピングカート部分がレスポンシブ対応に至っていない要因として、大きく下記の２点が要因として挙がるかと思います。

• 現状のPC、スマートフォンそれぞれの画面で設計したUIが優れているから変更する必要性を感じない
• ショッピングカート部分をレスポンシブに対応するスキルが無い

確かに様々なサイトのショッピングカート部分を調べてみると、現状のPC／スマートフォンそれぞれの画面で設計したUIが優れており、わざわざレスポンシブ対応に変更する必要性を感じさせないサイトも見受けられます。

しかしながら、トップページや商品ページはレスポンシブ対応しているのに、ショッピングカート部分が非レスポンシブな状態で、PCサイトの決済画面が表示されていればユーザーは違和感を感じるのではないでしょうか？

そこで今回から3回に渡り、優れたUIを設計している3サイトを取り上げ、どのように変更すればショッピングカート部分がレスポンシブ対応できるかを考察していきたいと思います。

まずは楽天市場のショッピングカート

今回は、会員数10109万人、出店店舗数4万店を超えている「楽天市場」のショッピングカートについて見ていきましょう。

１．カートTOP画面

商品をカートに入れた直後の画面です。

会員/非会員それぞれが入力すべきフォームが表示されており、分かりやすい構造になっています｡非会員顧客がショッピングする際にこの画面内で個人情報の入力だけでなく、情報入力の過程で会員登録もできるので、画面の遷移が少なくて済みます。

２．決済選択画面

支払い方法の欄では、選択した支払い方法の部分だけが展開されて、詳細が表示されています。

購入者にとって必要な情報だけを展開させることでページが長くなり過ぎない工夫が施されていますね。

３．注文確認画面

ログインしていない状況であれば、以上の３画面にて注文が完了します。

既に会員でログインした状態で商品をカートに入れる場合は、「１．カートTOP画面」も「２．決済選択画面」もスキップし、ダイレクトに「３．注文確認画面」へ遷移します。

決済方法の変更やお届け日の指定等は、この「注文確認画面」から必要に応じて、変更が必要な部分のみ変更させるUIを採用しています。何も変更が無い場合は、「注文確定ボタン」を押すだけで、次々に商品を購入できる設計です。

４．ポイント/クーポン使用画面

ポイントやクーポン使用の専用画面をモーダルで立ち上げるUIついては、タップデバイスに不向きです。ですがポイントやクーポンを「使ったこと」が分かりやすく「買い物をしている感覚」を購入者に体感させることにも繋がります。

いかがでしたでしょうか？楽天市場では「お買いものマラソン」のような限られた時間内で複数のショップからの商品購入を促進するキャンペーンもよく見られます。

ショッピングモール内では商品を選ぶことに専念してもらい、「注文確定ボタンを押すだけ」の画面設計にしておくことで、複数のショップでの買い回りもストレス無く、キャンペーン終了間際の限られた時間でも、買いそびれを防ぐことができます。

つまりショップ側の立場ではできるだけ画面遷移を少なく、「注文確定ボタン」を押すだけの設計をしておくことで、売り逃し（機会損失）をすることなく売上にも貢献できます。