ショッピングサイトのUIデザインでユーザー満足度を上げる５ポイント

「んー、どこに購入ボタンがあるの？イライラ」「スマートフォンから買いにくい・・・」
などなど、インターネットを利用していたら一度は遭遇するこんなサイト。
このようなサイトではコンバーションやリピーターを獲得することは難しいでしょう。やっぱり使いやすくて、わかり易いサイトが良いですよね！
と、言うわけで今回はショッピングサイトにおける「UIデザイン」について書きます。
この５ポイントに絞って詳しく下記で説明したいと思います。

1.UIとは？

UIとはユーザーインターフェイス（User Interface）の略です。
広域な意味では、コンピュータを操作するときの画面表示、ウインドウ、メニューの言葉などの表現や操作感のことです。情報をやりとりする上でのコンピュータと人間の接点となり、使用感に大きく影響します。
簡単に言ってしまいますと、
・使用感に優れたUI
・迷わないUI
・直感的に使えるUI
・洗練されたUI
といった感じでしょうか。下の画像を見てみましょう。

上と下、どちらが使いやすいデザインかは一目瞭然ですね。

2.シンプルにする

「シンプルなUI」なんて言葉をよく耳にしますが、そもそもなぜシンプルなデザインが良いとされているのでしょう？

• 色がシンプル
• 操作や機能がシンプル
• レイアウトがシンプル
• 内容がシンプル

シンプルと言っても、色々と上げられるわけですが、シンプルにする事で上げられる効果は基本的には「商品購入やコンバーションの決定にかかる時間は、情報量に比例する」と言われております。
つまり便利だからと言って、様々な機能を付けるとユーザーは混乱し迷いが生まれるという事です。
特にスマートフォンではシンプルなサイトが有利でしょう。タッチパネルではボタンが多いと押し間違いが増えますし、どうしてもそのサイトに用事がある場合では無い限り、わかりにくいと感じたらサッサと別のサイトへユーザーは行ってしまいます。

ただ、必ずしもシンプルが良いと言う分けでもありません。シンプルというのは選択肢の一つに過ぎません、サイトを作成する上では「どんなユーザーに、誰に向けたものなのか」を考えた上で行う必要があります。
例えば、ユーザーに喜んでもらえる見込みがあるのなら、多少複雑になっても各機能を深く使って頂けるように、構成する事もアリだと思います。
一方、ショッピングサイトでは幅広く使ってもらいたいと考える場合が多いと思いますので、シンプルにした方が良い場合が多いと思います。

3.わかり易いカテゴリー

簡単に目的のページに到達できるかがショッピングサイトにとって重要な要素の一つです。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけでなくても、サイトに長い時間滞在するつもりはありません。
なのでカテゴリーが持つ役割は大きいと思います。ではテキストのみで表示する場合のカテゴリーを見てみましょう。

プルダウンにして、言葉を簡潔にしただけですが、右のほうは商品にすぐにたどり着けそうですね。
 
続きまして、画像を使ったカテゴリーですが、やはり画像はダイレクトに伝わるので、使えるようなら使っていった方がユーザーも喜ぶでしょう。
小さく画像を表示するのか、大きめの表示にするのか・・・・

それぞれに、良い点と悪い点があります。
【小さく表示】小さなサムネイルと合わせて表示する場合ですが(画像左)、サムネイルがワンポイントとなって、見栄え良くデザインする事が出来ます。ただし、画像が小さすぎるとあまり役にたたない場合もありますので、ユーザー目線で考えましょう。
【大きく表示】　スペースを多く消費してしまうので、カテゴリー数が多い時には不向きです。モバイルサイトでは一度に表示出来る場所が小さいので、あまり多く表示できません。余計なスクロールを避けるためにも、もしカテゴリーの数が多い場合はテキストのみのほうが良い場合もあります。

4.商品の見せ方

物を売るショッピングサイトでは、ここはとても大事なポイントになります。まずユーザーはその商品に触れられない、という事をしっかりと頭に入れましょう。
写真で紹介する場合は、自分が思うより多めに数があったほうがいいでしょう。ここでは最低限あったほうが良い画像を紹介しておきます。

参考：家具・インテリアのノーチェ

• 正面から全体が写っている商品写真。
• 違う角度からの商品写真。
• 商品のズーム写真。特に質感を見せたい商品には必要です。
• 実際に使用している場面の写真。商品の大きさも把握しやすくなります。

以上の点を最低でも押さえておくべきです。15枚程度商品画像があるサイトもありますので、多すぎてユーザーが困ることはないでしょう。(サイトが重くなり過ぎないように気を付けて)
商品写真は購入に繋がる大事なポイントですので、テキトウにすまさないようにしましょう。
→ショッピングサイトの写真素材の活用方法と注意点
※最近では動画を活かした商品の見せ方も増えています。商品の使用感がとてもわかり易いです。

参考：MUJI to Sleep | 無印良品

5.ユーザーレビュー

この記事を読んでいるあなたも、楽天やamazonなどで商品を購入する時、レビューを読んでから購入する方は多くいると思います。ショッピングサイト運営社が出す広告よりも、実際の購入者のリアルな声をユーザーは求めています。
もちろんユーザーの書くレビューなので、良い評価だけではありません。一見デメリットに感じますが、ユーザーの信頼が上がり、返品率は下がるメリットもあります。あなたが商品を買うとき良いレビューばかりだったらどうですか？このレビューは本当に信用できるのか？といった疑問が生じてしまうでしょう。
簡単にユーザーレビューを集めるのは難しいとは思いますが、効果はかなり高いと思います。

6.リンク

初めて訪問するサイトでは、使い勝手がわからずユーザーが困ってしまう事が多々あります。デザインはそれに合わし制作するのが好ましいでしょう。
例えば、ヘッダーにサイトのロゴがあるとします。多くのサイトでは、サイトロゴにリンクを設けていますので、ユーザーは初めてのサイトでも同じ操作を行いロゴをクリックしてしまします。その時リンクを張っていなかったら、使いずらいと思われてしまいます。
そのような、問題を減らすことで、扱いやすいと思っていただく事が必要となります。

右の画像を見てみましょう。
「Ｑ＆Ａ」「セキュリティー」「送料」という見出しが、ボタンの雰囲気を感じてしまいます。そこからも遷移できるようにリンクを設けることが有効と考えられます。
それと合わせて画像の部分にもリンクを設置する事が必要だと思います。
他にも、テキストの中にリンクを張ることで、ほかの商品との関連性を持たしたりすることで、コンバーションにつなげる事も出来ます。このようにユーザーの導線を考えつつデザインしていきましょう。

まとめ

ショッピングサイトの構造は複雑です。ユーザーは好みの商品を検索し、その中から実際に購入するものを検討や選択をして、フォームに入力するという工程を経て、ようやく購入完了となります。ショッピングサイトをよく利用する人でも、初めてのサイトでは戸惑うことが多いです。そこで使いやすいショッピングサイト、特に新規客に優しいUIデザインとはどんなものなのか?今回の記事を参考にして考えてみて頂けると良いかなと思います。

こちらの記事もよく読まれています

リストマーケティングでビジネスの安定化を図る方法

5分でわかるコンテンツSEO！その方法と効果を徹底解説

【WordPress】リンク切れを自動でチェック「Broken Link Checker」

新規セッション率の定義とは？平均や期間毎の数値把握方法