スマートフォン対応のネットショップ

売れる!ネットショップ見本帳

東急百貨店ネットショッピング

言わずと知れた有名デパート、東急百貨店のネットショップ。扱っているのは主にギフト、フード、ファッションで、百貨店のネットショップならではの特徴として、年齢層の高さがあげられると思います。ネットに不慣れなユーザーにも優しいインターフェイスがみどころですよ!
今回分析したサイトはこちら >> 東急百貨店ネットショッピング

まずはトップページから見て行きましょう。右側のキャプチャーは、トップページ全体を切り出したものです。主なコンテンツは各カテゴリページや特集ページへのナビゲーション(案内)で、季節の商品をふんだんにアピールしています。それでは、もう少し細かく分析していきましょう。

こちらのグリーンで囲ったゾーンがおおよそのファーストビューです。ぱっと目をひく大きな画像は季節を意識した特集のコンテンツ、そして右側にはカテゴリ別ページに飛ぶバナー。ファーストビュー下部にも季節の特集バナー上部がちらっと見えます。トップページからユーザーの求めていそうな、旬の商品特集ページにすぐ移動することができるようにレイアウトされています。

どのページに移動しても必ず表示される
ヘッダー部分。メニューは左から「商品検索」「詳細検索」「マイページ」「買物かご」「総合ガイド」が並びます。その上にはTopへのリンク、サイトの使用方法を説明する「初めての方へ」「お買物方法」「お問い合わせ」と、ガイドラインとなるコンテンツが豊富に並んでいます。
「詳細検索」ではキーワード、カテゴリ、価格帯で商品を絞ることができ、「総合ガイド」はよくある質問や注文方法、返品などの対応やお問い合わせページなどのリンクがある、各ガイドラインページへの窓口的なコンテンツとなっています。

ちょっとわかりにくいですが、ヘッダーメニューの下の赤枠部分がカテゴリメニューです。カテゴリ名をクリックすると、さらに細かいカテゴリページがずらっと出てくる仕掛け(下記画像参照)。目当てのページまでワンクリックで飛べるのは、余計なページを経由する必要がなく、ネットショップに不慣れなユーザーにも優しい作りですね。

ファーストビューの下に続くコンテンツは商品カテゴリ(画像、説明テキスト付き)、PicUp商品、トピックス(商品取り扱い案内)、全カテゴリリストなどなど。トップページから直接移動できるページが多く、導線がとてもシンプルです。サイトマップページは特に設けていないようですが、ページ最下部の全カテゴリリストがその役を担っています。



では次に、下層ページの特徴的な部分を見ていきましょう。

ガイドラインコンテンツが豊富であることは上で触れましたが、ページ内容もとても丁寧な作りになっています。たとえば、こちらの「お買物方法」ページ。
商品の詳細ページをスタートとして、買物カゴへの追加の仕方、買物カゴ内の項目の説明、削除の仕方など、キャプチャーを使ってひとつひとつのアクションに対し細かく解説しています。
また、キャプチャーでは見切れてしまっていますが、ページ下部にお届け方法説明ページに飛ぶリンクが用意されています。「ご自宅お届け」と「先方お届け」に分かれており、それぞれのページでお届け先設定方法を、キャプチャーを使用して解説しています。
買物カゴの説明を見た人が次に何を知りたいかを考えた、親切な導線ですね。

こちらは商品一覧ページのキャプチャーです。商品名・価格が高い順・価格が安い順の3つの並べ替えができ、表示件数は10件〜100件まで選択可能です(デフォルトは20件)。
ウィンドウショッピングのように並べる商品レイアウトは、一度にたくさんの商品が目に入るので、明確に目当ての商品を決めているわけではないユーザーに、効率的に商品をアピールすることができます。
さらに、このキャプチャーは敬老の日の特集カテゴリ内のものですが、全ての商品タイトルに「敬老の日ギフト」という文字列が付けられているので、商品検索で「敬老の日」「ギフト」などと入力したユーザーにもこれらの商品を提案できますね。

そしてここ、赤枠Cと青枠D。Cの部分はカテゴリ内人気ランキング。人気ランキングは商品の提案だけではなく、商品購入に対するユーザーの自信にも繋がります。現物を見ることができないネットショップでは、画像やテキストのみで商品の良し悪しを判断するしかありませんので、レビューやランキングなどからわかる「購入者の声」や「購入人数」は、とても大きな判断材料となります。
一方Dには、最近チェックした商品が表示されます。良いなと思って一度商品をチェックしたものの、他の商品を見ているうちに購入意識が薄れてきたユーザーに対し、再び提案することができますし、ユーザーとしても商品の比較がしやすく、効率的に買物ができますね。

最後に、この東急百貨店ネットショッピングのスマートフォンサイトを分析していきます。

PC版とはレイアウトが全く異なり、コンテンツ内容にも変化があるのがわかります。基本的に各カテゴリ・特集ページへのリンクが主なのはそのままですが、テキスト量は必要最低限に抑えられ、余計なものを全て省いた、簡素でシンプルなサイトになった印象を受けます。しかし、そんな中でもきちんとスマートフォンならではの特性を考えた、ユーザビリティやギミックがたくさん盛り込まれています。

まずはこちら季節の特集コンテンツ。PC版では数秒ごとに自動で画像が切り替わっていましたが、スマートフォン版では自動での切り替えはなくなり、オレンジ枠Bにある「次へ」をタップすることで、ユーザーが自由に切り替えることができる仕組みになりました。その際の動きもJavaScriptを使用した、右から左にコンテンツが流れてくるとてもなめらかな物。使用していて気持ちよさを感じます。

赤枠Cの場所では「PC」と「スマートフォン」、
表示モードの切り替えが可能です。スマートフォンに最適化しているとは言え、PCのレイアウトの方が好みという方のために、どちらでも対応できるよう用意されています。


ここでひとつ気になるのが、トップページやカテゴリ別の商品一覧、商品詳細などはスマートフォンに最適化されたページが用意されているものの、「総合ガイド」などのページはPC用表示のままだということ(2012年9月現在)。
これは、スマートフォンからアクセスするユーザー層はインターネット慣れしており、ガイドラインなどのページを表示することが少ないとの判断か、スマートフォン最適化にサイト全体がまだ追いついていないということなのかわかりませんが、いずれにせよ急速に発展し続けるスマートフォン市場。
今後も新しい技術が出るたびに、サイトの最適化も変わってくるでしょうし、ユーザーにより気持ちよく買物をしてもらうためにも、ネットショップの新常識・流行はチェックし続けていきたいところですね。

スマホ対応のショッピングカート >> Make Shop  Color Me Shop! 今回分析したサイトはこちら >> 東急百貨店ネットショッピング

その他のネットショップ見本帳

東急百貨店ネットショッピング
スマホ対応!幅広いユーザーの取込方法
東急百貨店ネットショッピングを
分析
ヤラー正規販売店ルシアン
サービス展開の鑑!コンテンツの見本帳
オーガニックドッグフード【ヤラー】
正規代理店ルシアンを分析
フジイダイマルオンラインショップUROKO
主役は画像。アパレル商品の魅せ方とは
フジイダイマルオンラインショップ
UROKOを分析

> ページの先頭へ