こんにちは、DeNAの手塚です。
本日は一周年を迎えたUI Crunchの開催レポートをお届けします!


過去のUI Crunchについてはこちら

今回はUI Crunch Girls’ Night / 女子の心をつかむUIデザインのコツということで、女性デザイナー・ディレクター4名にスピーチしていただきました。


ui

■女子にうけるUIはどうやって作られるか?:スピカ 正木友佳さん

一人目の登壇者はお気に入りのネイルが見つかる「ネイルブック」のディレクター 正木友佳さん。
ネイルブックは現在100万枚の写真が投稿されており、有料広告を行っていない状態で120万ダウンロードを突破しているそうです。そんな、とても多くのユーザーに利用されているネイルブックですが、どのような方法でUIデザインを決めているのかはとても気になるところ。
正木さんいわく、3つのステップでUIをデザインしているそうです。


1-2

1. ペーパープロトタイピングで画面設計
まずは紙を使ってデザインを対象の画面を考えていくそうです。手を動かしながら良いデザイン、いまいちなデザインを取捨選択していくことで思考が整理され、かつツールを使うよりも早くできるそうです。
様々なツールがある昨今ですが、紙でデザインを検討していくのはやはり無視できない手法ですね。

2. チームでペーパープロトタイピング
続いて、チームで紙ベースのデザイン案を見ながら試行錯誤するそうです。紙はその場でダイレクトに書き込んだり、すぐ書き直しがきくのがいいですよね。

3. Prottを使用して社内ヒアリング
ネイルブックはアプリ操作のリテラシーが低い人も多いらしく、まずはProttで動くプロトタイプをつくり社内でヒアリング・テストを行っているそうです。
実際のターゲットユーザーに近い社員の方を対象にテストを行われているようでした。



また、デザイナーとディレクターといった職種間のコミュニケーションの問題が起きた際には「施策の目的と背景を共有する」「UXから考える」などの視点を紹介。
その中で「女ゴコロフレームワーク」 というキーワードについても紹介されていたので、気になった方はぜひチェックしてみてはいかがでしょう。


会場では入会画面で何ができるかを訴求する改修を行ったところ、入会率が+8%改善、数週間継続率も数パーセント改善したといった具体例も紹介されました。




■コスメ好き女子のためのビジュアルデザイン選び:Goodpatch 氏原諒子さん

2人目の登壇者はVOCE(ヴォーチェ)という創刊20年を超えるファッション誌のアプリ開発プロジェクトを経験されたGoodpatch UIデザイナーの氏原諒子さん。

「アプリのビジュアルをいかに決めるか?」というテーマについて、特にターゲットの設定やユーザーとの対話方法についてお話いただきました。



2

ヒアリングの対象者を決める みなさんはユーザーヒアリングを行う時、どのように対象者を選んでいるでしょうか。
氏原さんはそのポイントとして、ペルソナに近いユーザーをしっかり選びましょう、ということを挙げています。とはいえ、ペルソナとなる人の属性を全て網羅するのはとても難しいこと。
なので、何がターゲットの必要十分条件なのかを考え、ペルソナを作成するそうです。



ビジュアルの印象を理解する

サービスとしてどう見せたいか?アプリを利用する時にどういう感情を持って欲しいか?利用者にどういう印象をつくることになるのか?を調査していくそうです。
具体的なやり方としては、いくつかのデザインパターンに対してユーザーにポジティブ/ネガティブを投票してもらう、といった方法を取っているそうです。

これがいい!というポジティブな意見ではなく、ネガティブな票も投票してもらうのがユニークですね。ちなみに、採用したデザイン案はポジティブな票が最も多く、ネガティブな票も最も多い案を採用したそうです。判断としては、シンプルにポジティブな票が多いものにしたとのこと。



■ユーザー像を捉えてサービスを成長させよう:Goodpatch 山口真朝さん

3人目の登壇者は「ガールズちゃんねる」というサービスでUXデザイナーを担当されている山口真朝さん。
ガールズちゃんねるは女性向けの2チャンネルといっても過言でもないサービスで「UIを改善してさらにサービスを成長させたい」という依頼を受けてUIのリニューアルに着手することになったとのこと。



3

そこで山口さんがまず最初に着手したことがユーザー像をとらえるということ。
そもそもサービスをどういった層にフォーカスさせるべきかが明確になっていない、という課題認識からユーザー像をはっきりさせてどういう施策を打ち、どのKPIを見るべきなのかをクリアにすることが大事だと考えられたそうです。

性別や属性という属性ではなく行動パターンや性格でユーザーを分類する
ユーザー像をとらえる方法として山口さんが採用したのが年齢や性別ではなく、行動パターンやユーザーの性格をベースにユーザーを分類するという方法です。
年齢性別でユーザーを分類すると特徴が平均化してしまい、せっかくの特徴が見えづらくなってしまうと言います。
実際の分類作業では、Googleアナリティクスでの行動フロー分析やアプリマーケットでのユーザーレビューを参考して以下の3つのカテゴリにユーザーを分類したそうです。

・トレンド検索女子
・ロム専女子
・おしゃべり女子

こういった分類を行うことで自社のサービスにどのユーザーカテゴリが優先順位が高いのかクリアになり、施策の優先度付けやターゲットごとのKPIの設定ができるようになったとのこと。

その結果、トレンド女子に対して「過去のトピックページの長さを短くする」といった施策でそのページの直帰率が11.37%改善されるといった成功事例が出たと言います。とても示唆深いお話でした。



■月間2,000万ユーザーが訪れるMERYのUIデザイン:Goodpatch 田中翔子さん

この日最後に登壇したのはMERYアプリのUIデザインを担当している田中翔子さん。
2014年の10月頃にMERYアプリのデザインを担当することになり、その時すでに大きく成長したMERY のUIをデザインするということで何を大事にしてデザインを進めていったのか気になるところ。このあたりのトピックについてお話いただきました。



4-2

女子に媚びないデザイン
田中さんがデザインを行っていく上で大事にした考えが以外にも「女子に媚びない」ということだったそう。ここでいう女子とはピンク、デコデコ、キラキラ、パステルを好むいわゆる「女子像」。
その理由について田中さんはこのように語ります。


これからMERYというサービスが成長していく方向性を考えると、これまでメインターゲットとなっていた女子像から離れ、より年代が上の女性にもリーチしていく必要があった。


また、MERYというサービスはやはりコンテンツが主役。
そのため、主役であるコンテンツを邪魔しないデザインにするために相当や装飾やピンク等の色をつける部分の面積を画面上から削ったそうです。
例えばヘッダーのピンク色を全て白にし、ピンクはテキストに使用するのみなど、徹底して色のコントロールをしたということでした。

その他、ユーザーが自分の好きな色を選べる機能については、これまで何百色も色を自由に選んで表示をしていたそうですが、それもピンクとグレーの2色のみしか使えないようにするなど思い切った変更も行われたということでした。



長い爪を考慮してデザインする
また、女性は付爪などで爪が長く、通常想定する操作が行えない、というのはスマホあるあるですが、そういった点も考慮してスワイプという操作を使用せず、ボタンを採用する箇所をつくるなど、具体的にデザインに落とし込んでいったそうです。



11148505_837020299730240_9085002642755256161_n



というわけで、4名の女性デザイナー・ディレクターが登壇したUI Crunchですが、今回も90名定員のところ300名を超えるご応募をいただき、ご応募いただいた方本当にありがとうございました。
また、ご参加いただけなかった方はせっかくご応募いただいたにもかかわらず申し訳ありませんでした。


また次回の開催をどうぞお楽しみに!