ECサイトでデザイントレンドを取り入れるときの7つのポイント

Carrie Cousins

メディア業界でのデザイン、編集、及び印刷出版物とオンライン出版物のライティングに10年以上の経験を持ちます。スポーツが好きで、サッカーとバスケットボールの旅を計画に多大な時間をかけ、また統計学にものめり込んでいます。

この記事はUXPinからの翻訳転載です。配信元または著者の許可を得て配信しています。

Don’t Overdo Web Design Trends on Your E-Commerce Site

ECにおけるデザインと、デザイナーが実際にやりたいデザインは必ずしも一致しません。

ミニマリズムなどに代表されるシンプルですっきりとしたデザインは、最近のトレンドではありますが、販売サイトではあまり実用的ではない場合もあります。

ECにおけるデザインの最終的な目標は、ユーザーとの対話です。もっと直接的に言うのであれば、ユーザーにより多くの商品を買ってもらうように気を引くことです。

その目的を達成するという点では、最近のWebデザインのトレンドは逆効果になる恐れがあります。

デザイン vs 機能

機能性はECをデザインするときに最重要なものです。オンラインショッピングのサイトは使いやすく、安全で、信頼性があるものでなくてはならず、ユーザーに決断を促すために充分な情報を提供する必要があります。

このように機能性が重要視されているため、ECサイトではトレンドに沿っていないデザインが使われることが比較的多いです。しかし、モダンな要素を取り入れる余地もあります。

Target(米国の小売大手)は、デザインと機能を調和させている素晴らしい例です。Targetのデザインは目玉商品には大きいヘッダーを使い、セール商品などサブ的な要素にはトレンドのカード型UIを採用しています。それぞれの要素は、商品の詳しい情報を載せている商品ページにリンクされています。 

Photo credit: Target

