次世代の才能発掘などを目的に、総額約150万円の豪華賞品が当たるアプリアワードを行う「TapApp(タップ＊アップ)プロジェクト」と連動した本連載。第5回では、ターゲットが異なる2つのソーシャルアプリケーションにおけるユーザー目線のUIデザインの秘訣について、サイバーエージェント(以下、CA)のデザイナー・ディレクターに聞いた。

非常に雑多なスマートフォン利用環境への配慮が必要

Webサービスの開発現場におけるデザイナーの役割のなかで、もっとも大きなもののひとつが、UIという表現を通じてサービスの機能をユーザーに伝えること。このUIの設計は、当然のことながらユーザーの特性によって、取るべき表現か手法が変わってくる。

ユーザーの意識が画面や手元のマウスなどに集中しているPC向けのWebサービスと異なり、スマートフォン向けのサービスは、電車通勤中、就寝前のベッドの上など、さまざまなシーンで利用される。そのため、ユーザーは必ずしも端末に表示される内容だけに注意を払っているわけではない。単に利便性を高めるだけではなく、ユーザーの嗜好やライフスタイルに配慮した使いやすさ、心地よさを提供しないと、すぐにユーザーの関心は画面から離れてしまう。継続してサービスを利用してもらうためには、UIデザインにおいてPC向けのコンテンツ以上に「ユーザー本位」となっていることが求められる。

PCと比較すると、スマートフォンの利用環境は非常に多様。快適なユーザー体験を確保できないと、他サイト、他サービスに移動してしまうどころか、画面自体から興味を失ってしまうことになりかねない

例えば、ほとんどのソーシャルアプリケーションでは、投稿に対してユーザー間でコメントなどのレスポンスを返す機能や、複数のユーザーが集まるコミュニティ機能などが用意されている。これら一つひとつはありふれたもので、機能として実現するのは容易だ。しかし、ユーザー間のコミュニケーションを活性化し、シーンを問わず何度もサービスにアクセスしてほしいと考えるならば、ボタンの位置や形状に至るまでサービスやユーザーの特性に合わせた工夫が求められる。

ソーシャルサービスにつきものの他ユーザーへのレスポンスボタンも、ターゲットユーザー、サービスの内容によっては文言、モーションから再考する必要がある

それでは、CAでソーシャルアプリケーションの開発に携わるネットビジネス総合事業本部コミュニティDiv.所属のデザイナー、ディレクターに、ターゲットユーザーへの配慮がUIのどこに表現されているかを解説してもらおう。

Session A　ビジュアルデザインによるサービス利用スタイルの訴求

下山航平　クリエイティブディレクターのほか、マネージャーとして複数のアプリにおけるクオリティチェックも行う。



ロゴや起動画面などのビジュアル要素を通じてサービスの特徴をユーザーに伝える方法を、写真共有ソーシャルサービス「友だち年鑑」を例に解説する。「友だち年鑑」は、スマートフォンで撮影した友人の写真を人物ごとにアルバム形式で保存・公開できるサービス。当初20代～30代のOLを想定して開発したが、顔写真を投稿するという特性を考え、写真の公開に抵抗がより少ないと考えられる10代後半～20代前半の学生にターゲットを変更。それに伴い、ビジュアルデザインも再考した。

最初のロゴはシンプルなデザインだったが、変更後は可愛らしさ、楽しさを表現。起動画面では、人物写真にフォーカスしたサービスであることを強調するために、顔が大きく写っている写真を多く配置。ロゴ、起動画面とも、ターゲット変更などの仕様変更があれば、手間がかかっても、ビジュアルデザインの要素から再検討すべきだ。(下山航平)

ユーザーに投稿してほしい写真を起動画面に「手本」として表示。当初は仕事中の写真なども一部含まれたが、変更後はオフのシーンのみをチョイス。「プリクラ帳を模したソーシャルサービス」を暗喩するイラストも追加した

メインUIに見られる赤やシアンの差し色も、ターゲットユーザー変更後に追加した楽しさの演出の一環。ナビゲーションバーとタブバーを暗転させたのは、色数を増やしたコンテンツに負けないよう配慮したため

Session B　色や言葉のチョイスによる世界観の演出

見上楓　独学でデザインを学び、広告からソーシャルゲームまで多数制作。「GIRL'S TALK」のメインデザイナーを担当。



コミュニティサービス「GIRL'S TALK」を例に、演出の工夫によって投稿時の心理的ハードルを下げつつ、外出中にも気軽にアクセスできるデザインを実現した例について解説。「GIRL'S TALK」は、誰かに話したいけど話しにくい秘密を打ち明けられる、女性専用の匿名コミュニティサービス。恋愛やカラダの悩みなど、心の底にある本音を吐露してほしいとの狙いから、投稿ボタンの文言を「投稿する」ではなく、「うちあける」とした。汎用的な文言でユーザーに早く理解させるのがUI設計のセオリーだが、世界観の演出と反する場合は、こういった判断も重要。また、本音トークをメインとするため、女性向けサービスにありがちな装飾要素はあえて省き、『言葉』そのものを際立たせた。入力欄も画面いっぱいに確保し、ディープな投稿を促進している。トップ画面の背景色は黒にして夜の街のような雰囲気を演出した一方、ユーザーが長く滞在する投稿閲覧画面は居心地の良さにこだわり、目になじむ肌に近い色に設定した。(見上楓)

キラキラとした装飾は省き、投稿内容に集中できるデザイン。「うちあける」「共感!」といった言葉のチョイスにも工夫

ユーザーのテンションを上げるため、黒を背景色にしたメニュー画面で「ちょっと悪いことをしているような雰囲気」を演出

次回は今回に続き、他のソーシャルアプリケーションのUIデザインの秘訣についても解説する予定だ。

※サービス開発運用状況によって、仕様に変更が入る可能性がありますのでご了承ください。
※当記事は、株式会社マイナビ刊行のWeb Designing2012年12月号掲載の記事を加筆、修正したものです。

スマホ向けアプリコンテスト｢TapApp Awards｣開催中!!


スマホアプリ開発技術の啓蒙と次世代の才能発掘を目的とした「TapApp(タップ＊アップ)」プロジェクトでは、スマホ向けアプリアワードを開催中です。詳細は、下記Web ページに記載していますので、ご確認の上、どしどしご応募ください。

  • 【募集部門】フリー部門◎「繋がる」をキーワードとしたアプリケーションをあなたのアイデアで創ってください。
  • 【募集部門】テーマ部門◎ 下記のいずれかを選び、それをテーマとしたアプリケーションをあなたのアイデアで創ってください。［Clock(時計)］ ［カレンダー／スケジューラー］［毎日3 分遊びたくなるゲーム］ ［リズムで遊ぶアプリケーション］［温かみを感じるアプリケーション］ ［Photo Library(写真共有)］
  • 【開催スケジュール】募集期間◎～2013年1月15日(火)、結果発表◎ 2013年3月 中旬
  • 【賞金/ 副賞】「上海クリエイティブオフィスツアー」ほか、総額約150万円

詳細はTapApp(タップ＊アップ)プロジェクト公式サイトをご覧ください。※内容が変更になる場合があります。