顧客が電話番号を入力するとアカウントを作らずに注文状況を確認できる「注文を追跡」ページは、ゲスト購入が一般的なバングラデシュの EC サイトの多くで、小さいながらもアクセスの多いページです。このストアでは、結果画面は明らかにスマートフォンだけで作られテストされていました。幅が狭く、テキストだけで、商品画像もなく、デスクトップの画面ではほとんどが空白でした。
元のレイアウトに足りなかったもの
ページは機能していました（顧客は注文状況を実際に確認できました）が、見せ方がその価値を伝えきれていませんでした。商品サムネイルがないため、複数の商品を注文した顧客は受け取った内容を確かめるのに商品名をよく読む必要がありました。請求先と配送先の情報は区切りのないテキストとして続いていて、デスクトップのモニターでは、広いページの真ん中にスマートフォン幅の列があるだけで、作りかけのように見えました。
リデザイン
全面的な作り直しではなく、変更の範囲を意図的に絞りました。
- すべての商品行に商品サムネイルを、
woocommerce_order_item_nameフィルターで追加しました。このページだけに限定しているため、WooCommerce の他の場所での商品の表示には影響しません。 - 請求先と配送先をきちんとしたカードにまとめ、1 つのテキストの塊にするのではなく、注文商品の表と視覚的にはっきり分けました。
- デスクトップでは幅の広いコンテナを使い、空白の中にスマートフォン幅の列を浮かべるのではなく、使える領域を実際に活用するようにしました。
- モバイルではレイアウトの順番を変更し、顧客の住所を注文の表の上に移しました。注文の中身を見るためにスクロールする前に、まず「正しい場所に届くか」を確認できるようにするためです。
ポイントのまとめ
- 1 つの画面サイズだけで作られテストされたページは、他のすべてのサイズでひそかに品質が落ちます。両端を意図的に確認する価値があります。
- テンプレート用フィルターの適用範囲を狭く（1 つのページ、1 つの状況に）限定すれば、プラットフォームの他の表示への副作用を避けられます。
- モバイルでのレイアウトの順番は、デスクトップの順番を縮めたものではなく、読む人が最初に確認したいことに合わせるべきです。
関連記事：モバイル表示列のカスタマイズ、UI・UX デザインの実績。
ご自身の WooCommerce や WordPress の管理画面で同じような制約にお困りですか？ご相談ください。ArtinTech Solution はまさにこうしたストア向けのカスタムツールを開発しています。