DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • webデザイナーがECサイト制作で「やってはいけないこと」とは?

webデザイナーがECサイト制作で「やってはいけないこと」とは?

design_thing

  • top
  • blog
  • webデザイナーがECサイト制作で「やってはいけないこと」とは?

webデザイナーがECサイト制作で「やってはいけないこと」とは?

2021.06.08.

スポンサーリンク

スポンサーリンク

いまお仕事としてEC(通販)サイトの制作をしています。

フリーランスになる前にインハウスデザイナーとして在籍していた企業のメイン事業がECだったこともあり、実はボクはECサイトの制作・運用経験はけっこう長く、単品通販や多品通販などのサイト制作にもそれなりに精通しています。

コロナの影響もあって、これから先ECがさらに伸びていくだろうという見方もあります。なので今回のブログではwebデザイナーが気をつけるべき「ECサイト制作でやってはいけないこと」をいつくかピックアップし、その理由を書いてみたいと思います。

BUROKIアイコン

ECサイト制作は他のwebサイトと違って特殊なんです。

index list

このブログの目次

1. アニメーションを使いすぎる

webデザイナーならご存知だと思いますが、イマドキのwebサイトは動きのあるサイトが当たり前で、webページをスクロールするとふわっと画像やテキストが表示されるといったようなアニメーションを使ってページ制作をすることも多くなりました。

動きのあるwebページは訪問した人の目を引き、インパクトを与えることができますし、時代に沿ったといった印象を与えることもできます。

しかしそれらはあくまでコーポレートサイトやブランドサイトのようなイメージで訴求するwebサイトにこそ効果を発揮するもので、ECサイトにアニメーションはほとんど必要ありません。

アニメーションを使用するデメリット

アニメーションは、いわばページそのものであったりテキストや写真であったりに動きをつけるというもの。

アニメーションによってはwebページの読み込みに時間がかかってしまうことがあります。ページの表示に時間がかかってしまうと訪問者にストレスを与えてしまってwebサイトから離脱し、購買機会を逃してしまうという事態にもつながりかねません。

なので必要のないアニメーションの使用は極力避けましょう。

2. デザインにこだわりすぎる

ECサイトを運営しているお店は長いところではもう数10年以上運営していたりして、ECサイトの歴史は意外と長いです。日本のショッピングモールの最大手である楽天市場ももう20年以上存在していますよね。

ネットで物を購入するという行為がもう何十年も前から存在していて、現在まで何度も何度もwebサイトやページ構造の改善が繰り返されてきているので、ECサイトにはある程度の型やセオリーというものがすでに確立されています。

代表的なところでいうと、

  • 左サイドカラムにカテゴリ一覧を配置する
  • 商品ページのファーストビュー(ページを表示したときの画面)に「購入ボタン」を配置する
  • ヘッダーに検索窓を配置する
  • バナーはシンプルに広告感を出さないようにデザインする
  • カテゴリの階層は3階層くらいまでにする

などなど・・
webデザイナーであれば斬新なデザインやクオリティの高いデザインをしたい気持ちもわかりますが、ECサイトはあくまで商品を購入するサイト。webサイトデザインにこだわるのはECサイト以外のブランドサイトなどでいいと思います。装飾面よりも機能面のデザインが重要ということです。

セオリーに沿いながら、オリジナリティのあるECサイト制作を心がけましょう。

3. 情報を隠す

いまのwebサイトはPCモニターだけでなく、スマートフォンやタブレット端末など様々な大きさのモニターで表示されるので、小さいモニターで表示されても長くなりすぎないようにwebページ自体をコンパクトに見せる技術も発達してきました。

その技術もいくつかあって、

  • クリックで切り替えるタブ
  • 複数の画像が切り替わるスライドショー
  • クリックすると下にサブメニューが表示されるアコーディオンメニュー
  • マウスを載せると文章が表示される
  • クリックするとナビゲーションが表示されるバーガーアイコン

などが代表的なものでしょう。
しかし使用する上で気をつけたいことは、どこにどんな情報があるのか、お客さまは知りません。

基本的に情報をなんらかの技術で隠してしまうと、それを表示させるには複数のクリックが必要になったりするわけで、それならスマートでなくても情報を誰でも見える形で表示させておいたほうが親切なのかもしれません。

このことをしっかりと心得てページを作成する必要があります。

4. 検索窓を表示しない

欲しい商品に最短ルートでたどり着くためにも検索機能はとても重要です。

