Web技術は日々進化してる。それを支えているのはブラウザである。
現在はブラウザシェアで最大ユーザーを誇っていた、Internet Explorerは過去のものとなり、国内、海外でのシェアナンバーワンはGoogle Chromeである。Chromeは６週間ごとに安定版がリリースされ、アップデートされていて、ブラウザで表現できる技術も広がっている。
Webデザインでできることが増えた分、その新しいテクニックがユーザー体験の足かせになることも多いと聞く。
今回はできることが多くなった分、ECサイトデザインで取り入れてはいけないテクニックをまとめてみた。
迫力ある大画面やアニメーションで動きのあるトップページは、訪問者に「おー！これは！」と思わせる効果がある。
最近では奇をてらっただけの、意味のないサイトデザインが目につく。アニメーションや大きな画像を使うときは、内容を絞りこむことが重要だ。
以下にECサイトデザインで、やってはいけないことを４つを挙げた。
インターネットの通信速度は、日々早くなっているとはいえ、サムネイル画像にストックフォトの高画質の画像をリサイズせずに貼ると、スマートフォンや古い端末の場合は表示速度が遅くなる原因になるので、適切なサイズにリサイズし設定する。
2016年頃から「シングル ページスクロール」、「フロアスクロール」、「エレベータースクロール」、「パララックススクロール」などといろいろ呼び名のあるスクロールを自動化したようなWebサイトがたくさん登場している。
ユーザーがマウスを下に下げようとすると、自動で次の階層に移動するといったアニメーションだ。スクロールバーがあるにもかかわらず、スクロールバーが使えない状況はユーザーを混乱させるだけである。
このような新しい技術はユーザーの目を引くにはいいだろう。しかし、「買いたい」という目的がはっきりしている、ECサイトには導入すべきではないだろう。商品購入を目的としたECサイトではフラストレーションがたまるだけである。
水平スクロールは一般的なソフトやアプリによる挙動が大きく違っているため、設定するには注意が必要だ、スマートフォンのスワイプで見せるには良いかもしれないが、デスクトップでページを横に動かす、コンテンツを横に動かす行為に慣れていない。
どうしても水平スクロールを設置する場合は、横スクロールのためのナビゲーションを目立たせ、コンテンツが後どの程度あるか表示するなど、はじめて水平スクロールでページを見るユーザーにも制御しやすい配慮が必要である。
Googleはユーザー体験を阻害する要素に対してはペナルティをかけている。特にモバイル上に唐突に出てくるポップアップは”インタースティシャル・ペナルティ”と呼ばれSEO的に大きなペナルティになるようだ。
ECサイトを訪問していきなり「ようこそ！！〇〇ページへ」や「今ならまだ間に合う決算大バーゲン！」などポップアップは注意を引くには効果があるが、目障りでしかない。ポップアップによってユーザーの信頼を損ね、サイトから離脱したりしては、元も子もない。使用の際は出すタイミングをしっかり設定して利用すべきである。
レスポンシブデザインでデザインされたECサイトは売れないという。 レスポンシブデザインというのはユーザーのPC、モバイル、タブレットの画面サイズが違っても、その環境にあわせて、自動的にデザインを切り替える設定を言う。
だが、このレスポンシブデザインはECサイトには適さないと言われている。 その理由３つを下記にまとめた。 ECサイトをレスポンシブサイトにする場合は、下記内容に注意して導入するのが良いだろう。
ECサイトは基本PCサイトのデザインをベースにデザインされる。ここがポイントである。デスクトップファーストでデザインした後、モバイル画面に対応するようにデザイン変えるため、PCのコンテンツ階層がそのまま、モバイルの階層になる。
商品数が多かったり、カテゴリーもたくさんあり、選択肢も多い商品の場合はどうしても階層が深くなりがちである。PCでは多少階層が深くなってもユーザーは我慢できるが、スマートフォンの場合はタツプ数が増えるたびに離脱率は高くなる。
スマートフォンの場合はトップページである程度商品が選択できるようデザインすべきである。
SEO的な観点からするとある程度のテキスト量は必要であるが、行き過ぎたテキスト量は問題だ。スマートフォンでユーザーが読むことを考えてテキスト量を調整すべきである。 スマートフォンサイトでは、直感的に商品やサービス内容をイメージしてもらった方が良い。
インスタグラムが流行するのは、綺麗な写真だから多くのユーザーを集めることができるのである。スマートフォンを意識するなら、テキストは最小限にとどめ、画像やイラスト、動画を活用すべきである。
そもそも大きさの違うデバイスにPCのECサイトと同様に、モバイルサイトも表示させるところに無理がある。例えば、ランキング表示をさせる場合、PCサイトでは1位から10位ぐらいまで表示したとする。
しかし、スマートフォンではサイズの関係などで1位から3位くらいまでの表示できないとなった時に融通かきかない。
ECサイトへのアクセスは、PCよりモバイルからの方が多くなっており、売上比率もスマートフォンサイトの方が高い時代になった。 PCサイトを基本にレスポンシブに対応するように設定すると、スマートフォンサイトには問題は多い。
スマートフォンサイトデザインする場合はタップ数を少なくし、文字ではなく画像を基本にレイアウトするなど情報量を絞って構成することが重要である。 PCサイトをレスポンシブデザインでモバイルサイトに変換するような方法は、そもそも無理があるのである。
ECサイトデザインとして参考としたいのはユニクロのオンラインショップサイトである。 特にヘッダーのメニューデザインが参考になる。
白色のメニューは商品カテゴリー、会社情報はグレー、お客様情報は黒色にすることでわかりやすく、間違いも少なくなるだろう。
商品やスタイリング写真も商品の良さを表現し、見事である。レイアウトもミニマムにまとめられている。
ノリタケ食器は食器のECサイトであるが、プレートやポットなど食器などの商品を前面に出していない。ノリタケ食器を使った料理やライフスタイルの提案などをベースにしたページ作りになっている。
そして、ECサイトの枠を超えたキャンペーンやコラボ企画は共感を呼ぶ。
IDEEはロンドンから輸入した西洋アンティーク家具、照明、雑貨、アートなどを販売しているオンラインショップだ。
こちらもミニマムなデザインで生活提案型ショップサイトである。大人っぽく、スタイリッシュな印象を受ける。
MoMA STOREはニューヨーク近代美術館のオンラインショップだ。 海外のユニークな雑貨が数多く並んでいて、つい買いたくなってしまう。
こちらは一点一点の商品サムネールが大きいのが特徴だ。
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
