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

サイト名	ACTUS ONLINE
URL	http://online.actus-interior.com
QRコード

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

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

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

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

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

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

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

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

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

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

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

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

葉糸