クロックス 公式オンラインショップのサイトにアクセスすると、ファーストビューで期間限定のクーポンが目に飛び込んできました。

お得に買い物が出来そうと感じたたけでなく、クーポン機能のUIをどのように実装されているのか確認できそうでしたので、このサイトを利用してみました。

サイト名	クロックス 公式オンラインショップ
URL	crocs.co.jp
QRコード

サイトを検証

１．商品の検索のしやすさ（AND検索が可能）

特にスマートフォンサイトの場合、探したい商品をいかにうまく探し出せるかがコンバージョンの鍵を握ります。

その際に役に立つのが商品検索の機能ですが、フリーワードで検索した結果、ヒット件数が0件だったり、目ぼしい商品が見当たらなければ、即離脱に繋がります。

お客様が探したい商品をうまく探させる手段として、商品の絞り込み機能は有効です。

希望のサイズや色を複数選択させることで、在庫のあるショップ側の「売りたい商品」の中から、お客様が「買いたい商品」へと導くことができます。

また、さりげないですが、きちんとリセットボタンも設置されていました。

２．カラー・サイズごとに在庫に連動したバリエーション選択肢

商品ページでは、購入可能なバリエーションのみが選択できる状態になっています。つまり、在庫の無いサイズは、選択できません。

また、サイズが選択されていない時は、「サイズを選択してください」と表示され商品をカートに入れることが出来ません。

サイズを選択することで「カートに入れる」ボタンに切り替わり、商品をカートに入れることができるようになるので、サイズを選択し忘れることなく商品を注文することができます。

カラーを選択すると、上部の商品画像（拡大画像）にも連動しており、何色のどのサイズを購入しようとしているかが一目瞭然です。

選択肢そのものもタップしやすいサイズにて設計されており、ユーザビリティも考慮されています。

３．商品をカートに入れた直後に表示される画面

カート内のページ遷移を少なくすることで離脱率を低くする、所謂「1ステップ購入」や「2ステップ購入」といったフレーズをよく耳にしますが、カート内のステップを簡略化したところで購入に必要な入力項目や確認したい事項が見にくければ本末転倒です。

このサイトの場合、商品をカートに入れた直後に表示される画面で、注文者が知りたい情報、「合計金額はいくらなのか？」「今注文したらいつ届くのか？」という疑問を解決してくれます。

同画面で、クーポン適用後のお買い物に必要な合計金額が確認できるようになっているだけでなく、商品のお届け日時の選択も可能になっています。

最終的に購入完了までに4ステップが必要でしたが、カートページの最初の画面で「ゴール」が見えていることにより、カートステップ内での「戻る」操作をすることなく離脱率も減るのではないかと感じました。

最後に

いかがでしたでしょうか。スマートデバイスのUI設計もしっかりされており、注文完了までつまづく箇所が少ないサイトのように感じました。

お客様が「買いたい」というモチベーションを、サイト訪問時から決済完了まで、ある一定レベルで維持できているのではないでしょうか。

葉糸