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

03 スマートフォン向けSNSサイトのデザインノウハウ

【第2回】スマートフォン向けSNSサイトのUIについて考える

前回はリニューアルに際して行ったアイトラッキング調査などの検証作業を通じて、UIの問題点の把握と対応策について解説した。今回は、さらに検証結果を踏まえて考えたスマートフォン向けUIデザインへの基本的な取り組みについて紹介しよう。

スマートフォン向けMobageの基本レギュレーション

【1】Android(GALAXY S2:解像度800×480ピクセル)とiPhone 4S(右)での画面表示。機種によりディスプレイ輝度に違いがあることに注意してデザインする必要がある。

リニューアル時のUIデザインの調整の前に、スマートフォン向けMobageにおけるレギュレーションなどについて簡単に触れておこう。
まず、画面デザインにあたってはiPhoneでの表示状態を基本としている。iPhone 4Sの画面解像度は960×640ピクセル。これに対して、Android搭載のスマートフォンでは解像度は多様であるが、おおよそ0.75倍あたりを目安として考えている。
また、スマートフォンの場合は解像度にも増して、ディスプレイ輝度の違いが気になるところ。機種によって発色が変わるため、さまざまな実機で視認性を確認するなど注意が必要である【1】。
ただし、コンテンツ自体はメンテナンス性も考慮してワンソースで対応。HTML自体はリキッドでコーディングするが、画像ファイルは実サイズとしてピクセル指定でコーディングを行っている。
システムフォントによる表示を基本として、フォントサイズは最小7ピクセル、基本12ピクセルとしている。

フィーチャーフォンユーザーならではの特性

【2】ゲームリスト画面のデザイン。リニューアル前(左)は正方形アイコンをfloatにより横並びで表示。リニューアル後は、横幅いっぱいに使ったリスト表示に変更している。

Mobageは、もともとフィーチャーフォンで展開してきたサービス。2011年にはスマートフォンでのサービス提供を開始したが、ユーザーの多くはまったく新しいユーザーではなく、フィーチャーフォンからスマートフォンへ移行したユーザーが多くいるのである。
スマートフォン向けサービスを提供するにあたって、当初、制作者側はいかにもスマートフォンらしいデザインという始点でUIを設計していた。しかしその結果、フィーチャーフォンよりもタップ率などが下がる傾向が見受けられたのである。
代表的な事例として、ゲームリストのデザインを紹介しよう【2】。

リニューアル以前は、スマートフォンらしいデザインとして正方形のサムネイルボタンをfloatによって横並びに表示していた。これは、ファーストビューで表示するゲーム数を増やすことも目的としていた。しかし、結果的にこの表示方式ではフィーチャーフォンに比較してタップ率が低迷してしまい、ゲームタイトルによってタップ率のバラつきが激しかったのである。
要因としては、目線がバラつくことでユーザーの目に留まらないゲームができてしまったこと。また、サムネイル画像をメインとしているため、詳細内容がなくなり、結果的に全体的なタップ率が落ちてしまったのである。
そこでリニューアルにおいては、floatによる横並びをやめて、横幅をいっぱいに使った一般的なリスト表示を採用。サムネイルと同時にゲーム説明を掲載することができるようになり、ユーザーにとって未知のゲームでもその内容が理解でき、結果的にタップ率を上げることに成功している。
これは、フィーチャーフォンユーザーでも慣れている「上下」の視線の動きに対応したことも大きな要因だと考えている。現在、携帯電話はフィーチャーフォンからスマートフォンへの移行期と考えれば、今後しばらくはフィーチャーフォンユーザーの操作性を意識したUIデザインを十分に考える必要があるだろう。

コラム スマートフォン画面デザインに有効なLiveView

当然のごとく、スマートフォン向けMobageの画面デザインも、実際の開発にはMacなどのPCを利用しているが、その画面イメージはPCとスマートフォンで大きく印象が異なる。そのため、デザイン作業過程における、スマートフォン実機イメージの確認が重要である。そこでDeNAでは、Mac(Photoshopなど)で制作する画面デザインは、LiveViewを利用してiPhoneでの表示状態をリアルタイムで確認するようにしている。
LiveViewは、MacOSにインストールするソフトおよびiPhoneアプリで構成され、Macの画面イメージをiPhoneアプリに転送して、実際の表示イメージをその場で確認することが可能。デザイン確認効率が飛躍的に向上する。

■LiveView for iPhone & iPad
https://www.zambetti.com/projects/liveview/

次回は、スマートフォン向けのUIデザインに関して、いくつかの具体的な取り組みを紹介しよう。

【著者紹介】

鷲野 里奈(UIデザイナー)

2011年に中途でUIデザイナーとして入社し、SP版Mobageリニューアルのアートディレクション、メインデザイン、導線設計を担当。最近は新規事業のデザインや企画、導線設計にも携わる。

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

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

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