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

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

【第1回】PC/スマートフォン向けサイトのフロントアーキテクチャの違い

DeNAが1999年から開始しているオークション&ショッピングサイト ビッダーズ。PCおよびフィーチャーフォン向けにサービスを展開しており、スマートフォン向けにも最適化したコンテンツに対応している。本連載では、ビッダーズにおけるフロントエンドアーキテクチャやデザインのポイントを紹介していく。

各デバイスごとに異なるテンプレートHTMLで最適化

【1】ビッダーズにおけるPCとスマートフォン向けのフロントアーキテクチャの違い。html generatorはJAVAによる独自開発したテンプレートエンジンで、商品DBと連携してデータ取得とHTMLデータ生成を行っている。(クリックして拡大)

【1】ビッダーズにおけるPCとスマートフォン向けのフロントアーキテクチャの違い。html generatorはJAVAによる独自開発したテンプレートエンジンで、商品DBと連携してデータ取得とHTMLデータ生成を行っている。(クリックして拡大)

ビッダーズでは、先行するPCおよびフィーチャーフォン向けサービスに加えて、すでにスマートフォン向けサービスも展開している。サイト制作としては、モバイルファーストを基本としながら、PC・フィーチャーフォン・スマートフォンという各プラットホームごとに個別のHTMLを用意し、それぞれに最適化したWebサイトを提供。基本的には、PC・スマートフォンともに、商品DBと連動した「html generator」によって最終的なHTMLデータを生成してユーザー側に送信するという仕組みを採用している。このため、各プラットホームごとに用意されたテンプレートHTMLに、商品DBから取得したデータを組み込んで実際のHTMLデータを生成する【1】。
また、ビッダーズのフロントエンド開発においては、PC、スマートフォンともにjQueryを採用しているが、スマートフォン向けにはさらにjQuery MobileおよびlocalStorageを利用し、スマートフォンに特化したUIデザインとユーザビリティを提供している。

jQuery Mobileの使いどころ

スマートフォンのUI/UXとしてリッチなインターフェイスを実装するのはもちろんだが、スマートフォンとしてより汎用性のあるデザインを効率的に実装するため、jQuery Mobileを活用している。
もちろん、スクラッチのJavaScriptコードも多用しているが、申し込みなどのフォーム画面で統一的なUIを提供したい個所にはjQuery Mobileは有効である【2】。
jQuery Mobileをおもに活用しているのは、入会や購入フロー、お問い合わせページ。これらのページでは、スマートフォンユーザーが慣れている操作性を統一的に提供することが重要。ユーザーが操作に迷うことなく、スムーズに操作できるUI設計を重視している。

【2】入力フォームなどユーザーが多く操作する画面では統一的なUIを提供し、ストレスなく操作できるようにすることが重要。jQuery Mobileを利用することで、スマートフォンらしいUIを簡単に実装可能だ。

ビッダーズのUI/UXに関する基本的な取り組み

【3】登録会員に対しては、会員属性にあったコンテンツがデフォルト表示される。

ビッダーズはショッピングサイトとして、ユーザーにさまざまな操作を要求するため、UI設計は非常に重要と考えている。さらに、単に使いやすさだけを求めるのではなく、そこになんらかのユーザー体験を盛り込むことで、ビッダーズとしての魅力を出す必要もある。つまり提供するUXの設計も重視し、ユーザーによりリッチな体験を提供することを基本的なスタンスとしているである。
具体的なUI/UXの事例に関しては次回以降で紹介していくが、ここではひとつの取り組みに触れておこう。
ビッダーズでは、会員登録したユーザーに対しては、各ユーザーごとの属性に合わせたコンテンツを表示する【3】。HTMLを自動生成する「html generator」システム自体に、属性に応じてコンテンツを動的に切り替える仕組みを実装している。会員ごとに最適なコンテンツを表示することで、特別なUXの提供を行おうという取り組みである。

次回は、スマートフォン向けビッダーズ上で提供している商品リストなどのUI/UXについて紹介しよう。

【著者紹介】

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

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

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

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

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