次䞖代の才胜発掘などを目的に、総額玄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(タップアップ)プロゞェクト公匏サむトをご芧ください。※内容が倉曎になる堎合がありたす。