マーケティング

マーケティング

【スワイプを止めるな!】eコマースサイトから学ぶカルーセルの効果

本記事は、The Usability of Carousel Design
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

302 views

読了時間 : 約2分24秒

Baymard Instituteの調査によると、アメリカの有力eコマースサイトのホームページにおける52%のトップ画面に、また52%のモバイル端末用ホームページにカルーセルを設置しています。 

カルーセルのデザインは、特にeコマースサイトでは定着しています。 果たしてカルーセルのデザイン性は、顧客が購入に至るプロセスに対し有効なのでしょうか?

 

 

カルーセルをトップ画面に

 

 

例えばAmazonのホームページの場合、トップページの上方の領域にカルーセルが設置されています。

 

カルーセルはホームページの上部に表示されます。デザイナーは eコマース業界むけの仕事の際、スクロールしないで閲覧する事のできる画面領域においてとかく苦心します。

 

ヒーロー画像が最善の解決策になるかもしれません。 一度で一箇所に複数のコンテンツを表示できます。 カルーセルは注目を集めたい情報だけではなく、ブランドのサービス内容をより多くの人々に伝えることができます。

 

しかしカルーセルで情報を見ている人を、完全にあてにすることはできません。 アイトラッキング実験から、人々はしばしばカルーセルを見逃すことが知られています。 人々は大きな画像すら無視し、そこにあるコンテンツを見逃しがちです。 以下を参照してください。

 

 

bacnyc.orgのページの場合、ほとんどのユーザーは最初のテキストブロックの後に表示される、青い長方形のプロモーションを完全に見落としました。

 

ひとたびあなたのデザインしたカルーセルが人々の視線を捕らえたならば、こちらのものです!カルーセルによるナビゲーションの次の段階に進めることができます。

 

Amazonのカルーセルのような、静的なヒーロー画像を推奨します。

 

自動更新されるカルーセルの欠点は、人々がいらいらし、それを無視する可能性が高いことにあります。 人間はアニメーション画像を広告として見る傾向があるのです。 ただし、自動更新の場合でも、カルーセルの使いやすさを向上させる方法があります。

 

コンテンツは連続性が肝心です。大半のユーザーはカルーセル内を3~4回しかクリックしません。 情報の発見性を高めるために、カルーセルを5フレーム以内にしましょう。

 

文字認識の必要性を低く維持しましょう。 人々はページを上下にスクロールしている時、カルーセルの情報を読む時間がありません。 モバイル端末では、より一層気を散らしやすくなります。デザイナーは各フレームに対する文字量をごくわずかにするよう留意しましょう。

 

アクセシビリティを確保しましょう。例えばある人が表示されたコンテンツに興味を持った場合、前のコンテンツへのアクセスは許可されていますか? 次へのアクセスを許可されていますか?

 

ユーザーがカルーセルをコントロールできるようにしましょう。 カルーセルには、コントロール箇所を複数設けましょう。カルーセル内にはいくつフレームがあるのか、どのフレームが表示されているか分かるようにしましょう。また、カルーセル内にコントロールが表示されていることを確認しましょう。 コントロール箇所が下にある場合、または折り畳まれ分離されている場合、それはユーザーにとって使い勝手良いデザインではありません。

 

最後のコンテンツに留まらないよう、サイクリングを続けさせましょう。

 

モバイル端末向けの場合は、どんどんスワイプするよう仕向けましょう。

 

 

さまざまなeコマースサイトを見直してみて、Walmartが良い例であることが分かりました。

 

筆者は自動更新を含めて、カルーセルが好きです。 前述したことだけではなく、ほかにもいくつかお勧めしたい機能があるからです。

 

まず、ユーザーは自動更新を停止することが可能です。 また、表示時間が読むのに十分な長さです。 大事なことを言い忘れましたが、カーソルがホバリングしたときに自動更新は停止します。 このデザインは、とても使い勝手が良いといえます。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