スマートフォンサイトUI設計のポイント
 PC、ケータイ、スマートフォンなどでアクセスできる会員制オークションサイト。会員数は100万人以上を誇り、いつでもどこでも楽しめる利便性から日々活発に取引が行われている。 |
急速に求められ始めたWebサイトのスマートフォン対応。狭い画面とタッチ操作という独特なデバイスに必要なUI 設計とはどのようなものだろうか？ スマートフォン向けサービスを数多く展開するDeNAでディレクターを務める鈴木哲之さんに、オークションサイト「モバオク」での取り組みをうかがった。
取材・文／久保靖資
取材協力／鈴木哲之（株式会社ディー・エヌ・エー）
テスト等を通じたUI／UX設計への取り組み
一般的なコーポレートサイトでもスマートフォンでの閲覧を期待して最適化が要件に含まれるようになるなど、Web制作の現場でスマートフォンへの対応を求められるケースが急速に増えている。限られた画面内でコンテンツをどのように見せるのか、またタッチデバイスの操作性にどのように対応するのか。一口にスマートフォン対応といっても、取り組むべき課題はさまざまだが、その多くはスマートフォンユーザーに適したUI 設計に関わる課題と考えられる。
フィーチャーフォン向けサービスで注目を集め、現在ではスマートフォン向けサービスも数多く展開しているDeNA。すでに公開済みのサービスに関しても、適時A／Bテストなどを実施し、よりユーザーフレンドリーなUIを目指した取り組みを続けている。その一例として、多くのアクティブユーザーが利用するEコマースサイト「モバオク」のリニューアル事例を紹介しよう。
ウィンドウショッピング感覚を味わえるショーケース
オークションサイトのモバオクでは、出品者が商品を陳列するショーケース画面が用意されている。ショーケースは、購買層ユーザーが落札したい商品を探すショーウィンドウであり、直接購買意欲を刺激する接点となる。従来はシンプルなリストで表示していたこのショーケース画面に対し、「販売促進機能の強化」を目的として大幅なリニューアルを行った【01】。
オークションサイトには目的型で訪れるユーザーに加え、「なにか安くてイイものがないか？と探しに来るユーザーも多い」という。まさにウィンドウショッピングである。
PCサイトであれば一定量の写真と文字情報で商品を訴求できるが、スマートフォンの狭い画面に大量の情報を掲載するのは得策ではない。モバオクでは写真1点と価格という必要最低限の情報に絞り込んで掲載。ただし、リアルなショーケースをモチーフとして、実際に棚に並べられたような演出を施すことで、よりリアルなウィンドウショッピング体験を提供している。
また、ショーケースには最大100 点まで掲載できるが、スワイプ／フリックによる縦スクロールの際、次の商品がAJAXで読み込まれてフェードインしてくるというリッチインターフェイスも実装。一覧に戻ったり、並び替えを行うメニューアイコンは静止時のみ画面下部に表示させ。スクロール時には消している【02】。狭い画面を最大限に生かしながら、ストレスを感じさせないUI／UXを提供している。
 【01】リニューアル前（左）とリニューアル後（右）のショーケース画面。新しいUIでは、奥行き感のある棚をイメージさせる。写真と価格表の位置も立体的であり、写真というより商品がリアルに陳列されているような印象を与える。（クリックで拡大） |
 【02】以前はページ下部に固定されていたメニューアイコンは、半透明化されて画面下部でオーバーレイ表示される。スクロール時には非表示にして誤操作を防ぐなど、ユーザーが心地よく操作できるように工夫が施されている。（クリックで拡大） |
