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

一般の人でもデザインできるツールやサービスが増えてきて個人的に思うこと

ボク自身、すべてを把握しているわけではないのですが、webデザイナーでない方でもwebサイトを作成できるツールが増えてきましたね。 大きいところで…

2021.09.24.

design_thing

デザインも料理と同じで「工程」が重要。もし工程を間違うとどうなる?

自分自身も常に気をつけてはいるのですが、これはクライアントさまにとってもすごく大事なことなのでブログに書き残しておきます。 ボクは現在、いろ…

2021.09.17.

design_thing

意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ!

今回はボクがスマホ用にwebページをデザインするときに気をつけていることを紹介します。 それは何かというと、「テキストの改行」です。 昨今のweb…

2021.09.08.

think

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

毎日毎日コロナコロナコロナ・・書くのもうんざりですね。 唯一救いなのがそんな世の中にもかかわらず、こちらからお断りしてしまうくらいいろんな制…

2021.09.05.

private

数年ぶりにあべのハルカスの展望台「ハルカス300」へ

前回のブログの続きになりますが・・すしセンター裏天王寺でランチをしたあと、少し買い物をしてからあべのハルカスの展望台「ハルカス300」に久しぶ…

2021.08.31.

private

相方の誕生日と4周年記念。すしセンター裏天王寺で贅沢ランチ

少し前の話になりますが、8月22日はいつもお世話になっている相方の誕生日と4周年記念ということで昼前から天王寺へ。 ディナーに裏なんばにある某寿…

2021.08.27.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル