UI改善に新機能追加。日々スクラップ＆ビルドを繰り返しているサービス開発現場では、一つのデザインを創り上げるまでに数十を超えるデザイン案を作成することも少なくありません。本連載では"お蔵入りUIデザイン"と題して、現在のデザインに至るまでにお蔵入りとなったデザインにフィーチャーし、「なぜお蔵入りになってしまったのか？」をオクラくんと共に担当デザイナーがご紹介していきます。
 

オクラくん
ネバにちは！
今回はAmebaが6月にリリースした、知識や特技のスキルシェアリングサービス『REQU（リキュー）』の開発現場にやってきたよ。どんなお蔵入りデザインが見られるネバかな〜。
それでは早速デザイナーさんを呼んでみよう！　デザイナーさーん！

戸塚 真由子（以下、戸塚）
初めまして、『REQU[リキュー]（以下、REQU）』デザイナーの戸塚です。本日はよろしくお願いします〜！

オクラくん
初めまして、お蔵入りのデザインを存分に堪能できると聞いてワクワク、いや、ネバネバしながらやってきたオクラくんだよ！

戸塚
今回は、 6月にリリースした「あなただけの、個性を価値に」をコンセプトにしたスキルシェアリングサービス『REQU』についてご紹介したいと思います。

オクラくん
『REQU』はbyAmebaと書いてあるけど、Amebaとはまた違った雰囲気ネバ。

戸塚
その通りです！　もともとはAmebaの一機能として、ブロガーからモノを買えるカート機能をつけようという企画が立ち上がり、少人数で開発がスタートしたプロジェクトでした。しかし、開発していく中でユーザーヒアリングなどを行なった結果、一機能から一事業として拡大していくことになり、『REQU』というスキルシェアリングの新サービスとしてリリースしました。

従来のAmebaの丸みや温かみのあるトーンを残しながらも、白をベースに余白を意識したゆとりあるデザインになっています。Amebaらしさと洗練された雰囲気が共存した新しいトーン&マナーが生まれました。

オクラくん
確かに、Amebaみたいなわかりやすい雰囲気がありながら、ちょっとオシャレな感じがするネバ。新規事業はたくさんお蔵入りがありそうネバ！　何がお蔵入りしたネバ？　早く教えるネバ！

2つのサービスをつなぐ埋め込みモジュールUI

戸塚
私は事業拡大のタイミングでAmebaブログから『REQU』に異動して、Amebaブログと『REQU』をつなぐ埋め込みモジュールUIを担当しました。今回はそのお蔵入り事例をご紹介します。

オクラくん
2つのサービスをつなぐUIネバか〜。ジレンマによる苦しいお蔵入りUIが出てきそうな予感で興奮するネバ。

戸塚
これが当初のデザインです。『REQU』で売っている商品をAmebaブログに貼ることができるモジュールのUIです。

オクラくん
これはAmebaブログでよく見る広告ネバか？

戸塚
いいえ。実はこれがその埋め込みモジュールUIだったんです。

オクラくん
え！
僕には完全に広告に見えるネバ......。

戸塚
やはりそうですか……。
リリース前のユーザーテストでほとんどの人がこのUIを「広告」と勘違いしていたことが発覚しました。Amebaブログはたくさんのユーザーを抱えているので、このUIがREQUを世間に広めていくための一歩になる重要な部分でした。そのため、広告とは別の見え方に急遽ブラッシュアップすることになりました。

Amebaブログは広告収益を大切にしているサービスであることもあり、広告のUIを工夫していることが逆にREQUのUIに影響してしまいました。

オクラくん
なるほど、REQUもスキルを売るサービスだし、Amebaブログの広告枠と差別化を図るのが難しいネバね。

「あなただけの、個性を価値に」を伝えるUIとは

戸塚
そこで、より埋め込みモジュールが「自分のコンテンツ」に見えるようなUIにできないかを考えて改善案を出しました。

これが新しいUIです。

オクラくん
おお！？
表示されている内容はあまり変わらないのに、広告感が軽減された気がするネバ！　タップして僕も7日間で結婚相手を探したいネバ！！！　これはコンバージョンするネバ！

戸塚

主に下記3点を意識したデザインに変更しました。その結果、Amebaブログに元々ある広告枠と差別化ができ、より「自分のコンテンツ」に見えるようになりました。

・商品のタイトルや写真をしっかり見せて、ユーザーが伝えたいことを絞る
・ユーザー名を出すことで、本人のコンテンツであることを強調する
・広告に見えやすい値段やレビューといった要素の表示を弱める

再度このデザインでユーザーテストをした結果、多くのユーザーが「セラー本人のコンテンツ」と認識して違和感なくタップするようになりました。リリース後もAmebaからREQUへの主要な流入経路の一つとして機能しています。

ちゃんと結果にも結びついていて、ブラッシュアップして大正解ネバ。

戸塚
『REQU』もAmebaも素敵なサービスなので、両サービスを繋ぐ重要なUIが上手く機能して、私も嬉しいです！
スキルシェアリングサービスは新しい概念なので難しいところもたくさんありますが、これからもユーザーが自然にスキルシェアリングを使えるように試行錯誤していきたいです。

オクラくん
ところで僕もスキルシェアリングサービスでセラーになってみたいネバ。どうやったらセラーになれるネバか？

戸塚
『REQU』は「あなたの個性」を必要としている人に届けてあげるサービスです。絵が得意な人なら、イラストを書いてあげる。恋愛が得意なら、悩んでいる人にアドバイスをしてあげる。つまりオクラくんが得意なものを必要な人に教えてあげたり、届けてあげたりすればOKですよ！　オクラくんが得意なことはなんですか？

オクラくん
僕の個性と特技かぁ。じゃあ辛口お悩み相談所を始めるネバ！　僕のストレス発散にもなるし……1回10万円ネバァ！　これで一儲けネバァァァ！！

戸塚
オクラくん、そんな押し付けがましい商品ではユーザーには喜ばれないですよ。オクラくんは数多くのお蔵入りUIを見てきているので、そこで溜まった知見を活かして「オクラくんが、あなたのサービスのUI改善案を提案します！」という商品を売ってみるのはどうでしょう？

オクラくん
ネッバァァァアアアアアアアアア！！！！
それがいいネバ！ 僕のスキルを販売して、喜んでもらいたいネバ！
こりゃあ一本取られた☆

戸塚
というわけでスキルシェアリングサービス『REQU』をどうぞよろしくお願いします！

【連載 第一回】そのデザイン過剰です！　FRESH！新機能『ライブファンディング』のお蔵入りUIデザイン
【連載 第二回】そのデザインやりなおし！ 360°自由だからこそ難しい『AbemaTV VR』のお蔵入りUIデザイン
【連載 第三回】タップル誕生「おでかけ機能」のワクワクする仕組み
【連載 第四回】iOSとAndroidではどう違うの？ Androidの特性を活かしたナビ設計とは……
 

【企業プロフィール】 株式会社サイバーエージェント
インターネットというフィールドで「Ameba事業」「インターネット広告事業」「スマートフォンゲーム事業」「その他メディア事業」「投資育成事業」の5つの事業を展開。インターネット総合サービス企業として、企業・インターネットユーザーに対し有益なサービスを提供している。

●株式会社サイバーエージェント：https://www.cyberagent.co.jp/

『CyberAgent Developers Blog』

https://developers.cyberagent.co.jp/blog/