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

▼スマホEC　３つのユーザ特性 スマートフォンECサイト構築において多彩な表現方法が出現しており、最近ではクライアント様のスマホECサイト構築を実施する際に様々なご要望をいただくようになっています。例えば『ANAPさんのようなデザインに』『＊＊サイトのような表現方法で』など、特にJSを活用するような表現が多くなっています。 私たちがスマホECサイト構築の際にお客様と議論する１つが『売れるサイト』を目指すのか、『スマホっぽい見た目が良いサイト』を目指すのかという点です。 これまでの私たちのテスト実績や経験則から携帯サイトでも同様であったように、スマホ向けのモバイルサイトは『モバイルユーザ』の特性を加味したモバイルサイトが最もCVRが高くなります。 【３つのスマートフォン（モバイル）ユーザ特性】 １．通信速度が遅い ２．画面が小さく操作がしにくい ３．PCに比べ目的意識が強い そこで『スマホっぽい見た目が良いサイト』＝『売れるサイト』ではないことを理解いただく必要があります。例えばTOPページデザインによく使われるメインバナーなどの『フリック・スライド』（弊社でもよく用いますが）も本当にクリックしてもらうことを考えた場合、静止バナーを縦に配列したほうが良いでしょう。 これらのことは私たちの経験則上、例えば広告のランディングページを構築した場合、重要なバナーを『フリック・スライド』させるか、静止させるかでCVRが異なることは分かっています。 しかしながら、スマホECサイト構築を希望されるクライアント様は『見た目の良さ』の要求もございますので、そこはクライアント様とどちらを取るのか？を調整する必要があります。 そこで、よく議論に上がるUIについて調査データを基に検証したいと思います。 ▼ よく議論に上がるUI（表現方法）について ●メインバナーの表示について 多くのスマホECサイト構築においてTOPページに以下（先日記事で紹介のコンタクトレンズ通販　サンディクリエイション様 http://www.3city.jp/）のようなフリック・スライドのバナー（イメージ）を用いるご要望は往々にしてあります。しかし、このスマホっぽい表現のフリック・スライドが全てにおいて効果的ではなく、逆にあまり効果を持たないことを知っていただきたいと思います。 画像を見る本当にクリックして欲しい重要なバナーであればやはり『静止』の方が良いです。なぜなら単純にバナーをクリックし難いからです。 フリックスライドはTOPページ構成を企画する場合、『どうしてもファーストビュー内で複数の情報を案内したい場合』に用います。バナーのクリック率を高める必要がある場合はスライドさせずに、単純に静止バナーで配列させます。そのほうがCVRが高くなります。 メインバナー表示方法について以下がそれらの裏づけデータです。以下４パターンのサイトにアクセスしてもらい使い勝手について最も良いと思うサイトを評価されています。（出典：20120330　IMJモバイル　『スマートフォンサイトの情報表示方法に関するユーザビリティ調査』） 画像を見る画像を見るこのように。調査データからも結局はDの単純にバナーを縦に配列した『ぱっと見て分かりやすく、操作しやすい』ものが選ばれます。ですから何でも『フリック・スライド』ではなく、『基本的にバナーは静止で訴求』、どうしてもファーストビュー範囲で複数のバナー訴求が必要な場合にフリック・スライドというように考えましょう。 またバナーではなくクリックの必要が無く、単に複数のイメージを訴求する場合などはスライドでの表現は非常に有効です。 ●複数コンテンツの表示方法について 複数のコンテンツをどのように表現するのかについても、最近は様々なデザイン表現が出来ています。しかしこれらについても売れる表現は『操作しやすい表現』となります。スマートフォンの場合は下のスクロールのストレスはほとんどありません。それ以上に『クリックする』などの操作が入ることでユーザストレスが発生します。ですからストレスを無くす方法は『操作が必要なく閲覧できる』という状態です。ましてやページ遷移させるのは禁物です。 以下の調査データを参照ください。複数コンテンツの表現方法によるユーザの操作印象の変化を調査し、以下３つのパターにアクセスしてもらい使い勝手が『最も良いと思うサイト』を評価してもらったものです（出典：20120330　IMJモバイル　『スマートフォンサイトの情報表示方法に関するユーザビリティ調査』） 画像を見る 画像を見るこれらからもサイトAの単純に縦にコンテンツを配列し、必要以上に工夫を凝らさないほうが使い勝手が良いを感じることがわかると思います。 ▼ 売れるデザインを考察する 冒頭でも述べたように『スマホっぽい見た目が良いサイト』＝『売れるサイト』ではないことを理解いただく必要があります。 そしてスマホで売れるデザインとは以下のようなスマホユーザの特性を加味したデザイン表現であり、これらはJSなどを用いることで解決するのではなく、いかにコンテンツをシンプルに構成できるか、ユーザ操作が少なくコンテンツの認知が出来るかであり、JSなどを活用したスマホっぽい表現はある意味『仕方なく用いる』と考えた方が良いかも知れません。 【３つのスマートフォン（モバイル）ユーザ特性】 １．通信速度が遅い（ページ表示やページ遷移にストレス） 　⇒ページ容量を軽くする、重要な情報は上部にテキストで（ダウンロード中でも表示）など ２．画面が小さく操作がしにくい 　⇒無理に多くの情報を詰め込まない、操作自体を少なくする、操作をしやすくする（ボタンの大きさなど） ３．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＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