ECサイト制作時にwebデザイナーが気をつけるべき5つのこと

1. ユーザーに考えさせない、操作を悩ませない

ECサイトを制作する上でまず念頭に置いておくべきことは、「ECは物を買う場所である」ということです。

当たり前のように聞こえますが、サイトに訪れたユーザーが商品を探し、商品を比較し、時には会員登録（個人情報入力）をしながら購入手続きをする。ネット通販を利用されたことがある人ならわかると思いますが、この一連のユーザー行動を促すこと自体が実はかなりハードルが高いのです。

すべての訪問ユーザーが目的の商品にたどり着けることに重点を置き、迷わせることなくスムーズに商品をカートに追加し、決済方法を選び、購入手続きを完了してもらう必要がある。そのためには何が必要かを考えながらサイトを設計していなかければいけません。そしてその設計は取り扱う商材によっても変わりますし、ターゲットにする客層によっても変わります。

サイトだけですべての行動を完結させないといけないのがECの最大の特徴なので、できるだけユーザーに余計なことを考えさせない、迷わせないサイトづくりが必須となります。具体的な例を簡単にいくつか挙げると、

みたいなことです。
webサイトづくりは常にユーザー視点に立ちながら制作することが求められますが、ECサイトはよりユーザー視点に立たないと成立しません。

webデザイナーの場合、一番良いのは一度ECサイトを運営している企業で経験を積むことですが、その経験がないまま制作するなら、普段からいろんなECサイトを見て回って研究するか、実際に購入してみて、サイト構造やページデザインを学ぶのもいいと思います。

2. ショッピングカートを自作しようとしない

ECサイトは物を購入するサイトなので、通常のwebサイトとは違い、購入するためのカートシステムが必要になります。

欲しいものをカートに追加し、時には削除したり個数を追加したり、数日間購入を保留したり、ログインしたり会員登録したり、購入したりキャンセルしたり・・。「物を買う」という行動だけでも人がとる行動はかなり複雑で千差万別です。そのすべての行動に対応するカートシステムが必要になるので、ボクは自作は絶対にしません。

よほどカート構築に精通したデザイナーでない限りは、無理にwordpressのプラグインなどでカートシステムをつくろうとせず、カートシステム構築に特化した企業が提供しているカートを利用するようにしましょう。その利用するカートの環境内でECサイトを構築するイメージです。

カートシステムを提供している企業

ではどこのカートシステムを使えばいいの？という話になるので、ボクが利用したことのあるところをいくつか紹介します。

有名どころで簡単にECサイトを制作できる「BASE」。
芸能人も自身のアパレルやグッズを売るときによく利用していますね。シンプルなサイト構成でカスタマイズできる箇所が少ないので、個人的には売りたい商品数が比較的少ないときに利用するのがいいと思います。

続いてGMOが提供している「MakeShop」。
構築する環境がやや古めですが、売上金額に左右されず安価な月額利用料でECを始められるのは魅力的です。

MakeShopについてのブログも以前書いたので、よかったら参考にしてください。この時よりもサービスが進化している可能性もあるので、その辺はご容赦ください。

最後に前職でも長年利用していた「futureshop」。
かなり柔軟にECサイトづくりができるだけでなく、ブログやコンテンツづくりのためのwordpressも利用できます。その分利用料が高く、やや専門的なスキルも必要になはなりますが・・。

他には楽天やYahooなどの大型ショッピングモールに出店するのもひとつの手段だと思います。ショッピングモールは担当のスタッフがつくので、運営に関して相談できるところも強みですね。

3. 検索窓はわかりやすく

次はページ構造の基本的な部分。
ECサイトの主役はなんといっても商品。欲しい商品や気になっている商品を探しやすいサイト構造、ページデザインにすることが鉄則です。

TOPページのメインビジュアル領域に大きくインパクトのあるビジュアル画像を配置することも大切ですが、もっと大切なのは検索窓だったりします。ユーザーによっては欲しいものや買いたいものがすでに決まっていて、その商品目当てにサイトを訪れている人が一定数いるからです。