カード型UIを部分的に使用(出典:Target

機能面では、Targetは伝統的な巨大ナビゲーションメニューを採用しています。様々なジャンルにソートされ、たくさんの項目があるメニューは実際にお店を歩いて商品を見ているかのようです。

Photo credit: Target

巨大ナビゲーションメニュー(出典:Target

このようなトレンドの手法と伝統の手法の調和は、大規模なECサイトのナビゲーションでは依然として有用です。 

パーソナライズ

買い物をするとき、ユーザーはそれぞれの欲求(wants)と必要性(needs)に合わせた体験を求めるものです。

これは、ほかのWebサイトやアプリでユーザーごとに体験をパーソナライズすることと同じです(UXPinで配信しているE-bookのUX Design Trends 2015-2016 で述べられています)。

パーソナライズされたインタラクションはひと目で分かるようにするべきです。ユーザーへのウェルカムメッセージや、買わなかった商品をショッピングカートに残しておく機能などが例としてあげられます。

Photo credit: Amazon

出典:Amazon

このパーソナライズに関しては、Amazonの右に出るものはいません。

ユーザーの購入履歴によるレコメンド、またはユーザーが潜在的に欲しがっているものまで、Amazonのすべての要素がユーザーに合わせて作られています。

大手小売業者は、それぞれのユーザーに対してユニークな購買体験を創る法則を見つけ出しました。そのコンセプトは気味が悪いと感じるギリギリのラインにあると同時に、ユーザーの時間や手間を省く驚くべき購買体験を作り出しているのです。

セキュリティ

ECサイトはHTTPSなどの安全なネットワーク接続を保証するだけでなく、見た目も信頼性や安全性を感じさせるものでなければなりません。

これを最も簡単に解決する方法は、整理整頓です。きちんと整理されているサイトはそれだけでより信頼性があるように見えます。

より信頼性を感じさせるデザインのために、まずはグリッドシステム、タイポグラフィの階層構造、画像のガイドラインを用意しましょう。Volusionのデザインサンプルを紹介する記事は良い例となります。

Zazzleはフリーのデザイナーなどがオーダーメイドの作品を出品できるサービスです。このサイトでは、各ページごとに信用を築きあげる工夫が施されており、セキュアな通信だけでなく、保証内容やレビュー、支持する人たちの写真などを用いて安心感を向上させています。

Photo credit: Zazzle

出典:Zazzle

シンプルかつホワイトスペースをふんだんに使ったデザインとなっており、Zazzleを使ったことがない人でも購入を躊躇することがないようになっています。

情報過多

ユーザーの注意を得られる時間は一瞬しかないため、ほとんどのデザインはメッセージを一目で分かるようなシンプルなものにすることを目的としています。しかし、ECのサイトでは逆です。情報が多いほうが受け入れられます。

ユーザーは商品を購入する前に、ほかの商品を比較し、詳細な情報を読み、可能な限りその商品ついて知ろうとします。そのため、少しごちゃごちゃしている商品ページであることが、商品を売るためのサイトをデザインする時には鍵となります。しかし、無駄をなくして簡素化する必要があります。

これは難しく見えますが難しいことではありません。

Tory Burchの製品ページでは、これが非常に上手く行われています。上へスクロールすると、色、写真、そして「カートに入れる」の選択肢と共に商品のシンプルな説明が添えられています。ユーザーが購入へ向けて最終決断を促せるように製品の画像やより詳細な特徴のリストもあります。

Photo credit: Tory Burch

出典:Tory Burch

ユーザーはよりスクロールすることに抵抗がなくなってきたこともあり、このテクニックはほかの多くのデザインでも取り入れられ、ポピュラーなものとなってきています。

ECでこれを上手く取り入れるポイントは、スクロールもしくはスクリーン(モーダルウィンドウや新しいページなど)を使い、さまざまなレベル感の情報を提供することです。すぐに購入する人には一目で購入意欲を刺激し、商品を比較する人には多くの情報を提示します。

コールトゥアクション(CTA)

常識かもしれないですが、デザイナーはコールトゥアクション(CTA)をベースに、ECのユーザー体験をデザインしなければなりません。商品がスクリーンに表示されるたびに、ユーザーが商品を買うための分かりやすい導線が示されていなければなりません。

コールトゥアクションを分かりやすく使いやすくするために、目立つ色とシンプルな言葉を使いましょう。ボタンを大きくし、クリックできるスペースを多めに取りましょう。Webサイトのどこにいてもカートがすぐに見つけられるようにすると、ユーザーは買い物が終わるとすぐに注文を確定することができます。

image034

Dollar Shave Clubは面白くてモダンな要素を使ったシンプルなUIを有しています。

ユーザーには3つの選択肢があり、それぞれすぐに購入するためのコールトゥアクションがあります。商品を選ぶとすぐにスクリーンの上部と下部にカートに入れた商品の数が表示されます。ロジカルに組み立てられた流れによって、ユーザーはサイトを訪れた時から支払いが完了するまでを迷うことなく行うことができます。

詳細情報の追加

デザインのディテールは、そのECサイトを別のサイトと区別させるものとなります。ホワイトスペースや写真、動画、アニメーションや様々な効果といったデザイン要素はとても重要なものです。ECサイトであろうとなかろうと、すべてのクリックはユーザーにもう一度クリックしたいと思わせるものでなければなりません。

在庫の有無やスタイル、色、そして簡単決済(1-Click決済)などの追加情報もまた重要です。多くの商品を持つサイトは、色やブランドでソートできる機能の導入を購入するべきで、小さなサイトでは商品をロジカルにグループ分けするべきです。

手頃な値段のファッション小売店であるCents of Styleは、一度に多くの商品を表示していますが、グリッドによって整理することでユーザーを迷わせてしまうことを避けています。左側と上部にあるメニューによって、ユーザーは別の商品カテゴリーに簡単に行けるようにもなっています。また、わかりやすく表示された値段や品切れの表記によって、ユーザーは時間を無駄にすることなく「正しいクリック」ができます。

まとめ

このように、デザイン業界では大きなトレンドとなっているようなことでも、ECにおいては必ずしも有用とは限りません。これはECサイトではユーザーが安心感を持ってもらうことが重要であり、またフローが一般的に受け入れられるパターンに沿う必要があるからです。

ECサイトは商品情報や目玉商品、オプションなどに溢れており、ユーザーを混乱させやすくなっています。これもまたECサイトでデザイントレンドを採用しにくい要因となっています。

検索やナビゲーションといったECサイトで一般的に受け入れられるパターンは、見た目が流行のデザインであることより重要です。しかし、両方を試してみることは可能です。TargetやDollar Shave Clubといった小売業者のサイトでは、古いデザインと新しいデザインの両方をミックスしたデザインで、ユーザー体験と顧客体験をうまく溶け込ませています。

さらなる基本ついて知りたければ、The 5 Building Blocks of Interaction Design(インタラクションデザインの5つの要素)という無料のe-bookもチェックしてください。Salesforceやヴァージン・アメリカ、Hootsuite、Eventbriteなどで成功したUXについて学ぶことができます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて