DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

  • top
  • blog
  • design_thing
  • 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

2025年は池田市にある呉服神社の池田えびすにて商売繁盛祈願

毎年言っていますが・・ 年が明けて、1月9日から11日までの3日間は、大阪の商売人にとって毎年恒例の十日戎(通称えべっさん)です。 ラジオで言って…

2025.01.12.

private

【謹賀新年2025】明けましておめでとうございます。新年のご挨拶

新年明けましておめでとうございます。 2025年も皆さんにとってよりクリエイティブな1年になりますように。BUROKI designをどうぞよろしくお願いいた…

2025.01.04.

think

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

2024年ももうすぐ終わりますね。今年も1年お世話になりました。いつもありがとうございます。 元日にいきなり石川県で地震があって、今年はどんな年…

2024.12.31.

private

初めての滋賀旅行・2日目。ラ コリーナ近江八幡で最高のバームクーヘンを食す

滋賀旅行2日目。 8時に朝食、10時チェックアウトだったこともあって6時に起床して朝風呂へ・・(昨夜0時に入浴したのに6時間後にまた入浴)。 1日目…

2024.12.23.

private

初めての滋賀旅行・1日目。2024年最後に1泊2日でおごと温泉へ行ってきました

先週の話になりますが、今年最後の旅行に行ってきました。 今回向かった先は「滋賀」。 年末だしいろいろ予定が入っているので、1泊くらいで近場で泊…

2024.12.19.

private

OSAKA DIY CREATOR FES!!で桜の木のお箸をつくりました

もうすぐ2024年も終わりですね。 いかがお過ごしでしょうか?またまたお久しぶりのブログです・・。 実はこのサイトリニューアルの最中に「そういえ…

2024.12.05.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル