ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

カート内もレスポンシブ対応!スムーズに購入可能な ACTUS ONLINE

カート内もレスポンシブ対応!スムーズに購入可能な ACTUS ONLINE

ACTUS ONLINEはレスポンシブWEBデザインとしてリニューアルされています。TOPページや商品ページだけでなくカートページもレスポンシブ化しており、今回、PC・タブレット・スマートフォンの3デバイスで、表示を確認しながら購入を進めてみました。

サイト名 ACTUS ONLINE
URL http://online.actus-interior.com
QRコード 00
サイトを検証
1.レスポンシブWEBデザイン

トップページ
どのデバイスでサイトを見ても、ほぼ同じような位置に同じコンテンツが表示されています。デバイスによって、コンテンツを削らずに、ユーザーを迷わせないポイントを抑えています。

「スマホ向けECサイトのページ情報量は基本的にPCと同じ」がいい理由

PCやタブレット表示時にライトカラムに表示されている「商品検索」の箇所は、スマートフォン表示時はヘッダーにコンパクトにまとめられております。ランキングはカテゴリごとにタブメニューで設置されており、シンプルで分かりやすく、スマートフォン表示時でもタップしやすいサイズで設計されています。

2.商品一覧

商品一覧
ヘッダーには各カテゴリごとのメニューがあり、一覧ページへ遷移するのですが、「SALE」の一覧のみ、絞り込み検索として「オフ率」が表示されています。より一層のSALE感を表現できています。

3.ヘッダー部分にカート内情報の表示

ヘッダー部分
現在カートに入っている商品点数と合計金額が表示され、現在の買い物状況が一目で分かります。この機能はaishipRにおいても先日のバージョンアップにて実装されています。

4.カート内もレスポンシブレイアウト

カート内
tableタグが使われておりますが、widthを相対指定するなどレスポンシブWEBデザインに対応するようなコーディングをしています。

情報入力

テキスト入力エリアや選択肢、クレジットカードの入力画面も間延びすることなく見やすい表示位置に収まっています。

支払い選択
注文確認画面

確認画面も、tableタグが適切なサイズで表示されていて、非常に見やすいです。

5.カート内で注目すべき情報表示2点

004
ACTUS ONLINEでは、商品代金10,000円以上で送料無料になります。送料無料までの残りの金額表示はよく見かけますが、ACTUS ONLINEの場合は、送料無料にするために購入可能な商品のリンクが動的に設置されていました。ただし、あと864円のお買い上げで送料が無料となる場合、「864円以下の商品はこちら」ではなく「1,000円以下の商品はこちら」のように少し設定金額を上げても良いかと思います。

864円ちょうどの商品が見つかれば良いですが、864円以下の商品を選択しても再度10,000円に達するまでに商品を選択する必要がありますので。また、ショッピングカートの有効時間も動的に表示されていました。有効時間を表示しておくことで、購入期限の目安にもなります。

最後に

PCの場合は大きな画面で確認できる点で有利ですが、持ち運びができるスマートフォン、タブレットの場合は、実際に購入を検討している商品の設置予定場所に移動して、商品を確認できる点で優れています。

数日間にかけてアクセスした3デバイスのうち、最終的にスマートフォンで購入を完了しました。

葉糸

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

レスポンシブWebデザインカテゴリの最新記事