これはやってはいけない! ECサイトデザイン

イメージ画像

Web技術は日々進化してる。それを支えているのはブラウザである。
現在はブラウザシェアで最大ユーザーを誇っていた、Internet Explorerは過去のものとなり、国内、海外でのシェアナンバーワンはGoogle Chromeである。Chromeは6週間ごとに安定版がリリースされ、アップデートされていて、ブラウザで表現できる技術も広がっている。
Webデザインでできることが増えた分、その新しいテクニックがユーザー体験の足かせになることも多いと聞く。
今回はできることが多くなった分、ECサイトデザインで取り入れてはいけないテクニックをまとめてみた。

●大きな画像やアニメーションには気をつけよう

 

迫力ある大画面やアニメーションで動きのあるトップページは、訪問者に「おー!これは!」と思わせる効果がある。
最近では奇をてらっただけの、意味のないサイトデザインが目につく。アニメーションや大きな画像を使うときは、内容を絞りこむことが重要だ。
以下にECサイトデザインで、やってはいけないことを4つを挙げた。

 

1. ストックフォトをリサイズせずに貼る

インターネットの通信速度は、日々早くなっているとはいえ、サムネイル画像にストックフォトの高画質の画像をリサイズせずに貼ると、スマートフォンや古い端末の場合は表示速度が遅くなる原因になるので、適切なサイズにリサイズし設定する。

 

2. スクロールハイジャック

2016年頃から「シングル ページスクロール」、「フロアスクロール」、「エレベータースクロール」、「パララックススクロール」などといろいろ呼び名のあるスクロールを自動化したようなWebサイトがたくさん登場している。
ユーザーがマウスを下に下げようとすると、自動で次の階層に移動するといったアニメーションだ。スクロールバーがあるにもかかわらず、スクロールバーが使えない状況はユーザーを混乱させるだけである。
このような新しい技術はユーザーの目を引くにはいいだろう。しかし、「買いたい」という目的がはっきりしている、ECサイトには導入すべきではないだろう。商品購入を目的としたECサイトではフラストレーションがたまるだけである。

 

3. ユーザーは水平スクロールに否定的だ

水平スクロールは一般的なソフトやアプリによる挙動が大きく違っているため、設定するには注意が必要だ、スマートフォンのスワイプで見せるには良いかもしれないが、デスクトップでページを横に動かす、コンテンツを横に動かす行為に慣れていない。
どうしても水平スクロールを設置する場合は、横スクロールのためのナビゲーションを目立たせ、コンテンツが後どの程度あるか表示するなど、はじめて水平スクロールでページを見るユーザーにも制御しやすい配慮が必要である。

 

4.ポップアップはタイミングが重要

Googleはユーザー体験を阻害する要素に対してはペナルティをかけている。特にモバイル上に唐突に出てくるポップアップは”インタースティシャル・ペナルティ”と呼ばれSEO的に大きなペナルティになるようだ。
ECサイトを訪問していきなり「ようこそ!!〇〇ページへ」や「今ならまだ間に合う決算大バーゲン!」などポップアップは注意を引くには効果があるが、目障りでしかない。ポップアップによってユーザーの信頼を損ね、サイトから離脱したりしては、元も子もない。使用の際は出すタイミングをしっかり設定して利用すべきである。

 

●レスポンシブデザインECサイトには導入すべきではない!
ダメな理由3つ

 

レスポンシブデザインでデザインされたECサイトは売れないという。 レスポンシブデザインというのはユーザーのPC、モバイル、タブレットの画面サイズが違っても、その環境にあわせて、自動的にデザインを切り替える設定を言う。
だが、このレスポンシブデザインはECサイトには適さないと言われている。 その理由3つを下記にまとめた。 ECサイトをレスポンシブサイトにする場合は、下記内容に注意して導入するのが良いだろう。

(ダメな理由1.)PCサイトでは階層が深くなりやすい

ECサイトは基本PCサイトのデザインをベースにデザインされる。ここがポイントである。デスクトップファーストでデザインした後、モバイル画面に対応するようにデザイン変えるため、PCのコンテンツ階層がそのまま、モバイルの階層になる。
商品数が多かったり、カテゴリーもたくさんあり、選択肢も多い商品の場合はどうしても階層が深くなりがちである。PCでは多少階層が深くなってもユーザーは我慢できるが、スマートフォンの場合はタツプ数が増えるたびに離脱率は高くなる。
スマートフォンの場合はトップページである程度商品が選択できるようデザインすべきである。

 

(ダメな理由2.)PCサイトのテキストが邪魔

SEO的な観点からするとある程度のテキスト量は必要であるが、行き過ぎたテキスト量は問題だ。スマートフォンでユーザーが読むことを考えてテキスト量を調整すべきである。 スマートフォンサイトでは、直感的に商品やサービス内容をイメージしてもらった方が良い。
インスタグラムが流行するのは、綺麗な写真だから多くのユーザーを集めることができるのである。スマートフォンを意識するなら、テキストは最小限にとどめ、画像やイラスト、動画を活用すべきである。

 

(ダメな理由3.)画面サイズが違うのにPCとモバイルに同じ情報量を組み込むのはそもそも無理

そもそも大きさの違うデバイスにPCのECサイトと同様に、モバイルサイトも表示させるところに無理がある。例えば、ランキング表示をさせる場合、PCサイトでは1位から10位ぐらいまで表示したとする。
しかし、スマートフォンではサイズの関係などで1位から3位くらいまでの表示できないとなった時に融通かきかない。