万人にわかるように商品カテゴリの構造をしっかり作り込んだとしても、お客さまによっては欲しい商品がどこのカテゴリに属しているのかわからないということは往々にしてあります。だからこそキーワード単体で検索して探せる「検索窓」はECサイトにとってかなり重要な役割りなのです。

特に取扱い商品数が多ければ多いほどお客さまはカテゴリから商品を探さず、検索窓を利用してできるだけ少ないクリックで商品を探すようになります。Amazonなんかがいい例ですね。

AmazonのTOPページ画面
AmazonのTOPページ

Amazonでよく買い物する人はよく利用していると思いますが、Amazonの全ページのヘッダーには検索窓が大きく表示されています。カテゴリから探さなくてもここにキーワードを入れるだけであっという間に欲しい商品に辿りつける・・そういうサイト構造になっています。取り扱う商品数が多くなればなるほど検索機能が重要になります。

カテゴリから探すお客さまももちろんいらっしゃいますが、検索して探そうとする人もいます。お客さまに探す選択肢を与えるという意味でも検索窓はかならず設置しましょう。

5. 大きめの画像を使いすぎる

メーカーの技術の進化により、スマートフォンのモニターを筆頭に解像度が上がり、画質がかなり良くなってきていますよね。モニターの解像度が上がると、写真をきれいに表示させるためにはサイズの大きい写真が必要になります。

大きいサイズの画像を使いすぎると、webページの容量が大きくなってしまって読み込みに時間がかかり、webページを表示するスピードが遅くなってしまいます。特にスマートフォンはデスクトップのPCと比べると今は性能が劣るので、容量が大きいwebページの表示速度はかなり遅くなります。

ECサイトはいかにストレスなく買い物してもらうことができるかがかなり重要です。画面を見ながらなら約5秒でも待てないといわれている時代。

なるべくお客さまを待たせないように使用する画像サイズは精査しましょう。

ECサイトは「物を買う、物を探すサイト」であるということ

ここまでwebデザイナーがECサイト制作でやりがちなことを書いてきました。ブランディングという面では有効なスキル・手段は数あれど、ECサイトは訪問したお客さまが商品を探し、商品を買うことが一番の目的のwebサイトです。制作する側として、ここを見失ってはいけないと思います。

実際にお店をオープンすることを想像しながらECサイトをつくると、何が必要で何が不必要なのかが見えてくると思います。ECサイトは訪問から購入・決済までweb上ですべての行動が完結する奥の深いサイトです。お客さまにとってより良いECサイトをつくっていきたいものですね。

そして取り扱う商品や商品数によってもECサイトの構造も変わってきます。この辺はまた機会があれば書いてみたいと思います。

BUROKIアイコン

ECサイトは「お店」だということを忘れないことが大事ですね!
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

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

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

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

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

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

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

private

祝40歳。裏なんばにある「鮨ひでぞう」でバースデー鮨を食す

1月16日はボクの誕生日。 僭越ながらも40歳になりました。まだまだ未熟ですがこれからも頑張っていこうと思います。 毎年誕生日は相方に美味しいもの…

2022.01.23.

private

今年も露店なしドラなし!年明けルーティン今宮戎神社の十日戎で商売繁盛祈願

年が明けて家族と会って初詣に行って、9日から11日といえば・・十日戎ですよね? 毎年説明しているので不要かもですが一応。 十日戎とは一年間自分た…

2022.01.11.

think

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

2022年はじまりましたね。 人によっては仕事初めは11日からという人もいそうですが、BUROKI designは1月5日から仕事初めとなりました。今年も健康に…

2022.01.07.

private

年明けのルーティン。初詣とラーメンと喫茶アメリカンと天ぷら大吉巡り

家族で集まる元日から一夜明けると、毎年のルーティンになっていますが初詣に出かけました。 昨年はコロナの影響もあって、人混みを避けるべく住吉大…

2022.01.05.

private

【2022年はじめのご挨拶】新年明けましておめでとうございます

新年明けましておめでとうございます。2022年もBUROKI designをよろしくお願いいたします。 BUROKIの家族では元日は毎年集まれる人は集まるのが恒例…

2022.01.03.

think

【2021年の振り返り】今年もBUROKI designをありがとうございました

もうすぐ2021年も終わりますね。 2020年からはじまったコロナ禍ですが、ようやく終わりが見えてきつつあるものの、すんなりとはいきませんね・・。来…

2021.12.30.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル