「売上の上がらないスマホサイトはどこが悪いのか?一覧表示編」タイトル

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

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

連載◆85時間目
「売上の上がらないスマホサイトはどこが悪いのか?一覧表示編」

皆さんこんにちは、飯野です。とうとう2012年3月31日で、ドコモのmovaがサービス終了となります。あの白黒画面にお目にかかることはもう、ありません。話は変わりますが、昨年末に弊社で制作している某モバイルサイトの月間アクセス数で、スマートフォンがガラケーを抜きました。携帯電話の進化はどこまで行くのでしょうか。興味は尽きませんが、我々が目指すのは決して最先端技術などではなく「一般のお客様が使いやすいサイト」です。それを念頭に置いて、今回もスマートフォンのショッピングサイトのユーザビリティーを勉強していきましょう。「ガラケーとスマートフォンは違うと言うけれど、一体どこをカスタマイズすればいいのか?」そんな疑問に答えていきたいと思います。



一覧項目はひと目で購入判断ができるものを

図1)商品一覧の表示項目

検索結果やカテゴリの一覧など、一覧表示はどんなサイトにも必要ですが、その仕様を皆さんはどのようにして決めているでしょうか。ガラケーで表示しているものと同じものをそのまま使っていませんか?そのままでも使えないことはありませんが、スマートフォンでは、もっと使いやすくすることができます。スマートフォンにしたらコンバージョンが上がった、というサイトは必ずカスタマイズされています。
図1を見てください。どちらもCDを販売しているサイトの商品一覧ページですが、それぞれ表示している項目が違います。どちらが買いやすいと思いますか?Aのサイトでは、「CDマキシ」とアイコン表示があるのは親切です。しかし、表示項目に肝心の価格がありません。また、商品のリンク先に行くとユーザーレビューが何件も入っているのに、一覧ではそれも分かりません。非常にもったいないです。一方、Bのサイトでは価格やレビュー数、その評価ポイントまでしっかり表示されているので、非常に選びやすくなっています。ただ1点、アーティスト名が表示されていないのが残念です。何故、表示していないのかが謎ですが、惜しいポイントです。

ガラケーには出来ない「もっと見る」機能

また、スマートフォンでは、ガラケーのように1ページの表示容量を気にする必要がほとんどありません。ガラケーであれば、1ページに表示するサムネイルは10個程度でしたが、スマートフォンなら20~30個並べているサイトもあります。また、一番下まで行くと「次へ」の表示を出す他に、「もっと見る」などとして、どこまでもページを伸ばしていくことも可能です。それでも画面の最上部をダブルタップすれば一覧の最初へ戻ることができるので、ガラケーのようにスクロールが増えることへの心配は不要です。この「もっと見る」方式を取っているのはアプリに多く見られます。「次へ」でページを送る場合も、単にガラケーの「次へ」ボタンやリンクを踏襲するのではなく、指以上サイズのボタンにするのがベターです。

アパレルサイトにおすすめ、画像メインの一覧

図2)画像がメインの商品一覧

スマートフォンならではの、画像をメインにした一覧を見せているのが図2のサイトです。このサイトは画像をメインにしているだけあり、ガラケーサイトとは別の高解像度画像を使用していて、さすがです。 ガラケーとスマートフォン向けに全商品で2種類の画像を用意するのは、お金も手間もかかります。弊社でもいくつかスマートフォンのサイトを制作させていただいていますが、企業側からの要望が最も多いのが、「画像を綺麗にしてほしい」ということです。限られた予算の中で企業の希望を叶えていくのはなかなか難しいことですが、その場合は全商品画像とまではいかずとも、特集やメインの画像のみ2種類用意するなど、部分的に対応していくことをお勧めしています。

カテゴリ一覧のスマホ向けカスタマイズは必須

図3)カテゴリ一覧

スマートフォンサイトでのカテゴリ表示は、モバイルサイトとは異なるカスタマイズが必須だと考えてください。モバイルサイトでのカテゴリ表示は、一覧にするとページが長くなってしまったり、だからと言って階層を深くすると購入への導線が遠くなってしまったりと、商品数が多いサイトほど悩みどころだったと思います。それがスマートフォンでは工夫次第で解決できるようになります。
解決方法の1つが、メニューを「開閉式」にすることです。図3のサイトAでは、大カテゴリの「TOPS」を押すと、小カテゴリの「カットソー」や「Tシャツ」が表示されます。普段、小カテゴリは閉じているので閲覧の邪魔になりません。また、小カテゴリ名の横にアイテム数が表示されており、中身のボリュームがユーザーに分かりやすくなっています。
2つ目の解決方法を実施しているのがサイトBです。ここでは、表示が長くなりすぎないようにカテゴリが2列になっています。また、カテゴリの画像を表示し、一瞬で中身が分かるようになっています。ブランド別の表示ではブランドロゴを表示しています。有名ブランドであれば文字よりも分かりやすいので効果的でしょう。モバイルサイトなら容量制限がありますので、画像表示には限界がありますが、これもスマートフォンならではの表示方法です。
サイトAとBに共通している特長は、「隠していても中身が分かりやすい」ということです。

最後に余談ですが、スマートフォンにサイトを対応させるときによく聞かれるのが、「アプリじゃないと駄目ですか?」ということです。駄目ではありません。某キャリアの関係者に聞いたところ、天気などの実用系はアプリが多いが、それ以外はHTMLサイトが多いそうです。まずは出来ることから、始めていきましょう。


他の記事を見る


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


飯野勝弘プロフィール

飯野勝弘プロフィール

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


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



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

» モバイルコマース トップページ » 通販新聞社 月刊「ネット販売」連載記事バックナンバー » 「売上の上がらないスマホサイトはどこが悪いのか?一覧表示編」