CIY初回ローンチで行ったUI／UXの代表的な施策をご紹介！

こんにちは、CIYサービス開発チームの川崎です。

ローンチしてから現在までに44万人の方に利用していただいているCIY。

これほど多くの方に利用していただいているのは、私たちがローンチ後もグロースハックを繰り返し、常にユーザー体験を向上させる施策を繰り返してきたことが大きな要因の一つなのではないかと信じています。

今回はそんなCIYが、初回ローンチ時点で行ったユーザー体験向上のための代表的な施策を、いくつかご紹介したいと思います！

◆はじめに：UI／UXについての心得

UI／UXの領域では、「ユーザー中心設計(UCD(User Centerd Design)であること」が大前提だとされています。

Wikipedeiaより引用：
ユーザー中心設計は、デザインの各段階でエンドユーザーのインタフェースや文書に関するニーズ・要求・制限などに多大な注意を払って設計を行うこと、またはそのようなデザイン哲学。
他のデザイン哲学との大きな違いは、ユーザー中心設計ではユーザーがシステムや機能に慣れることを強いるのではなく、人々が欲しいと思っていることが何であるかを中心としてインタフェースを最適化しようとするという点にある。

CIY開発チームでも、
「いかにユーザーにストレスを与えず、楽しんで利用してくれるか」
については細心の注意を払って開発にあたりました。

◆１：「なにこれ、面白そう！」精密な性格診断をWEBで行う際のストレスを排除する「RPG」の世界観

CIYは、様々な学術的根拠をもって、精密な性格診断が行えるサービスなのですが、生年月日入力→86問の設問に回答することが必要なため、このストレスをいかにモチベーションに変えるかが課題でした。

この工程を楽しんでもらうために、ユーザーごとにレトロRPGを想像させる8bitのキャラクターが生成され、性格に合った武具が装備されて成長していくゲーミフィケーションを取り込むことを考えました。

メインターゲットである10〜20代の学生が、スマートフォンで様々なゲームを無料で行えるようになった現在。
この「ゲームキャラを生成できるWEBサービス」は体験としてとても価値を感じてもらえるだろうと考え、キャラクター設計にあたりました。

診断ごとに「属性」「職業」「武器」「防具」「アクセサリー」が決定し、それぞれが非常にファンタジーあふれる名前やビジュアルになっており、自分を転写したキャラクターがRPGの世界に現れたかのような体験を狙いとしました。

◆２：「トーテムがこの後こうなる！？」トーテムの成長を常に想像させる導線設計

サイトに流入してから最終診断結果が出るまでの画面遷移で、いかにモチベーションを保ってもらえるか？という点にはとても気を遣いました。

まず、トップでは、リッチなアニメーションと共にトーテムが生成→成長していく様子を表現しています。

ここで、自分だけのトーテムが生成し、あなただけのオリジナルトーテムとして成長していることを明示しています。

「オリジナルトーテムを生成」を表現したアニメーション

生年月日診断を終えた後に、基本トーテムが生成されます。
このページでは、トーテムの左右の性質や、装備には【???】がついて、
まだ先があることを示しています。

「まだ先がある」ことを思わせるUI

さらに、そのページ下に、トーテムをパワーアップさせられることがひと目でわかるセクションを設置し、これから多くの設問に答えていくことへのモチベーションを高めています。

「トーテムをパワーアップ！」セクション

◆３：「答えるのが疲れない！気持ちいい！」回答ページの設問インターフェイス

回答ページでは、86もの性格に関する設問を答えないと結果が見られないため、いかにストレスなく操作してもらえるかがミッションでした。
そこで、この「3Dカード型UI」を設計しました。

3D型カードUI

このUIでは、回答ボタンを押すと、回答カードが奥に移動し、新たなカードが最前面に現れる動きで、非常に小気味のよいアニメーションになっています。

ユーザーはこれにより、スクロールが必要なく、回答するボタン群がずっと画面の定位置にあるため、疲れずにテンポよく回答をすることが可能になっています。
また、１つ前の設問に戻る際の動きもかなりこだわりました。

◆４：「いったん中断したい…」途中でやめても、再開ボタンが表示され再開可能に

すべての診断は10分程度で終わるように設計されていますが、回答途中で中断してしまったユーザーにも配慮しました。

ブラウザのタブを一度閉じてしまっても、ブラウザに回答結果をデータとして一定期間、保持させております。

そのデータが存在する場合、トップページに「再開する」ボタンが表示されるので、ユーザーは中断した回答から再開することが可能になっています。

途中でやめると、トップページに再開ボタンが出現

◆５：「結果のすべてをシェアしたくない…」シェアページを２通り用意

86問の設問をすべて回答すると、非常に精密な回答が表示されます。
「トーテムをシェアしたいが、ここまで詳しい結果をみんなに見られたくない！」というユーザーも気軽にシェアができるように、「A診断のみをシェアする」というボタンを設置していました。

A診断のみの診断結果を表示させるボタン

◆６：「トーテムを保存したい！」全診断を読むともらえるトーテム画像

トーテムが生成されるゲーミフィケーションの楽しさもありますが、精密な性格診断結果にも目を通してほしいという想いから、一つクエストを設けました。

すべての回答結果を開いたら、トーテムをダウンロードできる、という機能です。

診断結果を読んでもらうことによって、SNSシェアのコメントによる、性格診断結果に対するフィードバック精度も高まり、ユーザーのフォロワーに対しても「精密な性格診断」というブランディング効果が期待できます。

また、ユーザーが手間をかけてトーテムを獲得することによって、よりトーテムに愛着を感じる「イケア効果」も期待しています。

◆７：「自分もやってみよう！」SNSシェアでの拡散・フォロワー利用への導線確保

CIYの診断結果では、シェアを行ってもらうように主要SNSへのシェアボタンを要所に設置しています。

このボタンを使って拡散してもらった場合、その友人が診断結果を見た際、
そのページ下部に「あなたも診断をやってみませんか？」というセクションが表示されます。

わざわざトップページにいかずとも、サービス概要を把握し、直接生年月日診断からスムーズに開始できるように設計を行いました。

◆8：すべての機能がアカウント登録なし（もちろん無料）で利用できる！

簡単な診断サービスであればログインなしで利用できるサービスも多いですが、CIYでは、診断をしたり診断結果を見るために登録やログインをする必要が一切ありません。
（個人情報を収集していません。）

純粋に診断を楽しんでもらい、たくさんの方に利用してもらいたい！という思いから、この仕様にしました！

◆さいごに

いかがでしたでしょうか？

今回ここに書いていない部分でも、ユーザーの体験を向上する施策はたくさん打っていますが、全部書いていくと膨大な量になってしまうため、ここまでにしておきます！

ローンチ後にも、それまでに間に合わなかった機能や、データ解析から改善点を見出してグロースハックするなど、数々の施策を重ねて現在に至ります。

グロースハックについては今後、少しずつ連載してく予定なので、お楽しみに！

それでは、最後まで読んでくださり、ありがとうございました！！