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

これはやってはいけない! 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サイトへのアクセスは何から行われ、何がよく買われているか?... 我が国のインターネット環境は、ますますスマートフォン主流の時代になりつつあるようだ。 その内容を裏付けるのが、7月13日に公表された、「MakeShop」のECサイトへのアクセス数の統計データである。この内容を見ると、ECサイトへのアクセスディバイスはパソコンからスマートフォンへシフトして...
顧客が購入していない31の理由:あなたのショッピングカートを最適化する方法... ECサイト構築にはショッピングカートが欠かせない。 ネットショップに必ずあるのが、「ショッピングカート」機能である。ショッピングカートとはオンラインショップが備える機能の一つで、簡単に言うと、商品を購入するまで、商品を一時的に保存しておく機能である。 オンラインショップでも、実店舗の買い...
インドネシア ネット通販 2021年までに利用者数4210万人へ... 本稿ではインドネシアのソーシャルメディア、ネット通販事情について見ていきましょう。 経済 インドネシアは人口2億5,800万人、GDPは8,620億ドルであり1人あたりのGDPは3,906ドルで2021年までに5,170ドルへ上昇が期待されている。インドネシアは2015年から2021年に...
いいデザインは「余白」をうまく使っている!... グラフィックデザイン、WEBデザインにおいて、「余白」を意識しデザインすることは重要な要素である。「余白」が計画的かどうかで「見やすさ」が大きく左右される。 今回は、デザイン4原則の整列、近接、繰り返し、コントラストのプラス1要素として「余白」を取り上げたい。WEBデザインはこの「余白」を積...
物流ロボットはここまで来た!! インターネット通販を利用すれば、いつでもどこでも欲しいものが手に入る、Eコマース全盛の時代。ここまでネットで買い物ができる時代になった背景には、小口多頻度配送を支える多くの物流の人的、機械的な下支えがあった。 しかし、ますます増え続ける配送量に物流業界の人的不足は進行し、これから先の時代は...
あなたはいくつ知っている? EC業界キーワード... EC業界では専門用語やさまざまな独自のIT用語が日々飛び交っている。IoT、オムニチャンネル、O2O、など。今回はそんなEC業界で仕事をするうえでの、最近のトレンドとも言うべき、代表的なキーワードについて説明する。皆さんも一つでも聞いたことない用語などあったら、チェックし、詳しく調べてみると良い...

タグ: , ,

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

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