非レスポンシブサイトから学ぶ、レスポンシブサイトの最適なカートレイアウトを考察する第２弾として、ゾゾタウンを取り上げたいと思います。

以前、「商品検索機能がピカイチ！あらゆるニーズに応える便利なサイト【ZOZOTOWN】」でゾゾタウンのスマホサイトを取り上げましたが、今回はカート内のレイアウトに絞って見ていきます。

１．カートTOP画面

商品をカートに入れた直後の画面です。画面右上に、いかにも簡単に購入が完了しそうなカートステップの表示にお気付きでしょうか？次のページへ遷移する操作として、「レジへ進む」をクリックすると、ログイン画面に遷移します。

２．会員登録画面にて配送方法や支払い方法も選択可能

今回は会員登録がまだの状態だった為、ログインフォーム下部に見え隠れしている情報入力フォームから会員登録を行いました。

よくあるECサイトの通常のステップであれば会員登録を完了した後で、カートに戻り支払い方法や配送方法を選択する画面へと遷移するのが一般的です。しかしゾゾタウンの場合、会員登録画面で１ページで、配送方法やお届け希望日の指定、支払い方法の選択までもが可能になっています。

お支払い方法については、希望の決済方法を選択すると情報入力画面が表示される仕組みを採用しています。選択した支払い方法の入力画面のみが表示される為、不必要な情報に触れることもありません。

３．注文最終確認画面

サクッと会員登録を完了すれば、あとは入力した内容を確認するだけです。
内容に変更がある場合のみ「変更」ボタンを使います。変更ボタンを押しても、画面が遷移することなく、注文最終確認画面内にて情報の修正が可能です。

番外編．すでに会員登録済みでログインしていた場合

すでに会員登録済みでログインしていた場合は、１のカートTOP画面で「レジへ進む」をクリックすると３の注文最終確認画面へと一気に進みます。内容に問題が無ければ「注文を確定する」ボタンを押すだけで注文が完了します。

いかがでしたでしょうか。

「１クリック購入」などカートステップの操作を簡単にすることの重要性は以前から議論されています。

しかしただ簡略化することを考えるだけでは、会員登録が出来なかったり、本当に必要な情報の入力が漏れてしまったりと使いにくい部分が出てくる可能性もあります。ゾゾタウンのカートステップのように“分かりやすく簡略化”することは、ユーザーにとっても使いやすく親切で、商品の購入もしやすい為、リピート率も増えていくでしょう。