TREND最新トピック

MEMBERS ROOTS

構成の変更で使いやすさが大幅アップ!効果が高かったECサイトの改善事例

ECサイト改善事例(構成編)

こんにちは。メンバーズでディレクターをしているスタッフです。
ディレクター暦は数十年、直近はECサイト運用案件に5年近く携わっています。

ECの売り上げを上げたい。それならクーポンでキャンペーン。広告出して、SNS投稿して、集客アップ!など華々しい施策をまず思いつくでしょうか。

反対にサイト改善は地味な作業。ついつい後回しとなっているショップさんも多いかもしれません。 しかし、せっかくECショップに来訪したお客さまも、サイトが使いにくければ立ち去ります。集客にもコストがかかるのにもったいない・・・。 このコラムでは、実際に効果が出たものを中心に、サイト改善でCVR向上に役立つ事例を取り上げます。

使いやすいECサイトとは?

運用中のECサイト、ひとまず作ってみたけれど良いのかいまいち分からない。
こんな状態のショップさんはありませんか?

最新の技術やデザインのカッコいいサイト。自ショップでもできないかな。Webサイトが一般的になって25年以上、派手色で画面はチカチカ、リンク先はすべて工事中。の時代からとても洗練されました。基本の背景色はカラーか白かで、デザイナーさん達がもめていたなんて今や信じられないです。

企業サイトの共通化も進みました。PCでは左上にロゴ、その近くにナビゲーションがあって・・・と一般的な要素配置はおおよそ同じです。各社ばらばらだと毎回位置を把握しなくてはならず、ユーザーに負担がかかります。

メンバーズの自社サイト

※当社の90年代の自社サイト。右は現在のサイト。本当に洗練されたと実感できます。

ECサイトの要素配置も企業サイトと同じことが起きています。例えば、大手モールが強いEC。Amazon、楽天市場、Yahoo!ショッピングなどなど、ユーザーは大手ECの見た目に慣れ親しんでいます。買い物カゴは画面上部、購入ボタンは目立つ色。なんとなく操作している人も多そうです。

先日、あるサイトでユーザーテストを実施しました。当グループのポップインサイト社のリモートユーザーテストです。スマホで商品選定から購入へ進み、名前、住所の基本情報入力まで行ってもらったところ、50代男性テスターさんから「大手ECとアイコンの配置がだいたい同じで使いやすい。できるなら他のサイトも揃えてほしい!!」と力の入ったコメントがありました。私もその気持ちよくわかります。スマホは画面小さいし、画面捜索もちょっと面倒です。

大勢の人が使いやすくなるよう、ECショップ側で改善できることがあります。改善の手段は、表示要素、コード記述、裏側の技術など多岐にわたりますが、ここでは見た目に関わる事例を2つご紹介します。

事例1)ページタイトルを入れる

一般的なタイトルの使い方

一般的にページ上部にはタイトルがあります。要約が示され、ページの内容がわかります。

タイトルの表示例

ここでのタイトルはタイトルタグ(※1)とは異なります。htmlタグで<H1>(※2)とされるページの大見出しを指します。
※1 多くのブラウザでタブや右上に表示されるタイトルのこと、htmlタグでは<title></title>で指定します。
※2 ページの見出しを指定するhtmlタグです。<H1>がページ内で一番上位の見出しとなり、以下<H2>、<H3>・・と続きます。

悪い事例

しかし、テスト中サイトには、タイトルがないものがありました。

サイトを作った自身は構造を熟知しています。しかし初見ユーザーに事前情報はありません。サイトを開いてから「検索窓はある?」「購買ボタンはどれだ?」と探索しつつ、目的地まで「自力」で進み続けます。道半ばで迷う可能性も大。迷子になりどうしたらいいかわからない。もう嫌だ・・・ブラウザを閉じて終わりです。

迷子になりやすいサイトの例

良い事例

