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

ブログ一覧

think

絶対に後悔しない!デザインを開始する前に決めておきたい制作ルールまとめ

クライアントさまから制作依頼をいただき、打ち合わせでどんなデザインにするか?を決めることは当然のこととして誰しもが認識していると思います。 …

2023.09.27.

think

chocoZAPに9ヶ月通い続けたからこそ言えるリアルな口コミを書いてみた

いまコンビニジム「chocoZAP(ちょこざっぷ)」のテレビCMが頻繁に流れていますね。 俳優さんも起用し、けっこうな頻度でCMが流れているので、気にな…

2023.09.06.

think

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

9月になりましたが、まだまだ暑い日が続きますね・・。 今年の夏は相方の誕生日にディナーを行ったくらいで(サムネイル画像はそのときのものです)…

2023.09.04.

design_thing

依頼する前に知ってほしい。デザインに使用する写真に関するいろんなこと

webサイトやチラシ、看板、会社案内、ポスターなど・・。 ほとんどの制作物には写真が使われていて、今や写真はデザインを構成する主な要素といって…

2023.08.29.

private

豊中市の少路駅近くにある「ステーキハウス神楽 豊中店」で相方の誕生日を祝う

8月末は毎年恒例の相方の誕生日祝い。 せっかく豊中市に引っ越してきたので、今回は豊中のお店に行こう!ということで、比較的家の近くにある「ステ…

2023.08.26.

think

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

毎年言っていると思いますが、暑い日が続きますね・・。 夏真っ盛りですが夏らしいことは一切せず、花火をベランダから見たくらいで今年の夏は終わり…

2023.08.07.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル