《あのWebサイトの裏側 Vol.5｜織部 Online Store》クライアントも訪問者もうれしい、成果を出すECサイトの模範解答

和食器通販「織部」のオンラインストアは、2024年6月にリニューアルオープンしました。導線やカテゴリ分け、デザイン的な配慮など、その時欲しい情報が適宜見つかる構造には、商品や訪問者に対する高い理解が垣間見えます。積極的な課題解決を提案した株式会社アートピースの取り組みを聞きました。

話してくれた人

OVERVIEW

全国に実店舗を持つ和食器専門店「織部」は、運営中のECサイトのカートシステムをアップデートすることを機に、リニューアルを検討。訪問者が目的の商品に到達しにくい状態と、更新性が悪く運用しにくい状態が大きな課題でした。

依頼を受けたアートピースでは、他にも細部にわたって改善点を提案。結果的に、売上が伸びて問い合わせが減少し、顧客社内の担当チームで円滑に運用されるなど、ECサイトとして理想的なリニューアルを実現しました。

POINT①｜全体的な課題解決のためのリニューアル提案

織部様からお問い合せをいただいたのは、既存のECサイトでお使いだったカートシステム「FutureShop2」を、新しいバージョンの「commerce creator」へ乗り換えることに伴い、リニューアルを検討されたタイミングでした。当初のヒアリングから、織部様側が訪問者の導線と社内的な運用性に課題をお持ちであることがわかりました。

これに対して私たちは2つのご提案を用意しました。1つは費用を抑えた部分的なリニューアル、もう1つは商品ページまで含めたフルリニューアルです。

前者は、トップページの情報整理や機能追加によって入り口の導線を改善し、その他は現行の内容のまま新しいシステムへ移行するというものです。旧サイトではトップページのナビゲーションが導線のボトルネックになっていると考えられたため、トップの全面的な改善は必須であると判断しました。

後者は、費用はかかりますが導線の見直しから運用性まで全体的な課題解決を目指す内容です。導線についてはトップページだけでなく、カテゴリページ、商品ページ、購入画面まで含めて再構築し、運用性の面ではCMSとしてWordPressを導入することでノーコードでの更新を可能にし、改善を図ります。この他、トンマナの統一、ギフト対応の情報提供、作家別・窯元別ページの充実など、アクセス解析を含めた事前の検討から、私たちが気づいた点について積極的な提案を行いました。

こうした姿勢をご理解頂き、全面的なリニューアル提案が採用されることになったのです。

POINT②｜スマートフォンファーストのユーザビリティ

ECサイトへのアクセスは、一般的にスマートフォンからが7割を占めます。そのため、私たちは基本的にスマートフォンファーストでECサイトを構築します。PC向けの画面でどれだけデザインを詰めても、スマートフォン表示にするとユーザビリティが悪くなってしまうことがあるからです。

織部様のサイトも同様で、特に商品カテゴリへのアクセスといったナビゲーション部分については、視点を変えて考える必要がありました。

Web制作において“スマートフォンファースト”が言われるようになって久しいのですが、レスポンシブ対応ではあっても、ユーザビリティが最適化されていないケースは少なくありません。後から最適化するのではなく、最初からスマートフォン視点で始めることが大切です。

POINT③｜WordPressを連携し、ノーコードで更新可能に

commerce creatorはWordPressと組み合わせて利用することで、独自コンテンツの編集・運用の自由度が高まります。今回はこれに加え、commerce creatorのページレイアウトにWordPressからの投稿を読み込ませる領域を設置し、システム内で管理するページでもより柔軟性高く、ノーコードで編集することを可能にしました。お客様が内製で積極的に活用できる環境づくりは、今回特にこだわった点です。

リニューアル前はリテラシーの高い担当者の方がお一人で全ての更新を担当されていましたが、現在は他の方も更新ができるようになり、「運用に配慮してもらえた点がよかった」とご評価いただいています。

POINT④｜デザインに見る導線改善の打ち手

一番の課題であった導線の改善は、次のような形でデザインに落とし込んでいきました。

まず、トップページはビジュアル要素を増やし、ファーストビューで概要を伝わりやすくしました。数の多かったカテゴリは大カテゴリのみに整理し、「商品を探す」メニューに格納。さらにアイコンで視覚的に表現しました。小カテゴリはシステムのタグ機能で代替することで、表示を簡素化しながら絞り込みを可能にし、一覧したときの見やすさと探しやすさを両立させています。

商品ページには、文章とは別に商品の特徴を示す共通のアイコンを配置しました。また、各ページにギフト包装や熨斗に関する説明へのリンクを追加したり、送料に変動がある場合は注文ステップの途中で注意書きを表示する仕組みを追加する、といった配慮もしています。

このように、導線の各段階でどんな情報がほしいか、次に移動する上でどの情報を渡しておくべきか、という視点を持って全体の流れを構築しています。これにより、購入者からのお問い合せ件数削減にもつながりました。

さらに、新しい入り口として「季節のしつらえ」と目的別の「ギフト」カテゴリを追加しました。ユーザーは、自分の知らないものは検索しません。検索しなければ購入の選択肢に挙がりません。ですから、探しているもの以外の商品を目にしたり、身近な使用シーンを知るといった、“出会い”をつくる新しい導線が必要だと考えたのです。

POINT⑤｜ヒアリング・アクセス解析・実店舗訪問

提案やデザインの土台になるのは、まずお客様へのヒアリングです。ECサイトに対する課題や要望だけでなく、お客様の商材や事業に対する理解を深めることが何より重要です。これがなくては適切な設計ができません。

また、アクセス解析データはヒアリングをもとにお客様が想定するターゲット層と照らすなど、データだけではなく目指す成果とのズレに着目します。そして、お客様が実店舗をお持ちの場合は事前に必ず訪問しています。店舗の雰囲気や社員の方の情熱が、アイデアや表現につながることもあるからです。

こうした理解を重ねた上で考え、提案することが、サイトのイメージづくりや購買意欲を高める施策づくりにつながると考えています。

取材・文：笠井美史乃
※本記事は「Web Designing 2024年12月号」に掲載された内容を一部修正・再編集して公開しています。