ECサイトへのアクセスは、PCよりモバイルからの方が多くなっており、売上比率もスマートフォンサイトの方が高い時代になった。 PCサイトを基本にレスポンシブに対応するように設定すると、スマートフォンサイトには問題は多い。
スマートフォンサイトデザインする場合はタップ数を少なくし、文字ではなく画像を基本にレイアウトするなど情報量を絞って構成することが重要である。 PCサイトをレスポンシブデザインでモバイルサイトに変換するような方法は、そもそも無理があるのである。

 

●売れてるECサイトはこんなにシンプル

 

1.ユニクロ

ユニクロ

ECサイトデザインとして参考としたいのはユニクロのオンラインショップサイトである。 特にヘッダーのメニューデザインが参考になる。
白色のメニューは商品カテゴリー、会社情報はグレー、お客様情報は黒色にすることでわかりやすく、間違いも少なくなるだろう。
商品やスタイリング写真も商品の良さを表現し、見事である。レイアウトもミニマムにまとめられている。

 

2.ノリタケ食器

ノリタケ

ノリタケ食器は食器のECサイトであるが、プレートやポットなど食器などの商品を前面に出していない。ノリタケ食器を使った料理やライフスタイルの提案などをベースにしたページ作りになっている。
そして、ECサイトの枠を超えたキャンペーンやコラボ企画は共感を呼ぶ。

 

3.IDEE

イデー家具

IDEEはロンドンから輸入した西洋アンティーク家具、照明、雑貨、アートなどを販売しているオンラインショップだ。
こちらもミニマムなデザインで生活提案型ショップサイトである。大人っぽく、スタイリッシュな印象を受ける。

 

4.MoMA STORE

momaショップ

MoMA STOREはニューヨーク近代美術館のオンラインショップだ。 海外のユニークな雑貨が数多く並んでいて、つい買いたくなってしまう。
こちらは一点一点の商品サムネールが大きいのが特徴だ。

 

5.Tokyobike

東京バイク

Tokyobikeはおしゃれでシンプル、機能的なECデザインとなっており、サイト自体が、Tokyobike自転車のコンセプトと合致している。
メニューにhoverした時に、英字から日本語に変わるところや、カテゴリーなども整理されており、分かりやすい。

 

●まとめ

ECサイトデザインにおいて、デザイナーが考えなければならいことは、ターゲットに焦点を合わせた「売れるデザイン」であり、「分かりやすいデザイン」であり「簡単に、買いやすいデザイン」である。そのような機能をデザインの力で形にすることがデザインには求められる。
決して、奇をてらったデザイン、前衛的なデザインは、行うべきではない。そのようなデザインでは商品に目が行きづらくなり、結果的に購入率を下げるからである。
そして、PCサイトだけではなく、スマーフォンサイトでも同様に検証すべきである。 シンプルでフラットで情報量を絞った、分かりやすいデザインはユーザーの購入率を上げる最大のポイントとなるだろう。

 

 

記事出典:

https://ferret-plus.com/9587?utm_source=ferret&utm_medium=email&utm_campaign=20180220-2
https://www.baxooka.jp/10020/
https://u-site.jp/alertbox/horizontal-scrolling

関連する記事

【2019年版】越境EC最前線 越境ECでの海外販売は10年前に比べ、ずいぶん始めやすい環境になった。 越境ECプラットフォームを活用することによる自社サイトの構築、越境ECモールでの海外販売、越境EC代行サービスに海外販売を委託するなど、海外の人たちに未だ知られていない日本の商品やサービスを日本から販売できる時代になっ...
Amazonから学べるさまざまなこと 先週、7月15日(月)~16日(火)の2日間、Amazonは年に一度のプライム会員大感謝祭「プライムデー」を開催した。 Amazonによると、今回のイベントは「サイバーマンデー」及び過去の「プライムデー」と比較してAmazon史上、最大のセールイベントとなったと公表した。 また、ニールセ...
ECサイトの売り上げを倍増させる“心理学テク15選”... ECサイトの最終の目標はコンバージョンを発生し、売上を上げることだ。売上を上げるには、お客様の購買心理を読み解く必要がある。この購買心理を読み解く一つの方法として行動心理学が応用されている。そして、この行動心理はECサイト構築のカート機能や商品のキャッチコピー、商品説明などに活用されている。 ...
多言語、多通貨対応ECサイトの構築、その留意点は?... 最近のECサイトは越境ECであることが求められる時代だ。越境ECサイトを構築するは多言語対応、多通貨対応にする必要がある。 今回はひとつのECサイトで多言語、多通貨切り替え対応しているECサイトで、日本から海外に発信している越境ECサイトと海外から日本などに発信している越境ECサイトに別けて...
ECの巨人AmazonとZOZOTOWN 2018年も後半に入った。国内では、西日本を襲った記録的な豪雨による災害が相次いでいる。被害に遭われた方、避難を余儀なくされている方に心より、お見舞い申しあげる。 今回は昨年2017年のEコマースについてランキング資料をベースに振り返りつつ、昨年も他を大きく引き離し成長したECモール、「Am...
なぜAmazonと提携しない?「DtoC」というビジネスモデル... アメリカでは、新型コロナウイルス感染症数、21万6000人(4月1日現在)という急激な拡大により、入国制限、移動規制、外出禁止などあらゆる手段で、コロナ封じ込めが実施されている。 アメリカ消費者は外出禁止、自粛を余儀なくされ、アメリカのおいてもネットショッピングによる消費が高騰している。 ...

タグ: , ,

このエントリーをはてなブックマークに追加

コメントをどうぞ