はじめまして。
センスフルでデザインを担当しております東恩納(ヒガシオンナ)です。

センスフルとは、ユーザーが「お題」に画像を投稿し合い、
センスフル(いいね!)やコメントでわいわい盛り上がるコミュニティです。

今回は、コンセプトが大幅に変わった場合の
デザインをどういうプロセスでリニューアルしていったか、
センスフルの場合のケースについてお話したいと思います。

ダカイゼンとは?

サイバーエージェントでは、月に2度サービスの見直しと、抜本的な改善を進めています。
それが「ダカイゼン」(打開+改善)と呼ば れている運用制度です。

(渋谷ではたらく社長のアメブロ)
http://ameblo.jp/shibuya/entry-11347403598.html

サービスの成長を遮る問題が生じていたら、
発見し速やかに大なり小なりの打開策を投じて、サービスを向上させ続ける。
それがダカイゼンです。

まずはコンセプトを再定義。

まず大前提として、

デザインは「コンセプト」を体現するものであること。
それをいかにユーザーにとって使いやすく、分かりやすく、
そして魅力的にみせるか。
そこがデザイナーにとっての重要な役割です。


「センスフル」は、ダカイゼンにてチーム全体で話し合った結果、
「おもしろ画像バトルで楽しむメディア」から、
「スマホの画像をお題に投稿するコミュニティ」に
なる事が決まりました。
サービスの基本ループとなる「お題に画像を投稿して、他の人からのリアクションを楽しむ」という内容は変わりません。

「バトルで楽しむ」おもしろ画像メディアから、
「お題に投稿して楽しむ」なんでも画像コミュニティへ


上記のように、センスフルは軸となるコンセプトががらっと変わりました。
それに伴ってデザインや世界観を改変していく必要があります。


ロゴのリニューアル

今回のダカイゼンでは、軸となる方向性を変えたため、サービスの「顔」であるロゴからリニューアルすることになりました。


●おもしろ画像「センスフル」の場合

キーワード:センスが光る、かっこつけてるけどダサイ感じ、ちょっとイタイ感じ、中2病っぽいテイスト、面白そう

★具体的な落とし込み方法:
おもしろ画像の時は、センス を競い合うサイトだったため、「センスが光る」イメージで「ン」の部分をキラリと光らせる感じでつくりました。なるべくエッジがたった感じで、「おもしろい画像がありそう」と思ってもらえるように、あえてスタイリッシュすぎず、でもダサすぎず、というぎりぎりのラインを目指しました。

 

● なんでも画像「センスフル」の場合

キーワード:なんでもある、色々なジャンル(カラー)の人やコンテンツ、ごちゃまぜ、にぎわっている

★具体的な落とし込み方法:
沢山色を使い、様々なカラーの人やコンテンツがある感じを出していく。好きなジャンルを自分で選んで投稿する「なんでも画像コミュニティ」になったことで、色々なジャンル(カラー)、人がわいわい賑わうイメージにしました。
おもしろ画像ではなく、日常的でパーソナルな写真で楽しめるような、
コミュニティ感を出すようにしました。

ロゴは、サービス全体の世界観の起点となるものなので、
決めるまでには数十個は最低でも案を出して、
チーム全体でミーティングを繰り返し、決定していきます。


メインユーザーを想定してトンマナを決める。

コンセプト設定のあとは、それを最大限に引き出す世界観を決めて行きます。

2ちゃんやニコ動画好きな男性中心


から・・・・


20代の女性中心とした オールリーチ


に変更することをチームで話し合い決定。

それを汲み取り、
力強く、男性的な色使いから、女性中心~中性的なポップで明るい色使いに変えて行くことにしました。
あくまでも中心は女性だけど、男性が使っていても全くおかしくない雰囲気を出すことが重要です。

※カラーパレットの比較


世界観をターゲットユーザー層にあわせる

ゲーム等と違いコミュニティはキャラ等がいないので、
世界観をつくるのは、ロゴやUIパーツになってきます。

世界観を作る主なデザイン&UIパーツ
①サービスロゴ
②見出し
③メインカラー、サブカラー
④メインフォント、サブフォント選定
⑤各種アイコン

一回の「ダカイゼン」で全てリニューアルしきるのは
時間の制約等あり、なかなか大変なので
何回かで分けてやって行きます。

※アイコンデザインの比較


※ヘッダの比較


※見出しの比較


※ボタンのリニューアル

コミュニティサービスになったことで、
ユーザーにたくさん投稿してもらう事がさらに重要になってきます。
そこで投稿ボタンも全体的にリニューアルしました。

つい押したくなるような、そして押した時に楽しい
ポップなボタンにリニューアル。
しかけとして、タップした瞬間に凹んだ画像に切り替わる処理を入れています。

デザインリニューアルのまとめ

ダカイゼン前のデザインはこのような感じ。


ダカイゼン後のデザインはこのような感じ。


「センスフル」ダカイゼンでのデザインリニューアルは以上です。
サービスの抜本的な変更があった場合、リニューアルするにしても何から手をつけていいのか分からないときなど、クリエイターの方に少しでも参考になれば幸いです!!

最後まで読んでくださり、ありがとうございます。
今まで改善を繰り返しているセンスフルですが、
今後更に進化・発展する予定なので、皆様ご期待ください!!
引き続きどうぞよろしくお願いいたします。

【なんでも画像コミュニティ センスフル】


上のQRコードを読み取るか、下記リンクよりアクセスしてください♪
【スマートフォン】【PC】
http://senseful.jp/