3つのユーザ特性から考える 『売れる』スマートフォンECサイトデザイン

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

▼スマホEC 3つのユーザ特性

スマートフォンECサイト構築において多彩な表現方法が出現しており、最近ではクライアント様のスマホECサイト構築を実施する際に様々なご要望をいただくようになっています。例えば『ANAPさんのようなデザインに』『**サイトのような表現方法で』など、特にJSを活用するような表現が多くなっています。

私たちがスマホECサイト構築の際にお客様と議論する1つが『売れるサイト』を目指すのか、『スマホっぽい見た目が良いサイト』を目指すのかという点です。

これまでの私たちのテスト実績や経験則から携帯サイトでも同様であったように、スマホ向けのモバイルサイトは『モバイルユーザ』の特性を加味したモバイルサイトが最もCVRが高くなります。

【3つのスマートフォン(モバイル)ユーザ特性】

1.通信速度が遅い

2.画面が小さく操作がしにくい

3.PCに比べ目的意識が強い

そこで『スマホっぽい見た目が良いサイト』=『売れるサイト』ではないことを理解いただく必要があります。例えばTOPページデザインによく使われるメインバナーなどの『フリック・スライド』(弊社でもよく用いますが)も本当にクリックしてもらうことを考えた場合、静止バナーを縦に配列したほうが良いでしょう。

これらのことは私たちの経験則上、例えば広告のランディングページを構築した場合、重要なバナーを『フリック・スライド』させるか、静止させるかでCVRが異なることは分かっています。

しかしながら、スマホECサイト構築を希望されるクライアント様は『見た目の良さ』の要求もございますので、そこはクライアント様とどちらを取るのか?を調整する必要があります。

そこで、よく議論に上がるUIについて調査データを基に検証したいと思います。

▼ よく議論に上がるUI(表現方法)について

●メインバナーの表示について

多くのスマホECサイト構築においてTOPページに以下(先日記事で紹介のコンタクトレンズ通販 サンディクリエイション様 http://www.3city.jp/)のようなフリック・スライドのバナー(イメージ)を用いるご要望は往々にしてあります。しかし、このスマホっぽい表現のフリック・スライドが全てにおいて効果的ではなく、逆にあまり効果を持たないことを知っていただきたいと思います。

画像を見る

本当にクリックして欲しい重要なバナーであればやはり『静止』の方が良いです。なぜなら単純にバナーをクリックし難いからです。

フリックスライドはTOPページ構成を企画する場合、『どうしてもファーストビュー内で複数の情報を案内したい場合』に用います。バナーのクリック率を高める必要がある場合はスライドさせずに、単純に静止バナーで配列させます。そのほうがCVRが高くなります。

メインバナー表示方法について以下がそれらの裏づけデータです。以下4パターンのサイトにアクセスしてもらい使い勝手について最も良いと思うサイトを評価されています。(出典:20120330 IMJモバイル 『スマートフォンサイトの情報表示方法に関するユーザビリティ調査』)

画像を見る

画像を見る

このように。調査データからも結局はDの単純にバナーを縦に配列した『ぱっと見て分かりやすく、操作しやすい』ものが選ばれます。ですから何でも『フリック・スライド』ではなく、『基本的にバナーは静止で訴求』、どうしてもファーストビュー範囲で複数のバナー訴求が必要な場合にフリック・スライドというように考えましょう。

またバナーではなくクリックの必要が無く、単に複数のイメージを訴求する場合などはスライドでの表現は非常に有効です。

●複数コンテンツの表示方法について

複数のコンテンツをどのように表現するのかについても、最近は様々なデザイン表現が出来ています。しかしこれらについても売れる表現は『操作しやすい表現』となります。スマートフォンの場合は下のスクロールのストレスはほとんどありません。それ以上に『クリックする』などの操作が入ることでユーザストレスが発生します。ですからストレスを無くす方法は『操作が必要なく閲覧できる』という状態です。ましてやページ遷移させるのは禁物です。

以下の調査データを参照ください。複数コンテンツの表現方法によるユーザの操作印象の変化を調査し、以下3つのパターにアクセスしてもらい使い勝手が『最も良いと思うサイト』を評価してもらったものです(出典:20120330 IMJモバイル 『スマートフォンサイトの情報表示方法に関するユーザビリティ調査』)

画像を見る

画像を見る

これらからもサイトAの単純に縦にコンテンツを配列し、必要以上に工夫を凝らさないほうが使い勝手が良いを感じることがわかると思います。

▼ 売れるデザインを考察する

冒頭でも述べたように『スマホっぽい見た目が良いサイト』=『売れるサイト』ではないことを理解いただく必要があります。

そしてスマホで売れるデザインとは以下のようなスマホユーザの特性を加味したデザイン表現であり、これらはJSなどを用いることで解決するのではなく、いかにコンテンツをシンプルに構成できるか、ユーザ操作が少なくコンテンツの認知が出来るかであり、JSなどを活用したスマホっぽい表現はある意味『仕方なく用いる』と考えた方が良いかも知れません。

【3つのスマートフォン(モバイル)ユーザ特性】

1.通信速度が遅い(ページ表示やページ遷移にストレス)

 ⇒ページ容量を軽くする、重要な情報は上部にテキストで(ダウンロード中でも表示)など

2.画面が小さく操作がしにくい

 ⇒無理に多くの情報を詰め込まない、操作自体を少なくする、操作をしやすくする(ボタンの大きさなど)

3.PCに比べ目的意識が強い(速く目的のものへ到達したい意識が強い)

 ⇒ユーザ導線とのコンテンツマッチ、ファーストビューにユーザの目的とマッチするコンテンツを配置することでCVRが飛躍的に高まる

ECは物を販売する小売業に変わりありません。ですからメインコンテンツは“商品”です。あまりかっこよさを追求するのではなく、ユーザの操作が少なく、操作しやすく、ぱっと見て分かりやすいECサイトを目指すようにしてください。多くの複雑なデザイン表現にとらわれることなくまずはシンプルにコンテンツを配列して表現することです。そして、スマホの特徴を加味して『画像が見やすく』『操作をしやすく』することを追求してください。どうしても必要な箇所にJS等の表現を用いることでユーザビリティを高めることが可能となります

最近aishipで提供開始した無料のスマホECテンプレートも、これらのことを考慮して最低限のスマホっぽさが実現でき、かつ『売れる』ということを追求したベーシックなスマホECのデザインテンプレートです。(テンプレートを用いて15分でスマホECサイトを無料お試し構築したい方はコチラへ)(テンプレートの案内は前回記事参照

これからスマホECを構築される場合は何でもお気軽にご相談ください。

aiship スマホEC無料相談窓口 [フリーダイヤル]0120-173-163

スマートフォンECサイト構築ASP aiship 岩波)

=============================
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン&モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/1998
=============================

この記事が役に立ったらシェア!
tweet18このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

サイドバー
Webサイトのページ上で、コンテンツエリアとは区別して作られたエリアのこと。ナビ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore