DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

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

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

2022.10.11.

スポンサーリンク

スポンサーリンク

2019年にフリーランスとして開業する前、ボクはECを主体としたベンチャー企業で約11年間インハウスデザイナーをしていました。

2008年に入社し、楽天のショッピングモールや独自ドメイン(本店)のECサイトの商品ページをつくったりアクセス解析をしたり、SEO業者さんと一緒にサイト改善に取り組んだりリスティング広告で成果を出したり、サイトリニューアルで一人徹夜で作業したり・・。長年に渡って自社運営のECサイトの制作・運用に励んできました。

運営していたECサイトは楽天のショップ・オブ・ザ・イヤーを数年連続受賞したりしていて、デザイナーだけでなく優れたマーケターもエンジニアもいた企業だったので、ECサイトづくりに関しては他のフリーランスデザイナーより長けていると自負しています。何年もかなりしごかれましたし・・。

フリーランスをしていると「ECサイト制作をお願いしたい」と依頼されることもあると思うので、今回のブログではwebデザイナーに向けて、ECサイトをつくるときに気をつけたいことの基本中の基本の部分を書いてみたいと思います。

BUROKIアイコン

ECサイトの知見はそれなりに持ち合わせています。

index list

このブログの目次

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のTOPページのUI
AmazonのTOPページのUI

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

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

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

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

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

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

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

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

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

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

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

その他が無い商品カテゴリ
以前制作させてもらったECサイトの商品カテゴリ

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

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

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

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

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

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

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

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

  • TOPページ
  • カテゴリページ
  • 商品ページ
  • カートページ
  • ログインページ、もしくは会員登録ページ
  • 決済や届け先情報入力・選択ページ
  • 購入確認ページ
  • 購入完了ページ

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

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

ECは「買わせるサイト」にしないといけない

ここまでECサイトをつくるときに気をつけたいことの基本的なことを書いてきました。

何度もしつこく言いますが、ECサイトはあくまで商品を購入するためのwebサイトです。
ブランディングとの兼ね合いもあると思いますが、できるだけユーザー目線に立ちながら、クライアントさまの成果に直結するようなECサイトづくりを心がけたいものですね。

また機会があれば中級編を書いてみたいと思います(時間かかって大変なので気乗りはしてませんが・・ 笑)。

BUROKIアイコン

ECは本当に奥が深いです。だからこそ面白くもありますね。
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

更新時のルール化。ブログを書くときに個人的に気をつけていること

もはやwebサイト制作時にクライアントさまが自由に更新できるようにブログ機能をwebサイトにつけることが当たり前になりました。 ただ、制作する側か…

2022.12.01.

design_thing

フードテックのジャパン・パビリオンにて制作した日本ロゴが使用されました

イスラエルの商都テルアビブで「フードテック」イベントが開催され、日本とイスラエルの国交樹立70年を記念して日本パビリオンが設置されました。日…

2022.11.23.

private

人生初めて東京ディズニーランドへ行ってきました

もうすっかりアラフォーのフリーランスデザイナーBUROKIですが・・。実は今まで一度もディズニーランドに行ったことがなかったんです。 1983年にオー…

2022.11.16.

think

panasonicの目もとエステでデスクワークの大敵・ドライアイ&眼精疲労対策!

デスクワークを長年やってきているからか、夜になると目が乾いてシパシパしたり疲れたりするようになってきました・・。これがアラフォーの現実なの…

2022.11.13.

think

2022年10月の活動報告。10月はこんなデザイン制作をしていました

2022年もあと2ヶ月・・(先月の使い回し 笑)。 そしてあと数日でワールドカップがはじまりますね。 こんな時期に開催されるワールドカップ・・。世…

2022.11.07.

favorite

【3日目・最終日】福岡で流行りのワーケーションっぽいことをしてきました

先月の24日から4日間、リゾート地や観光地で働きながら休暇を取る「ワーケーション」として約10年ぶりに福岡へ行ったときのことをブログに綴っていま…

2022.11.05.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル