ショップ名	HERE’S
URL	http://www.here-s.com/ec/
QRコード

サイトのUIを検証

１．選択したCOLORとSIZEに連動した在庫表示

欲しい商品が見つかり、商品ページに遷移すると複数の商品COLORが設定されている商品では、画面上で欲しい色を選択します。その際、選択したCOLORに対し、SIZEと連動して在庫状況が表示され、購入可能なCOLOR×SIZEの組み合わせを一目で確認することができます。
また、在庫無しの場合は、カートに入れるボタンがタップできないようになっており、誤ってボタンを押させて余分な画面遷移をさせずに済みます。

２．決済方法によって選択肢が変動

お届け日の希望を受け付けるにあたって「クレジットカード決済」や「代金引換決済」の場合は、お届け日の指定が可能であっても、「コンビニ決済」や「振込」関係の前払い決済の場合は、入金が確認できるまでお届け日を確定できませんよね。確定できない情報を選択できないようにするのは当然と言えば当然のUIです。この他にも決済方法によって可能は配送手段が決まっていたり、代金引換を選択された場合は宅配BOXへの配送を選択させない等、決済方法によって選択肢が変動させることができれば、色々な応用が可能になります。

３．カートステップ

注文内容を確認・確定後に決済を入力する画面遷移の場合、「注文確定する」ボタンで次の決済画面に進ませるのではなく、「決済画面へ」のボタンで次の操作をさせることで、今からやろうとしているアクションを明確にさせることがでいます。「今からアクションさせる動作」をボタンの文言に表示させておくことで、購入者の戸惑いも無くなります。ちょっとした文言の工夫です。

４．動かしたい箇所だけJSを使用。シンプルなサイト構成で快適速度表示

TOPページのバナー切替スライダーや、ヘッダーメニュー、ピックアップ商品の切替など、Javascriptを使用する範囲を要所要所に抑え、サイト全体はシンプルに構成されています。サイトの操作も快適で、表示速度も問題ありません。

実際にTOPページのサイト表示速度を計測してみました。TOPページの表示速度は計測値上5.14秒ですが、ファーストビューの範囲は2秒以内に表示されました。TTFBの値も0.5秒程度、各ファイルの読み込みも1秒以内で、速度表示のパフォーマンスとしては問題無いレベルです。サイトの構築時に、「１商品でも多く表示させたい」「他のサイトでは見られない凝った作りにしたい」といった声も多くありますが、サイトの表示速度を重視させるならば、シンプルな構成にして厳選したコンテンツを表示させておくのも重要なポイントです。

次回のレビューもお楽しみに！