そんなユーザーが挫折しないよう、今どこにいるか。を知らせる看板がページタイトル(大見出し)です。特にスマホは画面が小さく、サイト全体像の把握は難しいものです。タイトルは画面をたどる道しるべ。途切れると進路を見失うかもしれません。ご自身のショップはいかがでしょうか。

迷子になりにくいサイトの例

事例2)要素を統一する(検索窓の改善事例)

大手企業の検索機能利用時の遷移
一般企業の検索機能

大手ECをみると画面上部に検索窓が配置されています。何の疑問もなく商品名やキーワードを入れますよね。検索してみると「入力した言葉では検索結果がありませんでした」という画面が出ることがあります。その場合は、新たなキーワードで検索することがあると思います。これは何も考えなくできますね。

課題1:検索結果の画面に検索窓がない

しかし、私が支援した企業さまのサイトは検索0件画面に検索窓がありませんでした。
トップページで、無意識に検索窓を利用していたので、同じ場所に検索窓がないと、ユーザーさんにとってもわかりにくいと感じました。また、さらにページを見ていくと、商品ページにも検索窓はありません。あると思い込んでいるものが無いって、案外気づかないものです(笑

検索結果の画面に検索窓がない事例
課題2:ヘッダーの検索機能の検索対象がECショップ以外も含んでいた。

上記、行動の後、見渡してみると、ヘッダー部分に、虫眼鏡アイコンがありました。
あ、これか。とタップすると、画面の上に被さる形(モーダル)で検索窓が出てきました。キーワード検索すると、・・・結果が前に見た画面と違います。迷子になった感がいっぱいです。

ヘッダーの検索機能の検索対象がECショップ以外も含んでいた事例
ヘッダーの検索機能の検索対象がECショップ以外も含んでいた事例2

後々、調べてみてわかったのですが、ヘッダーの虫眼鏡アイコンで検索をすると、検索の対象範囲が、ECショップ限定ではなく、サイト全体検索(リアル店舗情報も含むサイトのため横断検索の仕組み)だったのです。
ECショップで商品を検索したつもりなのに、店舗スタッフのブログ記事などが結果などが出てきて、購入したい商品情報を探し出すことができませんでした。
これは使いにくいです。

改修案

今まで、サイト内検索していたユーザーは挫折していたのかな?トップページに戻って検索していたのかな?面倒だっただろうな。と想像し、改善案としては、商品ページと検索0件画面に商品検索窓を入れ、検索対象をECショップのみにする案でご提案を実施し、改修を行いました。

改修案
改修結果

結果は、実施前後2ヶ月比較で検索利用ユーザーの直帰率7.65%減、CVRは10.8%向上となりました。商品ページに絞ると検索回数が68.2%の向上です。改善内容どおりに使ってもらえた形となりました。

改修結果

※サイト内での検索利用ユーザーの実施前後2ヶ月比較

まとめ

今回は構成要素に関わる、2つの施策をご紹介しました。
これらはほんの一例。改修ポイントはサイトごとにさまざまです。ここまで書いて、サイト改善に魔法はないんだ。地道だ。とますます思わされました。
みなさまも迷わず進めるサイトになっているか、あらためて確認してみてはいかがでしょうか。スタッフさん、ご家族、ご友人などに見てもらうのもいいですね。

このようなWebサイトの課題を見つけるにはプロの視点が有効です。メンバーズルーツカンパニーでは、Webサイト運用・制作の専門家があなたのWebサイトを診断する、「ECサイト簡易診断」を実施しています。無料で実施できるサービスですので、お気軽にお問い合わせください。

SHARE
中野

Profile

Webディレクター暦十数年。近頃はGAの数値を見て季節の移り変わりを感じています。趣味はクラシックピアノ。偉大な作曲家たちも喜びを広げるために曲を作ったのかな。などと想像できる良い活動です。

NEW POSTこのライターの最新記事

CONTACTお問い合わせ

お問い合わせ