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

森ノ宮キューズモールで開催されたkids DIY festivalにスタッフとし...

現在4月2日、もう新年度に突入しておりますが、3月末の週末のお話を。 3月29日に森ノ宮キューズモールで開催された「kids DIY festival 2026」にボラ…

2026.04.02.

think

SEO小話vol.12 これからのAI検索時代はどういう発信が重要?

不定期更新している「SEO小話」シリーズ。もちろん2026年も更新します。 毎回冒頭に書いていることではありますが、各テーマに分けてできるだけ手短…

2026.03.03.

private

ジャーナルスタンダードのトラッカージャケットを購入できた経緯をまとめてみた

仕事のこととは全く関係ないんですけど・・ 今年1月に、ジャーナルスタンダードが昨年末に限定発売した「Levi’s 別注 TYPE1 リジッド トラッカージ…

2026.02.24.

private

今年は「かに道楽 豊中店」で44歳の誕生日を祝ってもらいました

遅くなりましたが、先日僭越ながら誕生日を迎え、44歳になりました。 さすがにもう若くはないので1年1年、健康に気をつけながら仕事もプライベートも…

2026.01.22.

design_thing

web業界歴18年。2008年から現在に至るまでの道のりをまとめてみた

2008年1月にweb業界に入ってweb制作者としてのキャリアをスタートさせ、今年の1月で丸18年が経過し、19年目を迎えました。 2008年の入社当時には何も…

2026.01.10.

private

【謹賀新年2026】新年のご挨拶と今年中にやりたいこと3つ

2026年になりましたね。 喪中のため新年のご挨拶は少し控えさせていただきますが、皆さまにとってクリエイティブで素敵な1年になりますように。 年賀…

2026.01.04.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル