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