各デバイスごとに異なるテンプレート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について紹介しよう。