カテゴリを辿っていくのも商品を探すひとつの手段ではありますが、検索窓に商品のキーワードを入力し、その商品にワンクリックで遷移できるサイト内検索機能は、ECサイトにおいてかなり強力な威力を発揮するので、なるべくわかりやすいデザインにしましょう。

代表的な例が大手ECサイトのAmazonです。

Amazonはロゴのすぐ横に大きくわかりやすく検索窓を設置していますね。Amazonのように取り扱っている商品数が膨大にあるサイトでは、カテゴリの項目数もどうしても多くなって探しにくくなってしまうので、検索機能と最近見た商品のようなレコメンド機能を使って目的の商品に辿り着くのがベストな手段です。Amazon側もそれを理解しているので、検索機能を中心にサイト構造を設計していると感じます。

検索機能は「表記ゆれ」に要注意

検索窓を設置すればすべて解決するわけでもありません。
例えば、ユーザーが実際にひとつの商品に対して検索するワードは様々で、ブロキという商品名であっても「ぶろき」と検索する人もいれば「ブロ機」と検索する人もいます。

こういった「表記ゆれ」にも対応して検索機能の精度を上げ、類似キーワードでも商品が表示されるようにする必要もあり、検索したユーザーを取り逃さないように気をつけなければいけません。

4. カテゴリに「その他」は使用しない

検索のほかにもうひとつ。
ECで売るためにはわかりやすく商品を分類することが必要で、分類した商品をひとつの項目にまとめて、一覧ページにて表示させます。それが「カテゴリ」です。カテゴリの項目名はもちろん、カテゴリ構造も初めて訪れたユーザーでも問題なく辿っていけるように、できるだけわかりやすく設計する必要があります。

ですが、カテゴリの最後の項目に設置しがちな項目名があります。それが「その他」です。

「その他」って何？誰も想像できません

その他カテゴリを設置する理由としては、どのカテゴリにも分類できない商品だからという理由が大半だと思います。

ですが、その他のカテゴリにどんな商品が入っているのか、ユーザーは想像できません。想像できないカテゴリをわざわざ見ようとも思わないですし、その他に分類された商品の販売機会を逃している可能性も十分にあります。

なので分類できない商品であっても、何かしらの名称をつけてカテゴリに追加するか、そもそも販売しないようにしましょう。

ボクが過去に会社で運営していたECサイトにも、その他カテゴリがはじめは存在していました。そのサイトをさらに成長させるために、外部の方に勉強会を開いてもらう機会があり、その方に教わったことのひとつが「その他カテゴリを使わない」ということでした。

その他カテゴリを無くすことでユーザーにとって利便性が上がりますし、販売機会も増えると思います。

5. デザインに凝りすぎない

webデザイナーが一番意識しなければいけないのはこれかもしれません。
何度も言いますがECサイトは何よりも商品が主役であり、商品を買ってもらうために探しやすく、買いやすくすることが何よりも大事。そのための構造やセオリーが長年のwebサイトの歴史からある程度確立されているので、変にサイトデザインでオリジナリティを出そうなどと考えなくても大丈夫です。

逆にデザインに凝りすぎたり、スマートに見せたいがために必要な情報を隠しすぎたりすると、ユーザーを迷わせてストレスを与えることになってサイトを離脱してしまい、販売機会を逃してしまうかもしれません。

スクロールエフェクトなんて絶対に不要

いまのwebサイトはインパクトやクオリティを高く見せるために動きのある要素を表示させることも多いのですが（ボクもブランドサイトやコーポレートサイト制作時にはよくスクロールでエフェクトをかけて表示させる技術を使ったりします）、ECサイトには必要ないとボクは思います。

できるだけ余計な動作をなくしたほうがwebページを表示する速度も上がりますし、無駄なストレスをユーザーに与えなくて済みます。訪問から購入完了までにアクセスが必要なページは最短でも

といった感じで、けっこうなページ数を見なければいけません。
限られた大きさのモニターの中で、情報量が多くなりがちなECサイトを回遊すること自体ユーザーにとっては負担です。なので、できるだけスムーズにスピーディな構造がユーザー的にもSEO的にも好まれると思います。

webサイトを良く見せるためのスキルも適材適所、ということですね。