「スマートフォンでのショッピングサイトの見せ方(2)トップページ編」タイトル

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

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

連載◆77時間目
「スマートフォンでのショッピングサイトの見せ方(2)トップページ編」

皆さんこんにちは。飯野です。今回は「スマートフォンでのショッピングサイトの見せ方」の第2弾として、楽天とYahoo!ショッピングを中心に、大手ショッピングポータルサイトをスマートフォンでチェックしてみました。見ているとまず、デザインに多くの共通点があることに気が付きます。最大手であるこの2社に共通しているデザインが、現在の日本のスマートフォンショッピングサイトの標準デザインとも言えると思います。これからスマートフォンサイトを作ろうと思っている企業の方は、参考にされてはいかがでしょうか。今回はトップページを中心に見ていきたいと思います。



よく使うメニューをアイコンに

図1)アイコンのパターン

楽天とYahoo!ショッピングでは、「買い物かご」や個人ページなどの良く使われるメニューがアイコンになっています(図1)。その他にもいくつかの大手サイトを見ましたが、「買い物かご」をアイコンにするのは定番のようです。一方で、「買い物かご」がアイコンになっていなかったビッダーズですが、楽天やYahoo!ショッピングを使った後だと、どうしても使いにくく感じてしまいました。トップの右上というこの位置に「買い物かご」を置くなら、アイコンにすべきでしょう。Yahoo!ショッピングではさらに、下層ページに行ってもトップページと同じ位置にこのアイコンが固定されており、使い勝手が良く感じました。

ユーザーはアイコンを見て直感的にメニューの内容を判断します。それは絵と文字を同時に見たときに一瞬で理解できるデザインになっているからです。作る側は絵のデザインに気を取られがちだと思いますが、なんとなく格好良くアイコンを作っても、文字と合っていなければ意味不明になってしまいます。わかりやすいアイコンには、必ず適切な文字が付けられています。アイコンは、付けるべき場所、絵や文字が表す意味をよく考えて使うことが重要です。

左右スライドと「戻る」「進む」ボタン

図2)戻る・進む、前へ・次へ

楽天とYahoo!ショッピングで全く同様だったのが、このページ送りのデザインです(図2)。スマートフォンの特徴である、画面をはじいて左右へスライドさせる動きを取り入れています。一つ目のポイントは、画像を正方形にすること。ここでも画像は直感的に分かるものでなければなりません。携帯サイトのように細かい説明文を入れては、横へはじくというスマートフォンの特徴的な操作の妨げとなるからです。二つ目のポイントは、画像の下に「戻る」「進む」などのボタンも置くことです。画面をはじく以外にも、このボタンを押すことによって表示が切り替わります。このボタンを用意することにより、ぱっと見て「横にはじく」という動作を思いつかないユーザーでも、ボタンを押してページを動かすことができるようになっています。

この「二つの操作方法を用意する」ということが重要です。スマートフォンは急激に拡大しているといっても、まだまだ使いこなせていないユーザーが大半です。サイト制作側はこのことを忘れがちです。アイコンの場合と同じで、単に格好良くシンプルに見せるのではなく、このようにユーザーが本当に使いやすいデザインを目指したいものです。

長いカテゴリは開閉式に

図3)カテゴリの表示

カテゴリは全て表示すると長くなりすぎるため、トップページでは開閉式のデザインにすることをお勧めします(図3)。開閉式にした場合、デフォルトを開いた状態にするか閉じた状態にするかは、ジャンルの数や見せたいカテゴリ名の量によって判断しましょう。楽天では2列にしてデフォルトは閉じた状態です。一方、Yahoo!ショッピングでは、シンプルに一列にしてデフォルトは開いた状態になっていました。楽天はジャンルが多いという事もありますが、見やすさではYahoo!ショッピングが上だと感じました。楽天ほどジャンルが多くないサイトなら、Yahoo!ショッピングのようにシンプルに縦一列にしたほうが良いでしょう。

また、Yahoo!ショッピングでは、ジャンル名をリンクにするだけでなく、その横に矢印を表示することで、リンクであることが、よりわかりやすくなっています。この矢印があるのとないのとでABテストを行えば、恐らくクリック数に差が出るでしょう。

今はまだ、PC版も残しておく

スマートフォン版のサイトを作ってから、これまでスマートフォン上で見せていたPCサイトが見られなくなってしまっているサイトはないでしょうか。デフォルトでスマートフォン版を見せるのは構わないのですが、ユーザーには「PC版を見る」という選択肢を残すようにしましょう。スマートフォン向けに機能がカスタマイズされているとはいえ、PC版にはあってスマートフォン版にはないメニューがある場合、スマートフォン上でそのメニューが見たいユーザーがいた時にそれが見られないとなると、購買意欲の低下につながりかねません。

例えばYahoo!ショッピングのスマートフォン版トップページは、検索、特集、カテゴリ、ランキング、とほぼ4メニュー(あとはアイコン)のみです。PC版には他にも沢山のメニューがあり、それら全てはまだスマートフォン版で対応していないようですが、PC版へのリンクを表示することでフォローがなされています。まだスマートフォンよりもPCユーザーが多い今のうちは、そのようにしておくのが無難でしょう。


他の記事を見る


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


飯野勝弘プロフィール

飯野勝弘プロフィール

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


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



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

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