CVRは2.3%増、カゴ落ちを11%改善させたECサイト刷新のカギは「絞る」「捨てる」

互換・リサイクルインクなどの通販・ECを手がけるが5月に実施した自社ECサイト「インク革命.COM」の大リニューアル。刷新前後1か月の効果を測定したところ、トップページのランディングから注文完了までのCVRが全体で1.37%向上した。新規ユーザーに関しては2.35%アップ。こうしたECサイトの成果のカギは情報などの「取捨選択」などにあるという。プロジェクトリーダーを努めた、インク革命のデザイナーで入社2年目の谷澤祥さんに話を聞いた。

効果の上がったサイト刷新のポイントは3つ

これまでちょっとした改修はありましたが、全体をリニューアルする大規模な刷新は初めて。トップページも注文フローもすべて変えました。

主力のECサイト「インク革命.COM」が初めて実施した大規模なサイトリニューアル。その責任者に自ら手をあげたという入社2年目の谷澤さんはこう説明する。「ネットは使うがそれほど若くはない」という年齢層の人をペルソナとして設定。「離脱率を減らしてコンバージョン率（CVR）をアップさせる」というのがプロジェクトのゴールだ。

今回のリニューアルのポイントは3点。

• 中心顧客である40～50歳が使いやすいサイトへの刷新（ターゲットを絞る）
• 購入に至るフローで無駄なものは徹底的に捨てる（不用な情報は減らす）
• ユーザー中心設計のトップページへの刷新

一般的にはターゲットを絞ると、対象外のユーザーを取りこぼす恐れがある。また、サイドナビゲーションに表示される商品ページへのリンクは、買い回りを促す重要な導線だが、あえて「インク革命」は特定ページでその情報を減らした。

こうした売り上げ減に直結するリスクを抱えながらも、結果的には劇的な効果を上げることになった今回のリニューアル。ユーザー中心設計のサイト作りを進めるにあたり、トップページ、注文フローなど各ページの刷新ポイントを谷澤さんに説明してもらった。

インク革命のデザイナー・谷澤祥さん

顧客は何を求めている? 「インクでしょ」

まずは全体設計について。中心顧客は中高年世代のため「見やすいこと」「操作しやすいこと」を徹底的に意識したという。文字や入力スペースのサイズを大きくし、黄色と白の組み合わせなどの見づらい配色を避けるなど、中高年世代を対象にしたデザインに刷新した。

店舗は売りたい商品、思い入れが強いものをトップページの上部に持ってきてしまう。担当者などが頑張ってきた商品なども、そう。でも考えてみた。「それって、初めて来訪したお客さまにとって、ファーストビューとして適切なのか？」。「インク屋にきた人が何を求めているのか？」。それは“インク”でしょ。

多くのECサイトが売れ筋商品や新着商品の情報バナーを置きたがるトップページ上部のスペース。ここには、商品を検索するための大き目のボタンを設置。メーカーごとにインク型番やプリンタ型番から検索できるボタン8つを置いた。

トップページ上部は大きいボタンを設置

グローバルナビにはメガメニュー（広いスペースを使用し、多層構造のリンクを一目で分かりやすく表示したり、商品画像やアイコンをメニュー内に表示するナビゲーション）を採用した。これも中高年のユーザーが商品を探しやすい環境にするためだ。

グローバルナビの刷新や大き目ボタンの設置は、検証結果に基づきてこ入れしている。若年層の多いシー・コネクトのスタッフはサイドナビゲーションを使って商品を探すケースが多かったのだが、実際のところ、中高年のユーザーは「ボタンやグローバルナビを使うケースが多かった。だから、視覚的にみやすくした」（同）。

また、ページをスクロールしても、グローバルナビの部分が画面上部に固定表示されるように設定。これにより、ページ内の下部にいても、すぐに商品を検索できるようにしている。

スクロールしても上部にグローバルナビを固定表示（青枠線）。カーソルを置くと、メガメニューが表示される（赤枠線）

加えて、新規顧客が訪問した際、ファーストビューで安心感を抱いてもらえるように、上記のボタン下の場所に、“お客様の声”を配置。ユーザーのクチコミを「喜怒哀楽」のイラストアイコンによって一目で確認できるようにしている。

トップページには「お客様の声」を掲載

決済をするために不必要な情報はすべて排除

ショッピングカート内で重要視したのは、「注文」というユーザー行動を阻害する情報の整理だ。

カートまで向かうお客さまは、注文を完了させるのが目的。その目的において必要ないモノは何かを考えた。従来、左サイドナビには特定ページへの誘導バナーを置いていたが、ナビゲーションそのものを取っ払った。サイドナビは離脱をしてしまうための要素でしかないので。

余計な情報を掲載しないということは、他のページへ移動しようとするユーザーの行動を制限することになる。しかし、そもそも消費者は決済ページに進んでいるので、商品を購入しようとしていると考えるのが妥当だ。「インク革命.COM」は、こうした行動の制限は、ユーザーの購入行動を後押しすると判断。“決済”に向かって余計な情報を気にすることなく、注文完了までスムーズに進むことができる環境を整えた。

リニューアル前はサイドナビにさまざまなコンテンツへのリンクが貼られている

リニューアル後はサイドナビゲージョンを無くし、右サイドに総額の料金が表示されるコーナーなどを作った

左側のサイドナビゲーションを外し、その代わりに右サイドへは、購入金額と次のステップに進むためのボタンを設置した。

一般的なショッピングカートでは、支払い方法を選んで次のページに移動すると、配送料金などを含んだ総額が表示されるケースが多い。「インク革命.COM」は、配送方法や支払い方法を選ぶと、同一画面の右サイドに総額を表示するようにした。

加えてトップバナーも簡素化。サイトロゴの横には従来、返品などの案内へと誘導するリンクを設置していたが、現在の注文状況が把握できるステップ表示を設置した。

ただ、サイト上に記載する情報を省くことで、消費者が買い物途中に不安を抱いたり、質問をしたくなるケースが起きる可能性がある。そこで、同一画面においてユーザーが約20秒とどまっていた場合、画面右下にチャットでの問い合わせができるポップアップを表示するようにした。

営業時間外は伝言機能を付けて対応。安心して購入できる環境を整えている。

カード番号の入力ミス防止にも力を入れた。VISAなど計5種類のクレジットカードごとに、入力欄の切り替え（ブランドごとに区切りが異なるケースがある）を行い、ユーザーが持つカードに即した入力方法を表示するようにしている。

まとめ

シー・コネクトは開業7年目を迎える。アドワーズや雑誌広告などプロモーションを活発化する予定という。販促を強化するにあたり、ランディングページとなるトップページを改修。ROI（投資対効果）の最大化に努めている。

「インク革命.COM」の谷澤祥さんは今回のリニューアルで効果が上がったことを次のように説明する。

いろいろと案を出しては却下され、至った結論が「探しやすい」ということだった。マインドセットの問題ではあるが、よりユーザー中心設計を意識するようになった。

オリジナル記事はこちら：CVRは2.3%増、カゴ落ちを11%改善させたECサイト刷新のカギは「絞る」「捨てる」（2015/08/07）