ECサイトは他のジャンルのサイトに比べて独自の文脈や風習が多く、私たちはそれに慣れ親しんでいます。ユーザーは習慣の生き物ですので、ECサイトをデザインする際は、その慣れ親しんだ文脈を無視するわけにはいきません。
今回はECサイトにおいて「破ってはいけない」ルールをガイドラインとしてまとめました。
ECサイトで破ってはいけない８つのルール
1. ナビゲーションのラベル
あなたの扱う商材のブランディングは大事ですし、Webサイトにおいてもその一貫性を保つことは非常に重要です。しかしこれをやりすぎると、とりわけナビゲーション部分に関してはUXを損なうケースがあります。
例えばもし、カテゴリーページに曖昧な名前をつけたりしてしまうと、２つの弊害が生まれてしまいます。
１つ目は、ユーザーがあなたの意図していることを理解できないという弊害です。
HowiesのサイトではLITBという項目があります。これは何を意味するのでしょうか？ これは「Last in the box」、つまり「箱の中の最後の商品（在庫限りのセール）」という意味ですが、ユーザーはフレーズ自体を理解できても、短縮系では馴染みがありません。これはコンバージョンに大きく影響します。
また２つ目として、SEO的にも大きな弊害になります。もしあなたがECサイトの洋服コーナーに「洋服」ではなく「織物」と名付けたら、SEOに大きく影響が出てしまうでしょう。
Howiesは既に成功しているブランドなので検索順位へのダメージはそこまでありませんが、人々が実際に探しているワードに即して名前を付けるのは大変効果的です。
2. 商品の写真
オンラインショッピングでは、67%のユーザーが商品の写真を判断材料とします。写真を掲載しないということは、早い段階からユーザーを手放してしまうことと同じようなものです。
また、ECにおける写真は「形態」よりも「機能」を重視すべきです。Instagramのような美しさ重視の一枚絵ではなく、多少かっこ悪くても従来のECサイトのように複数の商品写真のほうがコンバージョンは高いでしょう。
Victorinoxのシンプルでありながら情報量の多い商品写真
Victorinoxは白背景に３つの異なる視点から撮影した商品写真を載せることで商品のイメージを明確に伝えています。画像は高画質で、商品説明の補足として存分に役割を果たしています。
高品質な写真は投資にもなりますが、それだけの価値があります。美しい写真はSNSなどでシェアされやすいので、それも念頭に置くといいでしょう。
3. ショッピングカートの配置場所
ショッピングカートは常にページの一番上の右端に置きましょう。これはとても些細な事の様ですが、思い当たるECサイトをどこでも良いので見てみていただければ、わかると思います。ユーザーは習慣の生き物なので、習慣となっている場所に置いてあげるのが道理です。
Bonobosのサイトは現代的ですが、カートの位置は伝統を守っています
Bonobosはモダンなデザインと伝統的なECのプラクティスを融合させている良い例です。
忘れてはいけないのが、ショッピングカートのラベリングです。「ショッピングカート」「買い物かご」等、なんでもいいですが、サイト内で統一した言い方をするのを忘れないようにしましょう。
4. CTA
CTA（Call to Action＝行動喚起）はあなたが望む方向にユーザーを誘導するためのものです。
情報が密集しているページでは、CTAはユーザーに進むべき道を示します。あなたのサイトが十分に機能するためには、CTAがもっとも重要だとわかるように目立たせなければなりません。
Content VerveのCTAボタンのテスト
とはいえ、上記の例ではCTAのボタンは大きすぎず、過剰に目立つ必要もないことがわかります。デザイン的に違和感がなければ大きい方が良いですが、少しのデザイン変更でもコンバージョンに劇的な影響を与えうるのです。
5. 商品ページのCTA
これまでの点をふまえると、商品ページのCTAこそ最も気を遣わなければいけないということがわかると思います。
もしユーザーが商品ページにたどり着いているのであれば、あなたは良いところまで来ていますが、「商品をカートに入れる」以外の選択肢が多くある場合、その状況は容易にひっくり返されてしまいます。
ユーザーに商品数と色の選択を求めたり、お気に入りへの保存、Pinterest、Twitter、Facebookなどへの投稿を促したりと…もうわかると思いますが多すぎますし、複雑です。そんな中でCTAを目立たせないのも、もちろんダメです。
Obey Clothingの不明瞭なCTA
Obey Clothingは複数のサイズの商品購入において、極めてわかりにくいCTAとなってしまっています。初見ではユーザーは何を買うことができるのか、何を買うことが出来ないのか、どれがクリックできて、どれがクリックできないのかを識別できません。
白を主体としたページに赤い十字記号で十分ではないか？ と主張する人もいるかもしれませんが、これは緊急性をに欠けます。「add to shopping bag」の文字を太文字にすれば少しは変わるかもしれませんが、それでも役不足です。
SewSewの明瞭な商品ページのCTA
上記はまた全く違うタイプの商品ページですが、こちらは必要な事をまさに実践している例です。SNSボタンやお気に入りボタンなどがないとの主張はあるかもしれませんが、良い商品説明、価格情報、豊富な写真、そして明瞭な行動喚起。これ以外に何が必要でしょう？
6. 商品写真のズーム
これはとても取るにたらない事に思えるかもしれませんが、何を売る場合も商品写真をズームできるということはとても重要です。ユーザーが実際に商品に触れられなくても、品質を示すチャンスです。
商品写真のズームと言っているのは、画像を大きく表示することではなく、商品写真の一部分を詳細に拡大できる機能のことを指しています。
J.Crewの詳細な商品ズーム
J.Crewは、優秀なズーム機能を実装しており、服の縫い目や素材の質感などを詳細に確認できるようになっています。ユーザーに商品を細部まで品定めさせることは、信頼を積み重ねることに繋がりますので、やらない手はありません。
7. 決済ページ
このリストの中で最も重要な項目を一つだけ選ぶとしたら、これです。決済ページだけは、変な色気を出さず、正攻法でいきましょう。決済処理はECサイトにおける最重要部分であり、多くのコンバージョンが失われてしまう部分です。
MADEのワンステップ決済
MADEの決済はよくできています。１つのページ内に３段階のステップを詰め込んでいます。通常であれば各ステップを１ページ内に収めてしまうと情報過多になってしまいますが、現在のステップ以外のものを隠してしまう事で、シンプルさを維持しています。
8. 検索機能
最後は検索についてです。複数の商品を扱っているのであれば、当然ながら検索機能はとても大事ですので、もし検索機能がついていないのであれば、コンバージョンを上げる最も手っ取り早い方法がそれです。
ThreadlessのWebサイト検索
Threadlessはユーザーが文字を入力するそばからサジェストが表示される、ライブ検索機能を採用しています。検索ボタンをクリックしたあとも、結果ページでさらにフィルターを指定することができてとても便利です。
ECの検索を使いやすいものにするためにはまず、商品のカテゴリー（サブカテゴリーも含む）やタイトル、詳細説明などを明確で簡潔に書く必要があります。もしあなたのサイトの検索機能で目的のものを引き当てられないなら、その機能は無用ですし、それは役に立つどころか逆にユーザーをイライラさせてしまいます。