アクティブユーザー向けのレスポンスの良い機能提供
モバオクでは、スマートフォン向けWebサイト以外に、専用アプリでもサービスを提供している。アプリは「よりアクティブなユーザー向けに開発している」とのことで、ネイティブアプリならではのレスポンスの速さを活かした快適なUIが特長だ。WebインターフェイスでもHTML5を使って同等のUI実装が可能ではあるが、JavaScriptエンジンによるレンダリングでは処理速度の面で限界がある。対して、ネイティブアプリでは、縦横のスワイプ／フリック操作にも俊敏に反応し、ハードなアクティブユーザーにとってもストレスを感じさせない。
たとえば出品リストでは、商品写真を画面いっぱいで閲覧しながら、横スワイプで同商品の別の画像、縦スワイプで別の商品へとスムーズに切り替えられる。商品詳細画面もワンタッチで切り替え可能で、詳細画面でもカルーセル＆フリックで写真が切り替わるなど、ユーザーが感覚的に行う操作を想定したUIが実現されている【03】。
ネイティブアプリは出品者側のメリットも大きく、たとえば投稿する写真も撮影したその場でトリミングや回転を行い、ワンストップで出品まで完了する【04】。
スマートフォンサイトではネイティブアプリ並みのレスポンスは望めないとしても、快適な操作性や工夫を追求するうえで、アプリから学べる部分は大きいはずだ。
 【03】商品一覧では出品商品の写真を全画面で閲覧しながら、横フリックで別の画像、縦フリックで別の商品、ボタンタップで商品詳細というように、感覚的な操作で商品を探せる。ネイティブアプリならではのレスポンスの良さが生かされたUIだ。（クリックで拡大） |
 【04】出品の際に、撮影からトリミング・回転といった写真編集をシームレスに行えるのもアプリならでは。（クリックで拡大） |
ユーザーフレンドリーなフォーム画面の実装
 【05】モバオクの会員登録画面。これだけ多数の項目をスマートフォンで入力するのはユーザーにとってかなりの負担になるため、入力支援やパスワード表示といったさまざまな改善の試みを続けている。（クリックで拡大） |
スマートフォン向けWebサイトで、たびたび頭を悩ませるのがフォームだろう。キーボード操作ができないぶん、ユーザーにストレスを感じさせてしまう可能性が高いが、運営側からすればフォームこそがWeb上でのコンバージョンポイントでもある。入力支援なども含めた使いやすいUIへの改善は、成果に直結する重要な課題だ。
モバオクは月額制サイトとして運営されているため、最大の注力ポイントともいえる会員登録画面では、数々のテストを重ねて使いやすさが追求されている【05】。テストはケースに応じてA／Bテスト、多変量テストなどを実施。1000 パターンにも及ぶテストパターンから、CVRを最大限化する施策を行っている。パターンでは、ファーストビューでアピールするタイプやボタン周囲にキャラクターを配置するタイプなど、ユーザーの反応を想定したパターンをさまざまに検証。解析には「DLPOやGA（Google Analytics）のウェブテスト解析を使用している」とのこと。
フォームコントロールに関しても、たとえば生年月日入力でドロップダウンリスト、テキスト入力の両パターンでの検証などを行っている。「スマートフォンで入力する場合、ドロップダウンリストを年・月・日と3回繰り返すより、1つのテキストエリアへ数値入力してもらうほうがレスポンスは良いかもしれない」というアイデアのもとに行われたテストだ。また、「パスワードマスクなども文字入力の難度が高いスマートフォンには最適ではない」との考えから、マスクを解除する機能も実装された。
メールアドレス入力でも、PCサイトのように「@マーク」を挟んで入力欄を2つ用意するよりも、1つのテキストエリアで「@」以降のドメイン入力支援を行うほうがユーザーフレンドリーといえる。
ただし、「新しい支援方法を試みても、うまく行かないケースもある」という。以前は郵便番号からの自動住所入力支援の際に、「千代田区三番町－－」というように番地の区切り記号のハイフンを出力していたが、「スマートフォンでハイフンの間に入力位置を変えるのはストレスが高い」ため取りやめている。ハイフンで統一しておくと処理しやすいという運営側の都合もあった施策だったが、この点はバックヤードで整形処理を行うことで解決したそうだ。
ほかにも、チェックボックスやラジオボタンなど、Apple のUIガイドラインなどを参考にボタンサイズなどの最適化を図ることはもちろん、スマートフォンならではのユーザー体験を、さまざまなテストを通じて試行錯誤していくことが何よりも重要である。
鈴木 哲之（ディレクター）
インターネット上で利用できるポイントサービスを提供するNetMileでディレクターを経験したのち、2006年に株式会社ディー・エヌ・エーに入社。ビッダーズでオークションコンテンツのディレクションを担当する。その後、Mobageでゲームコーナーなどのディレクションを担当し、2008年ビッダーズでショッピングコーナーのディレクションを担当。2011年、スマートフォン対応に向けたメディアプロジェクトにおいてプロジェクトマネージャに。現在、ショッピング統括部企画編集グループにてグループリーダーを担当している。
