「スマートフォンでのショッピングサイトの見せ方(3)購入画面編」タイトル

2011年8月 通販新聞社 月刊「ネット販売」連載記事バックナンバー

携帯電話を「通販ツール」に進化させるプロフェッショナル育成講座 タイトル ビジネス感度を高めで受講のこと

連載◆78時間目
「スマートフォンでのショッピングサイトの見せ方(3)購入画面編」

皆さんこんにちは。飯野です。今回はスマートフォン向けショッピングサイトの購入画面のユーザビリティーを見て行きます。今回も、最もメジャーな2 サイト、Yahoo !ショッピングと楽天を比べてみました。スマー トフォンサイトのユーザビリティーはまだまだ発展段階。一緒に一つずつ勉強していきましょう。



1画面を長く作ってページ数を減らす場合

図1)>Yahoo!ショッピングの購入画面

Yahoo!ショッピング(図1)では、カートから購入完了までのページ数が非常に少なくなっています。よくある「通常購入or即購入」と選ばせることもなく、デフォルトが「即購入」タイプになっています。また、普通のサイトはカートの次の画面から入力が始まりますが、Yahoo!ショッピングではカート画面の下のほうから購入情報入力が始まります。また、あらかじめサイトにログインしていれば、購入に進む前に再度ログインする必要もありません。それによってカートと入力画面の一体化が実現していると言えます。ただしこれは、端末を誰に使われても購入されてしまうということ。安全面を気にするユーザーもいるので、ログインの有無の切り替えが、ユーザー設定で簡単にできるようになっていればなお良いと思います。
一方で気になった点は、ラジオボタンやチェックボックスが小さいことです。PCではチェックをするのにマウスポインタを使いますが、スマートフォンでは指を使うので、押す面積が小さいと使いにくく感じます。スマートフォンのデザインは常に指サイズを 基準に考えるべきでしょう。

ページ数は多くても、細部を使いやすく

楽天(図2)でも購入画面では最初に通常購入と即購入タイプを選ばせるようになっていますが、即購入がデフォルトではありません。私は「即購入」のボタンがあっても情報を確認しないと安心できないタイプなので通常購入を選んでみたところ、画面数は多いのですが、難なく完了画面に至ることができました。こ れは、至るところで工夫がされていたためだと思います。購入画面に進むとまず、今自分が購入ステップのどこにいるのかがわかるように、上部に常に番号が表示されます。携帯やPCでもこれがあるサイトは安心します。スマートフォンも同じです。


図2)楽天の購入画面

次に、リンクは必ずボタンか、テキストリンクであれば下線がついている点。スマートフォンでは下線がなくてもリンクにできますが、下線がないとリンクかどうかがわかりません。Yahoo!ショッピングではそこが分かりにくくなっていました。また、テキストリンクとボタンも使い分けられており、押させたいリンクは大きく目立つように、押させる必要のない、変更画面へのリンクや購入から離脱するようなリンクはテキストリンクで小さく表示するなど、ユーザーを購入へ誘導することを意識した作りになっていると思います。
楽天ではボタンも大きく使いやすく感じました。ラジオボタンやチェックボックスも、意識してテキストよりも大きいサイズで作られており、ボタンが連続していれば間隔が空けてあり、指で押しやすく作られていました。このようなボタンの大きさなどは、すぐに調整が可能なところだと思いますので、ボタンが小さいと思うサイトはすぐに対応することをお勧めします。ボタンが見えないから親指と人差し指で拡大…などという動作は購入画面の途中では絶対にユーザーにさせてはいけません。また、戻るためのボタンは矢印のような形になっており、それも単に三角ではなく、矢印の中に戻り先のページ名が簡単に書かれています。これも非常 に分かりやすいと感じました。
携帯サイト時代から言っていますが、ショッピングサイトのデザインは、売上を上げるために色、形、テキストを研究し、仮説検証を繰り返すことが大事です。ボタン一つでコンバージョンが変わったサイトをこれまで何度も見てきました。また、チェックボックスにすべき箇所、プルダウンにすべき箇所など、スマートフォンと携帯のユーザビリティーは共通する部分が多くあると感じています。これまでの携帯サイトのノウハウはスマートフォンでも必ず活用できます。


他の記事を見る


矢印 アイコンバックナンバー目次へ


飯野勝弘プロフィール

飯野勝弘プロフィール

日本IBM㈱にて法人営業後、大手通販会社の通販部門責任者を経て、 ㈱MTI(ジャスダック上場企業)執行役員モバイルコンテンツ事業部長として、公式コンテンツ300サイト以上の立ち上げを経験。現在㈱モバイルコマース代表取締役として、全国の通販企業の携帯サイトコンサルティング業務を行う。
主業務に携帯サイトの設計企画、3キャリアへの公式承認代行(完全成功報酬制)、サイト開発、運営、売上UPコンサルティング、セミナー等 幅広く活動中。毎月4キャリア(ドコモ・KDDI・ソフトバンク・ウイルコム)へ通販企業様の公式サイト提案を行っている。数社のIT企業役員も兼務。


連絡先:東京都世田谷区用賀2-38-14 青木ビル 4階
電話03-3700-5259



トップへ戻る アイコントップへ戻る

» モバイルコマース トップページ » 通販新聞社 月刊「ネット販売」連載記事バックナンバー » 「スマートフォンでのショッピングサイトの見せ方(3)購入画面編」