web creators×DeNA連動企画 Web制作現場で使える最新実用テクニック集

02 スマートフォンECサイトにおけるUI/UX実装の実態

【第2回】商品検索リスト画面に見る、ビッダーズのUI/UX施策

前回はビッダーズのスマートフォンサイトのフロントアーキテクチャについて紹介した。また、ビッダーズにおけるUI/UXに関する基本的取り組みについても触れたが、今回はより具体的な事例をもとに、ビッダーズで実施しているUI/UX施策について紹介していこう。

UIを切り替えることで商品検索の利便性を増す

【1】ポートレートでは、サムネイルメインの商品リストと、サムネイルに商品解説を付記したリストという2タイプから、ユーザーが好みに応じて切り替えることができる。

ビッダーズでは、商品一覧の見せ方としてさまざまなUIを実装している。
まず、【1】はポートレート(縦位置)で閲覧した場合の商品リスト画面だ。商品リストは、画面上部のボタンによって2種類の表示方法を切り替えることができる。
これは、できるだけ多くの商品イメージを比較しながら探したいユーザーにはサムネイルをメインとした商品リストを提供し、ある程度の説明を読みたいユーザーにはサムネイルに商品解説が付記されたリストが利用できるようにするというもの。切り替えは瞬時に行われるため、ストレスなく操作できるようになっている。

ポートレート/ランドスケープ切り替えでリッチな体験を

ポートレートでは、一般的にイメージされる商品リスト画面としてデザインしている一方、ランドスケープではイメージをガラりと切り替えている。これは、ポートレート/ランドスケープで画面が切り替わるというスマートフォンならではのインターフェイスを活用し、よりリッチな体験を提供したいという狙いだ。
具体的には【2】のように、ランドスケープではデザイン性もまったく異なるカルーセル方式で商品リストを提示している。カルーセルでは、ほかの商品をチラ見せすることでフリックのモチベーションを引き出す効果も狙っているが、商品を探す楽しさをさらに高める演出を加えているといえる。
ポートレートとランドスケープでは、サムネイル画像の大きさが異なるため、画像のリロードが発生してしまうが、カルーセル方式のため、ストレスはそれほど感じずに商品を探すことができる。

【2】商品検索による商品リストはポートレートからランドスケープに変えると、UIデザインもガラリと切り替わる。ランドスケープではカルーセルによるリッチなUIを提供している。

タイムセールコーナーではさらにリッチに

ビッダーズでは、期間限定商品を掲載するタイムセールコーナーがある。このコーナーは、よりリアルに近い商品との出会いを体験してもらうため、ポートレート、ランドスケープともにリッチなUIで商品リストを展開している。
前述の商品リストでは横並びのカルーセルであったが、タイムセールコーナーでは仮想3D空間を設定して、奥から前面に回転しながらサムネイルが登場する手法を取り入れている【3】。
ポートレートでは画面幅が狭くなるため、横並びのカルーセルでは、次の商品イメージをあまり見せることができないが、3D空間における回転方式であれば、次の商品サムネイルをある程度“チラ見せ”することが可能だ。
また、ポートレートでは画面下部に、ランドスケープでは画面右横に商品カテゴリを切り替えるボタンを配置している。画面形状に合わせた使い勝手を考慮した設計を行っている。

【3】タイムセールコーナーでは、ポートレート、ランドスケープともにリッチなUIを採用。フリック操作によって、仮想3D空間で商品サムネイルを回転させながら表示することができる。

次回は、jsonとlocalStorageを活用した検索キーワードのアシスト機能とスマートフォン向けのパフォーマンスアップなどについて
紹介しよう。

【著者紹介】

鈴木 哲之(ディレクター)

インターネット上で利用できるポイントサービスを提供するNetMileでディレクターを経験したのち、2006年に株式会社ディー・エヌ・エーに入社。ビッダーズでオークションコンテンツのディレクションを担当する。その後、Mobageでゲームコーナーなどのディレクションを担当し、2008年ビッダーズでショッピングコンテンツのディレクションを担当。2011年、スマートフォン対応に向けたメディアプロジェクトにおいてプロジェクトマネージャに。現在、ショッピング統括部企画編集グループにてグループリーダーを担当している。

株式会社ディー・エヌ・エー

1999年に設立され、同年オークションサイト「ビッダーズ」をスタート。2001年には、同サイトをオークション&ショッピングサイトにリニューアルし、本格的なEコマース事業へと乗り出す。2004年には、携帯電話向けのオークションサイト「モバオク」、ショッピングサイト「ポケットビッダーズ」などを開始。2005年に東京証券取引所マザーズにて上場を果たす。2006年には携帯電話向けゲームをベースとしたSNS「モバゲータウン」(現:Mobage)を開始。ユーザから爆発的な人気を博し、2007年には東京証券取引所市場一部に上場。その後、PC向けサービスやスマートフォン向けサービスなど各種サービスをマルチデバイスで展開する一方、アジアなど海外でもサービスを展開。2012年4月、本社を東京渋谷のヒカリエに移転した。

URL https://dena.jp/
関連記事 「こんなオフィスで働きたい!」