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

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

【第3回】スマートフォンならではのデザインとポータルとしての工夫

前回までに、スマートフォン向けコンテンツとしてのユーザビリティの検証やフィーチャーフォンユーザーを意識したスマートフォン向けUIデザインの工夫などに関して紹介してきた。
最終回となる今回は、スマートフォンならではのUIデザインとポータルサイトとしての工夫について紹介したい。

アイコンデザインのポイント

【1】ポータルサイトとして展開するMobageでは多数のアイコンが必要。それぞれに直感的に認識できるデザインが重要となる。

第1回目に紹介したアイトラッキング調査結果によって、スマートフォンユーザーはより直感的に画面上のオブジェクトを認識して操作していることがわかっている。文字による説明よりも、アイコンやボタンなどのデザインによってタップを誘起させる必要があるということだ。
したがって、スマートフォン向けのUIデザインにおいてはアイコンなどのサインイメージのデザインはより重要であり、特にMobageではアイコンの種類が多いこともあり、以下のようなポイントを重視している。

  1. 多くの人に認知されているデザイン
  2. 基本オブジェクト+動作

アイコンは、それ自体が何であるかを直感的に認識できることが重要。デザイン重視による新しいデザインを取り入れるより、すでに多くの人に認知されているデザインを行うことが重要である【1】。“見たことのない”デザインは行わない。

また、基本的なオブジェクトデザインをひとつ決めて、バリエーションは処理や動作をイメージさせるマークを加えることで、統一的なデザインを心がけることも重要。
たとえば、メールであれば、基本的なメールアイコンをデザインした後、受信や送信といった操作内容をマーク化してデザインに加えることで、より直感的な操作を可能としている。

ポータルサイトとしてのデザイン

【2】アバターの着せ替えメニュー用アイコンには、ユニセックスを意識して「Tシャツ」をモチーフとしている。

SNSサイトとして展開しているMobage。さまざまなジャンルのゲームを楽しむことができるポータルサイトとして、ターゲットユーザーの属性は幅広いものとなる。したがって、ベースデザインは特定のユーザー属性に偏ることなく、幅広く対応する必要がある。
まずは年齢差を感じさせないこと。そして、性差を感じさせないユニセックスなデザインが要求される。
結果的にベースカラーに関しては、青や赤など特定のユーザー属性に偏りがちな色ではなく、汎用性の高い「緑」を選択している。
また、ユニセックスを意識したのは、前述しているアイコンデザイン。アバターの着せ替えメニューに利用するアイコンとして、さまざまなアイデアを検討したが、最終的にはユニセックスを強く意識した「Tシャツ」を採用している【2】。

よりベタなデザインでタップモチベーションをアップ

連載第1回目で紹介したように、アイトラッキング調査によってMobageユーザーがスマートフォンでどのように操作するかを検証した結果として、文字はほとんど読まれず、スワイプによるスクロールという操作の中でより直感的に目的のコンテンツへの移動ボタンをタップしていることを紹介した。
そして、ファーストビューがそれほど重視されない中で、以下にタップさせるかを考えた結果、デザイン性重視ではなく、「無料」というワードを使ったり、あえて“タップできるボタン”らしいデザインを加えることでタップモチベーションを引き出す工夫が必要だということも解説した。
直感的な操作を支援するためには、デザイン性を犠牲にしてまでも“派手”なデザイン、ベタに感じられるデザインを意識しることが重要。
具体的には、全体がタップ領域であったとしても、その中にあえてボタンを配置したり、過度なくらいにハイコントラストなカラーリングを行うなどがポイントである。
また、リンク領域のデザインには矢印を加えるといった統一的なデザインレギュレーションを策定することも重要であろう。

まとめ

  • 【3】

    【3】

  • 【3】

    【4】グローバルメニュー画面にあえて人気コンテンツへの直リンクアイコンを設置。

最後にスマートフォン向けMobageで行っているほかの施策を紹介しておく。
SNSサイトとしてのMobageでは、ユーザーごとにマイページを利用することができる。マイページでは、昨今のソーシャル連携を意識して他ユーザーの動向をタイムライン形式で表示するようにしている【3】。

また、サイトの主要機能への導線を配置するグローバルメニュー画面も用意しているが、リニューアル後はこの画面に人気コンテンツへ直リンクするアイコンを配置している【4】。
リニューアルの大きな目的のひとつにタップ率などの数値向上があった。グローバルメニューへの直リンク設置は、現状としてはタップ数が意外なほどに高いものとなっている。つまり、メニュー機能としての整合性には問題があるかもしれないが、ユーザーにとってはそれほど問題ではなく、むしろ利便性が高いと考えることができる。
移行期として考えれば、スマートフォンでの操作性など、ユーザーにとっての利便性はまだまだ調査・評価が必要であろう。今後も、さまざまな検証を行い、よりユーザビリティを向上したUIデザインに取り組んでいきたいと考える。

【著者紹介】

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

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

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

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

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