【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

非レスポンシブサイトから学ぶ、レスポンシブサイトの最適なカートレイアウト(1)

非レスポンシブサイトから学ぶ、レスポンシブサイトの最適なカートレイアウト(1)

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

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

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

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

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

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

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

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

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

1.カートTOP画面

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

商品をカートに入れた直後

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

2.決済選択画面

決済選択画面

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

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

3.注文確認画面

注文確認画面

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

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

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

4.ポイント/クーポン使用画面

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

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

最後に

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

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

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+