« ブログのトップページに戻る

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

   投稿者 : 2018年3月1日 By

イメージ画像

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

関連する記事

ショッピングモールサイトではなく、自社ECサイトで売上げをアップするには?... 独自ドメインで自社ECサイトを運営しているが一向に売上げが上がらない、しかし、ショッピングモールサイトでは売上げが上がり、ますます、Amazonや楽天などのモールサイトの依存度は高まり、どうしたら、自社ECサイトでしっかりした売上げ基盤をつくり、モールでの売上げではなく、自社ECサイトで売上げを...
2016年、日本のEC市場はどうだった? 今回も前回に引き続き経済産業省から2016年の「我が国におけるデータ駆動型社会に係る基盤整備」報告書に基づき、国内のEC市場を中心にまとめてみた。 報告によると、日本国内のBtoC-EC市場規模は、15兆1,358億円。前年より9.9%増加したとしている。 各分野では物販系分野で8兆43...
顧客を逃さない為のECサイトチェックポイント... ECサイトの目的は成約率をあげ、売上げを伸ばすことである。でも、サイトのどこをどうすれば良いのかわかない。ECサイトは構造が複雑でどこに問題点があるのか分かりにくいも事実である。 だた、押さえるところをしっかり押さえられていれば、売上げは伸びていくものと思われる。 今回は少しでも売上げア...
新しく立ち上げたEコマースサイトに人を集めるには?その1... 新しくEコマースサイトを立ち上げる場合、できることなら初めからたくさんの人を集めて、手ごたえのあるオープンにしたいものです。そこで、2回にわたって、さまざまなメディアを使ってトラフィックを増やす方法をいくつかご紹介したいと思います。 ユーザーへのアクセスを増やそう トラフィックを増やすには、...
香港のネット通販 2020年までに利用者数444.6万人へ... 世界銀行によれば香港は独立国家ではないが、世界で16番目に豊かな領土である。 本稿では香港のソーシャルメディア、ネット通販事情について見ていきましょう。 経済 香港の人口は720万人、GDPは2740億ドル、1人あたりのGDPは42,423ドルで、今後数年間でさらに成長すると見込まれてい...
EコマースとMコマースの違いとは? 最近のショッピング事情と言えば、従来の店舗に行って実際に商品を手に取ってレジで並んで購入するスタイルではなく、オンラインで好きなものを自由な時間に購入するスタイルにシフトしているようだ。 各個人ののショッピングスタイルの好みによるが、まず、オンラインで購入する場合、一般的に知られているEC...

タグ: , ,

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

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。